123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <template>
- <div class="radioCheck" >
- <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" >
- <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'],
- methods: {
- //单选多选的事件
- radioCheckChange(e){
- // console.log(e.target);
- this.currentSelect=e.target.value;
- 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{
- let index=this.selectValue.indexOf(e.target.value);
- if(index==0){
- this.selectValue=[...this.selectValue.splice(1)]
- }else{
- this.selectValue=[...this.selectValue.splice(0,index),...this.selectValue.splice(index)]
- }
- }
- if(this.selectValue.length==0){
- this.selectValue=[''];
- }
-
- }
- // console.log(this.currentSelect,this.selectValue);
- this.$emit('getSonValue',this.selectValue)
- },
- },
- mounted() {
-
- },
- }
- </script>
- <style lang="scss" scoped>
- .radioCheck{
- border-radius: 5px;
- height: 32px;
- .item{
- min-width: 60px;
- 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;
- }
- }
- .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: #fff;
- background: #1890ff;
- }
- .item.selection:hover{
- // color: #1890ff;
- color: #fff;
- background: #40a9ff;
- border-color: #40a9ff;
- }
- .item.selection:after{
- border-left: 6px solid #1890ff;
- }
- .item:hover::after{
- // border-color: #40a9ff;
- border-left: 6px solid #40a9ff;
- }
- }
- .radioCheck .item:first-child {
- border-radius: 5px 0 0 5px;
- border-left: 1px solid #ccc;
- }
- .radioCheck .item:first-child:after{
- border-left: 0;
- }
- .radioCheck .item:last-child {
- border-radius: 0px 5px 5px 0px;
- }
- </style>
|