Wmock开发之路1-2

前言

接下来记录一些开发中的琐碎。

正文

modal子组件form每次打开后是数据初始化

modal里form的数据是唯一的，也就是当你每次点击Modal的时候，form里面显示的内容总是上一次显示的。因此如果想要每一次点击modal都是初始化状态一般都是清空数据。因为如果是列表内每一列都需要请求modal,如果为了唯一性一般是每一列都有一个专属id的Modal.动态切换组件是一个不错的选择，但是每次切换都是对整个局部Dom进行删除添加操作。因此更优的解决方案是就对一个modal操作。每次新打开modal都是一次数据重置。 但是这里又有一个问题，就是如果一开始是清空每个Input，内容是清空了，但是如果是默认有显示placeholder内容的输入框将显示空白一片。因此最终解决方案是在form里面加一个<input type="reset" class="clearDate"> 然后将其隐藏，当每次点击的时候默认隐藏 当然说了一堆可能不是很理解我们来看个动态效果。 imgn

Vue input数组model绑定

目标场景是假设我有一组数据，需要动态渲染到节点上。数组里面的每一数据都根据其相对应的input变化而变化。在vue官方例子中有这么一个例子:


<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: '\
    <li>\
      \
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})

但是我们的数据需要直接在input里面显示，而且还需要根据需求动态删除。因此我们这里需要用到v-model 具体代码如下:


<div class="requestList" v-show="requestParam == true">
  <div class="label"  data-tooltip="新增参数" data-position="bottom left">
   <i class="circular add link icon green" @click="addRequestParam"></i>
  </div>
  <div class="ui icon input item" v-for="(param,index) in requestParamList">
    <input type="text" v-model="param.name" placeholder="参数:id, name, username">
    <div class="ui dividing header" style=" width: 120px;"></div>
    <input type="text" v-model="param.desc" placeholder="描述">
    <i class="circular remove link icon"  @click="removeParam(index)"></i>
  </div>
</div>

...
requestParamList: [],
  
  methods: {
    addRequestParam () {
      this.requestParamList.push({ name: '', desc: '' })
    },
    removeParam (index) {
      this.requestParamList.splice(index, 1)
    }
  }
Table of Contents