217 lines
6.9 KiB
Vue
217 lines
6.9 KiB
Vue
<template>
|
||
<view
|
||
class="u-switch cursor-pointer"
|
||
:class="[disabled && 'u-switch--disabled']"
|
||
:style="[switchStyle, addStyle(customStyle)]"
|
||
@tap="clickHandler"
|
||
>
|
||
<view
|
||
class="u-switch__bg"
|
||
:style="[bgStyle]"
|
||
>
|
||
</view>
|
||
<view
|
||
class="u-switch__node"
|
||
<!-- #ifdef VUE3 -->
|
||
:class="[modelValue && 'u-switch__node--on']"
|
||
<!-- #endif -->
|
||
<!-- #ifdef VUE2 -->
|
||
:class="[value && 'u-switch__node--on']"
|
||
<!-- #endif -->
|
||
:style="[nodeStyle]"
|
||
ref="u-switch__node"
|
||
>
|
||
<u-loading-icon
|
||
:show="loading"
|
||
mode="circle"
|
||
timingFunction='linear'
|
||
<!-- #ifdef VUE3 -->
|
||
:color="modelValue ? activeColor : '#AAABAD'"
|
||
<!-- #endif -->
|
||
<!-- #ifdef VUE2 -->
|
||
:color="value ? activeColor : '#AAABAD'"
|
||
<!-- #endif -->
|
||
:size="size * 0.6"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import props from './props';
|
||
import mpMixin from '../../libs/mixin/mpMixin';
|
||
import mixin from '../../libs/mixin/mixin';
|
||
import { addStyle, addUnit, error } from '../../libs/function/index';
|
||
/**
|
||
* switch 开关选择器
|
||
* @description 选择开关一般用于只有两个选择，且只能选其一的场景。
|
||
* @tutorial https://ijry.github.io/uview-plus/components/switch.html
|
||
* @property {Boolean} loading 是否处于加载中（默认 false ）
|
||
* @property {Boolean} disabled 是否禁用（默认 false ）
|
||
* @property {String | Number} size 开关尺寸，单位px （默认 25 ）
|
||
* @property {String} activeColor 打开时的背景色 （默认 '#2979ff' ）
|
||
* @property {String} inactiveColor 关闭时的背景色 （默认 '#ffffff' ）
|
||
* @property {Boolean | String | Number} value 通过v-model双向绑定的值 （默认 false ）
|
||
* @property {Boolean | String | Number} activeValue 打开选择器时通过change事件发出的值 （默认 true ）
|
||
* @property {Boolean | String | Number} inactiveValue 关闭选择器时通过change事件发出的值 （默认 false ）
|
||
* @property {Boolean} asyncChange 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
|
||
* @property {String | Number} space 圆点与外边框的距离 （默认 0 ）
|
||
* @property {Object} customStyle 定义需要用到的外部样式
|
||
*
|
||
* @event {Function} change 在switch打开或关闭时触发
|
||
* @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
|
||
*/
|
||
export default {
|
||
name: "u-switch",
|
||
mixins: [mpMixin, mixin,props],
|
||
watch: {
|
||
// #ifdef VUE3
|
||
modelValue: {
|
||
immediate: true,
|
||
handler(n) {
|
||
if(n !== this.inactiveValue && n !== this.activeValue) {
|
||
error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
|
||
}
|
||
}
|
||
},
|
||
// #endif
|
||
// #ifdef VUE2
|
||
value: {
|
||
immediate: true,
|
||
handler(n) {
|
||
if(n !== this.inactiveValue && n !== this.activeValue) {
|
||
error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
|
||
}
|
||
}
|
||
}
|
||
// #endif
|
||
},
|
||
data() {
|
||
return {
|
||
bgColor: '#ffffff'
|
||
}
|
||
},
|
||
computed: {
|
||
isActive(){
|
||
// #ifdef VUE3
|
||
return this.modelValue === this.activeValue;
|
||
// #endif
|
||
// #ifdef VUE2
|
||
return this.value === this.activeValue;
|
||
// #endif
|
||
},
|
||
switchStyle() {
|
||
let style = {}
|
||
// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
|
||
style.width = addUnit(this.size * 2 + 2)
|
||
style.height = addUnit(Number(this.size) + 2)
|
||
// style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
|
||
// 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
|
||
// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
|
||
if(this.customInactiveColor) {
|
||
style.borderColor = 'rgba(0, 0, 0, 0)'
|
||
}
|
||
style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
|
||
return style;
|
||
},
|
||
nodeStyle() {
|
||
let style = {}
|
||
// 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
|
||
style.width = addUnit(this.size - this.space)
|
||
style.height = addUnit(this.size - this.space)
|
||
const translateX = this.isActive ? addUnit(this.space) : addUnit(this.size);
|
||
style.transform = `translateX(-${translateX})`
|
||
return style
|
||
},
|
||
bgStyle() {
|
||
let style = {}
|
||
// 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
|
||
style.width = addUnit(Number(this.size) * 2 - this.size / 2)
|
||
style.height = addUnit(this.size)
|
||
style.backgroundColor = this.inactiveColor
|
||
// 打开时，让此元素收缩，否则反之
|
||
style.transform = `scale(${this.isActive ? 0 : 1})`
|
||
return style
|
||
},
|
||
customInactiveColor() {
|
||
// 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
|
||
return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
|
||
}
|
||
},
|
||
// #ifdef VUE3
|
||
emits: ['update:modelValue', 'change'],
|
||
// #endif
|
||
methods: {
|
||
addStyle,
|
||
clickHandler() {
|
||
if (!this.disabled && !this.loading) {
|
||
const oldValue = this.isActive ? this.inactiveValue : this.activeValue
|
||
if(!this.asyncChange) {
|
||
// #ifdef VUE3
|
||
this.$emit("update:modelValue", oldValue);
|
||
// #endif
|
||
// #ifdef VUE2
|
||
this.$emit("input", oldValue);
|
||
// #endif
|
||
}
|
||
// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
|
||
this.$nextTick(() => {
|
||
this.$emit('change', oldValue)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../libs/css/components.scss";
|
||
|
||
.u-switch {
|
||
@include flex(row);
|
||
/* #ifndef APP-NVUE */
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
position: relative;
|
||
background-color: #fff;
|
||
border-width: 1px;
|
||
border-radius: 100px;
|
||
transition: background-color 0.4s;
|
||
border-color: rgba(0, 0, 0, 0.12);
|
||
border-style: solid;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
// 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
|
||
// 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
|
||
overflow: hidden;
|
||
|
||
&__node {
|
||
@include flex(row);
|
||
align-items: center;
|
||
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-duration: 0.4s;
|
||
transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||
}
|
||
|
||
&__bg {
|
||
position: absolute;
|
||
border-radius: 100px;
|
||
background-color: #FFFFFF;
|
||
transition-property: transform;
|
||
transition-duration: 0.4s;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
transition-timing-function: ease;
|
||
}
|
||
|
||
&--disabled {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
</style>
|