|
|
@@ -0,0 +1,185 @@
|
|
|
+<template>
|
|
|
+ <view class="switch-container" :style="containerStyle" @click="handleClick">
|
|
|
+ <!-- 状态文字 -->
|
|
|
+ <text class="status-text" :style="[statusTextStyle, leftTextStyle]">{{ activeText }}</text>
|
|
|
+ <text class="status-text" :style="[statusTextStyle, rightTextStyle]">{{ inactiveText }}</text>
|
|
|
+ <!-- 图片滑块 -->
|
|
|
+ <image class="switch-thumb" :src="currentThumb" :style="thumbStyle" @touchstart="onTouchStart"
|
|
|
+ @touchmove="onTouchMove" @touchend="onTouchEnd" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ value: Boolean,
|
|
|
+ containerWidth: {
|
|
|
+ type: Number,
|
|
|
+ default: 120
|
|
|
+ },
|
|
|
+ thumbSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 32
|
|
|
+ },
|
|
|
+ // 新增图片相关props
|
|
|
+ activeThumb: {
|
|
|
+ type: String,
|
|
|
+ default: '' // 建议使用绝对路径
|
|
|
+ },
|
|
|
+ inactiveThumb: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 状态文字配置
|
|
|
+ activeText: {
|
|
|
+ type: String,
|
|
|
+ default: 'ON'
|
|
|
+ },
|
|
|
+ inactiveText: {
|
|
|
+ type: String,
|
|
|
+ default: 'OFF'
|
|
|
+ },
|
|
|
+ activeColor: {
|
|
|
+ type: String,
|
|
|
+ default: 'ffffff'
|
|
|
+ },
|
|
|
+ inactiveColor: {
|
|
|
+ type: String,
|
|
|
+ default: 'ffffff'
|
|
|
+ },
|
|
|
+ textColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#000000'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isDragging: false,
|
|
|
+ startX: 0,
|
|
|
+ currentX: 0,
|
|
|
+ maxOffset: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentThumb() {
|
|
|
+ // return this.value ? this.activeThumb : this.inactiveThumb;
|
|
|
+ return 'https://qiniu.bms16.com/Fkovrpq1bexe-Unal_VJREbLUhdu';
|
|
|
+ },
|
|
|
+ containerStyle() {
|
|
|
+ return {
|
|
|
+ width: this.containerWidth + 'px',
|
|
|
+ backgroundColor: this.value ? this.activeColor : this.inactiveColor,
|
|
|
+ height: this.thumbSize + 8 + 'px',
|
|
|
+ borderRadius: (this.thumbSize + 8) / 2 + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ thumbStyle() {
|
|
|
+ const baseStyle = {
|
|
|
+ width: this.thumbSize + 'px',
|
|
|
+ height: this.thumbSize + 'px',
|
|
|
+ borderRadius: this.thumbSize / 2 + 'px'
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.isDragging) {
|
|
|
+ return {
|
|
|
+ ...baseStyle,
|
|
|
+ transform: `translateX(${this.currentX}px)`,
|
|
|
+ transition: 'none'
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...baseStyle,
|
|
|
+ transform: `translateX(${this.value ? this.maxOffset : 0}px)`,
|
|
|
+ transition: 'transform 0.3s cubic-bezier(0.3, 1, 0.3, 1)'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ statusTextStyle() {
|
|
|
+ return {
|
|
|
+ color: this.textColor,
|
|
|
+ fontSize: this.thumbSize * 0.5 + 'px',
|
|
|
+ opacity: this.isDragging ? 0.6 : 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ leftTextStyle() {
|
|
|
+ return {
|
|
|
+ right: (this.thumbSize + 20) + 'px',
|
|
|
+ opacity: this.value ? 1 : 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rightTextStyle() {
|
|
|
+ return {
|
|
|
+ left: (this.thumbSize + 20) + 'px',
|
|
|
+ opacity: this.value ? 0 : 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //计算滑块（thumb）在滑动轨道（container）上的最大偏移量。
|
|
|
+ this.maxOffset = this.containerWidth - this.thumbSize - 4;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick() {
|
|
|
+ //点击立即切换状态
|
|
|
+ if (!this.isDragging) {
|
|
|
+ this.toggleState();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onTouchStart(e) {
|
|
|
+ this.isDragging = true;
|
|
|
+ this.startX = e.touches[0].pageX;
|
|
|
+ this.currentX = this.value ? this.maxOffset : 0;
|
|
|
+ },
|
|
|
+ onTouchMove(e) {
|
|
|
+ if (!this.isDragging) return;
|
|
|
+ const deltaX = e.touches[0].pageX - this.startX;
|
|
|
+ let newX = this.value ? this.maxOffset + deltaX : deltaX;
|
|
|
+
|
|
|
+ // 限制滑动范围
|
|
|
+ newX = Math.max(0, Math.min(newX, this.maxOffset));
|
|
|
+ this.currentX = newX;
|
|
|
+ },
|
|
|
+ toggleState() {
|
|
|
+ this.$emit('input', !this.value);
|
|
|
+ this.$emit('change', !this.value);
|
|
|
+ },
|
|
|
+ onTouchEnd() {
|
|
|
+ this.isDragging = false;
|
|
|
+ // 判断滑动是否超过50%
|
|
|
+ const threshold = this.containerWidth * 0.5;
|
|
|
+ const newState = this.currentX > threshold - this.thumbSize / 2;
|
|
|
+ if (newState !== this.value) {
|
|
|
+ this.toggleState();
|
|
|
+ } else {
|
|
|
+ this.currentX = this.value ? this.maxOffset : 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .switch-container {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .switch-thumb {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ left: 4px;
|
|
|
+ z-index: 2;
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ font-weight: bold;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+</style>
|
xiongyi