广西建网站wordpress 文章目录插件免费版

当前位置： 首页 > news >正文

广西建网站,wordpress 文章目录插件免费版,南京建设网站公司网站,我的长沙app是哪里开发的组件用于创建和编辑复杂的条件规则#xff0c;支持添加、删除条件和子条件#xff0c;以及选择不同的条件类型。 可实现json数据和页面显示的转换。 代码实现 #xff1a; index.vue: templatediv classallany-containerdiv classco…组件用于创建和编辑复杂的条件规则支持添加、删除条件和子条件以及选择不同的条件类型。 可实现json数据和页面显示的转换。 代码实现 index.vue: templatediv classallany-containerdiv classcontrol-barel-select v-modelpipe.condition stylewidth: 200px; margin-right: 16px; :disableddisabledel-option label满足以下所有条件 valueall/el-option label满足以下任一条件 valueany/el-option label不包含以下条件 valuenot//el-selectel-button v-if!disabled typeprimary clickaddCondition(condition)添加条件/el-buttonel-button v-if!disabled typesuccess clickaddCondition(all_any)添加子条件/el-buttonel-button v-if !disabled typedanger :iconDelete circle clickdelSelf//divdiv classconditions-wrapper!– 侧边显示条 –div :classconditions-wrapper-\({pipe.condition}/divdiv classconditions-wrapper--conditionsdiv v-for(child, idx) in pipe.children :keyidx classconditions-wrapper--conditionbiz-rule-all-any v-ifchild.type all_any :pipechild :attrOptionsattrOptions:disableddisabled delRulehandleDelRule(idx,child)/biz-rule-condition v-else-ifchild.type condition :pipechild :attrOptionsattrOptions:disableddisabled delRulehandleDelCondition(idx,child)//div/div/div/div /templatescript setup import {ref, watch} from vue; import BizRuleCondition from ./BizRuleCondition.vue; import {Delete} from element-plus/icons-vue; import {deepClone} from /utils.js;defineOptions({name: BizRuleAllAny })const emit defineEmits([delRule]);const props defineProps({pipe: {type: Object,default: () ({type: all_any,condition: all,children: [],})},attrOptions: {type: Array,default: () {return []}},disabled: {type: Boolean,default: false} }); const pipe ref(props.pipe);function addCondition(type) {if (type all_any) {pipe.value.children.push({type: all_any,condition: all,children: [],});} else if (type condition) {pipe.value.children.push({type: condition,name: ,operator: eq,value: ,val_type: string,});} }function delSelf() {emit(delRule) }// 删除条件组 const handleDelRule (idx,child) {pipe.value.children.splice(idx, 1); }// 删除条件组中的子数据 const handleDelCondition (idx,child) {pipe.value.children.splice(idx, 1); }/scriptstyle scoped langscss.allany-container {.control-bar {display: flex;flex-direction: row;}.conditions-wrapper {display: flex;flex-direction: row;}.conditions-wrapper-all {width: 4px;margin: 5px 20px 0;border-radius: 5px;transition: background-color 400ms;background-color: #67C23A;:hover {background-color: #529b2e;}}.conditions-wrapper-any {width: 4px;margin: 5px 20px 0;border-radius: 5px;transition: background-color 400ms;background-color: #E6A23C;:hover {background-color: #b88230;}}.conditions-wrapper-not {width: 4px;margin: 5px 20px 0;border-radius: 5px;transition: background-color 400ms;background-color: rgb(245, 245, 245);:hover {background-color: rgb(144, 147, 153);}}.conditions-wrapper--conditions {display: flex;flex-direction: column;}.conditions-wrapper--condition {padding-top: 15px;} }/styleBizRuleCondition.vue: templatediv classbizrulecondition-containerel-select v-modelpipe.name placeholder字段名称 stylewidth: 150px; margin-right: 16px; clearable :disableddisabledel-option v-foritem in attrOptions :keyitem.value :labelitem.label :valueitem.value//el-selectel-select v-modelpipe.operator stylewidth: 90px; margin-right: 16px; :disableddisabledel-option label valueeq/el-option label! valueneq/el-option label valuelt/el-option label valuegt/el-option label valuelte/el-option label valuegte/el-option labelin valuein/el-option labelnot in valuenot_in//el-selectel-badge:valuepipe.val_type string ? 字符串 : 数字:typepipe.val_type string ? info : successclick.nativeswitchVarType(\)event, pipe)stylemargin-right: 50px;:disableddisabledel-inputv-modelpipe.valueplaceholder字段值stylewidth: 150px;clearable:disableddisabled//el-badgeel-button typedanger :iconDelete circle clickdelSelf :disableddisabled//div /templatescript setup import {ref, defineProps, watch} from vue; import {Delete} from element-plus/icons-vue; import {deepClone} from /utils.js;const emit defineEmits([delRule]);const props defineProps({pipe: Object,attrOptions:Array,disabled:Boolean }); const pipe ref({});watch(() props.pipe, (newData) {if (!newData) returnpipe.value deepClone(newData) }, {deep: true,immediate: true })function switchVarType(e, kv) {if (String(e.target.tagName).toUpperCase() SUP) {kv.val_type kv.val_type number ? string : number;} }function delSelf() {emit(delRule) } /scriptstyle langscss scoped .bizrulecondition-container {display: flex;flex-direction: row;.el-badgecontent {transition: 400ms;user-select: none;}.el-badgecontent:hover {cursor: pointer;} } /styleBizRuleAdapter.js: templatediv classbizrulecondition-containerel-select v-modelpipe.name placeholder字段名称 stylewidth: 150px; margin-right: 16px; clearable :disableddisabledel-option v-foritem in attrOptions :keyitem.value :labelitem.label :valueitem.value//el-selectel-select v-modelpipe.operator stylewidth: 90px; margin-right: 16px; :disableddisabledel-option label valueeq/el-option label! valueneq/el-option label valuelt/el-option label valuegt/el-option label valuelte/el-option label valuegte/el-option labelin valuein/el-option labelnot in valuenot_in//el-selectel-badge:valuepipe.val_type string ? 字符串 : 数字:typepipe.val_type string ? info : successclick.nativeswitchVarType($event, pipe)stylemargin-right: 50px;:disableddisabledel-inputv-modelpipe.valueplaceholder字段值stylewidth: 150px;clearable:disableddisabled//el-badgeel-button typedanger :iconDelete circle clickdelSelf :disableddisabled//div /templatescript setup import {ref, defineProps, watch} from vue; import {Delete} from element-plus/icons-vue; import {deepClone} from /utils.js;const emit defineEmits([delRule]);const props defineProps({pipe: Object,attrOptions:Array,disabled:Boolean }); const pipe ref({});watch(() props.pipe, (newData) {if (!newData) returnpipe.value deepClone(newData) }, {deep: true,immediate: true })function switchVarType(e, kv) {if (String(e.target.tagName).toUpperCase() SUP) {kv.val_type kv.val_type number ? string : number;} }function delSelf() {emit(delRule) } /scriptstyle langscss scoped .bizrulecondition-container {display: flex;flex-direction: row;.el-badgecontent {transition: 400ms;user-select: none;}.el-badgecontent:hover {cursor: pointer;} } /style