|
阅读：4587回复：0
vue 自定义一个MessageBox消息框组件
封装一个类似elementui 的message ； 通过js this.$message() ; 能显示一个消息组件 ；
所需知识点: 1. Vue.extend() 2. render函数，h函数 3. install 方法，及use() 方法 一、Vue.extend() 可以使用Vue.extend 创建一个构造器，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例。 代码如下： // 创建构造器
var Profile = Vue.extend({
template: '<p>pw_firstName pw_lastName aka pw_alias</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
需要通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上。或者 new Profile({el:"#app"}) 总结： Vue.extend 的作用，就是基于 Vue 构造器，创建一个‘ 子类 '，它的参数跟new Vue的基本一样，但data要跟组件一样，是个函数，再配合$mount，就可以渲染组件，并且挂载到任意指定的节点上 二、render函数，h函数 vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){
return createElement(app)
}
用es6的写法就是：(只有一个个return语句，可以省略return和{}) render: createElement=>createElement(app) 将createElement改成 h 就是官方写法。 使用 h 的理由，官方解释是： It comes from the term “hyperscript”, which is commonly used in many createElement 用来生成 HTML DOM 元素，也就是上文中的 generate HTML structures，也就是 Hyperscript，所以用 h 替代了 createElement 。 三、install() 方法与use() 方法 vue提供install可供我们开发新的插件及全局注册组件等 install 方法第一个参数是vue的构造器，第二个参数是可选的选项对象 export default {
install(Vue,option){
组件
指令
混入
挂载vue原型
}
}
示例：全局注册组件 import PageTools from '@/components/PageTools/pageTools.vue'
import update from './update/index.vue'
import ImageUpload from './ImageUpload/ImageUpload.vue'
import ScreenFull from './ScreenFull'
import ThemePicker from './ThemePicker'
import TagsView from './TagsView'
export default {
install(Vue) {
Vue.component('PageTools', PageTools)
Vue.component('update', update)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ScreenFull', ScreenFull)
Vue.component('ThemePicker', ThemePicker)
Vue.component('TagsView', TagsView)
}
}
在main.js中直接用引用并Vue.use进行注册 import Component from '@/components' Vue.use(Component) 当调用Vue.use()方法时，就会执行install() 这个方法 四、 messageBox 代码解析 1. MessageBox 组件代码 ,MessageBox.vue template内容 <template>
<div :class="['message-box',type]">
<div class="inner">
<header class="header">
<h1 class="title">pw_title</h1>
<span class="close-btn" @click="$messageBox.hide()">x</span>
</header>
<div class="content">
pw_ content
</div>
</div>
</div>
</template>
script 内容 <script>
export default {
name: "MessageBox",
props:{
title:{
type:String,
default:"This is TITLE"
},
content:{
type:String,
default:"This is CONTENT"
},
type:{
type:String,
default:'primary',
validator(value) {
return [
'primary',
'success',
'warn',
'danger'
].includes(value);
}
}
}
}
</script>
style 样式代码就不公布了； 2. 暴露messageBox的 index.js 代码，最主要的核心代码 import _MessageBox from "./MessageBox";
export default {
install(Vue){
let messageBox = null; //保证只创建一个messageBox
// 注册组件
Vue.component(_MessageBox.name,_MessageBox);
// 原型上添加方法
Vue.prototype.$messageBox = {
show,
hide,
primary,
success,
warn,
danger
}
function show(props,callback) {
if(!messageBox){
const MessageBox = Vue.extend({
render(h){
return h('message-box',{props})
}
})
messageBox = new MessageBox();
this.vm = messageBox.$mount(); //挂载方法会返回一个MessageBox实例对象
document.body.appendChild(this.vm.$el);
callback && callback();
}
}
function hide() {
document.body.removeChild(this.vm.$el);
messageBox.$destroy();
messageBox=null;
this.vm = null;
}
function primary(props,callback){
this.show({...props,type:'primary'},callback)
}
function success(props,callback){
this.show({...props,type:'success'},callback)
}
function warn(props,callback){
this.show({...props,type:'warn'},callback)
}
function danger(props,callback){
this.show({...props,type:'danger'},callback)
}
}
};
3. 导出所有组件的接口文件 import store from './store'
import {MessageBox} from './components/MyUI';
Vue.config.productionTip = false
Vue.use(MessageBox); //当调用Vue.use()方法时，就会执行install() 这个方法
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
4. main.js 引用 import store from './store'
import {MessageBox} from './components/MyUI';
Vue.config.productionTip = false
Vue.use(MessageBox); //当调用Vue.use()方法时，就会执行install() 这个方法
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
5. 组件中，使用 使用 this.$messageBox调用对应的方法，即可以显示对应的组件； <template>
<div id="app">
<div>
<button @click="show">show</button>
<button @click="primary">primary</button>
<button @click="danger">danger</button>
<button @click="warn">warn</button>
<button @click="success">success</button>
</div>
</div>
</template>
<script>
export default {
name:"App",
methods:{
show(){
this.$messageBox.show({
type:'primary'
})
},
primary(){
this.$messageBox.primary({
title:"doubleyong",
content:"content"
})
},
danger(){
this.$messageBox.danger({
title:'doubleyong',
content:'下班了'
})
},
warn(){
this.$messageBox.warn({
title:'doubleyong',
content:'下班了'
})
},
success(){
this.$messageBox.success({
title:'doubleyong',
content:'下班了'
})
}
}
}
</script>
分享完毕，代码可在附件中下载 |
|
|
公众号
