You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
997 B
69 lines
997 B
1 year ago
|
<template>
|
||
|
|
<view class="async-switch">
|
||
|
|
<switch :checked="checked" :disabled="disabled" :color="changeColor" />
|
||
|
|
<button @click="onChange"></button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'async-switch',
|
||
|
|
props:{
|
||
|
|
checked: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
disabled:{
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
color:{
|
||
|
|
type:String,
|
||
|
|
default:'#007aff'
|
||
|
|
},
|
||
|
|
disabledColor:{
|
||
|
|
type:String,
|
||
|
|
default:'#333'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
changeColor(){
|
||
|
|
return (this.disabled ? this.disabledColor : this.color)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
onChange(){
|
||
|
|
/* 禁用状态不返回事件 */
|
||
|
|
if(this.disabled){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$emit("change");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.async-switch{
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&>switch{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
&>button{
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|