vue懸浮表單復(fù)合組件開發(fā)詳解

更新時(shí)間：2022年04月11日 15:34:45 作者：Cardhu丶

這篇文章主要為大家詳細(xì)介紹了vue懸浮表單復(fù)合組件開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue懸浮表單復(fù)合組件開發(fā)的具體代碼，供大家參考，具體內(nèi)容如下

組件樣式

組件功能

卡片形式展示篩選條件
點(diǎn)擊添加篩選后展示懸浮表單
表單內(nèi)完成條件選擇后點(diǎn)擊保存，新增一個(gè)卡片

開發(fā)

<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">運(yùn)算符</div>
? ? ? ? ? <a-select
? ? ? ? ? ? allowClear
? ? ? ? ? ? style="width: 189px"
? ? ? ? ? ? placeholder="請選擇運(yùn)算符"
? ? ? ? ? ? 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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: