背景：
我们在使用别人优秀的组件库的时候，会发现有分为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);
},
});