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

Posted 2021-03-17 dangdanghepingping

定义一直类似于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的代码如下

  

  1 <template>
  2   <div class="errToast" v-if="show">
  3     <div class="mask">
  4       <div class="contentBox">
  5         <h3 :style="{color:getColor()}">{{title}}</h3>
  6         <p :style="{color:getColor()}">{{text}}</p>
  7         <footer v-if="hasConfirmBtn">
  8           <button class="btn" @click="noShow">确定</button>
  9         </footer>
 10       </div>
 11     </div>
 12   </div>
 13 </template>
 14 
 15 <script>
 16 export default {
 17   props: {
 18     type: {
 19       //根据type类型,可以变换颜色
 20       validator: function(value) {
 21         return ["err", "default", "success", "warn"].indexOf(value) !== -1;
 22       }
 23     },
 24     show: Boolean,
 25     title: String,
 26     text: String,
 27     hasConfirmBtn: Boolean
 28   },
 29   data() {
 30     return {
 31       colorData: {
 32         err: "#FF0000",
 33         warn: "#FF9900",
 34         default: "white",
 35         success: "#33FF00"
 36       }
 37     };
 38   },
 39   methods: {
 40     getColor() {
 41       console.log(this.type);
 42       return this.colorData[this.type];
 43     },
 44     noShow() {
 45       this.$emit("dispair");
 46     }
 47   }
 48 };
 49 </script>
 50 
 51 <style scoped lang="less">
 52 .errToast {
 53   height: 100%;
 54   width: 100%;
 55   position: fixed;
 56   left: 0;
 57   top: 0;
 58   right: 0;
 59   bottom: 0;
 60   .mask {
 61     height: 100%;
 62     width: 100%;
 63     position: absolute;
 64     left: 0;
 65     top: 0;
 66     background-color: rgba(0, 0, 0, 0.3);
 67     z-index: 99;
 68     .contentBox {
 69       position: absolute;
 70       height: 30%;
 71       width: 30%;
 72       top: 50%;
 73       left: 50%;
 74       transform: translateX(-50%) translateY(-50%);
 75       background: #ccc;
 76       display: flex;
 77       flex-direction: column;
 78       h3 {
 79         flex: 1;
 80         display: flex;
 81         align-items: center;
 82         justify-content: space-around;
 83       }
 84       p {
 85         flex: 1;
 86         text-align: center;
 87       }
 88       footer {
 89         position: absolute;
 90         bottom: 10px;
 91         height: 30px;
 92         width: 100%;
 93 
 94         .btn {
 95           position: absolute;
 96           right: 30px;
 97           padding: 10px 20px;
 98           background: #fff !important;
 99           color: #000;
100           border-radius: 5px;
101           letter-spacing: 3px;
102           cursor: default;
103           &:hover {
104             background: #4dd52b !important;
105             color: #fff;
106           }
107         }
108       }
109     }
110   }
111 }
112 </style>

index.js代码如下:

1 import ToastCom from ‘./Toast.vue‘
2 
3 const Toast={
4     install:function (Vue) {
5         Vue.component(‘Toast‘,ToastCom) //注册全局组件
6     }
7 }
8 export default Toast

主文件main.js里引入

           1 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>