【Vue】参照elementui编写自定义的vue组件

转自：https://www.jianshu.com/p/10b39aacd738

1：先来回顾一下vue组件的局部注册与全局注册

       1.1定义组件：

1.2然后在另外一个组件HelloWorld.vue内进行局部注册：

1.3我们也可以再main.js里进行全局注册：

2 : 使用Vue.use()

我们在开发过程中遇到大量需要反复使用的组件时都会进行全局注册，那么如何elementui一样Vue.use()来注册组件，请回顾 文档 对插件的扩展 或者戳 这里。

2.1我们建立一个文件夹存放组件，写一个alert组件

2.2然后在 index.js里配置下这个组件的install

2.3这样的话就可以在main.js 里面

import zkxAlert from '../componentLib/alert '

Vue.use(zkxAlert)

2.3如何像elementui 一样 use(elementui) 就可以使用全部组件

在componentLib/index.js 内如上处理

3:使用 prop, 事件, slot 让组件变得灵活;

<template>
    <!--可以再这个地方添加动画效果-->
    <transition>
        <div  v-show="visible" class="z-alert" :class="typeClass">
            {{title}}
            <slot></slot>
            <span class="z-alert-close" v-show="closable" @click="close()">关闭</span>
        </div>
    </transition>
</template>

<script>
    export default{
        name:'zkxAlert',
        props:{
            //一个alert 组件 最基本的要有    标题   不同类型的提示   关闭事件
            title:{
                type: String,
                default: '',
                required: true
            },
            //type 会有 success warning error 三种类型
            type: {
                type: String,
                default: 'success'
            },
            //是否可以点击关闭  默认可以
            closable: {
                type: Boolean,
                default: true
            },
        },
        data() {
          return {
            visible: true
          };
        },
    
        methods: {
          close() {
            this.visible = false;
          }
        },
        computed:{
           //通过调用的type 来计算需要显示的class 
            typeClass(){
                return `z-alert--${this.type}`;
            }
        }
        
        
    }
</script>

<style scoped="scoped">
    .z-alert{
        width:1000px;
        /*height: 50px;*/
        line-height: 50px;
        margin: auto;
    }
    .z-alert-close{
        float:right;
        line-height: 50px;
    }
    .z-alert--success{
        background: #f0f9eb;
        color:cadetblue;
    }
    .z-alert--warning{
        background: #fdf6ec;
        color:#e6a28b;
    }
    .z-alert--error{
        background: #fef0f0;
        color:#f681b0;
    }
</style>

4.下面我们use组件之后，调用看下

<zkxAlert title="小猪佩奇身上纹" :closable='false'></zkxAlert>
    <zkxAlert title="掌声送给社会人" :closable='false' type='error'></zkxAlert>
    <zkxAlert title="马上下班" type='warning'>周末愉快</zkxAlert>