Textarea 文本域

文本域输入框，基础 el-input(type="textarea") 封装，增加了 "允许清空、前/后扩展插槽" 等扩展功能。

基本用法

点击查看代码

<template>
  <s-textarea v-model="textareaValue" placeholder="请输入" />
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const textareaValue = ref<string>("");
</script>

允许清空

点击查看代码

<template>
  <s-textarea v-model="textareaValue" placeholder="请输入" clearable />
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const textareaValue = ref<string>("");
</script>

复合按钮

文本域尺寸:

smalldefaultlarge

前置插槽

后置插槽

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="文本域尺寸" label-width="100">
      <el-radio-group v-model="textareaSize">
        <el-radio v-for="item in textareaSizeOptions" :key="item" :label="item.label" :value="item.value" />
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-textarea v-model="textareaValue" placeholder="请输入" :size="textareaSize" clearable>
    <template #prepend>前置插槽</template>
    <template #append>后置插槽</template>
  </s-textarea>
</template>

<script setup lang="ts">
  import { reactive, ref } from "vue";

  const textareaValue = ref<string>("");
  const textareaSize = ref<string>(undefined);

  const textareaSizeOptions = reactive([
    { value: "small", label: "small" },
    { value: "default", label: "default" },
    { value: "large", label: "large" }
  ]);
</script>

Props

Slots

Emits

Methods