preliminary/src/common/RadioSelect.vue

<template>
  <div class="radio-wrap radioSelect" v-if="item">
    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list">
      <img @click="handleClick(it,index,true,1)" :src="it.select==1?check:defaultPic"> <i @click="handleClick(it,index,true,1)">有</i>&nbsp;&nbsp;&nbsp;&nbsp;
      <img @click="handleClick(it,index,true,2)" :src="it.select==2?check:defaultPic"> <i @click="handleClick(it,index,true,2)">无</i>
      <span v-if="((it.description||it.name).indexOf('${'))==-1" :class="{'check':it.select==1||it.select==2}">{{it.description||it.name}}</span>
    </p>
  </div>
</template>
<script type="text/javascript">
import icon from '../images/radio-default.png'
import checkIcon from '../images/radio-check.png'
import {patt,imageUrlPrefix,concatVal} from '@utils/tools.js'
import MultiLineInput from '../common/MultiLineInput.vue';
import OptionInp from '../common/OptionInp.vue';
  export default{
    name:'RadioSelect',
    data(){
      return{
        defaultPic:icon,
        check:checkIcon,
        datas:{},
        imgUrl:imageUrlPrefix,
      }
    },
    props:['item'],
    created(){
      // this.datas = JSON.parse(JSON.stringify(this.item));
      this.datas = this.item;
    },
    methods:{
      handleClick(it,index,flg,isHas){
        if(flg){
          document.activeElement.blur();      
          document.activeElement.scrollIntoViewIfNeeded(true);
          setTimeout(()=>{
            document.activeElement.scrollIntoViewIfNeeded(true);
          },300)
        }
        const list = this.datas;
        let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝？
        for(let i=0;i<data.length; i++){
        //   data[i].select = 0
          if(i==index){
            data[i].select = isHas;
            data[i].controlType = 8;
          }
        }
        let temp = concatVal(data,true);

        const newData = Object.assign({},this.datas,{questionDetailList:data,value:temp.value,valueP:temp.valueP})
        this.$emit("updata",newData);
      },
      inpVal(val,index){//输入框失焦处理  
        // 输入框回读
        let detailList = this.datas.questionDetailList;
        let currItem = detailList[index];
        currItem.value = val; 
        // 输入框失焦重新拼接父级的value
        let temp = concatVal(detailList);
        this.datas.value = temp.value;
        this.datas.valueP = temp.valueP;
        this.$emit("updata",this.datas);
      },
      /*inpSele(index){//输入框反选
        let detailList = this.datas.questionDetailList;console.log("单选：",index,detailList[index])
        detailList[index].select = 1;
      }*/
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.datas = JSON.parse(JSON.stringify(newVal));
        },
        deep:true
      }
    },
    components:{
      MultiLineInput,
      OptionInp
    }
  }
</script>
<style lang="less" scoped>
  .radio-wrap{
    img{
      width:100%;
    }
    .list{
      color: #7C828E;
      margin:0 .1rem .1rem 0;
      padding: .12rem .1rem;
      white-space: nowrap;
      -webkit-white-space: nowrap;
      // -webkit-box-orient: vertical;
      span {
          margin-left:1.2rem;
      }
      img{
        width: .38rem;
        vertical-align: middle;
      }
      .check{
        color: #4F50FF;
      }
    }
  }
</style>