这个实现比较简单,就是根据点击的相应对象显示该对象的属性设置
比如点击textarea:
比如点击下拉控件:
<template>
<div class="right-board">
<Tabs value="ctlProp" style="height:calc(100% - 2px)">
<TabPane label="组件属性" name="ctlProp" style="height:calc(100% - 40px);overflow: auto;">
<!--表格组件的属性-->
<ctl-prop-table :activeData="activeData" v-if="activeData.__config__.layout==='tableItem'"></ctl-prop-table>
<!--表格td组件的属性-->
<ctl-prop-td :activeData="activeData" v-if="activeData.__config__.layout==='tableTd'"></ctl-prop-td>
<!--span组件的属性-->
<ctl-prop-span :activeData="activeData" v-if="activeData.__config__.layout==='colLabelTitle'"></ctl-prop-span>
<!--input组件的公共属性-->
<ctl-prop-com-input @tag-change="tagChange" :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'"></ctl-prop-com-input>
<!--input组件的特有属性-->
<ctl-prop-input @iconSel="clickSelIcon" :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='input'"></ctl-prop-input>
<!--input组件的特有属性-->
<ctl-prop-textarea :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='textarea'"></ctl-prop-textarea>
<!--input组件的密码属性-->
<ctl-prop-password :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='password'">
</ctl-prop-password>
<!--input数字的属性-->
<ctl-prop-number :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='number'">
</ctl-prop-number>
<ctl-prop-select :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='select'">
</ctl-prop-select>
<ctl-prop-radio :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='radio'">
</ctl-prop-radio>
<ctl-prop-check-box :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='checkbox'">
</ctl-prop-check-box>
<ctl-prop-slider :activeData="activeData" :formConf="formConf" v-if="activeData.__config__.layout==='colFormItem'&&activeData.__config__.tagIcon==='slider'">
</ctl-prop-slider>
</TabPane>
<TabPane label="表单属性" name="formProp">
<ctl-prop-form :formConf="formConf"></ctl-prop-form>
</TabPane>
</Tabs>
<icons-dialog :visible.sync="iconsVisible" @select="setIcon" />
</div>
</template>
<script>
import {saveFormConf,saveMobileFormConf} from '@/utils/db'
import ctlPropTable from '../propCom/ctlPropTable';
import ctlPropTd from '../propCom/ctlPropTd';
import ctlPropSpan from '../propCom/ctl-prop-span';
import ctlPropForm from '../propCom/ctl-prop-form';
import ctlPropInput from '../propCom/ctl-prop-input';
import ctlPropComInput from '../propCom/ctl-prop-com-input';
import ctlPropTextarea from '../propCom/ctl-prop-textarea';
import ctlPropPassword from '../propCom/ctl-prop-password';
import ctlPropNumber from '../propCom/ctl-prop-number';
import ctlPropSelect from '../propCom/ctl-prop-select';
import ctlPropRadio from '../propCom/ctl-prop-radio';
import ctlPropCheckBox from '../propCom/ctl-prop-checkbox';
import ctlPropSlider from '../propCom/ctl-prop-slider';
import IconsDialog from '../components/IconsDialog'
export default {
components: {
IconsDialog,
ctlPropTable,
ctlPropTd,
ctlPropSpan,
ctlPropForm,
ctlPropInput,
ctlPropComInput,
ctlPropTextarea,
ctlPropPassword,ctlPropSlider,
ctlPropNumber,ctlPropSelect,ctlPropRadio,ctlPropCheckBox,
},
props: {
desType: {
type: String,
default: 'pc',
},
showField: {
type: Boolean,
default: false,
},
activeData: {
type: Object,
default: () => {
return {}
},
},
formConf: {
type: Object,
default: () => {
return {}
},
}
},
data() {
return {
iconsVisible: false,
}
},
computed: {},
watch: {
formConf: {
handler(val) {
//如果是移动端设计
if(this.desType==='mobile'){
saveMobileFormConf(val);
}else{
//如果是pc端设计
saveFormConf(val)
}
},
deep: true
}
},
methods: {
setIcon(){
this.activeData[""] = val
},
clickSelIcon(){
this.iconsVisible = true;
},
tagChange(target){
this.$emit('tag-change', target)
}
}
}
</script>
<style lang='scss'>
@import '@/styles/RightPanel';
</style>
这个代码就没啥好解释的,就是根据不同类型显示不同的组件而已。