From 69acc93bc052651b725008beb83db0baee8f3259 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 07 Mar 2022 16:18:36 +0800
Subject: [PATCH] 重写 CSwitchRadio，弃用 Taro radio 组件
---
forms/switch/cSwitch.scss | 26 +++++++++++-
forms/switch/CSwitchRadio.vue | 52 +++++++++++++++++--------
2 files changed, 58 insertions(+), 20 deletions(-)
diff --git a/forms/switch/CSwitchRadio.vue b/forms/switch/CSwitchRadio.vue
index 942e864..ae626e5 100644
--- a/forms/switch/CSwitchRadio.vue
+++ b/forms/switch/CSwitchRadio.vue
@@ -9,30 +9,45 @@
:class="className"
>
<AtSwitch :title="itemRes.label" />
- <radio-group @change="evt => handleChange(evt.detail.value)">
- <label>
- <radio
- value="true"
- :checked="itemRes.formData[itemRes.name]"
- >{{checkedLabel}}</radio>
- </label>
- <label>
- <radio
- value="false"
- :checked="!itemRes.formData[itemRes.name]"
- >{{uncheckedLabel}}</radio>
- </label>
- </radio-group>
+ <view class="c-switch-radio-group">
+ <view
+ class="c-switch-radio-item"
+ @tap="evt => handleChange(true)"
+ >
+ <text
+ class="c-switch-radio-icon"
+ :class="current === true ? 'checked' : ''"
+ >
+ <AtIcon value="check" />
+ </text>
+ <text>{{checkedLabel}}</text>
+ </view>
+ <view
+ class="c-switch-radio-item"
+ @tap="evt => handleChange(false)"
+ >
+ <text
+ class="c-switch-radio-icon"
+ :class="current === false ? 'checked' : ''"
+ >
+ <AtIcon value="check" />
+ </text>
+ <text>{{uncheckedLabel}}</text>
+ </view>
+ </view>
</view>
</template>
<script>
-import { AtSwitch } from 'taro-ui-vue';
+import { AtSwitch, AtIcon } from 'taro-ui-vue';
import './cSwitch.scss';
export default {
name: 'CSwitchRadio',
- components: { AtSwitch },
+ components: {
+ AtSwitch,
+ AtIcon,
+ },
props: {
// 表单数据资源（表单组件内部机制专用）
itemRes: Object,
@@ -59,10 +74,13 @@
}
return className;
},
+ current() {
+ return this.itemRes.formData[this.itemRes.name];
+ },
},
methods: {
handleChange(value) {
- this.itemRes.onChange(JSON.parse(value));
+ this.itemRes.onChange(value);
},
},
};
diff --git a/forms/switch/cSwitch.scss b/forms/switch/cSwitch.scss
index eb0f68a..91db6ff 100644
--- a/forms/switch/cSwitch.scss
+++ b/forms/switch/cSwitch.scss
@@ -39,13 +39,33 @@
.at-switch__container {
visibility: hidden;
}
- .weui-cells_radiogroup {
+ .c-switch-radio-group {
@include position(absolute, 50% n n 0);
padding: 24px 32px 24px 0;
transform: translateY(-50%);
}
- .weui-check:checked+.weui-icon-checked:before {
- color: #2093df;
+ .c-switch-radio-item {
+ display: inline-block;
+ padding-left: 8px;
+ }
+ .c-switch-radio-icon {
+ @include flexbox(inline, center center);
+ width: 48px;
+ min-width: 48px;
+ height: 48px;
+ color: transparent;
+ font-size: 32px;
+ line-height: 1;
+ border: 1PX solid #c9c9c9;
+ border-radius: 50%;
+ background-color: #fff;
+ box-sizing: border-box;
+ transition: all .2s;
+ &.checked {
+ color: #fff;
+ border: none;
+ background-color: #2093df;
+ }
}
}
}
\ No newline at end of file
--
Gitblit v1.9.1