VUE框架JS組件的封裝 --Vue.extend

背景：

　　我們在使用別人優秀的組件庫的時候，會發現有分為JS組件、CSS組件、Form組件這些。

有時候我們需要動態的創建組件，比如點擊按鈕，出現彈窗。

那么VUE 的js組件如何封裝，核心是Vue.extend（組件）創建組件構造器。

 

一、創建文件

 在component文件夾下創建

 

 index.js 作為js組件的集合頁 ，集合各式各樣的JS模式的組件

 

二、在index.vue寫具體的《彈窗》組件樣式

<template>
  <div class="messageBox">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
      <div>
          <div @touchstart="handleCancel">{{cancel}}</div>
          <div @touchstart="handleOk">{{ok}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name:'MessageBox'
}
</script>

<style scoped>
    .messageBox{ 
        width: 200px;
        height: 120px;
        border: 1px #ccc solid;
        border-radius:4px ;
        background: white;
        box-shadow: 3px 3px 3px 3px  #ccc;
        position:absolute;
        left: 50%;
        top: 50%;
        margin: -60px 0 0 -100px;
    }
    .messageBox h2 {
        text-align: center;
        line-height: 40px;
        font-size:18px ;
    }
    .messageBox p{
        text-align: center;
        line-height: 40px;
        
    }
.messageBox >div{display: flex; position: absolute; bottom:0;width: 100%;border-top:1px #ccc solid;}
.messageBox >div div {flex: 1; text-align: center;line-height: 30px;border-right:1px #ccc solid;}
.messageBox >div div:last-child{border: none;}

</style>

 

做完這步可以找個頁面測試一下（引入局部組件）。看一下頁面效果

 

三、做index.js 

import Vue from 'vue';
import MessageBox from './MessageBox';


//使用的地方messageBox（{}）調用就行
export var messageBox = (function(){  //這邊做閉包是因為可能有很多組件，防止參數污染
        var defaults = {
            title:'',
            content:'',
            canle:'',
            ok:'',
            handleCancel:null,
            handleOk:null
        };

        return function(opts){
            for( var attr in opts){
                defaults[attr] = opts[attr];
            }

            var MyComponent = Vue.extend(MessageBox);
            var vm = new MyComponent({
                el:document.createElement('div'),
                data:{   //這邊試一下 data(){}行不行
                    title:defaults.title,
                    content:defaults.content,
                    cancel:defaults.cancel,
                    ok:defaults.ok
                },
                methods:{
                    handleCancel(){
                        defaults.handleCancel&& defaults.handleCancel.call(this);
                        document.body.removeChild(vm.$el)
                    },
                    handleOk(){
                        defaults.handleOk && defaults.handleOk.call(this);
                        document.body.removeChild(vm.$el)
                    }
                }
            });
            document.body.appendChild(vm.$el);  
        }
    })();  //兩個括號是讓調用優先級恢復

 

四、調用他

  

import { messageBox } from "@/components/JS";

 

messageBox({
            title: "定位1",
            content: res.data.data.city.name,
            cancel: "取消",
            ok: "切換定位",
            handleCancel() {
              console.log(1);
            },
            handleOk() {
              console.log(2);
            },
          });