From fe114d0f8524ee7ce817d17a48ac69758bac8b3d Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 18 Aug 2023 15:48:26 +0800
Subject: [PATCH] 重写筛选组件单选控件
---
/dev/null | 25 --------
plugins/filter/CFilterRadio.vue | 60 ++++++++++++++++++++
plugins/filter/cFilterRadio.scss | 45 +++++++++++++++
plugins/filter/CFilter.vue | 10 +-
4 files changed, 110 insertions(+), 30 deletions(-)
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index f1c80f2..5c680b3 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -67,10 +67,11 @@
:value="filterRes[item.name]"
:onChange="evt=>handleItemChange(item.name, evt)"
/>
- <CFilterSwitchRadio
- v-if="item.type==='switchRadio'"
+ <CFilterRadio
+ v-if="item.type==='radio'"
type="item"
:label="item.label"
+ :options="selectOptions[item.name] || []"
:value="filterRes[item.name]"
:onChange="evt=>handleItemChange(item.name, evt)"
/>
@@ -106,7 +107,7 @@
import { CDrawer } from '@components/layout/drawer';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
-import CFilterSwitchRadio from './CFilterSwitchRadio';
+import CFilterRadio from './CFilterRadio';
import CFilterInput from './CFilterInput';
import './cFilter.scss';
@@ -117,7 +118,7 @@
AtButton,
CFilterSelect,
CFilterDateRange,
- CFilterSwitchRadio,
+ CFilterRadio,
CFilterInput,
CDrawer,
},
@@ -199,7 +200,6 @@
},
mounted() {
$(this.$refs.filter).parent().css({ transform: 'translate(0,0);' });
- console.log(this.filterRes);
},
};
</script>
diff --git a/plugins/filter/CFilterRadio.vue b/plugins/filter/CFilterRadio.vue
new file mode 100644
index 0000000..f4489ec
--- /dev/null
+++ b/plugins/filter/CFilterRadio.vue
@@ -0,0 +1,60 @@
+/**
+ * CFilterRadio - 筛选项目，单选
+ * @author Tevin
+ */
+
+<template>
+ <view
+ class="c-filter-radio"
+ :class="'type-'+type"
+ >
+ <view
+ class="label"
+ v-if="type==='item'"
+ >{{label}}</view>
+ <view class="content">
+ <view
+ class="c-filter-radio-item"
+ v-for="item of options"
+ :key="item.value"
+ @tap="evt => handleChange(item.value)"
+ >
+ <view
+ class="c-filter-radio-icon"
+ :class="value === item.value ? 'checked' : ''"
+ >
+ <AtIcon value="check" />
+ </view>
+ <view class="c-filter-radio-label">{{item.label || item.name}}</view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { AtIcon } from 'taro-ui-vue';
+import './cFilterRadio.scss';
+
+export default {
+ name: 'CFilterRadio',
+ components: {
+ AtIcon,
+ },
+ props: {
+ type: String,
+ label: String,
+ options: Array,
+ value: [String, Number],
+ onChange: Function,
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ handleChange(value) {
+ this.onChange(value);
+ },
+ },
+};
+</script>
\ No newline at end of file
diff --git a/plugins/filter/CFilterSwitchRadio.vue b/plugins/filter/CFilterSwitchRadio.vue
deleted file mode 100644
index 1247e6e..0000000
--- a/plugins/filter/CFilterSwitchRadio.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * CFilterSwitchRadio - 筛选项目，单选
- * @author Tevin
- */
-
-<template>
- <view
- class="c-filter-switch-radio"
- :class="'type-'+type"
- >
- <view
- class="label"
- v-if="type==='item'"
- >{{label}}</view>
- <CSwitchRadio
- :itemRes="{
- label: type==='bar' ? label : '',
- name: switchName,
- formData: switchData,
- onChange: evt => handleChange(evt),
- }"
- checkAlign="left"
- checkedLabel="在线"
- uncheckedLabel="离线"
- />
- </view>
-</template>
-
-<script>
-import Taro from '@tarojs/taro';
-import { CSwitchRadio } from '@components/forms/switch';
-import './cFilterSwitchRadio.scss';
-
-export default {
- name: 'CFilterSwitchRadio',
- components: {
- CSwitchRadio,
- },
- props: {
- type: String,
- label: String,
- value: Boolean,
- onChange: Function,
- },
- data() {
- return {
- switchName: 'radio',
- switchData: {
- radio: '',
- },
- };
- },
- computed: {},
- watch: {
- value(newVal, oldVal) {
- this.switchData.radio = newVal;
- },
- },
- methods: {
- handleChange(value) {
- this.onChange(value);
- },
- },
- mounted() {
- this.switchData.radio = this.value;
- },
-};
-</script>
\ No newline at end of file
diff --git a/plugins/filter/cFilterRadio.scss b/plugins/filter/cFilterRadio.scss
new file mode 100644
index 0000000..bb2e11c
--- /dev/null
+++ b/plugins/filter/cFilterRadio.scss
@@ -0,0 +1,45 @@
+/**
+ * CFilterSwitchRadio
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-filter-radio {
+ .label {
+ color: #666;
+ line-height: 40px;
+ }
+ .content {
+ .c-filter-radio-item {
+ display: inline-block;
+ padding-right: 24px;
+ }
+ .c-filter-radio-icon {
+ @include flexbox(inline, center center);
+ width: 48px;
+ min-width: 48px;
+ height: 48px;
+ vertical-align: middle;
+ 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;
+ }
+ }
+ .c-filter-radio-label {
+ display: inline-block;
+ vertical-align: middle;
+ padding-left: 6px;
+ }
+ }
+ &.type-item {}
+}
\ No newline at end of file
diff --git a/plugins/filter/cFilterSwitchRadio.scss b/plugins/filter/cFilterSwitchRadio.scss
deleted file mode 100644
index e66cf98..0000000
--- a/plugins/filter/cFilterSwitchRadio.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * CFilterSwitchRadio
- * @author Tevin
- */
-
-@import "../../common/sassMixin";
-
-.c-filter-switch-radio {
- .label {
- color: #666;
- line-height: 40px;
- }
- &.type-item {
- .c-switch-radio {
- .at-switch {
- display: none;
- }
- .c-switch-radio-group {
- position: sticky;
- padding: 0;
- transform: none;
- }
- }
- }
-}
\ No newline at end of file
--
Gitblit v1.9.1