VueUI组件封装之this.$name调用方式

封装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中大小写敏感,所以下面的 TemplateNametemplatename 并不相同

// 引入单文件组件
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组件

  1. 引入UI组件

    import templatename from './compoments/templatename'
    // 不写具体文件的话会默认引入templatename文件夹下的index.js文件
    
  2. 全局安装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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容