1.用于自定义文字和按钮
<template>
<view class="container">
<label :class="isChecked ? 'switch-checked' : 'switch-nochecked'">
<view class="open">开</view>
<view class="close">关</view>
</label>
</view>
</template>
<script>
export default {
props: ['isChecked'],
}
</script>
<style lang="scss" scoped>
.container {
width: 120rpx;
label {
position: relative;
display: block;
border-radius: 55rpx;
height: 55rpx;
width: 100%;
&:before {
content: " ";
display: block;
border-radius: 55rpx;
height: 100%;
background-color: #E7F8FF;
transform: scale(1, 1);
transition: all 0.3s ease;
}
&:after {
content: " ";
position: absolute;
top: 9%;
margin-left: 5%;
width: 45rpx;
height: 45rpx;
border-radius: 45rpx;
background-image: url('http://qiniu.shoulongdao.vip/1/material/6b7650fc-e045-4f3b-bc4f-0e2b4ca3c4d6.png');
background-size: 100% 100%;
box-shadow: 2rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
}
%font-style {
top: 0;
color: #3FB3FF;
font-size: 20rpx;
height: 100%;
line-height: 55rpx;
position: absolute;
transition: all 1s ease;
}
.switch-checked {
&:after {
margin-left: calc(94% - 45rpx);
left: unset;
}
&:before {
background-color: #E7F8FF;
}
.close {
display: none;
}
}
.switch-nochecked {
.open {
display: none;
}
}
.open {
left: 20rpx;
@extend %font-style;
}
.close {
right: 20rpx;
@extend %font-style;
color: #3FB3FF ;
}
}
</style>