vue悬浮表单复合组件开发详解
作者：Cardhu丶
这篇文章主要为大家详细介绍了vue悬浮表单复合组件开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue悬浮表单复合组件开发的具体代码，供大家参考，具体内容如下
组件样式
组件功能
卡片形式展示筛选条件
点击添加筛选后展示悬浮表单
表单内完成条件选择后点击保存，新增一个卡片
开发
<div class="form-label">筛选条件：</div>
<template v-for="(item, index) in fitter">
<div :key="index" class="form-input-tab">
<span :title="item">{{ item }}</span>
<span @click="deleteTab(item)" class="form-input-close"><a-icon type="close" /></span>
</div>
</template>
<a-popover
trigger="click"
placement="bottom"
:visible="visible"
@visibleChange="handleClickChange"
>
<template slot="content">
<div style="width: 420px; height: 220px; position: relative">
<TipMes message="编辑筛选"></TipMes>
<a-row>
<a-col :span="12">
<div class="select-title">字段</div>
<a-select
allowClear
style="width: 189px"
placeholder="请选择字段"
v-model="selectField"
@change="getQueryConditions"
>
<a-select-option
v-for="(item, index) in editField"
:value="item.fieldName + '//' + item.fieldType"
:key="index"
>{{ item.fieldName }}</a-select-option
>
</a-select>
</a-col>
<a-col :span="12">
<div class="select-title">运算符</div>
<a-select
allowClear
style="width: 189px"
placeholder="请选择运算符"
v-model="conditionName"
>
<a-select-option
v-for="(item, index) in condition"
:value="item.conditionName"
:key="index"
>
{{ item.conditionDesc }}
</a-select-option>
</a-select>
</a-col>
</a-row>
<div v-show="this.conditionName !== 'NotExists' && this.conditionName !== 'Exists'">
<div class="select-title">值</div>
<a-select
allowClear
style="width: 399px"
placeholder="请选择值"
v-model="conditionContent"
v-show="selectField && selectField.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-select>
<a-input
allowClear
v-model="conditionContent"
style="width: 399px"
placeholder="请输入值"
v-show="(selectField && selectField.split('//')[1] !== 'boolean') || !selectField"
/>
</div>
<div class="button-container">
<a-button style="margin-right: 10px; width: 75px" @click="cancelSearch"
>取消</a-button
>
<a-button type="primary" style="width: 75px" @click="saveSearch">保存</a-button>
</div>
</div>
</template>
<div class="add-text">
<svg-icon class="add-svg" icon-class="topic-push" />
<span style="margin-left: 22px">添加筛选</span>
</div>
</a-popover>JS:
//删除筛选条件
deleteTab(item) {
this.fitter.splice(this.fitter.indexOf(item), 1);
this.queryParams.conditionDeatils.splice(
this.queryParams.conditionDeatils.indexOf(item.split(':')[0]),
1
);
this.getSearchList();
},
//展示筛选框
handleClickChange(visible) {
this.visible = visible;
},
//取消筛选条件的添加
cancelSearch() {
this.visible = false;
this.selectField = undefined;
this.conditionName = undefined;
this.conditionContent = undefined;
this.condition = [];
},
//保存筛选条件
saveSearch() {},CSS
.form-label {
margin: 10px 0 15px 20px;
display: inline-block;
float: left;
color: rgba(0, 0, 0, 0.85);
}
.form-input-tab {
display: inline-block;
float: left;
height: 26px;
margin: 10px 4px;
padding: 0 5px 0 10px;
line-height: 22px;
color: #333333;
border: 1px solid #c6d3e3;
border-radius: 4px;
cursor: default;
}
.form-input-close {
color: #4f6785;
cursor: pointer;
margin-left: 1px;
float: right;
}
.select-title {
font-size: 14px;
color: #333333;
font-weight: 500;
margin: 8px 0 6px 0;
}
.button-container {
position: absolute;
bottom: 10px;
right: 20px;
}
.add-text {
display: inline-block;
position: relative;
margin: 10px 0 15px 10px;
color: #0f88ff;
cursor: pointer;
}
.add-svg {
width: 18px;
height: 18px;
position: absolute;
top: 3px;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。