微信小程序

小程序教程:用vue实现一个原生弹窗组件

小程序教程:用vue实现一个原生弹窗组件

实现弹窗组件

弹窗这类组件的特点是它们在当前vue实例之外独⽴存在,通常挂载于body;它们是通过JS动态创建的,不需要在任何组件中声明。常⻅使⽤姿势:

this.$create(Notice, {
    title: '社会你杨哥喊你来搬砖',
    message: '提示信息',
    duration: 1000
}).show();

create

create函数⽤于动态创建指定组件实例并挂载⾄body

import Vue from "vue";

// 创建函数接收要创建组件定义
function create(Component, props) {
    // 创建⼀个Vue新实例
    const vm = new Vue({
        render(h) {
            // render函数将传⼊组件配置对象转换为虚拟dom
            console.log(h(Component, {props}));
            return h(Component, {props});
        }
    }).$mount(); //执⾏挂载函数,但未指定挂载⽬标,表示只执⾏初始化⼯作

    // 将⽣成dom元素追加⾄body
    document.body.appendChild(vm.$el);

    // 给组件实例添加销毁⽅法
    const comp = vm.$children[0];
    comp.remove = () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
    };
    return comp;
}

// 暴露调⽤接⼝
export default create;

创建通知组件,Notice.vue

<template>
    <div class="box" v-if="isShow">
        <h3>{{title}}</h3>
        <p class="box-content">{{message}}</p>
    </div>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: ""
            },
            message: {
                type: String,
                default: ""
            },
            duration: {
                type: Number,
                default: 1000
            }
        },
        data() {
            return {
                isShow: false
            };
        },
        methods: {
            show() {
                this.isShow = true;
                setTimeout(this.hide, this.duration);
            },
            hide() {
                this.isShow = false;
                this.remove();
            }
        }
    };
</script>
<style>
    .box {
        position: fixed;
        width: 100%;
        top: 16px;
        left: 0;
        text-align: center;
        pointer-events: none;
    }

    .box-content {
        width: 200px;
        margin: 10px auto;
        font-size: 14px;
        border: blue 3px solid;
        padding: 8px 16px;
        background: #fff;
        border-radius: 3px;
        margin-bottom: 8px;
    }
</style>

递归组件

递归组件是可以在它们⾃⼰模板中调⽤⾃身的组件。

// Node.vue
<template>
    <div>
        <h3>{{data.title}}</h3>
        <!-- 必须有结束条件 -->
        <Node v-for="d in data.children" :key="d.id" :data="d"></Node>
    </div>
</template>
<script>
    export default {
        name: 'Node', // name对递归组件是必要的
        props: {
            data: {
                type: Object,
                require: true
            },
        },
    }
</script>
// 使⽤
<Node :data="{id:'1',title:'递归组件',children:[{...}]}"></Node>

最近文章: