项目需求:要求如果内容全部是文字则这样!展示
如果里面只要包含了图片或视频这样全部宽100%展示
这个就要求写两套样式分别展示
难点在于所有内容是富文本展示的,也没有字段来控制是否是文字或者图片视频
这里我实现的思路是首先获取数据中是否包含图片或者视频的标签及相关的字符是否存在如果不包含就返回-1,包含就添加一个fold=true,来判断宽度是否是100%展示
t.optionList.forEach((item,index)=>{
if(item.formatText.indexOf('[视频]')!==-1 ||item.formatText.indexOf('[图片]')!==-1 || item.text.indexOf('<img')!==-1|| item.text.indexOf('<video')!==-1){
t.fold=true
}
})
如果有图片视频就说明有fold=true
通过下列方式判断 :class="[item.fold==true?‘option-div1’:‘option-div’]"
<view :class="[item.fold==true?'option-div1':'option-div']">
<view class="option-item-div">
<view class="option-item-row" v-for="(itemss, indexss) in questionMatrixRow.optionList"
:key="indexss" :data-idx="indexss" :data-index="indexs" :data-id="itemss.id"
:data-questionid="item.id" :class="{ active: itemss.isChecked }"
@click="matrixRadioSubjuetSeleFunc">
<view class="bl ct option ">
<text class="matrix-checkbox-pagesapn" v-html="itemss.text"></text>
</view>
</view>
</view>
</view>