preliminary/src/common/Radio.vue

<template>
  <div v-if="item" class="radio-wrap bgques clearfix" :style="getStyle(detail,slide)">
    <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,true)"> -->
    <div v-for="(it,index) in datas.questionDetailList" :key="it.id" :class="['list',{'block':((it.description||it.name).indexOf('${'))!=-1}]">
      <!-- <img :src="it.select==1?check:defaultPic"> -->
      <span v-if="((it.description||it.name).indexOf('${'))==-1" :class="['radioCheck',{'check':it.select==1}]" @click="handleClick(it,index,true)">{{it.description||it.name}}</span>
      <OptionInp v-else :item="it" @handleInp="inpVal($event,index)" @handleSelec="handleClick(it,index,false,true)"/>
    </div>
  </div>
</template>
<script type="text/javascript">
import icon from '../images/radio-default.png';
import checkIcon from '../images/radio-check.png';
import {patt,concatVal} from '@utils/tools.js';
import MultiLineInput from '../common/MultiLineInput.vue';
import OptionInp from '../common/OptionInp.vue';
  export default{
    name:'Radio',
    props:{
      item:{
        default:''
      },
      slide:{
        default:false,
        type:Boolean
      },
      detail:{
        default:2,
        type:Number||String
      }
    },
    data(){
      return{
        defaultPic:icon,
        check:checkIcon,
        datas:{}
      }
    },
    created(){
      // this.datas = JSON.parse(JSON.stringify(this.item));
      this.datas = this.item;
    },
    methods:{
      getStyle(detail,slide){
        if(detail == 1){
          if(slide){
            return {'display':'block','background-color': '#F9F9F9'}
          }else{
            return {'display':'none'}
          }
        }else{
          return {'display':'block'}
        }
      },
      handleClick(it,index,flg,ipt){
        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); //数组深拷贝
        if(ipt){//输入框单选，输入了内容才算选中,删除内容算取消
          for(let i=0;i<data.length; i++){
            if(i==index){
              data[i].select=data[i].value?1:0;
            }else{
              data[i].select = 0
            }
          }
        }else{
          for(let i=0;i<data.length; i++){
            if(i==index){
              data[i].select = data[i].select==1?0:1;
            }else{
              data[i].select = 0
            }
          }
        }
        let temp = concatVal(data);
        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);
      },
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.datas = JSON.parse(JSON.stringify(newVal));
        },
        deep:true
      }
    },
    components:{
      MultiLineInput,
      OptionInp
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .radio-wrap{
    .bgques;
    img{
      width:100%;
    }
    .block{
      width:100%;
    }
    .list{
      color: #colors[text];
      margin:0 .05rem;
      padding: .05rem;
      display: inline-block;
      white-space: nowrap;
      // overflow-x: hidden;
      float: left;
      // -webkit-white-space: nowrap;
      // -webkit-box-orient: vertical;
      img{
        width: .38rem;
        vertical-align: middle;
      }
      >span{
        white-space: normal;
        vertical-align: middle;
      }
      .radioCheck {
        display: inline-block;
        line-height: .66rem;
        // min-width: 2rem;
        // text-align: center;
        padding:0 .2rem;
        box-sizing: border-box;
        border-radius: .38rem;
        border: 1px solid #dfe0e4;
        background-color: #ffffff;
      }
      .check{
        color: #fff;
        background-color: #6678FF;
        border: 1px solid #6678FF;
      }
      .iptCheck {
        color: #colors[theme];
      }
    }
  }
</style>