封装UI组件
进行封装全局的IU组件,在任意组件、任意地方都可以操作封装的组件。
1. 新建一个文件夹templatename
- 在文件夹下创建
index.js文件 和TemplateName.vue单文件组件
2. TemplateName.vue样式与显示位置
<template>
<div v-if="isShow" class="content">
<h1>{{ massage }}}</h1>
</div>
</template>
<script>
export default {
name: 'TemplateName',
data() {
return{
massage: '',
isShow: false
}
},
methods:{
show(massage = '组件', time = 500) {
this.massage = massage
this.isShow = true
setTimeout(() => {
this.massage = ''
this.isShow = false
}, time)
}
}
}
</script>
<style scoped>
.content {
width: 200px;
height: 100px;
position: absolute;
z-index: 999;/* 设置层级避免被其他设置层级的组件覆盖 */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 100px;
}
</style>
3. index.js代码书写
js中大小写敏感，所以下面的 TemplateName 和 templatename 并不相同
// 引入单文件组件
import TemplateName from './TemplateName.vue'
// 创建一个对象
const obj = {}
// 因为在主文件中注册UI组件时的Vue.use() 会执行对象的 install 方法
// 注意在方法参数中传入 Vue 对象
obj.install = (Vue) => {
// 1. 创建组件构造器，Vue.extend() 返回一个 类（对象）
const constructor = Vue.extend(TemplateName)
// 2. new方式，根据组件构造器返回的类可以创建一个实例组件对象
const templatename = new constructor()
// 3. 将创建的组件对象，挂载到某一个元素上(最好是div标签，因为可以div可是设置宽高)
templatename.$mount(document.creataElement('div'))
// 4. templatename.$el对应的就是div
document.body.appendChild(templatename.$el)
// 5. 将组件挂载到Vue原型对象上
// 这样就可以通过this.$templatename.show('这是传入的文字', 1000)
Vue.prototype.$templatename = templatename
}
// 导出创建的对象
export default obj
全局注册UI组件
-
引入UI组件
import templatename from './compoments/templatename' // 不写具体文件的话会默认引入templatename文件夹下的index.js文件 -
全局安装UI组件
Vue.use(templatename)
全局使用UI组件
通过 this.$templatename.show('封装的组件显示'，1000) 任意一个组件让封装的组件显示
例子: 这个例子是在 AnyTemplate 组件的 mounted() 函数中调用，在页面上会想显示 向封装的组件传入的文字
<template>
<div class='content'>
组件页面
</div>
</template>
<script>
export default {
name: 'AnyTemplate',
data() {
return {}
},
mounted() {
this.$templatename.show('向封装的组件传入的文字'，1000)
// 通过个方法可以在任意一个组件让封装的组件显示
}
}
</script>
<style scoped>
</style>
