modal组件 vue_vue3:modal组件开发

项目环境

@vue/cli 4.5.8

最终效果

需求分析

显示/隐藏

点击遮罩层能否关闭

宽度和zIndex自定义

标题栏 -显示标题和关闭按钮

主体

底部 -内置取消和确定功能

实现过程

搭建大体的html模版

取消

确定

import { defineComponent } from "vue";

export default defineComponent({

name: "Modal",

props: {},

emits: [],

setup() {

return { };

},

});

添加props和mehtods和css

{ { title }}

取消

确定

import { defineComponent } from "vue";

e