modal vue 关闭_开发Vue组件系列之模态框

weixin_39587029

于 2020-12-13 18:26:26 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

文章标签： modal vue 关闭

本文介绍了一个Vue模态框组件的开发过程，包括组件的基本结构、安装方式、使用方法及关键属性设置。该组件支持标题、内容、定时器等功能，并可通过按钮触发事件回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。

使用命令行安装或下载

npm install lcxModal -S

- import lcxModal from 'lcxModal';- const lcxModal = require('lcxModal');-

- Vue.use(lcxModal); - Vue.component('lcxModal', lcxModal);

├── src # 项目源码。开发的时候代码写在这里。│ ├── lib # 组件目录 | | |--lcxModal # 模态框组件│ ├── App.vue # 项目根视图│ ├── main.js # 程序主入口

使用 `transition` 可以为组件添加动效;对应的组件模板内容如下

{{ title }} 关闭

{{ text }}

{{ confirmBtnText }} {{ cancelBtnText }}

添加组件的属性,其中`duration`属性如果设定的数值小于10,则会乘以1000;否则按传递的数值计算