radioCheck.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <div class="radioCheck" >
  3. <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1,'bgcolor':item.disabled}" v-for="(item,index) in checkArr" :key="index">
  4. <span>
  5. <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange($event,item)">
  6. </span>
  7. <span>{{item.title}}</span>
  8. </label>
  9. <!-- <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" :disabled='item.disabled'>
  10. <span>
  11. <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange">
  12. </span>
  13. <span>{{item.title}}</span>
  14. </label> -->
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. selectValue:[''],
  22. currentSelect:'',
  23. }
  24. },
  25. props:['checkArr','selectArr'],
  26. watch:{
  27. checkArr:{
  28. handler(n,o){
  29. // console.log(n,o)
  30. this.selectValue=[];
  31. let i=0;
  32. this.checkArr.forEach((item,index)=>{
  33. // console.log(item)
  34. if(item.disabled==false){
  35. i++;
  36. this.selectValue[0]=item.value;
  37. // console.log(this.selectValue)
  38. }else if(item.disabled==undefined){
  39. if(item.checked){
  40. this.selectValue.push(item.value)
  41. }
  42. }
  43. })
  44. if(this.selectValue.length==0){
  45. this.selectValue=[''];
  46. }
  47. if(i==3){
  48. this.selectValue[0]='';
  49. }
  50. // console.log(this.selectValue)
  51. this.$emit('getSonValue',this.selectValue)
  52. },
  53. deep:true,
  54. // immediate: true
  55. },
  56. },
  57. methods: {
  58. //单选多选的事件
  59. radioCheckChange(e,item){
  60. console.log(e.target,item,!item.disabled);
  61. this.currentSelect=e.target.value;
  62. if(!item.disabled){
  63. if(e.target.value=='' || this.selectValue.length==0 ){
  64. this.selectValue=[''];
  65. }else{
  66. if(this.selectValue.indexOf('')>-1){
  67. let i=this.selectValue.indexOf('');
  68. this.selectValue.splice(0,1)
  69. }
  70. if(this.selectValue.indexOf(e.target.value)==-1){
  71. this.selectValue.push(e.target.value)
  72. }else if(this.selectValue.indexOf(e.target.value)>-1){
  73. this.selectValue=this.selectValue.filter((item)=>{
  74. return item!=e.target.value
  75. })
  76. }
  77. if(this.selectValue.length==0){
  78. this.selectValue=[''];
  79. }
  80. }
  81. // console.log(this.currentSelect,this.selectValue);
  82. }
  83. this.$emit('getSonValue',this.selectValue)
  84. },
  85. },
  86. mounted() {
  87. // this.selectValue=[]
  88. // console.log(this.checkArr)
  89. this.checkArr.forEach((item,index)=>{
  90. if(item.disabled&&item.disabled!=undefined){
  91. this.selectValue[0]=item.value
  92. }else{
  93. this.selectValue=['']
  94. }
  95. })
  96. this.$emit('getSonValue',this.selectValue)
  97. },
  98. }
  99. </script>
  100. <style lang="scss" scoped>
  101. .radioCheck{
  102. border-radius: 5px;
  103. height: 32px;
  104. padding: 0;
  105. margin: 0;
  106. border: none;
  107. background: transparent;
  108. .btn{
  109. background: transparent;
  110. padding: 0;
  111. margin: 0;
  112. border: none;
  113. }
  114. .item{
  115. min-width: 80px;
  116. padding: 0px 15px;
  117. text-align: center;
  118. display: inline-block;
  119. border: 1px solid #ccc;
  120. border-left: 0;
  121. height: 32px;
  122. line-height: 32px;
  123. cursor: pointer;
  124. .checkbox-button-input{
  125. width: 0;
  126. height: 0;
  127. opacity: 0;
  128. }
  129. }
  130. .bgcolor{
  131. color:rgba(0, 0, 0, 0.25);
  132. background-color: #f5f5f5;
  133. border-color: #d9d9d9;
  134. cursor: not-allowed;
  135. }
  136. .item::after{
  137. content: "";
  138. position: absolute;
  139. right: 1px;
  140. top: -2px;
  141. width: 0;
  142. height: 0;
  143. border-top: 6px solid transparent;
  144. border-bottom: 6px solid transparent;
  145. border-left: 6px solid;
  146. border-left-color: #e0e0e0;
  147. -webkit-transform: rotate(-45deg);
  148. -ms-transform: rotate(-45deg);
  149. transform: rotate(-45deg);
  150. border-radius: 2px;
  151. }
  152. .item:hover{
  153. color: #1890ff;
  154. }
  155. .selection{
  156. color: #1890ff;
  157. background: #fff;
  158. border-color: #1890ff;
  159. }
  160. .item.selection:hover{
  161. // color: #1890ff;
  162. color: #40a9ff;
  163. background: #fff;
  164. border-color: #40a9ff;
  165. }
  166. .item.selection:after{
  167. border-left: 6px solid #1890ff;
  168. }
  169. .item:hover::after{
  170. // border-color: #40a9ff;
  171. border-left: 6px solid #40a9ff;
  172. }
  173. .bgcolor:hover{
  174. color:rgba(0, 0, 0, 0.25);
  175. background-color: #f5f5f5;
  176. border-color: #d9d9d9;
  177. cursor: not-allowed;
  178. }
  179. .bgcolor:hover::after{
  180. // border-color: #40a9ff;
  181. border-left: 6px solid #e0e0e0;
  182. }
  183. .bgcolor.selection:after{
  184. border-left: 6px solid #e0e0e0;
  185. }
  186. .bgcolor.selection{
  187. color:rgba(0, 0, 0, 0.25);
  188. background-color: #f5f5f5;
  189. border-color: #d9d9d9;
  190. cursor: not-allowed;
  191. }
  192. .bgcolor.selection:hover{
  193. // color: #1890ff;
  194. color:rgba(0, 0, 0, 0.25);
  195. background-color: #f5f5f5;
  196. border-color: #d9d9d9;
  197. cursor: not-allowed;
  198. }
  199. .bgcolor.selection:after{
  200. border-left: 6px solid #e0e0e0;
  201. }
  202. }
  203. .radioCheck .item:first-child {
  204. border-radius: 5px 0 0 5px;
  205. border-left: 1px solid #ccc;
  206. }
  207. .radioCheck .item.selection:first-child {
  208. border-radius: 5px 0 0 5px;
  209. border-left: 1px solid #1890ff;
  210. }
  211. .radioCheck .item.selection:nth-child(2) {
  212. border-left: 1px solid #1890ff;
  213. }
  214. .radioCheck .item:first-child:after{
  215. border-left: 0;
  216. }
  217. .radioCheck .item:last-child {
  218. border-radius: 0px 5px 5px 0px;
  219. }
  220. </style>