这次的功能优点复杂，组件嵌套了很多次，自己表达能力毕竟有限，分享出来未必能讲明白。为了保持内容的连贯性，最终决定写一下。先看效果：
关键点：
1、组件嵌套
手风琴式折叠组件，嵌套输入行，还嵌套输入行的组合（例子中的边框）
2、多角度重置
实时监测当前值跟缺省值是否一致，并提供重置功能。
3、不得不感叹，vue强大！
比上次的代码增加了一个rxinputrowgroup.vue文件，在inputs目录下。基于slot实现，关键看这个代码就好：
我要评论<template>
<div class="row-group">
<div class="rx-input-row group-header" :class = "changed ? 'changed' :''">
<div class="label"
:class="collapsed? 'collapsed' :''"
@click="click"
>
{{label}}
<div
v-if="changed"
class="reset-button"
@click="resetall"
>
{{$t('widgets.reset')}}
</div>
</div>
<div v-if="collapsed" class="group-value">
<div
v-for="row in inputvalue"
v-if="row.value"
class="value-label"
>
{{row.value}}
<span class="remove-button" @click="remove(row.value)">×</span>
</div>
</div>
</div>
<div v-if="!collapsed" class="row-group-body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'rxinputrowgroup',
props:{
label:{ default:'' },
value:{ default:[] },
},
data () {
return {
collapsed: true,
}
},
computed:{
changed(){
for(var i in this.inputvalue){
let row = this.inputvalue[i]
if(row.value !== row.defaultvalue){
return true
}
}
return false
},
inputvalue: {
get:function() {
return this.value;
},
set:function(val) {
this.$emit('input', val);
},
},
},
methods: {
click(){
this.collapsed = !this.collapsed
},
resetall(event){
for(var i in this.inputvalue){
this.inputvalue[i].value = this.inputvalue[i].defaultvalue
}
event.stoppropagation()
},
remove(value){
for(var i in this.inputvalue){
if(this.inputvalue[i].value === value){
this.inputvalue[i].value = ''
}
}
}
},
}
</script>
<style>
.row-group .group-header .label{
justify-content: space-between;
}
.row-group-body .rx-input-row .label{
justify-content: center;
}
.row-group .group-header .label{
position: relative;
}
.row-group .group-header .label::after{
position: absolute;
content: '';
width: 0;
height: 0;
top: 13px;
right: 7px;
border-width: 4px;
border-style: solid;
border-color: #c2c2c2 transparent transparent transparent;
}
.row-group .group-header .label.collapsed::after{
position: absolute;
content: '';
width: 0;
height: 0;
top: 11px;
right: 7px;
border-width: 4px;
border-style: solid;
border-color:transparent transparent transparent #c2c2c2;
}
.group-value{
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.group-value .value-label{
display: flex;
flex-flow: row;
padding: 0 4px;
height: 24px;
align-items: center;
justify-content: space-between;
background: rgba(255,255,255,0.1);
border-radius: 3px;
margin: 1px;
}
.group-value .value-label .remove-button{
margin-left:2px;
cursor: pointer;
}
</style>
调用处代码：
<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>
<rxinputrowgroup
v-for="(row, i) in inputvalue.rows"
v-if="row.isrowgroup"
:key="i"
:label = "row.label"
v-model = "row.rows"
>
<rxinputrow
v-for="(subrow, j) in row.rows"
:key="j"
:label = "subrow.label"
:inputname = "subrow.inputname"
:inputprops = "subrow.props"
:defaultvalue = "subrow.defaultvalue"
v-model = "subrow.value"
>
</rxinputrow>
</rxinputrowgroup>
<rxinputrow
v-else="row.isrowgroup"
:key="i"
:label = "row.label"
:inputname = "row.inputname"
:inputprops = "row.props"
:defaultvalue = "row.defaultvalue"
v-model = "row.value"
>
</rxinputrow>
</template>
</collapsibleitem>
</template>
累趴了，睡觉去了。
详细代码，请参考github：
若有有问题，请留言交流。
如对本文有疑问， 点击进行留言回复！！
【第138期】 游戏策划：应聘前HR要求把游戏玩到30级，怎么玩？
网友评论