!265 textarea组件

Merge pull request !265 from Afterain/dev

Author: kagol

packages/devui-vue/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
+ })
+})

packages/devui-vue/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: '已完成', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+ install(app: App): void {
+ app.use(Textarea as any)
+ }
+}

packages/devui-vue/devui/textarea/src/textarea-types.ts

@@ -0,0 +1,48 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const textareaProps = {
+ id: {
+ type: String,
+ default: undefined,
+ },
+ autofocus: {
+ type: Boolean,
+ default: false,
+ },
+ showCount: {
+ type: Boolean,
+ default: false,
+ },
+ placeholder: {
+ type: String,
+ default: undefined,
+ },
+ value: {
+ type: String,
+ default: '',
+ },
+ maxLength: {
+ type: [String, Number] as PropType<number | string>,
+ 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<typeof textareaProps>;

packages/devui-vue/devui/textarea/src/textarea.scss

@@ -0,0 +1,11 @@
+@import '../../style/core/form';
+
+.devui-textarea-wrap {
+ .devui-textarea-show-count {
+ text-align: right;
+ color: inherit;
+ white-space: nowrap;
+ pointer-events: none;
+ font-size: $devui-font-size;
+ }
+}

packages/devui-vue/devui/textarea/src/textarea.tsx

@@ -0,0 +1,89 @@
+import { 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 textareaCls = {
+ error: props.error,
+ [props.cssClass]: true,
+ };
+
+ const curValueRef = ref<string>(props.value);
+ const onInput = ($event: Event) => {
+ const inputValue = ($event.target as HTMLInputElement).value;
+ curValueRef.value = inputValue;
+ ctx.emit("update:value", inputValue);
+ },
+ onFocus = ($event: Event) => {
+ ctx.emit("focus", $event);
+ },
+ onBlur = ($event: Event) => {
+ ctx.emit("blur", $event);
+ },
+ 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,
+ curValueRef,
+ autofocus: props.autofocus,
+ };
+ },
+ render() {
+ const {
+ id,
+ placeholder,
+ disabled,
+ maxLength,
+ resize,
+ textareaCls,
+ onInput,
+ onFocus,
+ onBlur,
+ onChange,
+ onKeydown,
+ showCount,
+ autofocus,
+ curValueRef,
+ } = this;
+ return (
+ <div class="devui-textarea-wrap">
+ <textarea
+ {...{ DTextarea: true }}
+ id={id}
+ value={curValueRef}
+ autofocus={autofocus}
+ placeholder={placeholder}
+ disabled={disabled}
+ maxlength={maxLength}
+ style={{ resize: resize }}
+ class={textareaCls}
+ onInput={onInput}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ onChange={onChange}
+ onKeydown={onKeydown}
+ ></textarea>
+ {showCount && (
+ <div class="devui-textarea-show-count">
+ {curValueRef.length}
+ {!(maxLength ?? false) ? "" : " / " + maxLength}
+ </div>
+ )}
+ </div>
+ );
+ },
+});

packages/devui-vue/docs/components/textarea/index.md

@@ -0,0 +1,161 @@
+# Textarea 多行文本框
+
+文本输入区域。
+
+### 何时使用
+
+需要手动输入文字，并且文字内容较多时使用。
+
+### 基本用法
+
+:::demo
+
+```vue
+<template>
+ <h4 style="margin: 10px 0">Default</h4>
+
+ <d-textarea
+ value="我是默认值"
+ :autofocus="true"
+ id="textArea"
+ cssClass="my-text-area"
+ ></d-textarea>
+
+ <h4 style="margin: 10px 0">Disabled</h4>
+
+ <d-textarea placeholder="我是被禁用状态" :disabled="true"></d-textarea>
+
+ <h4 style="margin: 10px 0">Error</h4>
+
+ <d-textarea placeholder="我是出错状态" :error="true"></d-textarea>
+</template>
+<style>
+.dinput {
+ width: 200px;
+}
+</style>
+```
+
+:::
+
+### 调整大小
+
+:::demo
+
+```vue
+<template>
+ <h4 style="margin: 10px 0">vertical</h4>
+ <d-textarea placeholder="我可以缩放" resize="vertical"></d-textarea>
+
+ <h4 style="margin: 10px 0">horizontal</h4>
+
+ <d-textarea resize="horizontal" placeholder="请输入"></d-textarea>
+
+ <h4 style="margin: 10px 0">both</h4>
+
+ <d-textarea resize="both" placeholder="请输入"></d-textarea>
+
+ <h4 style="margin: 10px 0">none</h4>
+
+ <d-textarea resize="none" placeholder="请输入"></d-textarea>
+
+ <h4 style="margin: 10px 0">inherit</h4>
+
+ <d-textarea resize="inherit" placeholder="请输入"></d-textarea>
+</template>
+```
+
+:::
+
+### 显示字数
+
+:::demo
+
+```vue
+<template>
+ <h4 style="margin: 10px 0">默认</h4>
+ <d-textarea :showCount="true" placeholder="请输入"></d-textarea>
+ <h4 style="margin: 10px 0">显示最大字数</h4>
+ <d-textarea
+ :showCount="true"
+ :maxLength="20"
+ placeholder="请输入"
+ ></d-textarea>
+</template>
+<style>
+.dinput {
+ width: 200px;
+}
+</style>
+```
+
+:::
+
+### 事件响应
+
+:::demo
+
+```vue
+<template>
+ <d-textarea
+ :showCount="true"
+ :maxLength="20"
+ placeholder="打开控制台输入文字看看"
+ @update:value="onUpdate"
+ @change="onChange"
+ @focus="onFocus"
+ @keydown="onKeydown"
+ ></d-textarea>
+</template>
+<script>
+export default {
+ setup() {
+ const onUpdate = (value) => {
+ console.log("【d-textarea update value】： ", value);
+ };
+ const onChange = (value) => {
+ console.log("【d-textarea change value】：", value);
+ };
+ const onFocus = (e) => {
+ console.log("【d-textarea onFocus】:", e);
+ };
+ const onKeydown = (e) => {
+ console.log("【d-textarea onKeydown:", e);
+ };
+ return {
+ onUpdate,
+ onChange,
+ onFocus,
+ onKeydown,
+ };
+ },
+};
+</script>
+```
+
+:::
+
+### d-textarea API
+
+d-textarea 参数
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
+| ----------- | --------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------ | --------------------- | ---------- |
+| id | string | `-` | 可选，文本框 id | [基本用法](#基本用法) | |
+| placeholder | string | `-` | 可选，文本框 placeholder | [基本用法](#基本用法) | |
+| value | string | `-` | 可选，文本框默认值 | [基本用法](#基本用法) | |
+| disabled | boolean | `false` | 可选，文本框是否被禁用 | [基本用法](#基本用法) | |
+| autoFocus | boolean | `false` | 可选，文本框是否自动获得焦点 | [基本用法](#基本用法) | |
+| error | boolean | `false` | 可选，文本框是否出现输入错误 | [基本用法](#基本用法) | |
+| resize | `'none' \|'vertical' \|'horizontal' \|'both' \|'inherit'` | `'none'` | 可选，文本框是否可调整大小，可选项：不可调整，水平调整，垂直调整，自由调整，默认继承 | [调整大小](#调整大小) | |
+| showCount | boolean | `false` | 可选，文本框是否是否展示字数 | [显示字数](#显示字数) | |
+
+d-textarea 事件
+
+| 事件 | 类型 | 说明 | 跳转 Demo |
+| ------- | ---------------------- | ------------------------------ | --------------------- |
+| update | `EventEmitter<string>` | 文本框内容变化（实时触发） | [事件响应](#事件响应) |
+| focus | `EventEmitter<Event>` | 文本框获得焦点 | [事件响应](#事件响应) |
+| blur | `EventEmitter<Event>` | 文本框失去焦点 | [事件响应](#事件响应) |
+| change | `EventEmitter<string>` | 文本框内容变化（失去焦点触发） | [事件响应](#事件响应) |
+| keydown | `EventEmitter<Event>` | 文本框按下键盘 | [事件响应](#事件响应) |