| | |
| | | * @property {String | Number} size 开关尺寸,单位px (默认 25 ) |
| | | * @property {String} activeColor 打开时的背景色 (默认 '#2979ff' ) |
| | | * @property {String} inactiveColor 关闭时的背景色 (默认 '#ffffff' ) |
| | | * @property {String} dotActiveColor 打开时圆点的颜色 (默认 '#ffffff' ) |
| | | * @property {String} dotInactiveColor 关闭时圆点的颜色 (默认 '#ffffff' ) |
| | | * @property {Boolean | String | Number} value 通过v-model双向绑定的值 (默认 false ) |
| | | * @property {Boolean | String | Number} activeValue 打开选择器时通过change事件发出的值 (默认 true ) |
| | | * @property {Boolean | String | Number} inactiveValue 关闭选择器时通过change事件发出的值 (默认 false ) |
| | |
| | | style.height = addUnit(this.size - this.space) |
| | | const translateX = this.isActive ? addUnit(this.space) : addUnit(this.size); |
| | | style.transform = `translateX(-${translateX})` |
| | | style.backgroundColor = this.isActive ? this.dotActiveColor : this.dotInactiveColor |
| | | return style |
| | | }, |
| | | bgStyle() { |
| | |
| | | justify-content: center; |
| | | border-radius: 100px; |
| | | background-color: #fff; |
| | | border-radius: 100px; |
| | | box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25); |
| | | transition-property: transform; |
| | | transition-property: transform, background-color; |
| | | transition-duration: 0.4s; |
| | | transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05); |
| | | } |