ivew+vue实现表单设计器--不同控件展示不同属性（六）

这个实现比较简单，就是根据点击的相应对象显示该对象的属性设置
比如点击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>

这个代码就没啥好解释的，就是根据不同类型显示不同的组件而已。