You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

185 lines
4.3 KiB
Vue

<template>
<view class="switch-container" :style="[{ background: bj_color}]">
<view class="switch_view">
<view
class="switch-item"
:class="{'checked_switch':isSwitch}"
:style="isSwitch?`color:${checked_color}`:''"
@click.prevent.stop="changeSwitch(true)"
:animation="animationData2"
>
{{switchList[0]}}
</view>
<view
class="switch-item"
:class="{'checked_switch':!isSwitch}"
:style="!isSwitch?`color:${checked_color}`:''"
@click.prevent.stop="changeSwitch(false)"
:animation="animationData3"
>
{{switchList[1]}}
</view>
</view>
<view class="disabled" v-if="disabled"></view>
<view
class="position_view" :animation="animationData1"
:style="[{ background: checked_bj_color}]"
></view>
</view>
</template>
<script>
export default {
props: {
switchList: {
type: Array,
default: ()=>{
return ['开','关'];
}
},
defaultSwitch:{
type:Boolean,
default:true
},
isShowModal:{//改变开关时,是否弹框提醒
type:Boolean,
default:false
},
disabled:{
type:Boolean,
default:false
},
bj_color:{
type:String,
default:'#fff'
},
checked_bj_color:{
type:String,
default:'#1989fa'
},
checked_color:{
type:String,
default:'#fff'
},
id:{
type:null,
default:null
}
},
data () {
return {
isSwitch:true,
initAnimation:{},
animationData1: {},
animationData2: {},
animationData3: {}
};
},
created () {
this.initAnimation = uni.createAnimation({
duration: 500,
timingFunction: 'ease'
});
this.isSwitch = this.defaultSwitch;
this.changeAnimation();
},
methods: {
changeSwitch(isSwitch) {
if(isSwitch == this.isSwitch || this.disabled){
return;
}
if(this.isShowModal){
let index = isSwitch?0:1;
let text = this.switchList[index];
uni.showModal({
title: '提示',
content: `您确定要将其调整为${text}吗?`,
success: (res) => {
if(res.confirm){
this.isSwitch = isSwitch;
this.changeAnimation();
this.callParentEvent(isSwitch);
}
}
});
}else{
this.isSwitch = isSwitch;
this.changeAnimation();
this.callParentEvent(isSwitch);
}
},
changeAnimation(){
if(this.isSwitch){
this.animationData1 = this.initAnimation.left(0).width('60%').step().export();
this.animationData2 = this.initAnimation.width('60%').step().export();
this.animationData3 = this.initAnimation.width('40%').step().export();
}else{
this.animationData1 = this.initAnimation.left('40%').width('60%').step().export();
this.animationData2 = this.initAnimation.width('40%').step().export();
this.animationData3 = this.initAnimation.width('60%').step().export();
}
},
callParentEvent(){
this.$emit('change',this.isSwitch,this.id,()=>{
// 回调方法应用场景父级组件请求api接口失败调用
this.isSwitch = !this.isSwitch;
this.changeAnimation();
});
}
}
};
</script>
<style lang="scss" scoped>
.switch-container {
display: flex;
flex-direction: row;
width: 398upx;
height: 76upx;
border-radius: 80upx;
border: 3upx solid $fuint-theme;
font-weight: bold;
position: relative;
.switch_view{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
border-radius: 100upx;
.switch-item {
color: #666;
font-size: 24upx;
height: 100%;
width: 40%;
border-radius: 100upx;
display: flex;
justify-content: center;
align-items: center;
}
}
.position_view{
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
border-radius: 100upx;
background: $uni-color-primary;
}
.disabled{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
background: #fff;
opacity: 0.6;
border-radius: 100upx;
}
}
</style>