From 49f99bdd4b08fbbe692efdfe52ae3ca29f4e8c6c Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 12 Jul 2022 14:57:05 +0800
Subject: [PATCH] 增加跳转页面选择组件
---
forms/select/index.js | 2 +
forms/select/CJumpSelect.vue | 79 +++++++++++++++++++++++++++++++++++++++
forms/form/CForm.vue | 3 +
3 files changed, 84 insertions(+), 0 deletions(-)
diff --git a/forms/form/CForm.vue b/forms/form/CForm.vue
index 8e42097..3cb1754 100644
--- a/forms/form/CForm.vue
+++ b/forms/form/CForm.vue
@@ -92,6 +92,9 @@
callback && callback(true);
});
},
+ $submit() {
+ this.handleSubmit();
+ },
},
mounted() {
// 当表单项变化时
diff --git a/forms/select/CJumpSelect.vue b/forms/select/CJumpSelect.vue
new file mode 100644
index 0000000..deb1be1
--- /dev/null
+++ b/forms/select/CJumpSelect.vue
@@ -0,0 +1,79 @@
+/**
+ * CJumpSelect
+ * @author Tevin
+ */
+
+<template>
+ <view
+ class="c-select"
+ :class="readOnly ? 'read-only':''"
+ >
+ <view @tap="evt => handleGoSelect()">
+ <AtInput
+ :name="itemRes.name"
+ :title="itemRes.label"
+ :required="itemRes.required"
+ :disabled="itemRes.disabled"
+ :error="itemRes.error"
+ :placeholder="placeholder"
+ :value="choose.name"
+ >
+ <view
+ v-show="!readOnly"
+ class="at-icon at-icon-chevron-right"
+ />
+ </AtInput>
+ </view>
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { AtInput } from 'taro-ui-vue';
+import './cSelect.scss';
+
+export default {
+ name: 'CJumpSelect',
+ components: {
+ AtInput,
+ },
+ props: {
+ // 表单数据资源（表单组件内部机制专用）
+ itemRes: Object,
+ // 占位提示
+ placeholder: String,
+ // 跨页选择模式
+ onPageSelectCall: Function,
+ // 只读模式
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ data() {
+ return {
+ choose: {
+ name: '',
+ value: null,
+ },
+ };
+ },
+ computed: {},
+ methods: {
+ handleChange(evt) {
+ const item = this.options[evt.value];
+ this.itemRes.onChange(item[this.optionKey]);
+ },
+ handleGoSelect() {
+ this.onPageSelectCall(selected => {
+ this.choose.name = selected.name;
+ this.choose.value = selected.value;
+ this.itemRes.onChange(selected.value);
+ });
+ },
+ },
+ beforeDestroy() {
+ this.onPageSelectCall(null);
+ },
+};
+</script>
\ No newline at end of file
diff --git a/forms/select/index.js b/forms/select/index.js
index 0e6b3da..1d41a5f 100644
--- a/forms/select/index.js
+++ b/forms/select/index.js
@@ -4,7 +4,9 @@
*/
import CSelect from '@components/forms/select/CSelect.vue';
+import CJumpSelect from '@components/forms/select/CJumpSelect.vue';
export {
CSelect,
+ CJumpSelect,
}
\ No newline at end of file
--
Gitblit v1.9.1