vue 自定义组件的方法(两种之一)

定义一直类似于elementui的全局组件, Vue.user()后,页面哪里用到就在哪里插件写;

先上依据:

Vue.use( plugin )

• 参数：

  • {Object | Function} plugin

• 用法：

  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

  该方法需要在调用 new Vue() 之前被调用。

  当 install 方法被同一个插件多次调用，插件将只会被安装一次。

• 参考：插件

   (1)写好vue组件模板, (2)然后在其js文件里定义一个对象, 对象上必须要有方法install(){Vue.component(组件模板)},(3)在main.js里Vue.use(这个对象)

        

      步骤: 在components文件夹下新建一个文件夹toast,里面建两个文件index.js和toast.vue

           toast.vue的代码如下

  

<template>
  <div class="errToast" v-if="show">
    <div class="mask">
      <div class="contentBox">
        <h3 :style="{color:getColor()}">{{title}}</h3>
        <p :style="{color:getColor()}">{{text}}</p>
        <footer v-if="hasConfirmBtn">
          <button class="btn" @click="noShow">确定</button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      //根据type类型,可以变换颜色
      validator: function(value) {
        return ["err", "default", "success", "warn"].indexOf(value) !== -1;
      }
    },
    show: Boolean,
    title: String,
    text: String,
    hasConfirmBtn: Boolean
  },
  data() {
    return {
      colorData: {
        err: "#FF0000",
        warn: "#FF9900",
        default: "white",
        success: "#33FF00"
      }
    };
  },
  methods: {
    getColor() {
      console.log(this.type);
      return this.colorData[this.type];
    },
    noShow() {
      this.$emit("dispair");
    }
  }
};
</script>

<style scoped lang="less">
.errToast {
  height: 100%;
   100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .mask {
    height: 100%;
     100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
    .contentBox {
      position: absolute;
      height: 30%;
       30%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      background: #ccc;
      display: flex;
      flex-direction: column;
      h3 {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      p {
        flex: 1;
        text-align: center;
      }
      footer {
        position: absolute;
        bottom: 10px;
        height: 30px;
         100%;

        .btn {
          position: absolute;
          right: 30px;
          padding: 10px 20px;
          background: #fff !important;
          color: #000;
          border-radius: 5px;
          letter-spacing: 3px;
          cursor: default;
          &:hover {
            background: #4dd52b !important;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

index.js代码如下:

import ToastCom from './Toast.vue'

const Toast={
    install:function (Vue) {
        Vue.component('Toast',ToastCom) //注册全局组件
    }
}
export default Toast

主文件main.js里引入

           import Toast from './components/Toast'//自定义的提示框

       2 Vue.use(Toast) 

应用: 

 <Toast
      v-if="showErr"
      :type="type"
      :show="showErr"
      :title="title"
      :text="text"
      :hasConformBtn="hasConfirmBtn"
      @dispair="dispairToast"
    ></Toast>