From f4e3959c089651dd89288560c87fb5a49a6d2a6c Mon Sep 17 00:00:00 2001 From: cuiaiguang Date: Mon, 25 Oct 2021 23:55:45 +0800 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0textarea?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/textarea/__tests__/textarea.spec.ts | 8 +++ devui/textarea/index.ts | 17 +++++ devui/textarea/src/textarea-types.ts | 38 +++++++++++ devui/textarea/src/textarea.scss | 12 ++++ devui/textarea/src/textarea.tsx | 83 +++++++++++++++++++++++ docs/components/textarea/index.md | 61 +++++++++++++++++ 6 files changed, 219 insertions(+) create mode 100644 devui/textarea/__tests__/textarea.spec.ts create mode 100644 devui/textarea/index.ts create mode 100644 devui/textarea/src/textarea-types.ts create mode 100644 devui/textarea/src/textarea.scss create mode 100644 devui/textarea/src/textarea.tsx create mode 100644 docs/components/textarea/index.md diff --git a/devui/textarea/__tests__/textarea.spec.ts b/devui/textarea/__tests__/textarea.spec.ts new file mode 100644 index 00000000..d064cdf1 --- /dev/null +++ b/devui/textarea/__tests__/textarea.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Textarea } from '../index'; + +describe('textarea test', () => { + it('textarea init render', async () => { + // todo + }) +}) diff --git a/devui/textarea/index.ts b/devui/textarea/index.ts new file mode 100644 index 00000000..e5255a96 --- /dev/null +++ b/devui/textarea/index.ts @@ -0,0 +1,17 @@ +import type { App } from 'vue' +import Textarea from './src/textarea' + +Textarea.install = function(app: App): void { + app.component(Textarea.name, Textarea) +} + +export { Textarea } + +export default { + title: 'Textarea 多行文本框', + category: '数据录入', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(Textarea as any) + } +} diff --git a/devui/textarea/src/textarea-types.ts b/devui/textarea/src/textarea-types.ts new file mode 100644 index 00000000..4e5067b7 --- /dev/null +++ b/devui/textarea/src/textarea-types.ts @@ -0,0 +1,38 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export const textareaProps = { + id: { + type: String, + default: undefined + }, + autofocus: { + type: Boolean, + default: false + }, + placeholder: { + type: String, + default: undefined + }, + maxLength: { + type: Number, + default: undefined + }, + disabled: { + type: Boolean, + default: false + }, + error: { + type: Boolean, + default: false + }, + cssClass: { + type: String, + default: '' + }, + resize: { + type: String as PropType<'none' | 'vertical' | 'horizontal'|'both'|'inherit' >, + default: 'none' + }, +} as const + +export type TextareaProps = ExtractPropTypes diff --git a/devui/textarea/src/textarea.scss b/devui/textarea/src/textarea.scss new file mode 100644 index 00000000..101fbef8 --- /dev/null +++ b/devui/textarea/src/textarea.scss @@ -0,0 +1,12 @@ +@import '../../style/core/form'; +@import '../../style/mixins/flex'; + +.devui-textarea-wrap { + .devui-textarea-show-count { + text-align: right; + color: #00000073; + white-space: nowrap; + pointer-events: none; + font-size: $devui-font-size; + } +} diff --git a/devui/textarea/src/textarea.tsx b/devui/textarea/src/textarea.tsx new file mode 100644 index 00000000..cee67835 --- /dev/null +++ b/devui/textarea/src/textarea.tsx @@ -0,0 +1,83 @@ +import { computed, defineComponent, ref } from 'vue' +import { textareaProps, TextareaProps } from './textarea-types' +import './textarea.scss' + +export default defineComponent({ + name: 'DTextarea', + props: textareaProps, + emits: ['update:value', 'focus', 'blur', 'change', 'keydown'], + setup(props: TextareaProps, ctx) { + + const showCount = true + + const textareaCls = { + error: props.error, + [props.cssClass]: true, + } + console.log('textareaCls: ', textareaCls); + + const curLengthRef = ref(0) + console.log('curLength: ', curLengthRef.value); + + const onInput = ($event: Event) => { + const inputValue = ($event.target as HTMLInputElement).value + console.log('inputValue: ', inputValue); + curLengthRef.value = inputValue.length + console.log('inputValue.length: ', inputValue.length); + ctx.emit('update:value', inputValue); + }, + onFocus = () => { + ctx.emit('focus'); + }, + onBlur = () => { + ctx.emit('blur'); + }, + onChange = ($event: Event) => { + ctx.emit('change', ($event.target as HTMLInputElement).value); + }, + onKeydown = ($event: KeyboardEvent) => { + ctx.emit('keydown', $event); + }; + + return { + textareaCls, onInput, onFocus, onBlur, onChange, onKeydown, showCount, curLengthRef + }; + + }, + render() { + const { id, placeholder, disabled, + + maxLength, resize, textareaCls, onInput, onFocus, onBlur, onChange, onKeydown + , showCount, curLengthRef, ...attrs } = this + console.log('textareaCls: ', attrs); + return ( +
+ + { + showCount &&
+ {curLengthRef} + {!(maxLength ?? false) ? '' : ' / ' + maxLength} +
+ } +
+ ) + } +}) diff --git a/docs/components/textarea/index.md b/docs/components/textarea/index.md new file mode 100644 index 00000000..a8df24a9 --- /dev/null +++ b/docs/components/textarea/index.md @@ -0,0 +1,61 @@ +# Textarea 多行文本框 + +文本输入区域。 + +### 何时使用 + +需要手动输入文字，并且文字内容较多时使用。 + +### 基本用法 + +:::demo + +```vue + + +``` + +::: + +### d-textarea + +d-textarea 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | ---------- | +| | | | | | | +| | | | | | | +| | | | | | | + +d-textarea 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | | -- Gitee From 59fbacf147c8f1c715d7f5d9225622a8c53146d1 Mon Sep 17 00:00:00 2001 From: cuiaiguang Date: Tue, 26 Oct 2021 21:29:30 +0800 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E3=80=90textar?= =?UTF-8?q?ea=E3=80=91=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/textarea/src/textarea-types.ts | 8 ++ devui/textarea/src/textarea.tsx | 43 ++++---- docs/components/textarea/index.md | 142 +++++++++++++++++++++++---- 3 files changed, 153 insertions(+), 40 deletions(-) diff --git a/devui/textarea/src/textarea-types.ts b/devui/textarea/src/textarea-types.ts index 4e5067b7..46353ede 100644 --- a/devui/textarea/src/textarea-types.ts +++ b/devui/textarea/src/textarea-types.ts @@ -7,10 +7,18 @@ export const textareaProps = { }, autofocus: { type: Boolean, + default: false + }, + showCount: { + type: Boolean, default: false }, placeholder: { type: String, + default: undefined + }, + value: { + type: String, default: undefined }, maxLength: { diff --git a/devui/textarea/src/textarea.tsx b/devui/textarea/src/textarea.tsx index cee67835..4701f617 100644 --- a/devui/textarea/src/textarea.tsx +++ b/devui/textarea/src/textarea.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, ref } from 'vue' +import { defineComponent, ref } from 'vue' import { textareaProps, TextareaProps } from './textarea-types' import './textarea.scss' @@ -7,30 +7,22 @@ export default defineComponent({ props: textareaProps, emits: ['update:value', 'focus', 'blur', 'change', 'keydown'], setup(props: TextareaProps, ctx) { - - const showCount = true - const textareaCls = { error: props.error, [props.cssClass]: true, } - console.log('textareaCls: ', textareaCls); const curLengthRef = ref(0) - console.log('curLength: ', curLengthRef.value); - const onInput = ($event: Event) => { const inputValue = ($event.target as HTMLInputElement).value - console.log('inputValue: ', inputValue); curLengthRef.value = inputValue.length - console.log('inputValue.length: ', inputValue.length); ctx.emit('update:value', inputValue); }, - onFocus = () => { - ctx.emit('focus'); + onFocus = ($event: Event) => { + ctx.emit('focus', $event); }, - onBlur = () => { - ctx.emit('blur'); + onBlur = ($event: Event) => { + ctx.emit('blur', $event); }, onChange = ($event: Event) => { ctx.emit('change', ($event.target as HTMLInputElement).value); @@ -40,16 +32,28 @@ export default defineComponent({ }; return { - textareaCls, onInput, onFocus, onBlur, onChange, onKeydown, showCount, curLengthRef + textareaCls, onInput, onFocus, onBlur, onChange, onKeydown, curLengthRef, ...props }; }, render() { - const { id, placeholder, disabled, - - maxLength, resize, textareaCls, onInput, onFocus, onBlur, onChange, onKeydown - , showCount, curLengthRef, ...attrs } = this - console.log('textareaCls: ', attrs); + const { + id, + value, + placeholder, + disabled, + maxLength, + resize, + textareaCls, + onInput, + onFocus, + onBlur, + onChange, + onKeydown, + showCount, + curLengthRef, + ...attrs + } = this return (
@@ -57,6 +61,7 @@ export default defineComponent({ {...attrs} {...{ DTextarea: true }} id={id} + value={value} autofocus={true} placeholder={placeholder} disabled={disabled} diff --git a/docs/components/textarea/index.md b/docs/components/textarea/index.md index a8df24a9..f13abd9f 100644 --- a/docs/components/textarea/index.md +++ b/docs/components/textarea/index.md @@ -14,23 +14,72 @@ + +``` + +::: + +### 调整大小 + +:::demo + +```vue + +``` + +::: + +### 显示字数 + +:::demo + +```vue +