Radio.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <div v-if="item" class="radio-wrap bgques" :style="getStyle(detail,slide)">
  3. <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,true)"> -->
  4. <p v-for="(it,index) in datas.questionDetailList" :key="it.id" :class="['list',{'block':((it.description||it.name).indexOf('${'))!=-1}]">
  5. <!-- <img :src="it.select==1?check:defaultPic"> -->
  6. <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>
  7. <OptionInp v-else :item="it" @handleInp="inpVal($event,index)" @handleSelec="handleClick(it,index,false,true)"/>
  8. </p>
  9. </div>
  10. </template>
  11. <script type="text/javascript">
  12. import icon from '../images/radio-default.png'
  13. import checkIcon from '../images/radio-check.png'
  14. import {patt,imageUrlPrefix,concatVal} from '@utils/tools.js'
  15. import MultiLineInput from '../common/MultiLineInput.vue';
  16. import OptionInp from '../common/OptionInp.vue';
  17. export default{
  18. name:'Radio',
  19. props:{
  20. item:{
  21. default:''
  22. },
  23. slide:{
  24. default:false,
  25. type:Boolean
  26. },
  27. detail:{
  28. default:2,
  29. type:Number||String
  30. }
  31. },
  32. data(){
  33. return{
  34. defaultPic:icon,
  35. check:checkIcon,
  36. datas:{},
  37. imgUrl:imageUrlPrefix,
  38. }
  39. },
  40. created(){
  41. // this.datas = JSON.parse(JSON.stringify(this.item));
  42. this.datas = this.item;
  43. },
  44. methods:{
  45. getStyle(detail,slide){
  46. if(detail == 1){
  47. if(slide){
  48. return {'display':'block','background-color': '#F9F9F9'}
  49. }else{
  50. return {'display':'none'}
  51. }
  52. }else{
  53. return {'display':'block'}
  54. }
  55. },
  56. handleClick(it,index,flg,ipt){
  57. if(flg){
  58. document.activeElement.blur();
  59. document.activeElement.scrollIntoViewIfNeeded(true);
  60. setTimeout(()=>{
  61. document.activeElement.scrollIntoViewIfNeeded(true);
  62. },300)
  63. }
  64. const list = this.datas;
  65. let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝
  66. if(ipt){//输入框单选,输入了内容才算选中,删除内容算取消
  67. for(let i=0;i<data.length; i++){
  68. if(i==index){
  69. data[i].select=data[i].value?1:0;
  70. }else{
  71. data[i].select = 0
  72. }
  73. }
  74. }else{
  75. for(let i=0;i<data.length; i++){
  76. if(i==index){
  77. data[i].select = data[i].select==1?0:1;
  78. }else{
  79. data[i].select = 0
  80. }
  81. }
  82. }
  83. let temp = concatVal(data);
  84. const newData = Object.assign({},this.datas,{questionDetailList:data,value:temp.value,valueP:temp.valueP})
  85. this.$emit("updata",newData);
  86. },
  87. inpVal(val,index){//输入框失焦处理
  88. // 输入框回读
  89. let detailList = this.datas.questionDetailList;
  90. let currItem = detailList[index];
  91. currItem.value = val;
  92. // 输入框失焦重新拼接父级的value
  93. let temp = concatVal(detailList);
  94. this.datas.value = temp.value;
  95. this.datas.valueP = temp.valueP;
  96. this.$emit("updata",this.datas);
  97. },
  98. },
  99. watch:{
  100. item:{
  101. handler(newVal,oldVal){
  102. this.datas = JSON.parse(JSON.stringify(newVal));
  103. },
  104. deep:true
  105. }
  106. },
  107. components:{
  108. MultiLineInput,
  109. OptionInp
  110. }
  111. }
  112. </script>
  113. <style lang="less" scoped>
  114. @import '../less/base.less';
  115. .radio-wrap{
  116. .bgques;
  117. img{
  118. width:100%;
  119. }
  120. .block{
  121. width:100%;
  122. }
  123. .list{
  124. color: #colors[text];
  125. margin:0 .1rem .07rem 0;
  126. padding: .1rem .1rem .1rem 0;
  127. display: inline-block;
  128. white-space: nowrap;
  129. overflow-x: hidden;
  130. // -webkit-white-space: nowrap;
  131. // -webkit-box-orient: vertical;
  132. img{
  133. width: .38rem;
  134. vertical-align: middle;
  135. }
  136. >span{
  137. white-space: normal;
  138. vertical-align: middle;
  139. }
  140. .radioCheck {
  141. display: inline-block;
  142. line-height: .66rem;
  143. // min-width: 2rem;
  144. // text-align: center;
  145. padding:0 .2rem;
  146. box-sizing: border-box;
  147. border-radius: .38rem;
  148. border: 1px solid #DFE0E4;
  149. }
  150. .check{
  151. color: #colors[theme];
  152. border: 1px solid #colors[theme];
  153. }
  154. .iptCheck {
  155. color: #colors[theme];
  156. }
  157. }
  158. }
  159. </style>