CheckBox.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div class="check-wrap" v-if="item">
  3. <p class="quest">{{indx + '.' + item.name}}</p>
  4. <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
  5. <p v-for="(it,index) in item.questionDetailList" class="list">
  6. <img :src="checkId.includes(it.id)?check:defaultPic" @click="handleClick(it,index)">
  7. <span :class="{'check':checkId.includes(it.id)}">{{it.name}}</span>
  8. </p>
  9. </div>
  10. </template>
  11. <script type="text/javascript">
  12. import tools from '@utils/tools.js';
  13. import icon from '../images/check-default.png'
  14. import checkIcon from '../images/check.png'
  15. export default{
  16. name:'CheckBox',
  17. data(){
  18. return{
  19. imgUrl:tools.imageUrlPrefix,
  20. defaultPic:icon,
  21. check:checkIcon,
  22. checkId:[]
  23. }
  24. },
  25. props:['item','indx'],
  26. methods:{
  27. handleClick(it){
  28. const id = it.id;
  29. let ids = this.checkId;
  30. if(ids.includes(id)){
  31. this.checkId.splice(ids.indexOf(id),1);
  32. }else{
  33. this.checkId.push(id);
  34. }
  35. }
  36. }
  37. }
  38. </script>
  39. <style lang="less" scoped>
  40. .check-wrap{
  41. font-size: .3rem;
  42. .quest{
  43. color:#000;
  44. margin-bottom: .2rem;
  45. }
  46. img{
  47. width:100%;
  48. }
  49. .list{
  50. color: #7C828E;
  51. margin:0 .1rem .1rem 0;
  52. padding: .12rem .1rem;
  53. display: inline-block;
  54. img{
  55. width: .38rem;
  56. vertical-align: middle;
  57. }
  58. }
  59. .check{
  60. color: #4F50FF;
  61. }
  62. }
  63. </style>