123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <template>
- <div v-if="item" class="radio-wrap bgques" :style="getStyle(detail,slide)">
- <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,true)"> -->
- <p 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)"/>
- </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:'Radio',
- props:{
- item:{
- default:''
- },
- slide:{
- default:false,
- type:Boolean
- },
- detail:{
- default:2,
- type:Number||String
- }
- },
- data(){
- return{
- defaultPic:icon,
- check:checkIcon,
- datas:{},
- imgUrl:imageUrlPrefix,
- }
- },
- 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 .1rem .07rem 0;
- padding: .1rem .1rem .1rem 0;
- display: inline-block;
- white-space: nowrap;
- overflow-x: hidden;
- // -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;
- }
- .check{
- color: #colors[theme];
- border: 1px solid #colors[theme];
- }
- .iptCheck {
- color: #colors[theme];
- }
- }
- }
- </style>
|