| | |
| | | } |
| | | }, |
| | | watch: { |
| | | values() { |
| | | this.$emit('change', this.values, this.colors) |
| | | }, |
| | | defaultValues(value) { |
| | | if (this.multiple) { |
| | | this.options.forEach(item => { |
| | | item.sChecked = value.indexOf(item.value) > -1 |
| | | }) |
| | | } else { |
| | | this.options.forEach(item => { |
| | | let first = value[0] |
| | | item.sChecked = first && first == item.value |
| | | }) |
| | | } |
| | | values(value) { |
| | | this.$emit('change', value, this.colors) |
| | | } |
| | | }, |
| | | methods: { |
| | | handleChange (option) { |
| | | if (!option.checked) { |
| | | this.values = this.values.filter(item => item !== option.value) |
| | | if (this.values.indexOf(option.value) > -1) { |
| | | this.values = this.values.filter(item => item != option.value) |
| | | } |
| | | } else { |
| | | if (!this.multiple) { |
| | | this.values = [option.value] |
| | | this.options.forEach(item => { |
| | | if (item.value != option.value) { |
| | | item.sChecked = false |
| | |
| | | required: true |
| | | }, |
| | | value: { |
| | | type: String, |
| | | type: [String, Number], |
| | | required: true |
| | | }, |
| | | checked: { |
| | |
| | | }, |
| | | methods: { |
| | | toggle () { |
| | | this.sChecked = !this.sChecked |
| | | if (this.groupContext.multiple || !this.sChecked) { |
| | | this.sChecked = !this.sChecked |
| | | } |
| | | }, |
| | | initChecked() { |
| | | let groupContext = this.groupContext |
| | | if (!groupContext) { |
| | | return this.check |
| | | return this.checked |
| | | }else if (groupContext.multiple) { |
| | | return groupContext.defaultValues.indexOf(this.value) > -1 |
| | | } else { |
| | |
| | | cursor: pointer; |
| | | margin-right: 8px; |
| | | text-align: center; |
| | | color: #fff; |
| | | color: @base-bg-color; |
| | | font-weight: bold; |
| | | } |
| | | </style> |