基础多行文本框

<template>
  	<div class="demo-block-column">
		<div class="demo-textarea-row">
            <t-textarea
                v-model="value"
                placeholder="请输入描述文案"
                name="description"
                @change="onChange"
            />
            <t-textarea
            v-model="value3"
            placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}"
            name="description"
            :autosize="{minRows: 3, maxRows: 5}"
            />
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      value2: '',
      value3: '',
    };
  },
  methods: {
    onChange(value, e) {
      console.log('onChange：', value, e);
    },
  },
};
</script>

显示代码 复制代码 复制代码

不同状态多行文本框

成功状态

校验通过文本提示

错误状态

校验存在严重问题文本提示

<template>
  	<div class="demo-block-column">
		<div class="demo-textarea-row">
            <t-textarea status="success" default-value="成功状态" tips="校验通过文本提示" />
            <t-textarea status="error" default-value="错误状态" tips="校验存在严重问题文本提示" />
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

带有label的多行文本框

标题内容

undefined

标题内容

undefined

标题内容

undefined

<template>
  	<div class="demo-block-column">
		<div class="demo-textarea-row">
            <div class="care-textarea">
                <span class="care-textarea__label">标题内容</span>
                <t-textarea />
            </div>
            <div class="care-textarea">
                <span class="care-textarea__label care-textarea__label--prefix">标题内容</span>
                <t-textarea />
            </div>
            <div class="care-textarea care-textarea--vertical">
                <span class="care-textarea__label">标题内容</span>
                <t-textarea />
            </div>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码