From 2baa58f9515a661d53118344e237e3441300b24f Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期四, 03 六月 2021 17:03:40 +0800
Subject: [PATCH] 内容修改
---
src/components/smallModule/mwSwitch.vue | 124 +++++++++++++++++++++++------------------
1 files changed, 69 insertions(+), 55 deletions(-)
diff --git a/src/components/smallModule/mwSwitch.vue b/src/components/smallModule/mwSwitch.vue
index f0f1c3e..44f7ddb 100644
--- a/src/components/smallModule/mwSwitch.vue
+++ b/src/components/smallModule/mwSwitch.vue
@@ -1,62 +1,74 @@
<template>
- <div>
- <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle"
- style="position:relative">
- <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;display: flex;
- align-items: center;color:#FFF;user-select:none">
- {{direction[0]}}
- </div>
- <div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;display: flex;flex-direction: row-reverse;
- align-items: center;color:#7A7A7A;user-select:none">
- {{direction[1]}}
- </div>
- </span>
- </div>
+ <div>
+ <span
+ class="weui-switch" :class="{'weui-switch-on' : isChecked, 'switch-disabled': disabled}"
+ :value="value" @click="toggle" style="position:relative">
+ <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;display: flex;
+ align-items: center;color:#FFF;user-select:none">
+ {{ direction[0] }}
+ </div>
+ <div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;display: flex;flex-direction: row-reverse;
+ align-items: center;color:#7A7A7A;user-select:none">
+ {{ direction[1] }}
+ </div>
+ </span>
+ </div>
</template>
<script>
- export default {
+export default {
name: 'switchComponent',
+ model: {
+ prop: "value",
+ event: 'changeValue'
+ },
props: {
- value: {
- type: Boolean,
- default: true
- },
- text: {
- type: String,
- default: ''
- }
+ value: {
+ type: Boolean,
+ default: true
+ },
+ text: {
+ type: String,
+ default: ''
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ },
},
data() {
- return {
- isChecked: this.value
- }
+ return {
+ isChecked: this.value
+ }
},
computed: {
- direction() {
- if (this.text) {
- return this.text.split('|')
- } else {
- return []
+ direction() {
+ if (this.text) {
+ return this.text.split('|')
+ } else {
+ return []
+ }
}
- }
},
watch: {
- value(val) {
- this.isChecked = val
- },
- isChecked(val) {
- this.$emit('change', val);
- }
+ value(val) {
+ this.isChecked = val
+ },
+ isChecked(val) {
+ this.$emit('change', val);
+ }
},
methods: {
- toggle() {
- this.isChecked = !this.isChecked;
- }
- }
- }
+ toggle() {
+ if(!this.disabled) {
+ this.isChecked = !this.isChecked;
+ this.$emit('changeValue', this.isChecked);
+ }
+ }
+ },
+}
</script>
<style>
- .weui-switch {
+.weui-switch {
display: block;
position: relative;
width: 72px;
@@ -68,9 +80,11 @@
transition: background-color 0.1s, border 0.1s;
cursor: pointer;
font-size: 12px;
- }
-
- .weui-switch:before {
+}
+.weui-switch.switch-disabled {
+ cursor: not-allowed;
+}
+.weui-switch:before {
content: " ";
position: absolute;
top: 0;
@@ -80,9 +94,9 @@
border-radius: 15px;
background-color: #d7d7d7;
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
- }
+}
- .weui-switch:after {
+.weui-switch:after {
content: " ";
position: absolute;
top: 0;
@@ -93,19 +107,19 @@
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
- }
+}
- .weui-switch-on {
+.weui-switch-on {
border-color: #6F6F6F;
background-color: #1AAD19;
- }
+}
- .weui-switch-on:before {
+.weui-switch-on:before {
border-color: #1AAD19;
background-color: #409eff;
- }
+}
- .weui-switch-on:after {
+.weui-switch-on:after {
transform: translateX(45px);
- }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1