Open vianvio opened 4 years ago
1.在tip.js中定义一个变量tipInstance存储包含tip组件的子类,如果tipInstance不为undefined则直接export出tipInstance否则调用对应方法创建包含tip组件的子类。
import Vue from 'vue'
import Tip from './tipList.vue'//组件
let tip, initialization;
Tip.newInstance = () => {
//使用基础 Vue 构造器,创建一个包含tip组件的“子类”
tip = Vue.extend(Tip)
const messageInstance = new tip();
const div = document.createElement('div');
document.body.appendChild(div);
//挂载到新创建的div
messageInstance.$mount(div)
return {
prompt(props) {
messageInstance.show(props);
}
}
}
initialization=function(){
if(!tip){
tip=Tip.newInstance()
}
return tip
}
export default initialization
``` ```
2.通过一个包装组件tipBox实现,每次调用提示组件,实际是向tipBox中的一个list变量中添加一条数据,并制定唯一id。tipBox根据这个变量list来渲染tip组件。这样多个tip组件会以列表的形式渲染. ... add(options) { let name = getUid;//tip的唯一标识 let _options = Object.assign( {//默认属性 name: name }, options ); this.tipList.push(_options)//实现多次调用显示 }
Q1贴一下相对完整的代码,不然看不出一些细节。
3. 可扩展部分
问题四
问题列表: