elementor 弹窗,vue使用element-ui组件
这篇文章主要介绍了某视频剪辑软件元素通用弹窗的实现（新增编辑),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了某视频剪辑软件元素通用弹窗的实现（新增编辑),分享给大家，具体如下：
组件模板
El-dialog:title= title :可见。sync= dialog show :close-on-click-modal= false
div class= ym-common-dialog :class= custom class
div v-for=(col，index) in cols
spanem v-if=！列是必需的 */em { {列名} }/span
模板v-if=col.type===text
div{{submitData[col.key]}}/div
/模板
模板v-if=col.type===输入
输入类型= text v-model= submit data[col . key]:placeholder= 请输入列名
/模板
模板v-if=col.type===radio
div class=flexX
El-radio v-for= radio in col . data v-model= submit data[col . key]:label= radio。标签为“{ radio。name } }/El-radio
/div
/模板
模板v-if=col.type===select
El-select v-model= submit data[col . key] placeholder=请选择
埃尔选项
v-for=列数据中的选项
:key=option.value
:label=option.label
:value=option.value
/el选项
/el-select
/模板
/div
/div
span slot=页脚 class=对话框-页脚
El-button @ click= dialog show=false 取消/el-button
El-button type= primary @ click= confirm 确定/el-button
/span
/el-dialog
弹窗的内容根据传入的数据去渲染，数据格式如下
列：[{
名称： 输入框，
关键字： ccc ，//提交时对应的字段
类型："输入",//类型
isRequire: true //是否必填
}, {
名称： 单选框，
关键：“aaa”，
类型："收音机",
数据：[{
标签:"1",
名称： 长城
}, {
标签:"2",
名称： 长安
}],
isRequire: true
}, {
名称： 下拉框，
关键字：“bbb”，
类型：选择，
数据：[{
值： 选项1,
标签: 黄金糕
}, {
值： 选项2,
标签: 双皮奶
}],
isRequire: true
}],
组件数据和小道具
data() {
返回{
提交数据：{},//提交数据集合
dialogShow: false
}
},
道具：{
//弹窗显示/隐藏
对话框可见：{
类型：数量，
默认值：0
},
//弹窗标题
标题：字符串，
//自定义样式
自定义类别：字符串，
//数据列
列：{
类型：数组，
默认值：()=[]
},
//编辑时传入初始值
数据：{
类型：对象，
默认值：()={}
}
},
组件数据的监听
观察：{
对话框可见(瓦尔){
如果(值0) {
this.dialogShow=true
}
},
数据：{
处理器(瓦尔){
this.submitData=val
},
即时：正确
},
提交数据：{
//应对切换单选框隐藏其他元素的问题
//父组件监听到单选框的值变化时，修改关口的值，即可实现元素的隐藏与显示
处理程序(){
这个emit(change ，this.submitData)
},
深：真的
}
}
数据提交以及验证
确认(){
//验证必填项
设是必须=这个。科尔斯。过滤器(item=item。是必需).map(item=item.key)
Object.keys(this.submitData).forEach(key={
let index=isMust.indexOf(key)
如果((index-1)这个。提交数据[key]！== !this.submitData[key]) {
isMust.splice(索引，1)
}
})
if (isMust.length 0) {
showDefaultTips(请注意必填项!, , 3)
返回
}
这个emit(complete ，this.submitData)
this.dialogShow=false
}
代码在此
到此这篇关于某视频剪辑软件元素通用弹窗的实现（新增编辑)的文章就介绍到这了，更多相关某视频剪辑软件元素弹窗内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。