[新增] textarea 组件

docs/docs/zh-CN/components/form.md

@@ -41,3 +41,28 @@ export default {
 </script>
 
 :::
+
+::: demo
+
+<template>
+  <lay-textarea placeholder="请输入密码"></lay-textarea>
+  <br>
+  <lay-textarea placeholder="请输入密码" v-model="data"></lay-textarea>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const data = ref("内容");
+
+    return {
+      data
+    }
+  }
+}
+</script>
+
+:::

src/index.ts

@@ -25,6 +25,7 @@ import LayBlock from "./module/block/index"
 import LayLine from "./module/line/index"
 import LayTimeline from "./module/timeline/index"
 import LayTimelineItem from "./module/timelineItem/index"
+import LayTextarea from "./module/textarea/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -48,7 +49,8 @@ const components: Record<string, IDefineComponent> = {
   LayBlock,
   LayLine,
   LayTimeline,
-  LayTimelineItem
+  LayTimelineItem,
+  LayTextarea
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -84,6 +86,7 @@ export {
   LayLine,
   LayTimeline,
   LayTimelineItem,
+  LayTextarea,
   install,
 }
 

src/module/textarea/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayTextarea', Component)
+}
+
+export default Component as IDefineComponent

src/module/textarea/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <textarea :value="modelValue" :placeholder="placeholder" :name="name" class="layui-textarea" @input="updateValue"></textarea>
+</template>
+
+<script setup name="LayTextarea" lang="ts">
+import { defineProps, defineEmits } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+    name?: string
+    modelValue?: string
+    placeholder?: string
+  }>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = function(event: InputEvent) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+
+</script>