From bbf650c05d393447f8ff4afb7e6e21f109281c7b Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 17 Aug 2023 16:48:27 +0800
Subject: [PATCH] 页面筛选组件，增加单行文本输入子组件
---
plugins/filter/cFilterInput.scss | 25 ++++++++++++
plugins/filter/CFilterInput.vue | 51 +++++++++++++++++++++++++
plugins/filter/CFilterSwitchRadio.vue | 2
plugins/filter/CFilter.vue | 9 ++++
plugins/filter/cFilter.scss | 2
forms/input/CInput.vue | 4 +-
6 files changed, 89 insertions(+), 4 deletions(-)
diff --git a/forms/input/CInput.vue b/forms/input/CInput.vue
index 7c8d604..5d01979 100644
--- a/forms/input/CInput.vue
+++ b/forms/input/CInput.vue
@@ -17,7 +17,7 @@
:error="itemRes.error"
:cursorSpacing="0"
:value="value"
- :onChange="evt => hanldeChange(evt)"
+ :onChange="evt => handleChange(evt)"
>
<slot v-if="!unit" />
<text
@@ -61,7 +61,7 @@
},
},
methods: {
- hanldeChange(evt) {
+ handleChange(evt) {
// 去除首尾空格，小程序中还可以粘贴换行符进来
const changeValue = ((evt || '') + '')
.replace(/^\s+|\s+$/g, '')
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index 91c09dd..7567f16 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -74,6 +74,13 @@
:value="filterRes[item.name]"
:onChange="evt=>handleItemChange(item.name, evt)"
/>
+ <CFilterInput
+ v-if="item.type==='input'"
+ type="item"
+ :label="item.label"
+ :value="filterRes[item.name]"
+ :onChange="evt=>handleItemChange(item.name, evt)"
+ />
</view>
</scroll-view>
<view class="c-filter-drawer-btn">
@@ -100,6 +107,7 @@
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import CFilterSwitchRadio from './CFilterSwitchRadio';
+import CFilterInput from './CFilterInput';
import './cFilter.scss';
export default {
@@ -110,6 +118,7 @@
CFilterSelect,
CFilterDateRange,
CFilterSwitchRadio,
+ CFilterInput,
CDrawer,
},
props: {
diff --git a/plugins/filter/CFilterInput.vue b/plugins/filter/CFilterInput.vue
new file mode 100644
index 0000000..e03c129
--- /dev/null
+++ b/plugins/filter/CFilterInput.vue
@@ -0,0 +1,51 @@
+/**
+ * CFilterInput - 筛选项目，单选
+ * @author Tevin
+ */
+
+<template>
+ <view
+ class="c-filter-input"
+ :class="'type-'+type"
+ >
+ <view class="label">{{label}}</view>
+ <AtInput
+ type="text"
+ :placeholder="'请输入' + label"
+ :value="value"
+ :onChange="evt => handleChange(evt)"
+ />
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { AtInput } from 'taro-ui-vue';
+import './cFilterInput.scss';
+
+export default {
+ name: 'CFilterInput',
+ components: {
+ AtInput,
+ },
+ props: {
+ type: String,
+ label: String,
+ value: String,
+ onChange: Function,
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ handleChange(value) {
+ if (value) {
+ this.onChange(value);
+ } else {
+ this.onChange(undefined);
+ }
+ },
+ },
+ mounted() {},
+};
+</script>
\ No newline at end of file
diff --git a/plugins/filter/CFilterSwitchRadio.vue b/plugins/filter/CFilterSwitchRadio.vue
index 22a62bb..1247e6e 100644
--- a/plugins/filter/CFilterSwitchRadio.vue
+++ b/plugins/filter/CFilterSwitchRadio.vue
@@ -32,7 +32,7 @@
import './cFilterSwitchRadio.scss';
export default {
- name: 'CFilterRadio',
+ name: 'CFilterSwitchRadio',
components: {
CSwitchRadio,
},
diff --git a/plugins/filter/cFilter.scss b/plugins/filter/cFilter.scss
index b35c274..11384c0 100644
--- a/plugins/filter/cFilter.scss
+++ b/plugins/filter/cFilter.scss
@@ -44,7 +44,7 @@
width: 12px;
height: 12px;
content: " ";
- background-color: #36a0e7;
+ background-color: $colorDanger;
border-radius: 50%;
}
}
diff --git a/plugins/filter/cFilterInput.scss b/plugins/filter/cFilterInput.scss
new file mode 100644
index 0000000..2da2872
--- /dev/null
+++ b/plugins/filter/cFilterInput.scss
@@ -0,0 +1,25 @@
+/**
+ * CFilterInput
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-filter-input {
+ .label {
+ line-height: 40px;
+ }
+ .at-input {
+ height: 90px;
+ padding: 0;
+ margin: 0;
+ background-color: transparent;
+ &::after {
+ display: none;
+ }
+ input {
+ height: 90px;
+ line-height: 90px;
+ }
+ }
+}
\ No newline at end of file
--
Gitblit v1.9.1