vue封装button组件

参照：   vue封装自己的组件库 01.封装button组件_杨苏西的博客-CSDN博客_封装按钮组件

直接上代码吧，详情看上面链接。主要是保存下我里面的自定义颜色，嘻嘻

<template>
  <button class="da-button" :class="[`da-button-${type}`,{
    'is-plain':plain,
    'is-round':round,
    'is-circle':circle,
    'is-disabled':disabled
  },size]"
  @click="handleClick"
  :disabled="disabled"
  >
  <i v-if="icon" :class="`da-icon-${icon}`"></i>
  <!-- 如果没传入文本插槽，则不显示span内容 -->
   <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
 
<script>
 
export default {
  name: 'daButton',
  // 此时对props进行校验，值接收string类型的type值
  props: {
    size:{
      type: String,
      default: 'nomarl'
    },
    type: {
      type: String,
      // 设置默认值：如果不传值，那么使用default
      default: 'defalut'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  created () {
    // 显示所有插槽
    // console.log(this.$slots)
  },
  methods: {
    // 定义一个点击事件，这个点击事件的作用是调用父组件中的点击事件，并且回调
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .da-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    margin-right: 10px;
    //禁止元素的文字被选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    // font-family: 'AlibabaPuHuiTi-Medium';
    &:hover,
    &:focus{
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
.da-button-primary{
  color:#fff;
  background-color: #1478f0;
  border-color: #1478f0;
  &:hover,
  &:focus{
    background: #66b1ff;
    background-color: #66b1ff;
    color: #fff;
    }
  }
  .da-button-success{
  color:#fff;
  background-color: #73D13D;
  border-color: #73D13D;
  &:hover,
  &:focus{
    background: #85ce61ce;
    background-color: #85ce61ce;
    color: #fff;
    }
  }
  .da-button-info{
  color:#fff;
  background-color: #909399;
  border-color: #909399;
  &:hover,
  &:focus{
    background: #a6a9ad;
    background-color: #a6a9ad;
    color: #fff;
    }
  }
  .da-button-warning{
  color:#fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
  &:hover,
  &:focus{
    background: #ebb563;
    background-color: #ebb563;
    color: #fff;
    }
  }
  .da-button-danger{
  color:#fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  &:hover,
  &:focus{
    background: #f78989;
    background-color: #f78989;
    color: #fff;
    }
  }
// 朴素按钮样式
.da-button.is-plain{
  &:hover,
  &:focus{
    background: #fff;
    border-color: #489dffd4;
    color: #40a0ffcb;
  }
}
.da-button-primary.is-plain{
  color: #409eff;
  background: #ecf5ff;
  &:hover,
  &:focus{
    background: #40a0ffc4;
    border-color: #40a0ffc4;
    color: #fff;
  }
}
.da-button-success.is-plain{
  color: #1E9E1E;
  background: rgba(115,209,61,0.10);
  &:hover,
  &:focus{
    background: #1e9e1ebe;
    border-color: #1e9e1ebe;
    color: #fff;
  }
}
.da-button-info.is-plain{
  color: #909399;
  background: #d3d4d6;
  &:hover,
  &:focus{
    background: #909399be;
    border-color: #909399be;
    color: #fff;
  }
}
.da-button-warning.is-plain{
  color: #FA8C16;
  background:rgba(250,140,22,0.10);;
  &:hover,
  &:focus{
    background: #fa8c16c4;
    border-color: #fa8c16c4;
    color: #fff;
  }
}
.da-button-danger.is-plain{
  color: #FA541C;
  background: #fbc4c4;
  &:hover,
  &:focus{
    background: #fa531ccd;
    border-color: #fa531cdc;
    color: #fff;
  }
}
// round属性
.da-button.is-round{
  border-radius: 20px;
  padding: 12px 23px;
}
// circle属性
.da-button.is-circle{
  border-radius: 50%;
  padding: 12px;
}
// icon配套样式
.da-button [class*=da-icon-]+span{
  margin-left: 5px;
}
// disabled属性
.da-button.is-disabled{
   cursor: no-drop;
}
/* 按钮大小 */
.large {
  // width: 84px;
  height: 48px;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 14px;
}
.middle {
  // width: 60px;
  height: 40px;
  padding: 12px 20px;
  font-size: 14px;
}
.nomarl {
  // width: 60px;
  height: 36px;
  padding: 9px 15px;
  font-size: 14px;
}
.small {
  font-size: 12px;
  padding: 4px 9px;
  transform: scale(0.9);
  height: 30px;
  line-height: 4px;
  margin-right: 3px;
}
.mini {
  padding: 7px 15px;
  font-size: 12px;
}

</style>

使用： 

 <da-button size="small" plain type="primary">男</da-button>

<da-button  type="primary" icon="daochu">导出</da-button>

最后

以上就是明亮哈密瓜为你收集整理的vue封装button组件的全部内容，希望文章能够帮你解决vue封装button组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。