Vue如何实现模态框
这篇文章给大家分享的是有关Vue如何实现模态框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联主要从事网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务新巴尔虎右,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
项目基础工程文件是使用vue-cli3.0搭建的,这里不过多介绍。开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。
使用命令行
$ Vue create echi-modal $ cd echi-modal $ npm install $ npm run serve $ npm run build $ npm run lint
添加vue.config.js文件,配置如下
const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { // 基本路径 publicPath: "./", // eslint-loader 是否在保存的时候检查 lintOnSave: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: config => { config.resolve.alias .set("@", resolve("src")) }, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require("os").cpus().length > 1, devServer: { port: 9595, // 端口号 open: true, // 自动开启浏览器 compress: true, // 开启压缩 overlay: { warnings: true, errors: true } } };
项目结构
├── src # 项目源码。开发的时候代码写在这里。 │ ├── components # 组件目录 | | |--EchiModal # 模态框组件 │ ├── App.vue # 项目根视图 │ ├── main.js # 程序主入口
部分截图
modal组件模板
使用 transition 可以为组件添加动效;对应的组件模板内容如下
{{ title }} 关闭 {{ text }}
添加组件属性及操作方法
添加组件的属性,其中duration属性如果设定的数值小于10,则会乘以1000;否则按传递的数值计算
添加样式声明
使用
感谢各位的阅读!关于“Vue如何实现模态框”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前题目:Vue如何实现模态框
文章转载:http://scyanting.com/article/ippooc.html