fohow_wx/src/components/Btn.vue

<template>
  <div class="btn1-bg">
    <div class="name-bottom" v-if="show">
      <div class="btn-left" @click="leftclick">{{lefttitle}}</div>
      <div class="btn-right" @click="rightclick">{{righttitle}}</div>
      <div class="clear"></div>
    </div>
    <div class="name-bottom1" v-if="!show">
      <div class="btn-title" @click="titleclick">{{title}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    lefttitle: {
      type: String,
      default: '取消',
      require: true
    },
    righttitle: {
      type: String,
      default: '确认',
      require: true
    },
    title: {
      type: String,
      default: '确认',
      require: true
    },
    show: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  beforeMount () {},
  mounted () {},
  methods: {
    leftclick () {
      this.$emit('leftclick')
    },
    rightclick () {
      this.$emit('rightclick')
    },
    titleclick () {
      this.$emit('titleclick')
    }
  },
  watch: {}
}
</script>
<style lang='less' scoped>
.btn1-bg {
  .name-bottom {
    height: 1rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 0.02rem solid #ccc;
    z-index: 100;
    .btn-left {
      height: 0.6rem;
      border: 0.02rem solid #cccccc;
      font-size: 0.28rem;
      text-align: center;
      line-height: 0.6rem;
      border-radius: 0.3rem;
      float: left;
      color: #4c4c4c;
      width: 3.4rem;
      margin-top: 0.2rem;
      margin-left: 0.2rem;
    }
    .btn-right {
      height: 0.64rem;
      font-size: 0.28rem;
      text-align: center;
      line-height: 0.64rem;
      border-radius: 0.3rem;
      float: right;
      background:#28cd5e;
      color: #fff;
      width: 3.44rem;
      margin-top: 0.2rem;
      margin-right: 0.2rem;
    }
  }
  .name-bottom1 {
    height: 1rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    // border-top: 0.02rem solid #ccc;
    box-sizing: border-box;
    padding: 0.2rem 0.2rem;
    .btn-title {
      // height: 0.64rem;
      font-size: 0.28rem;
      text-align: center;
      line-height: 0.64rem;
      border-radius: 0.3rem;
      background: #28cd5e;
      color: #fff;
      width: 100%;
    }
  }
}
</style>