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%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .mask {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
    .contentBox {
      position: absolute;
      height: 30%;
      width: 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;
        width: 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>