102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="switch_box row-b-c"
|
||
|
|
:style="{backgroundColor: checked? bg :'',width: width+'rpx',height: height+'rpx',borderRadius: 20.5+ 'px'}"
|
||
|
|
@tap="changeSwitch">
|
||
|
|
<view class="switch_text c-white" :class="checked?['to_left']:['_right','c-black']"
|
||
|
|
:style="{fontSize: size + 'rpx'}">{{checked?checked_text:check_text}}
|
||
|
|
</view>
|
||
|
|
<view class="round switch-qiu" :style="{left: checked?'100%':0,marginLeft:checked?'-'+34+'rpx':'',width:30+'rpx',
|
||
|
|
height: 30+'rpx',borderRadius:30+'rpx'}">
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
bg: {
|
||
|
|
type: String,
|
||
|
|
default: '#ff7800'
|
||
|
|
},
|
||
|
|
checked: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '90'
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: String,
|
||
|
|
default: '40'
|
||
|
|
},
|
||
|
|
check_text: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
checked_text: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
default: '20'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeSwitch: function(e) {
|
||
|
|
this.$emit('change', {
|
||
|
|
checked: this.checked
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.row-c-c {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.c-white {
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.c-black {
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
.switch_box {
|
||
|
|
position: relative;
|
||
|
|
border: 1rpx solid #EEEEEE;
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
transition: all 0.4s;
|
||
|
|
}
|
||
|
|
.round {
|
||
|
|
position: absolute;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
transition: all 0.4s;
|
||
|
|
}
|
||
|
|
.to_left {
|
||
|
|
left: 0;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
.to_right {
|
||
|
|
left: 100%;
|
||
|
|
margin-left: -50rpx;
|
||
|
|
}
|
||
|
|
.switch_text {
|
||
|
|
position: absolute;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
}
|
||
|
|
._right {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
</style>
|