• 作者:老汪软件技巧
  • 发表时间:2024-10-11 00:02
  • 浏览量:

用过vant的家人们肯定都知道其中的Dialog组件是支持函数调用和组件调用的,组件调用就不阐述了,其中函数调用的使用方式如下:

Dialog.alert({ 
    title: '标题', 
    message: '弹窗内容', 
}) 
.then(() => { 
    // on close 
});

产生的效果图:

感觉Dialog的函数调用特别方便啊,而vant中有个跟Dialog很像(自认为)的组件,那就是ActionSheet动作面板这个组件。

为什么说像呢,因为他们其实都是触发了点击事件以后出来一个弹框,然后弹框上会有对应的事件,对此,提出:为什么ActionSheet这个组件为什么没有函数调用的方法呢?(其实是我导师提的,我发散性思维不好)于是就有了这篇文章!

先捋捋思路,想要封装成函数调用,也就是在业务代码中我们可以直接使用函数就可以渲染相关的页面,那怎么做到不在template中写对应的组件但却可以进行渲染呢?说明是需要使用到动态渲染操作的,也就是在触发某一事件的时候才会渲染相关的组件,那么我们得先把对应的组件写好先。

_封装的组件_封装后怎么调用

新建一个showActionSheet文件夹,再新建一个actionSheet.vue文件:


<script>
export default {
    name: "actionSheet",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        actionsList: {
            type: Array,
            default: () => []
        },
        selectAction: Function
    },
    methods: {
        close() {
            console.log("close");
            this.visible = false;
            this.$emit("close");
        }
    }
};
script>

然后再在该文件夹下新增一个showActionSheet.js文件,在这个文件里定义函数并抛出:

import Vue from "vue";
import actionSheet from "./actionSheet.vue";
// 定义showActionSheet函数,接收对象参数
function showActionSheet({actionsList, selectAction }) {
    // 使用Vue.extend方法将actionSheet组件扩展为一个新的构造器,该构造器可以用来创建新的实例
    const actionSheetConstructor = Vue.extend(actionSheet);
    // 设置visible控制组件是否可见,初始值为true
    let visible = true;
    
    // 创建新的vue实例,并将对应的参数传递给这个实例
    const instance = new actionSheetConstructor({
        propsData: { visible, actionsList, selectAction }
    });
    // 挂在组件:使用$mount方法将该实例挂载到一个虚拟DOM节点上,若未指定挂载点,则会默认挂载到内存的虚拟DOM节点
    instance.$mount();
    // 将组件的根元素添加到页面的body中,使其在页面上可见
    document.body.appendChild(instance.$el);
    // 监听close事件
    instance.$on("close", () => {
        // 若close事件触发,则执行移除组件根DOM元素操作
        document.body.removeChild(instance.$el);
        // 销毁vue实例,释放资源
        instance.$destroy();
    });
    // 返回vue实例,使得调用者可通过这一步获取这个vue实例
    return instance;
}
export default showActionSheet;

在想要调用的代码中直接可以通过如下代码进行函数调用:

methods: {
    test() {
        const actionsList = [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }]
        showActionSheet({
            actionsList: actionsList,
            selectAction: (selectObj) => {
                console.log("我选择了", selectObj)
            }
        })
    },
}

由此,成功实现,效果图: