VUE实现Studio管理后台（十）：OptionBox，一个综合属性输入界面，可以级联重置

为了便于阅读代码，已经把测试数据分离出来，放在了mock目录下：

阅读代码的话，稍微留意一下就好。本次介绍rxeditor界面最重要的部分，属性输入组件，该组件可以显示是否有数据被修改，还可以批量重置到缺省值，效果如下：

这个界面是动态构建的，根据json数据，动态构建输入界面。我之前做过一个php larvel+vuetify的框架，也是用这个原理，php段代码构造json数据，vue代码根据数据动态构造输入界面。我用那个框架做了好几个网站和公司自己的订单管理系统，但是代码需要优化的地方不少，我自己用起来很方便，离开源发布还有些距离，框架的名字叫vular，github地址：https://github.com/vularsoft/vular，感兴趣的可以看看，等完成rxeditor，就继续这个框架，给自己加的工作太多了，时间不够。
本次实现的要比这个框架简单好多，原理相同。要理解代码，需要明白页面元素的结构及命名：

整个输入组件叫optionbox，这个控件可以输入各种属性。optionbox下包含若干optiongroup，每个optiongroup就是一个手风琴折叠的子项，optionbox是一个手风琴式折叠控件（该控件的实现方式，请参看以前的文章），optiongroup下包含多个rxinputrow，每个rxinputrow包含一个输入控件跟一个标签，optionbox根据json数据动态构建，json数据结构如下：

[
  {
    label:'row选项',
    rows:[
      {
        label:'gutters',
        value:'no-gutters',
        defaultvalue:'no-gutters',
        inputname:'rxswitch',
        props:{
          onvalue:'no-gutters',
          offvalue:'',
        },
      },
      {
        label:'测试',
        value:'off',
        defaultvalue:'off',
        inputname:'rxswitch',
        props:{
          onvalue:'on',
          offvalue:'off',
        },
      },
    ],
  },

  {
    label:'文本选项',
    rows:[
      {
        label:'测试3',
        value:'no-gutters',
        defaultvalue:'no-gutters',
        inputname:'rxswitch',
        props:{
          onvalue:'no-gutters',
          offvalue:'',
        },
      },
      {
        label:'测试4',
        value:'off',
        defaultvalue:'off',
        inputname:'rxswitch',
        props:{
          onvalue:'on',
          offvalue:'off',
        },
      },
    ],
  },
  {
    label:'bootstrap工具',
  },
]

 

到目前为止，我们只实现了一个输入控件:rxswitch，所以测试数据中只有这一个控件，后面会逐步添加下拉列表等其它控件，到时也会更新测试数据。
代码目录结构：

inputs目录下的rxswitch.vue是以前实现的，rxselect.vue只是个备忘文件，下次实现。accordion目录下是以前实现的手风琴式折叠组件，这次要用到。剩下的文件就是本次要实现的。
*惯，先看optionbox的调用代码，看看如何使用这个组件：

<optionbox v-model="options"></optionbox>

非常简单，用v-model的方式传入一个json数据。它的实现代码：

<template>
  <simpleaccordion>
    <optiongroup v-for="(optiongroup, i) in inputvalue" :key="i" v-model="inputvalue[i]">
    </optiongroup>
  </simpleaccordion>
</template>

<script>
import simpleaccordion from '../accordion/simpleaccordion.vue'
import optiongroup from './optiongroup.vue'

export default {
  name: 'optionbox',
  components:{
    simpleaccordion,
    optiongroup
  },
  props:{
    value:{ default:[] }, 
  },
  computed:{
    inputvalue: {
      get:function() {
        return this.value;
      },
      set:function(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
  },
}
</script>

 

使用一个simpleaccordion（手风琴式折叠组件）实现，内部循环调用optiongroup。给optiongroup传入的v-model，是一个row数据列表。它的实现代码：

<template>
  <collapsibleitem class="option-item" @itemclick = "itemclick">
    <template #heading>
      {{inputvalue.label}} 
      <div v-if="changed" class="reset-button" @click="resetall">{{$t('widgets.reset')}}</div>
    </template>
    <template #body>
      <rxinputrow 
        v-for="(row, i) in inputvalue.rows" 
        :key="i" 
        :label = "row.label"
        :inputname = "row.inputname"
        :inputprops = "row.props"
        :defaultvalue = "row.defaultvalue"
        v-model = "row.value"
      >
      </rxinputrow>
    </template>
  </collapsibleitem>
</template>

<script>
import collapsibleitem from '../accordion/collapsibleitem.vue'
import rxinputrow from '../inputs/rxinputrow.vue'

export default {
  name: 'optiongroup',
  components:{
    collapsibleitem,
    rxinputrow
  },
  props:{
    value:{ default:{} }, 
  },
  computed:{
    inputvalue: {
      get:function() {
        return this.value;
      },
      set:function(val) {
        this.$emit('input', val);
      },
    },

    changed(){
      for(var i in this.inputvalue.rows){
        let row = this.inputvalue.rows[i]
        if(row.value !== row.defaultvalue){
          return true
        }
      }
      return false
    }
  },
  methods: {
    itemclick(item){
      this.$emit('itemclick', item)
    },

    resetall(event){
      for(var i in this.inputvalue.rows){
        this.inputvalue.rows[i].value = this.inputvalue.rows[i].defaultvalue
      }
      event.stoppropagation()
    }
  },
}
</script>

<style>
.option-item.collapsible-item .item-heading{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.reset-button{
  margin-right:20px;
  color: #bbb;
}
</style>

它使用collapsibleitem 实现，所以需要把collapsibleitem 的事件通过$emit方法转发给父组件，要不然手风琴折叠就不灵了。

根据计算属性changed，确定是否显示重置按钮，如果有数据跟缺省值不一样，chenged就是true，反之为false。
重置按钮的处理事件resetall，它把所有的值都设置成默认值。不得不感叹vue双向数据绑定的强大，rxeditor第一个版本没有使用vue，用的是原生js，类似功能实现起来非常复杂。
样式随状态改变，具体参看css就好。
该组件循环调用rxinputrow ，注意他的传入参数。
rxinputrow 代码：

<template>
  <div class="rx-input-row" :class = "changed ? 'changed' :''">
    <div class="label">{{label}}</div>
    <component 
      :is = "inputname"
      v-bind = "inputprops"
      v-model = "inputvalue"
    ></component>
  </div>
</template>

<script>
import rxswitch from './rxswitch.vue'

export default {
  name: 'rxinputrow',
  props:{
    label:{ default:'' }, 
    defaultvalue:{ default:'' }, 
    value:{ default:'' }, 
    inputprops:{ default:'' },
    inputname:{defalut:'input'},
  },
  components:{
    rxswitch,
  },
  data () {
    return {
    }
  },
  computed:{
    changed(){
      return this.inputvalue !== this.defaultvalue
    },

    inputvalue: {
      get:function() {
        return this.value;
      },
      set:function(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
  },
}
</script>

<style>
  .rx-input-row{
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .rx-input-row .label{
    display: flex;
    height: 30px;
    align-items: center;
    padding-left: 6px;
    color:#c2c2c2;
    font-size: 12px;
    width: 100px;
  }
  .rx-input-row.changed .label{
    color:#7c9161;
  }
</style>

 

如果输入值有变化，也是通过changed计算属性通知界面，css用绿色字体显示标签。
通过vue的component 动态绑定组件，可以省很多代码量，一定要记住的是，它使用的组件要注册。
这段代码：

<component 
  :is = "inputname"
  v-bind = "inputprops"
  v-model = "inputvalue"
></component>

 

就相当于

<rxswitch
  v-if = "inputname === 'rxswitch'"
  onvalue= "inputprops.onvalue"
  offvalue= "inputprops.offvalue"
  v-model = "inputvalue"
></rxswitch>
<rxselect
  v-if = "inputname === 'rxselect'"
  list= "inputprops.list"
  v-model = "inputvalue"
></rxselect>
  ......

 

这样的方式，需要大量的if判断，代码不好看。我在vular框架里，因为要通过php代码控制每一个vuetify细节，component 动态组件，也有些不方便，我直接做了一个自定义组件，通过重写render方法实现，太深入底层了。在这里，能用这样的方式完美实现，已经很幸福了。
今天作文就写到这里，感谢耐心阅读，详细代码，请参考github：https://github.com/vularsoft/studio-ui
若有有问题，请留言交流。