From 846a5ab3a1f0d399a9891bc0880765fbf1e14608 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 01 Mar 2022 10:10:21 +0800
Subject: [PATCH] 下拉选择组件，支持只读模式
---
forms/datePicker/cDatePicker.scss | 1 +
forms/select/cSelect.scss | 4 ++++
forms/datePicker/CDatePicker.vue | 10 +++++-----
forms/select/CSelect.vue | 20 +++++++++++++++++---
4 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/forms/datePicker/CDatePicker.vue b/forms/datePicker/CDatePicker.vue
index e58bd51..4f3d64c 100644
--- a/forms/datePicker/CDatePicker.vue
+++ b/forms/datePicker/CDatePicker.vue
@@ -6,7 +6,7 @@
<template>
<view
class="c-date-picker"
- :class="readyOnly ? 'read-only':''"
+ :class="readOnly ? 'read-only':''"
>
<CDateRangeAction
v-if="mode==='dateRange'"
@@ -23,7 +23,7 @@
:placeholder="placeholder"
>
<view
- v-show="!readyOnly"
+ v-show="!readOnly"
class="at-icon at-icon-chevron-right"
/>
</AtInput>
@@ -43,7 +43,7 @@
:placeholder="placeholder"
>
<view
- v-show="!readyOnly"
+ v-show="!readOnly"
class="at-icon at-icon-chevron-right"
/>
</AtInput>
@@ -65,7 +65,7 @@
:placeholder="placeholder"
>
<view
- v-show="!readyOnly"
+ v-show="!readOnly"
class="at-icon at-icon-chevron-right"
/>
</AtInput>
@@ -104,7 +104,7 @@
// 结束日期
limitEnd: String,
// 是否只读
- readyOnly: {
+ readOnly: {
type: Boolean,
default: false,
},
diff --git a/forms/datePicker/cDatePicker.scss b/forms/datePicker/cDatePicker.scss
index 2622db2..d79be35 100644
--- a/forms/datePicker/cDatePicker.scss
+++ b/forms/datePicker/cDatePicker.scss
@@ -8,6 +8,7 @@
.c-date-picker {
&.read-only {
pointer-events: none;
+ background-color: #fafafa;
}
.at-input__input {
.weui-input {
diff --git a/forms/select/CSelect.vue b/forms/select/CSelect.vue
index 9270195..570c3b0 100644
--- a/forms/select/CSelect.vue
+++ b/forms/select/CSelect.vue
@@ -4,7 +4,10 @@
*/
<template>
- <view class="c-select">
+ <view
+ class="c-select"
+ :class="readOnly ? 'read-only':''"
+ >
<!-- 下拉选择模式 -->
<view
v-if="!selectByPage"
@@ -28,7 +31,10 @@
:placeholder="placeholder"
:value="selected"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly"
+ class="at-icon at-icon-chevron-right"
+ />
</AtInput>
</picker>
<view class="c-select-slot">
@@ -49,7 +55,10 @@
:placeholder="placeholder"
:value="choose.name"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly"
+ class="at-icon at-icon-chevron-right"
+ />
</AtInput>
</view>
</view>
@@ -77,6 +86,11 @@
selectByPage: String,
// 页面模式下，选择完成后的回调
onSelectFromPage: Function,
+ // 只读模式
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
diff --git a/forms/select/cSelect.scss b/forms/select/cSelect.scss
index dd64f44..9dce48c 100644
--- a/forms/select/cSelect.scss
+++ b/forms/select/cSelect.scss
@@ -6,6 +6,10 @@
@import "../../common/sassMixin";
.c-select {
+ &.read-only {
+ pointer-events: none;
+ background-color: #fafafa;
+ }
.at-input__input {
.weui-input {
pointer-events: none;
--
Gitblit v1.9.1