From 23b866659d5e4bb61be38bccffec1727583bebba Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 19 Apr 2021 18:03:15 +0800
Subject: [PATCH] 增加数值输入组件
---
forms/inputNumber/CInputNumber.vue | 73 ++++++++++++++++++++++++++++++++++++
forms/textarea/CTextArea.vue | 1
forms/inputNumber/cInputNumber.scss | 30 +++++++++++++++
forms/inputNumber/index.js | 10 +++++
4 files changed, 114 insertions(+), 0 deletions(-)
diff --git a/forms/inputNumber/CInputNumber.vue b/forms/inputNumber/CInputNumber.vue
new file mode 100644
index 0000000..afd2ef5
--- /dev/null
+++ b/forms/inputNumber/CInputNumber.vue
@@ -0,0 +1,73 @@
+/**
+ * CInputNumber
+ * @author Tevin
+ */
+
+<template>
+ <view class="c-input-number">
+ <AtInput
+ ref="input"
+ :name="itemRes.name"
+ :title="itemRes.label"
+ :required="itemRes.required"
+ :disabled="itemRes.disabled"
+ :error="itemRes.error"
+ />
+ <AtInputNumber
+ ref="numbers"
+ :min="range[0]"
+ :max="range[1]"
+ :step="step"
+ :width="120"
+ :value="itemRes.formData[itemRes.name]"
+ :onChange="evt=>itemRes.onChange(evt)"
+ />
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { $ } from '@tarojs/extend';
+import { AtInput, AtInputNumber } from 'taro-ui-vue';
+import './cInputNumber.scss';
+
+export default {
+ name: 'CInputNumber',
+ components: {
+ AtInput,
+ AtInputNumber,
+ },
+ props: {
+ // 表单数据资源（表单组件内部机制专用）
+ itemRes: Object,
+ // 占位提示
+ placeholder: String,
+ // 取值范围
+ range: {
+ type: Array,
+ default: [0, 100],
+ },
+ // 步长
+ step: {
+ type: Number,
+ default: 1,
+ },
+ },
+ data() {
+ return {};
+ },
+ computed: {},
+ methods: {},
+ mounted() {
+ if (process.env.TARO_ENV === 'h5') {
+ $(this.$refs.input.$el)
+ .find('.at-input__input')
+ .prepend(this.$refs.textarea.$el);
+ } else if (process.env.TARO_ENV === 'weapp') {
+ $(this.$refs.input.$el)
+ .find('.at-input__container')
+ .append(this.$refs.numbers.$el);
+ }
+ },
+};
+</script>
\ No newline at end of file
diff --git a/forms/inputNumber/cInputNumber.scss b/forms/inputNumber/cInputNumber.scss
new file mode 100644
index 0000000..c2bdf7a
--- /dev/null
+++ b/forms/inputNumber/cInputNumber.scss
@@ -0,0 +1,30 @@
+/**
+ * input-number
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+
+.c-input-number {
+ .at-input__container {
+ .weui-input,
+ .at-input__input {
+ display: none;
+ }
+ }
+ .at-input__icon {
+ display: none;
+ }
+ .at-input {
+ padding: 16px 0;
+ }
+ .at-input-number {
+ .at-input-number__btn {
+ padding: 16px 16px;
+ }
+ .at-input-number__input {
+ font-size: 30px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/forms/inputNumber/index.js b/forms/inputNumber/index.js
new file mode 100644
index 0000000..ef40bcf
--- /dev/null
+++ b/forms/inputNumber/index.js
@@ -0,0 +1,10 @@
+/**
+ * CInputNumber
+ * @author Tevin
+ */
+
+import CInputNumber from '@components/forms/inputNumber/CInputNumber.vue';
+
+export {
+ CInputNumber,
+}
\ No newline at end of file
diff --git a/forms/textarea/CTextArea.vue b/forms/textarea/CTextArea.vue
index a4fac34..adb8c65 100644
--- a/forms/textarea/CTextArea.vue
+++ b/forms/textarea/CTextArea.vue
@@ -10,6 +10,7 @@
:name="itemRes.name"
:title="itemRes.label"
:required="itemRes.required"
+ :disabled="itemRes.disabled"
:error="itemRes.error"
/>
<textarea
--
Gitblit v1.9.1