曹筱君之在vue中创建button按钮插件

接着上面的讲，首先在自己的vue项目的src文件夹下的myUI文件夹中新建一个button文件夹，在里面新建一个index.vue,代码如下

<!---->
<template>
  <div class>
    <button
      :disabled="disabled"
      @click="click"
      :class="[
        color,
        size,
        {
          circle,
          round: !circle && round,
        },
      ]"
    >
      <!-- 加载中图标 -->
      <mu-loading :type="loading" v-if="loading > 0" />
      <!-- <loading :type="loading" v-if="loading > 0"> </loading> -->

      <!-- 字体图标 -->
      <i :class="['mu-iconfont', `mu-icon-${icon}`]" v-if="icon && loading < 1"></i>

      <!--  // 插槽 如果在按钮标签中间有标签，才会生成span标签-->
      <span v-if="$slots.default">
        <slot></slot>
      </span>
    </button>
  </div>
</template>

<script>
let colors = [
  "white",
  "red",
  "green",
  "blue",
  "black",
  "yellow",
  "orange",
  "gray",
];

let sizes = ["large", "emdium", "small", "mini"];
let icons = ["search", "success", "warn", "jiazai3"];
//首先得先下载这些图标
// import loading from "../loading/index.vue";
export default {
  // components: { loading },
  name: "mu-button",
  props: {
    disabled: Boolean,
    color: {
      type: String,
      default: "green",
      validator(value) {
        return colors.includes(value);
      },
    },

    // 是否圆形
    circle: Boolean,

    // 圆角
    round: Boolean,

    // 大小
    size: {
      type: String,
      default: "large",
      validator(value) {
        return sizes.includes(value);
      },
    },

    // 图标
    icon: {
      type: String,
      defaule: null,
      validator(value) {
        return icons.includes(value);
      },
    },
    // 是否加载
    loading: {
      type: Number,
      defaule: 0,
    },
  },
  data() {
    //这里存放数据
    return {
      s: "red",
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    click(e) {
      this.$emit("click", e);
    },
  },

};
</script>
<style scoped lang='scss'>
@import "../variable.scss";

// 兄弟选择器 ，span前面要有i标签
i + span {
  margin-left: 5px;
}

// 圆形
.circle {
  border-radius: 50%;
  padding: 12px;
}

// 圆角
.round {
  border-radius: 20px;
}

button {
  border-radius: 3px;
  outline: none;
  border: none;
  padding: 10px 20px;
  line-height: 1;
  cursor: pointer;
}
@mixin background($color) {
  background: $color;
  color: $white;
  &:hover {
    background: mix($color, rgb(130, 130, 130));
  }
  &[disabled] {
    cursor: not-allowed;
    background: rgba($color: $color, $alpha: 0.5);
  }
}
.white{
  @include background($white);
  color:$black;
}
.green{
  @include background($green);
  // color:$black;
}
.red{
  @include background($red);
}
.yellow{
  @include background($yellow);
}
.gray{
  @include background($gray);
}
.blue{
  @include background($blue);
}
.black{
  @include background($black);
  color:$white;
}
.orange{
  @include background($orange);
}



// 属性选择器
// .green[disabled] {
//   cursor: not-allowed;
//   background: rgba($color: $green, $alpha: 0.5);
// }

// .green {
//   background: $green;
//   color: white;
// }

// // 鼠标移入
// .green:hover {
//   background: rgba($color: $green, $alpha: 0.5);
// }

// 大小
.large {
  font-size: $large;
}
.mini {
  font-size: $mini;
}
.small {
  font-size: $small;
}
.emdium {
  font-size: $emdium;
}
</style>

在button文件夹下新建index.js

import button from './index.vue'
button.install = function(vue){
    vue.component(button.name,button)
}
export default button;

在main.js中引入
import button from ‘./myUI/button/index.js’
Vue.use(button)

在组件中使用

在这里插入代码片<!--  -->
<template>
<div class=''>

<mu-loading :type="2"  color="red"></mu-loading> 
<mu-button color="green" size="large" round icon="warn" disabled :loading="0">啥也不是</mu-button>
<br>
<mu-button color="red" size="emdium" round  :loading="1">啥也不是</mu-button>
<br>
<mu-button color="yellow" size="small" icon="search" :loading="0">啥也不是</mu-button>
<br>
<mu-button color="blue" size="mini" icon="success" :loading="0">啥也不是</mu-button>
<br>
<mu-button color="white" size="mini" icon="success" circle :loading="0">啥也不是</mu-button>
<br>
<mu-button color="black" size="mini" icon="success" circle :loading="0"></mu-button>
<mu-button color="gray" size="mini"  circle :loading="0">啥</mu-button>
<mu-button color="orange" size="mini"  circle :loading="0">啥也不是</mu-button>
<mu-button color="green" size="mini"  round :loading="0">啥也不是ssss</mu-button>

</div>

</template>

<script>
// import load from "@/myUI/loading"
export default {
components: {
  // load,
},
data() {
//这里存放数据
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>