vue封裝組件的正確方式-封裝相似elementui的組件

時間 2019-12-10

原文原文鏈接

最近讀了下element的源碼，仿照他封裝了兩種不一樣的組件。css

第一種：經過組件來調用顯示的

<template>

    <div class = "contine">
        <p class = "title">
            {{title}}
        </p>
        <slot class = "contine" name = "contine">

        </slot>
    </div>
</template>

<script>
export default {
    name:"test-component",
    props:{
        title:{
            type : String,
            default:"組件標題"
        }
    }
}
</script>

<style lang="scss" scoped>
    $black : #333;
    $mainSize : 16px;
    $mainLineHeight:30px;
    $lineCenter:center;
    .extendStyle {
        border-radius:$mainSize;
        box-shadow: 3px 3px 3px 3px #333;
    }
    .contine{
        width:50%;
        height:130px;
        color:$black;
        font-size:$mainSize;
        @extend .extendStyle;
        .title,.contine{
            color:$black;
            font-size:$mainSize;
            text-align:$lineCenter;
            line-height:$mainLineHeight;

        }
    }
</style>

組件說明：只是一個簡單的組件顯示一個標題和一段自定義slot內容（僅用做展現）；我想經過如下方式引入vue

import TestModel from "./testComponent/index";
Vue.use(TestModel);

而且調用方法爲：web

<test-conponent title = "123">
        <div slot = "contine">
          2222
        </div>
    </test-conponent>

這麼作，像不像element？是有點這個意思對吧，可是怎麼實現呢，在這先說明下use的做用，其實就是至關於執行他的install方法，明白這個以後開始動工，思路：執行他的install方法，聲明一個vue組件，組件內容就是上面寫的，從而達到全局組件的目的，來看看個人js怎麼寫的：app

import main from "./main";
main.install = (Vue) => {
    Vue.component("test-conponent",main);
}
export default main;

沒錯就是這麼一句，第一種的簡單組件就寫完了，一次引入全局通用。ide

第二種、經過指令調用，好比element的loading組件等

<template>
    <div class = "loading-container" v-show = "show">
        <div class = "loading-mask"></div>
        <div class="loading-content">
            <div class="loading-animate"></div>
            <div class="loading-text">
                {{text}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        show:{
            type:Boolean,
        },
        text:{
            type:String,
            default:"加載中...",
        }
    }
}
</script>

<style>
    .loading-container {
        position: relative;
        text-align: center;
    }
    .loading-mask {
        position:fixed;
        top:0;
        bottom:0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.7);
    }
    .loading-content{
        position:fixed;
        left:50%;
        top:45%;
        z-index:999;
        transform: translate(-50%,-45%);
        text-align:center;
        color:#fff;

    }
    .loading-content .loading-animate{
        display:inline-block;
        width:40px;
        height:40px;
        vertical-align: baseline;
        margin:25px 0 10px;
        vertical-align: middle;
        animation:cricleLoading 1s steps(12,end) infinite;
        background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=") no-repeat;
        background-size: 100%;

    }
    .loading-content .loading-text{
        font-size: 16px;
    }
    @-webkit-keyframes cricleLoading{
        0%{
            transform: rotate3d(0,0,1,0deg);
        }
        100%{
            transform: rotate3d(0,0,1,360deg);
        }
    }
     @keyframes cricleLoading{
        0%{
            transform: rotate3d(0,0,1,0deg);
        }
        100%{
            transform: rotate3d(0,0,1,360deg);
        }
    }
</style>

以上是loading組件的內容，要經過這種方式引入：svg

import loading from "./toolTip";
Vue.use(loading);

而且經過指令方式調用this

this.$loading.show({
        text:"拼命加載中"
      });

有的朋友可能會說了，這怎麼可能啊，沒有節點怎麼放進去？對沒錯確實，沒有節點是沒辦法進去的，可是沒有節點就聲明節點對麼？url

import LoadingComponent from "./loading";
import Vue from "vue";
let instance;
const loadingConstructor = Vue.extend(LoadingComponent); 
instance = new loadingConstructor({
    el:document.createElement("div")
});
instance.show = false;
const loading = {
    show(options = {}){
        instance.show = true;
        document.body.appendChild(instance.$el);
        instance.text = options.text;
        setTimeout(()=>{
            loading.hide();
        },5000)
    },
    hide() {
        instance.show = false;
    }
}
export default {
    install(){
        if(!Vue.loading){
            Vue.$loading = loading;
        }
        Vue.mixin({
            created(){
                this.$loading = Vue.$loading;
            }
        })
    }
}