521 vue编写全局组件

index.js

// 这是导入组件的模块
// import Button from "./Button.vue";
// import Icon from "./Icon.vue";
// import ButtonGroup from "./ButtonGroup.vue";

const install = (Vue) => {
  //把所有的组件设成全局组件
  // Vue.component(Button.name,Button)
  // Vue.component(Icon.name,Icon)
  // Vue.component(ButtonGroup.name,ButtonGroup)

  // 优化写法：require.context()
  // 参数：路径，是否遍历，正则
  const requireComponent = require.context(".", true, /\.vue/);
  requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName);
    // console.log(config);
    Vue.component(config.default.name, config.default);
  })
}
// script  vue是放在window下， 放在模块内
if (typeof window.vue !== "undefined") {
  install(vue);
}

export default {
  install
}

---

mian.js

import Vue from 'vue'
import App from './App.vue'
// import zfUi from "./packages/index"  
import zfUi from 'z-z-ui';
import "z-z-ui/dist/zf-ui.css";

 // Vue.use默认会调用install方法
Vue.use(zfUi)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

---

App.vue

<template>
  <div id="app">
    <zf-button>默认按钮</zf-button>
    <zf-button type="primary">默认按钮</zf-button>
    <zf-button type="info">默认按钮</zf-button>
    <zf-button type="success">默认按钮</zf-button>
    <zf-button type="warning">默认按钮</zf-button>
    <zf-button type="danger">默认按钮</zf-button>
    <zf-icon icon="edit"></zf-icon>
    <zf-icon icon="sousuo"></zf-icon>
    <zf-button type="success" icon="sousuo" icon-position="left">搜索</zf-button>
    <zf-button type="success" icon="sousuo" icon-position="right">搜索</zf-button>
    <zf-button type="success" loading>加载中</zf-button>
    <zf-button type="success" @click="fn">触发事件</zf-button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods:{
    fn(e){
      console.log(e);
    }
  }
};
</script>

---

Button.vue

<template>
  <button class="zh-button" :class="btnClass" @click="$emit('click', $event)">
    <zf-icon :icon="icon" class="icon" v-if="icon && !loading"></zf-icon>
    <zf-icon icon="loading" v-if="loading" class="icon"></zf-icon>
    <!-- span标签没有内容时，span不显示 -->
    <span v-if="this.$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<script>
  export default {
    name: "zf-button",
    props: {
      type: {
        type: String,
        default: "",
        validator(type) {
          if (
            type &&
            !["warning", "success", "danger", "info", "primary"].includes(type)
          ) {
            console.error(
              "type的类型必须为" +
                ["warning", "success", "danger", "info", "primary"].join("、")
            );
          }
          return true;
        },
      },
      icon: {
        type: String,
      },
      iconPosition: {
        type: String,
        default: "left",
        validator(type) {
          if (type && !["left", "right"].includes(type)) {
            console.error("iconPosition属性必须为" + "left|right");
          }
          return true;
        },
      },
      loading: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      btnClass() {
        let classes = [];
        if (this.type) {
          classes.push(`zh-button-${this.type}`);
        }
        if (this.iconPosition) {
          classes.push(`zh-button-${this.iconPosition}`);
        }
        return classes;
      },
    },
  };
</script>
<style  lang="scss">
  @import "../styles/common.scss";
  $height: 42px;
  $font-size: 16px;
  $color: #606266;
  $border-color: #dcdfe6;
  $background: #ecf5ff;
  $active-color: #3a8ee6;
  .zh-button {
    border-radius: $border-radius;
    border: 1px solid $border-color;
    color: $color;
    background: #fff;
    height: 42px;
    cursor: pointer;
    font-size: $font-size;
    line-height: 1;
    padding: 12px 20px;
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
    &:hover {
      border-color: $border-color;
      background: $background;
    }
    &:focus,
    &:active {
      color: $active-color;
      border: 1px solid $active-color;
      background-color: $background;
      outline: none;
    }
    @each $type,
      $color
        in(
          primary: $primary,
          success: $success,
          info: $info,
          warning: $warning,
          danger: $danger
        )
    {
      &-#{$type} {
        background: #{$color};
        border: 1px solid #{$color};
        color: #fff;
        fill: #fff;
      }
    }
    @each $type,
      $color
        in(
          primary: $primary-hover,
          success: $success-hover,
          info: $info-hover,
          warning: $warning-hover,
          danger: $danger-hover
        )
    {
      &-#{$type}:hover {
        background: #{$color};
        border: 1px solid #{$color};
        color: #fff;
        fill: #fff;
      }
    }
    @each $type,
      $color
        in(
          primary: $primary-active,
          success: $success-active,
          info: $info-active,
          warning: $warning-active,
          danger: $danger-active
        )
    {
      &-#{$type}:active,
      &-#{$type}:focus {
        background: #{$color};
        border: 1px solid #{$color};
        color: #fff;
        fill: #fff;
      }
    }
    .icon {
      width: 16px;
      height: 16px;
      vertical-align: middle;
    }
    .icon + span {
      margin-right: 4px;
    }
    &-left {
      svg {
        order: 1;
      }
      span {
        order: 2;
      }
    }
    &-right {
      svg {
        order: 2;
      }
      span {
        order: 1;
      }
    }
  }
</style>