103 lines
1.7 KiB
Plaintext
103 lines
1.7 KiB
Plaintext
<template>
|
||
<view class="switch-mock" :class="modelValue ? 'switch-on' : ''" @click="toggle" :style="customStyle">
|
||
<view class="switch-dot"></view>
|
||
<text class="switch-text">{{ modelValue ? activeText : inactiveText }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
/**
|
||
* StatusSwitch 状态切换组件
|
||
* 用于替代原生 switch，提供更符合后台管理系统的样式和交互
|
||
*/
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* 绑定值
|
||
*/
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
/**
|
||
* 开启时的文字
|
||
*/
|
||
activeText: {
|
||
type: String,
|
||
default: '开启'
|
||
},
|
||
/**
|
||
* 关闭时的文字
|
||
*/
|
||
inactiveText: {
|
||
type: String,
|
||
default: '关闭'
|
||
},
|
||
/**
|
||
* 自定义样式
|
||
*/
|
||
customStyle: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue', 'change'])
|
||
|
||
const toggle = () => {
|
||
const newValue = !props.modelValue
|
||
emit('update:modelValue', newValue)
|
||
emit('change', newValue)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.switch-mock {
|
||
width: 54px;
|
||
height: 24px;
|
||
background-color: #ccc;
|
||
border-radius: 12px;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.switch-on {
|
||
background-color: #1890ff;
|
||
}
|
||
|
||
.switch-dot {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 3px;
|
||
top: 3px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.switch-on .switch-dot {
|
||
left: 33px;
|
||
}
|
||
|
||
.switch-text {
|
||
font-size: 12px;
|
||
color: #fff;
|
||
margin-left: auto;
|
||
line-height: 24px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.switch-on .switch-text {
|
||
margin-left: 0;
|
||
margin-right: auto;
|
||
}
|
||
</style>
|