radioCheck.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <div class="radioCheck" >
  3. <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" >
  4. <span>
  5. <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange">
  6. </span>
  7. <span>{{item.title}}</span>
  8. </label>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. selectValue:[''],
  16. currentSelect:'',
  17. }
  18. },
  19. props:['checkArr'],
  20. methods: {
  21. //单选多选的事件
  22. radioCheckChange(e){
  23. // console.log(e.target);
  24. this.currentSelect=e.target.value;
  25. if(e.target.value=='' || this.selectValue.length==0 ){
  26. this.selectValue=[''];
  27. }else{
  28. if(this.selectValue.indexOf('')>-1){
  29. let i=this.selectValue.indexOf('');
  30. this.selectValue.splice(0,1)
  31. }
  32. if(this.selectValue.indexOf(e.target.value)==-1){
  33. this.selectValue.push(e.target.value)
  34. }else{
  35. let index=this.selectValue.indexOf(e.target.value);
  36. if(index==0){
  37. this.selectValue=[...this.selectValue.splice(1)]
  38. }else{
  39. this.selectValue=[...this.selectValue.splice(0,index),...this.selectValue.splice(index)]
  40. }
  41. }
  42. if(this.selectValue.length==0){
  43. this.selectValue=[''];
  44. }
  45. }
  46. // console.log(this.currentSelect,this.selectValue);
  47. this.$emit('getSonValue',this.selectValue)
  48. },
  49. },
  50. mounted() {
  51. },
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. .radioCheck{
  56. border-radius: 5px;
  57. height: 32px;
  58. .item{
  59. min-width: 60px;
  60. padding: 0px 15px;
  61. text-align: center;
  62. display: inline-block;
  63. border: 1px solid #ccc;
  64. border-left: 0;
  65. height: 32px;
  66. line-height: 32px;
  67. cursor: pointer;
  68. .checkbox-button-input{
  69. width: 0;
  70. height: 0;
  71. opacity: 0;
  72. }
  73. }
  74. .item::after{
  75. content: "";
  76. position: absolute;
  77. right: 1px;
  78. top: -2px;
  79. width: 0;
  80. height: 0;
  81. border-top: 6px solid transparent;
  82. border-bottom: 6px solid transparent;
  83. border-left: 6px solid;
  84. border-left-color: #e0e0e0;
  85. -webkit-transform: rotate(-45deg);
  86. -ms-transform: rotate(-45deg);
  87. transform: rotate(-45deg);
  88. border-radius: 2px;
  89. }
  90. .item:hover{
  91. color: #1890ff;
  92. }
  93. .selection{
  94. color: #fff;
  95. background: #1890ff;
  96. }
  97. .item.selection:hover{
  98. // color: #1890ff;
  99. color: #fff;
  100. background: #40a9ff;
  101. border-color: #40a9ff;
  102. }
  103. .item.selection:after{
  104. border-left: 6px solid #1890ff;
  105. }
  106. .item:hover::after{
  107. // border-color: #40a9ff;
  108. border-left: 6px solid #40a9ff;
  109. }
  110. }
  111. .radioCheck .item:first-child {
  112. border-radius: 5px 0 0 5px;
  113. border-left: 1px solid #ccc;
  114. }
  115. .radioCheck .item:first-child:after{
  116. border-left: 0;
  117. }
  118. .radioCheck .item:last-child {
  119. border-radius: 0px 5px 5px 0px;
  120. }
  121. </style>