vue 封装button组件

迈不过友情╰ 2021-09-07 06:12 637阅读 0赞

<template>
      <div>
        <div class="login-btn cursor" :class="myClass" :style="{ opacity: opacity }" @click="debounce">
          <span :class="['s']">{ {  text }}</span>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          time: 2000,
          record: 0,
        }
      },
      computed: { 
        myClass() { 
          let arr = []
          if (this.size === 'big') { 
            arr.push('big')
          } else if (this.size === 'primary') { 
            arr.push('primary')
          } else if (this.size === 'pay') { 
            arr.push('pay')
          } else if (this.size === 'uninstall') { 
            arr.push('uninstall')
          } else { 
            arr.push('plain')
          }
          console.log('arr', arr)
          return arr
        },
      },
      props: ['text', 'size', 'opacity'],
      methods: { 
        debounce() { 
          let newTime = new Date()
          console.log('newTime.getTime()', newTime.getTime() - this.record)
          if (newTime.getTime() - this.record > this.time) { 
            this.$emit('submitbtn')
          }
          this.record = new Date().getTime()
        },
      },
    }
    </script>
    
    <style lang="scss" scoped>
    .login-btn { 
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      width: 163px;
      height: 34px;
      border-radius: 6px;
      font-family: PingFangSC-Medium;
      font-size: 13px;
      background-color: #5955f7;
      &.big { 
        width: 274px;
        box-shadow: 3px 4px 12px 0px rgba(89, 85, 247, 0.33);
      }
      &.primary { 
        box-shadow: 3px 4px 12px 0px rgba(89, 85, 247, 0.33);
      }
      &.plain { 
        background-color: #f5f5f8;
        border: solid 1px #e6e6eb;
        color: #706f84;
        margin-right: 10px;
      }
      &.uninstall { 
        background-color: #e2173d;
        box-shadow: 3px 4px 12px 0px rgba(226, 23, 61, 0.33);
        border-radius: 6px;
      }
      &.pay { 
        width: 130px;
        box-shadow: 3px 4px 12px 0px rgba(89, 85, 247, 0.33);
      }
    }
    .s { 
      color: red;
    }
    </style>

引用

<template>
      <div>
        <my-button size="big" opacity=".4" text="222" @submitbtn="clickBtn"> </my-button>
      </div>
    </template>
    
    <script>
    import myButton from '../components/myButton'
    export default { 
      components: { 
        myButton,
      },
      method: { 
        clickBtn () { 
          console.log('')  
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    </style>

其实没什么亮点，关键是用computed监听class，从而改变button样式

![在这里插入图片描述][20210224143422674.png]

[20210224143422674.png]: /images/20210813/f40bad01a4cd4031ab9d0161efe96597.png