vue 自定义表单组件,vue单页应用详解
这篇文章主要为大家详细介绍了某视频剪辑软件悬浮表单复合组件开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件悬浮表单复合组件开发的具体代码，供大家参考，具体内容如下
组件样式
组件功能
卡片形式展示筛选条件
点击添加筛选后展示悬浮表单
表单内完成条件选择后点击保存，新增一个卡片
开发
div class=表单标签筛选条件：/div
模板v-for=(item，index) in fitter
div:key= index class= form-input-tab
span:title= item“{ item } }/span
span @ click=删除选项卡(项目) class= form-input-close a-icon type= close //span
/div
/模板
一个爆米花
触发器=点击
位置=底部
:visible=visible
@ visible change= handleClickChange
模板槽=内容
div style= width:420 px；高度：220像素位置：相对
提示消息=编辑筛选/TipMes
实际行数
a列：span=12
div class=选择标题字段/div
水青庭
allowClear
style=width: 189px
占位符=请选择字段
v-model=selectField
@change=getQueryConditions
选择选项
v-for=(item，index) in editField
:value= item。字段名“//”项。字段类型
:key=index
{ {项目。字段名称} }/a-select-option
/a-选择
/a列
a列：span=12
div class=选择标题运算符/div
水青庭
allowClear
style=width: 189px
占位符=请选择运算符
v-model=conditionName
选择选项
条件中的v-for=(项目，索引)
:value=item.conditionName
:key=index
{{ item.conditionDesc }}
/a-选择-选项
/a-选择
/a列
/a行
div v-show=this.conditionName！==不存在这个。条件名！==存在
div class=选择标题值/div
水青庭
allowClear
style=width: 399px
占位符=请选择值
v-model=条件内容
v-show=选择字段选择字段。split(//)[1]=== boolean
a-select-option value= true :key= 0 true/a-select-option
a-select-option value= false :key= 1 false/a-select-option
/a-选择
a输入
allowClear
v-model=条件内容
style=width: 399px
占位符=请输入值
v-show=(选择字段选择字段。split(//)[1]！==boolean) ！选择字段
/
/div
div class=按钮容器
a-button style= margin-right:10px；宽度：75px @click=cancelSearch
取消/a按钮
a-button type= primary style= width:75px @ click=保存搜索保存/a按钮
/div
/div
/模板
div class=添加文本
SVG-icon class= add-SVG icon-class= topic-push /
span style=margin-left: 22px 添加筛选/span
/div
/a-popover
JS:
//删除筛选条件
删除标签（项目){
这个。更适合。拼接(这个。更适合。(项目)的索引，1)；
这个。查询参数。条件atils。拼接(
这个。查询参数。条件说明。(项目的索引。split(:)[0])，
一
);
这个。get search list()；
},
//展示筛选框
handleClickChange(可见){
可见的
},
//取消筛选条件的添加
cancelSearch() {
this.visible=false
this.selectField=undefined
this.conditionName=undefined
这个。条件内容=未定义；
这个。条件=[]；
},
//保存筛选条件
saveSearch() {}，
半铸钢钢性铸铁(铸造半钢)。表单标签{
边距：10px 0 15px 20px
显示：内嵌-块；
浮动：左；
颜色：rgba(0，0，0，0.85)；
}。表单-输入-选项卡{
显示：内嵌-块；
浮动：左；
高度：26px
边距：10像素4像素
填充：0 5px 0 10px
行高：22px
颜色：# 333333;
边框：1px实心# c6d3e3
边框-半径：4px
光标：默认；
}。表单-输入-关闭{
颜色：# 4f6785
光标：指针；
左边距：1px
浮动：对；
}。选择-标题{
字体大小：14px
颜色：# 333333;
字体粗细：500;
边距：8px 0 6px 0
}。按钮容器{
位置：绝对；
底部：10px
右：20px
}。添加文本{
显示：内嵌-块；
位置：相对；
边距：10px 0 15px 10px
颜色：# 0 f 88 ff
光标：指针；
}。add-svg {
宽度：18px
高度：18px
位置：绝对；
top:3px；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。