78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
/*
|
|
滑块组件
|
|
*/
|
|
<template>
|
|
<div
|
|
class="zy-switch"
|
|
@click="onChange"
|
|
:class="{
|
|
'switch-on': currentValue,
|
|
'switch-disabled': disabled
|
|
}"
|
|
:style="{'font-size': size + 'rpx'}"
|
|
>
|
|
<div class="zy-switch-item"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ZySwitch',
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
value: {
|
|
type: [Boolean, Number, String],
|
|
default: false
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '50'
|
|
},
|
|
trueValue: {
|
|
type: [Boolean, Number, String],
|
|
default: true
|
|
},
|
|
falseValue: {
|
|
type: [Boolean, Number, String],
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
if (val === this.trueValue || val === this.falseValue) {
|
|
this.updateModel()
|
|
} else {
|
|
throw 'Value should be trueValue or falseValue'
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
currentValue: this.value
|
|
}
|
|
},
|
|
methods: {
|
|
onChange () {
|
|
console.log('onchange')
|
|
if (this.disabled) return false
|
|
let checked = !this.currentValue
|
|
this.currentValue = checked
|
|
let value = checked ? this.trueValue : this.falseValue
|
|
this.$emit('input:value', value)
|
|
|
|
// this.$emit('on-change', value)
|
|
},
|
|
updateModel () {
|
|
this.currentValue = this.value === this.trueValue
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './switch';
|
|
</style>
|