choiceoptinfo:["<p>6时30分</p>", "<p>6时50分</p>", "<p>6时</p>"] 有这样一个数组。他是一个题目的选项。
我们要写成下面这个图片的样式。字数比较少的时候,一行两列。字数多的时候一行一个。
首先定义i一个数组ABCDEFG。因为我这里直接就知道他最多时五个,所以我设置的choiceoptinfoIndex:['A','B','C','D','E']
<div class="pt2" >
<div class="selectoption" :class="{'selectoption1':item.replace(/<[^<>]+>/g,'').length>20}" v-for="(item,key) in choiceoptinfo" :key="item.tlid" v-html="'<em>'+choiceoptinfoIndex.slice(0,choiceoptinfo.length)[key]+'、</em>'+item"></div>
</div>
.pt2 .selectoption{width:48%;display: inline-block;position:relative;}
.pt2 .selectoption.selectoption1{width:100%;display: inline-block;}
.pt2 .selectoption em{font-style: normal;position:absolute;top:13px;}
.pt2 .selectoption p{display:inline-block; text-align: left;padding-left:20px}
.pt2 .selectoption.selectoption1 p{width:96%; }
分析一下上面的代码
1/
:class="{'selectoption1':item.replace(/<[^<>]+>/g,'').length>20}" 这是个动态的class。里面时item.replace(/<[^<>]+>/g,'')正则当去掉了html标签以后超过20个字符的时候selectoption1为真。就采用.pt2 .selectoption.selectoption1的样式,也就是选项就换行了,一行一个。
2/
v-html="'<em>'+choiceoptinfoIndex.slice(0,choiceoptinfo.length)[key]+'、</em>'+item" 这个比较复杂。
解析出来是这样的。A这个序号有个em标签包着。紧接着就是那个choiceoptinfo里面的数组元素。
choiceoptinfoIndex.slice(0,choiceoptinfo.length)截取长度和choiceoptinfo长度一样的,这样就能一一对应,几个数组前面就是几个英语序号了。
3/
样式的定义也是一个难点,要使用绝对和相对定位。否则可能导致
像这种的c序号的样式并不是在行的上面的最前面的。