项目基础工程文件是使用vue-cli3.0搭建的，这里不过多介绍。开发某视频剪辑软件组件系列之模态框，主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件，后期也会有更多系列教程推出。

使用命令行

$ Vue create echi-modal $ CD echi-modal $ NPM安装$ NPM运行服务$ NPM运行构建$ NPM运行lint添加vue.config.js文件，配置如下

const path=require(' path ')；函数解析(目录){返回路径。join(_ dirname，dir)；}模块。导出={ //基本路径publicPath: ' ./'，//eslit-loader是否在保存的时候检查lintOnSave: false，//webpack配置//参见https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md链网数据包：配置={ config.resolve.alias .设置(' @ '，解析(' src ')}，//生产环境是否生成sourceMap文件productionSourceMap: false，//css相关配置css: { //是否使用钢性铸铁分离插件ExtractTextPlugin extract: true，//开启半铸钢钢性铸铁(Cast Semi-Steel)源图？sourceMap: false，//css预设器配置项loaderOptions: { }，//启用所有css /预处理器文件的半铸钢钢性铸铁(Cast Semi-Steel)模块modules: false }，//如果机器有一个以上的内核需要并行：(' OS ')，则在生产构建中为巴别塔TS使用线程加载器//默认启用中央处理器().长度1、devServer: { port: 9595，//端口号open: true，//自动开启浏览器compress: true，//开启压缩重叠： {警告：为真，错误：为真} } };项目结构

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

情态的组件模板

使用过渡可以为组件添加动效；对应的组件模板内容如下

模板转换名称=' toggle ' section class=' modal ' v-show=' visible ' div class=' modal-mask ' v-show=' show mask ' @ click mask '/div section class=' modal-content modal-center ' : style=' content style ' header class=' modal-header ' : class=' { ' modal-plain ' : plain } ' v-if=' show header ' slot name=' header ' { title } }/slot span class=' closed ' v-if关闭/span/header main class=' modal-body ' slot div class=' text-tips ' { text } }/div/slot/main footer class=' modal-footer ' v-if=' show footer ' slot name=' footer ' button class=' modal-BTN modal-BTN-primary ' @ click。 stop=' onConfirm ' { confirm { btntext } }/button button class=' modal-BTN modal-BTN-BTN-default ' @ click。stop=' onClose ' { cancelbtntext } }/button/slot/添加组件属性及操作方法

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

脚本导出默认值{ name: 'EchiModal '，prop : {可视： { type :布尔值，default: false }，title: { type: String，default: '标题}，text: { type: String，default: '提示信息}，tinyBar: { type:布尔值，default: false }，确认btntext : {键入： String，default: '确定}，cancelbtntext : { type : String，default: '返回}，内容样式： {类型： Object，default: ()={} }，showClose: {类型：布尔值，default: true }，plain: { type:布尔值，default: false }，showHeader: { type:布尔值，default: true }，showFooter: { type:布尔值，default: true }、showMask: { type:布尔值，default: true }、onMask: { type:布尔值，default: false }、duration: { type: Number，default : } }、watch 3: { visible(NV){ if(NV){ this .$ emit(' on-close ')；这个。hide()；}，onConfirm() { this .$ emit(' on-confirm ')；}，hide() { this .$emit('update:visible '，false)；这个$ emit(' on-closed ')；清除超时(这。closetimer)；this.closeTimer=null}，单击mask(){ if(this。戴上这个面具。展示面具){这个。hide()；} }，closeTimerHandle(){ try { if(this。持续时间=0){ return；} const duration=(this。持续时间10)？(这个。持续时间* 1000):这个。持续时间；清除超时(这。closetimer)；这个。closetimer=setTimeout(()={ this。onclose()；},持续时间);} catch(e){ console。log(e)} } } }；/script添加样式声明

样式范围lang=' scss ' *，after， before { box-size : border-box；大纲：无；-web kit-tap-高光-color : rgba(0，0，0，0)；} $ color-tips : # 1a b394；$color-text: rgba(255，255，255，0.6)；$ color-info : # ff 9900；$ color-默认： # CCC。模态{显示：块；宽度： 100%;高度： 100%;位置：固定；top : 0；左： 0；z指数： 99；模态掩码{显示：块；宽度： 100%;高度： 100%;绝对位置：top : 0；左： 0；背景-color: rgba(0，0，0，0.5)；} .模态中心{位置：绝对值；前：名50%；左侧： 50%;transform: translate(-50%，-50%)；} .模态内容{ display : flex flex-direction :柱；最小宽度： 360 pxbox-shadow: 0 1px 8px 0 rgba(0，30，24，0.05)；背景-color : # fff；边界半径： 6px飞越：隐藏；} .modal-header {位置：相对；display : flex align-items :居中；正义-内容：中心；宽度： 100%;height : 44 px font-size : 18px；padd : 0 20px font-weight : 500；color: # fff背景色：美元颜色提示；z指数： 9999；关闭{位置：绝对值；前：名50%；右： 0；font-size : 12pxpadd : 8px 16pxborder-半径： 4px光标：指针；color : # fffttransform : translateY(-50%)；} .modal-plain {底色： rgba(245，245，245，1)；颜色：美元颜色提示；已关闭{ color : $ color-info；} } } .模体{显示器： }块；flex : 1；背景-color : # fff；飞越：隐藏；溢出-y:自动；-WebKit-溢出-滚动3360触摸；} .模态页脚{显示：块；宽度： 100%;padding: 20px 30px文本对齐：中心；背景-color : # fff；莫代尔-BTN {宽度： 80px。莫代尔-BTN {页边空白-左侧： 8px} } } } .文本提示{显示：块；宽度： 100%;font-size : 16px文本对齐：中心；color : # 333 padding : 40px 60px }。modal-BTN { display : inline-flex；padding: 0 12margin : 0align-items:居中；正义-内容：中心；font-size : 14px字体粗细： 400；高度： 32px文本对齐：中心；空白： nowrap触摸操作：操作；-web kit-tap-高光-color : rgba(0，0，0，0)；光标：指针；用户选择：无；背景-图像：无；文本装饰：无；border: 1px固体透明；边界半径： 4pxtransit : all . 3s ease : link，访问量，hover， active { text-decoration : none；} } .莫代尔-BTN-默认{背景色：美元颜色-默认；color : # fff 3360 link { color : # fff背景-color : $ color-默认值；} :已访问{ color: # fff背景-color : $ color-默认值；} :hover { color: # fff背景-color: rgba(170，170，170，85);} :active { color: # fff背景-color : $ color-默认值；}[普通] {背景-color : # fff；color : $ color-默认；border: 1px纯色$ color-默认值；} } .莫代尔-BTN-原色{底色：美元颜色-提示；color : # fff 3360 link { color : # fff背景色：美元颜色提示；} :已访问{ color: # fff背景色：美元颜色提示；} :hover { color: # fff背景-color: rgba(26，179，148，0.85)；} :active { color: # fff背景色：美元颜色提示；}[普通] {背景-color : # fff；颜色：美元颜色提示；border: 1px纯色$ tips} } .切换-输入，切换-离开-激活{ opa city 3360 0；transform : translatey(-10px)；} .切换-输入-激活切换-离开-激活{过渡：全部放松。2s；}/样式使用

模板div id=' app ' img alt=' Vue logo ' src=' http :/资产/徽标。png '/div按钮@点击。stop=' show model _ 0=true '显示默认样式/button按钮@ click。stop=' show model _ 1=true '显示素样式/button按钮@ click。stop=' show model _ 2=true '修改提示语/button按钮@ click。stop=' show model _ 3=true '自定义内容/button按钮@ click。stop=' show model _ 4=true '去除页脚/按钮按钮@click.stop='showModel_5=true '去除点击标题/按钮按钮。stop=' show model _ 6=true '设置3秒后自动关闭/button/div EchiModal :可见。sync=' show model _ 0 ' title='显示默认样式/EchiModal EchiModal :可见。sync=' show model _ 1 ' title='显示素样式普通/EchiModal EchiModal :可见。sync=' show model _ 2 ' title='修改提示语文本='哈哈哈哈哈，我把提示信息修改了/EchiModal EchiModal :可见。sync=' show model _ 3 ' title='自定义内容：内容样式=' { width : ' 600 px ' } ' img alt=' Vue logo ' src=' http :/资产/徽标。png '/EchiModal EchiModal :可见。sync=' show model _ 4 ' title='去除页脚：显示页脚=' false '/EchiModal EchiModal :可见。sync=' show model _ 5 ' title='去除header ' : show header=' false '/EchiModal EchiModal :可见。sync=' show model _ 6 ' title='设置3秒后自动关闭：持续时间=' 3 '/EchiModal/div/模板脚本从'导入EchiModal ./components/echimodal。vue '；导出默认的{ name: 'app '，components: { EchiModal }，data(){ return { show model _ 0: false，showModel_1: false，showModel_2: false，showModel_3: false，showModel_4: false，showModel_5: false，} }；/script感谢那您的观看，以上就是我为大家带来的模态框组件，本文同步更新于我的开源代码库点击前往。