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