123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <div class="radioCheck" >
-
- <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1,'bgcolor':item.disabled}" v-for="(item,index) in checkArr" :key="index">
-
- <span>
- <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange($event,item)">
- </span>
- <span>{{item.title}}</span>
-
- </label>
- <!-- <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" :disabled='item.disabled'>
- <span>
- <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange">
- </span>
- <span>{{item.title}}</span>
- </label> -->
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- selectValue:[''],
- currentSelect:'',
- }
- },
-
- props:['checkArr','selectArr'],
- watch:{
- checkArr:{
- handler(n,o){
- // console.log(n,o)
- this.selectValue=[];
- let i=0;
- this.checkArr.forEach((item,index)=>{
- // console.log(item)
- if(item.disabled==false){
- i++;
- this.selectValue[0]=item.value;
- // console.log(this.selectValue)
- }else if(item.disabled==undefined){
- if(item.checked){
- this.selectValue.push(item.value)
- }
-
- }
- })
- if(this.selectValue.length==0){
- this.selectValue=[''];
- }
- if(i==3){
- this.selectValue[0]='';
- }
- // console.log(this.selectValue)
- this.$emit('getSonValue',this.selectValue)
- },
- deep:true,
- // immediate: true
- },
-
- },
- methods: {
- //单选多选的事件
- radioCheckChange(e,item){
- console.log(e.target,item,!item.disabled);
-
- this.currentSelect=e.target.value;
- if(!item.disabled){
- if(e.target.value=='' || this.selectValue.length==0 ){
- this.selectValue=[''];
- }else{
- if(this.selectValue.indexOf('')>-1){
- let i=this.selectValue.indexOf('');
- this.selectValue.splice(0,1)
- }
-
- if(this.selectValue.indexOf(e.target.value)==-1){
- this.selectValue.push(e.target.value)
- }else if(this.selectValue.indexOf(e.target.value)>-1){
- this.selectValue=this.selectValue.filter((item)=>{
- return item!=e.target.value
- })
- }
- if(this.selectValue.length==0){
- this.selectValue=[''];
- }
-
- }
- // console.log(this.currentSelect,this.selectValue);
- }
- this.$emit('getSonValue',this.selectValue)
- },
- },
- mounted() {
- // this.selectValue=[]
- // console.log(this.checkArr)
- this.checkArr.forEach((item,index)=>{
-
- if(item.disabled&&item.disabled!=undefined){
- this.selectValue[0]=item.value
- }else{
- this.selectValue=['']
- }
- })
- this.$emit('getSonValue',this.selectValue)
- },
- }
- </script>
- <style lang="scss" scoped>
- .radioCheck{
- border-radius: 5px;
- height: 32px;
- padding: 0;
- margin: 0;
- border: none;
- background: transparent;
- .btn{
- background: transparent;
- padding: 0;
- margin: 0;
- border: none;
- }
- .item{
- min-width: 80px;
- padding: 0px 15px;
- text-align: center;
- display: inline-block;
- border: 1px solid #ccc;
- border-left: 0;
- height: 32px;
- line-height: 32px;
- cursor: pointer;
- .checkbox-button-input{
- width: 0;
- height: 0;
- opacity: 0;
- }
- }
- .bgcolor{
- color:rgba(0, 0, 0, 0.25);
- background-color: #f5f5f5;
- border-color: #d9d9d9;
- cursor: not-allowed;
- }
- .item::after{
- content: "";
- position: absolute;
- right: 1px;
- top: -2px;
- width: 0;
- height: 0;
- border-top: 6px solid transparent;
- border-bottom: 6px solid transparent;
- border-left: 6px solid;
- border-left-color: #e0e0e0;
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
- border-radius: 2px;
- }
- .item:hover{
- color: #1890ff;
- }
- .selection{
- color: #1890ff;
- background: #fff;
- border-color: #1890ff;
- }
- .item.selection:hover{
- // color: #1890ff;
- color: #40a9ff;
- background: #fff;
- border-color: #40a9ff;
- }
- .item.selection:after{
- border-left: 6px solid #1890ff;
- }
- .item:hover::after{
- // border-color: #40a9ff;
- border-left: 6px solid #40a9ff;
- }
- .bgcolor:hover{
- color:rgba(0, 0, 0, 0.25);
- background-color: #f5f5f5;
- border-color: #d9d9d9;
- cursor: not-allowed;
- }
- .bgcolor:hover::after{
- // border-color: #40a9ff;
- border-left: 6px solid #e0e0e0;
- }
- .bgcolor.selection:after{
- border-left: 6px solid #e0e0e0;
- }
- .bgcolor.selection{
- color:rgba(0, 0, 0, 0.25);
- background-color: #f5f5f5;
- border-color: #d9d9d9;
- cursor: not-allowed;
- }
- .bgcolor.selection:hover{
- // color: #1890ff;
- color:rgba(0, 0, 0, 0.25);
- background-color: #f5f5f5;
- border-color: #d9d9d9;
- cursor: not-allowed;
- }
- .bgcolor.selection:after{
- border-left: 6px solid #e0e0e0;
- }
- }
- .radioCheck .item:first-child {
- border-radius: 5px 0 0 5px;
- border-left: 1px solid #ccc;
- }
- .radioCheck .item.selection:first-child {
- border-radius: 5px 0 0 5px;
- border-left: 1px solid #1890ff;
- }
- .radioCheck .item.selection:nth-child(2) {
-
- border-left: 1px solid #1890ff;
- }
- .radioCheck .item:first-child:after{
- border-left: 0;
- }
- .radioCheck .item:last-child {
- border-radius: 0px 5px 5px 0px;
- }
- </style>
|