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);
            },
          });