mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
4 lines
31 KiB
JavaScript
4 lines
31 KiB
JavaScript
import{_ as d,E as e,c as l,o as h,aR as n,I as i,a as t,w as a}from"./chunks/framework.C7RrxATG.js";const F=JSON.parse('{"title":"Textarea 文本域","description":"","frontmatter":{},"headers":[],"relativePath":"component/textarea.md","filePath":"component/textarea.md","lastUpdated":1762249100000}'),r={name:"component/textarea.md"},o=n(`<h1 id="textarea-文本域" tabindex="-1">Textarea 文本域 <a class="header-anchor" href="#textarea-文本域" aria-label="Permalink to "Textarea 文本域""></a></h1><p>用于输入多行文本信息。</p><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to "基本用法""></a></h2><p>可以通过 <code>v-model</code> 双向绑定输入框的值，通过 <code>placeholder</code> 设置占位提示文字。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"请填写评价"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="禁用" tabindex="-1">禁用 <a class="header-anchor" href="#禁用" aria-label="Permalink to "禁用""></a></h2><p>通过设置 <code>disabled</code> 属性，实现禁用文本域。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="只读" tabindex="-1">只读 <a class="header-anchor" href="#只读" aria-label="Permalink to "只读""></a></h2><p>通过设置 <code>readonly</code> 属性，实现文本域只读。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="清空按钮" tabindex="-1">清空按钮 <a class="header-anchor" href="#清空按钮" aria-label="Permalink to "清空按钮""></a></h2><p>通过设置 <code>clearable</code> 属性实现清空按钮，设置<code>show-word-limit</code>与<code>maxlength</code>实现字数限制。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"120"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearable</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show-word-limit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="有值且聚焦时展示清空按钮" tabindex="-1">有值且聚焦时展示清空按钮 <a class="header-anchor" href="#有值且聚焦时展示清空按钮" aria-label="Permalink to "有值且聚焦时展示清空按钮""></a></h2><p>设置 <code>clear-trigger</code> 属性，可以控制是否聚焦时才展示清空按钮。</p><div class="warning custom-block"><p class="custom-block-title">注意</p><p>支付宝小程序暂不支持 <code>clear-trigger</code> 属性，且某种情况下清空按钮无法点击，原因参考此<a href="https://github.com/ant-design/ant-design-mini/issues/1255" target="_blank" rel="noreferrer">issue</a>（希望可以早点解决，所以直接给蚂蚁的组件库提了个issue）。</p></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clear-trigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"focus"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value14"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"120"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearable</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show-word-limit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="点击清除按钮时不自动聚焦" tabindex="-1">点击清除按钮时不自动聚焦 <a class="header-anchor" href="#点击清除按钮时不自动聚焦" aria-label="Permalink to "点击清除按钮时不自动聚焦""></a></h2><p>设置<code>focus-when-clear</code> 属性，可以控制点击清除按钮时是否自动聚焦。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :focus-when-clear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"false"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"120"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearable</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show-word-limit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="高度自适应" tabindex="-1">高度自适应 <a class="header-anchor" href="#高度自适应" aria-label="Permalink to "高度自适应""></a></h2><p>通过设置 <code>auto-height</code> 属性，实现高度自适应。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> auto-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="前置-icon" tabindex="-1">前置 icon <a class="header-anchor" href="#前置-icon" aria-label="Permalink to "前置 icon""></a></h2><p>设置前置 icon <code>prefix-icon</code>，icon 为 <a href="/component/icon.html">icon</a> 章节中的图标，如果没有你需要的图标，则使用 <code>prefix</code> 插槽进行自定义插入。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dong"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="设置-label-标题" tabindex="-1">设置 label 标题 <a class="header-anchor" href="#设置-label-标题" aria-label="Permalink to "设置 label 标题""></a></h2><p>设置 <code>label</code> 标题，可以和 <code>cell-group</code> 组合使用，形成 <code>cell</code> 展示类型。可以通过 <code>label-width</code> 设置标题宽度，默认为 '33%'。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;"> border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"基本用法"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearable</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"请输入..."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="必填样式" tabindex="-1">必填样式 <a class="header-anchor" href="#必填样式" aria-label="Permalink to "必填样式""></a></h2><p>设置了 <code>label</code> 的情况下，设置 <code>required</code> 属性，展示必填样式。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"请输入..."</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"必填"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> required</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="输入框大小" tabindex="-1">输入框大小 <a class="header-anchor" href="#输入框大小" aria-label="Permalink to "输入框大小""></a></h2><p>通过设置 <code>size</code> 修改输入框大小，将 <code>size</code> 设置为 'large' 时字号为 16px。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"基本用法"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"large"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"请输入..."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="错误状态" tabindex="-1">错误状态 <a class="header-anchor" href="#错误状态" aria-label="Permalink to "错误状态""></a></h2><p>设置 <code>error</code> 属性，输入框的值显示为红色。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"请输入用户名"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="垂直居中" tabindex="-1">垂直居中 <a class="header-anchor" href="#垂直居中" aria-label="Permalink to "垂直居中""></a></h2><p>当设置 <code>label</code> 标题时，默认为顶部居中，设置 <code>center</code> 属性可以使标题和输入框垂直居中。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"基本用法"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to "Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>v-model</td><td>绑定值</td><td>string / number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>placeholder</td><td>占位文本</td><td>string</td><td>-</td><td>请输入...</td><td>-</td></tr><tr><td>placeholderStyle</td><td>原生属性，指定 placeholder 的样式</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>placeholderClass</td><td>原生属性，指定 placeholder 的样式类</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>disabled</td><td>原生属性，禁用</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>maxlength</td><td>原生属性，最大输入长度，设置为 -1 时不限制最大长度</td><td>number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>auto-focus</td><td>原生属性，自动聚焦，拉起键盘</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>focus</td><td>原生属性，获取焦点</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>auto-height</td><td>原生属性，是否自动增高（设置时 style.height 不生效）</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>fixed</td><td>在 position:fixed 区域时需要设置为 true</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>cursorSpacing</td><td>原生属性，指定光标与键盘的距离（取 textarea 底部距离和该值的最小值）</td><td>number</td><td>-</td><td>0</td><td>-</td></tr><tr><td>cursor</td><td>原生属性，指定 focus 时的光标位置</td><td>number</td><td>-</td><td>-1</td><td>-</td></tr><tr><td>confirm-type</td><td>设置键盘右下角按钮的文字</td><td>string</td><td><code>done</code>/<code>go</code>/<code>next</code>/<code>search</code>/<code>send</code></td><td>-</td><td>-</td></tr><tr><td>confirm-hold</td><td>点击键盘右下角按钮时是否保持键盘不收起</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>show-confirm-bar</td><td>是否显示键盘上方"完成"栏</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>selection-start</td><td>原生属性，光标起始位置（需与 selection-end 搭配使用）</td><td>number</td><td>-</td><td>-1</td><td>-</td></tr><tr><td>selection-end</td><td>原生属性，光标结束位置（需与 selection-start 搭配使用）</td><td>number</td><td>-</td><td>-1</td><td>-</td></tr><tr><td>adjust-position</td><td>原生属性，键盘弹起时是否自动上推页面</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>disable-default-padding</td><td>原生属性，是否去掉 iOS 默认内边距</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>hold-keyboard</td><td>原生属性，focus 时点击页面不收起键盘</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>show-password</td><td>显示为密码框</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>clearable</td><td>显示清空按钮</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>readonly</td><td>只读</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>prefix-icon</td><td>前置图标（使用 icon 组件类名）</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>show-word-limit</td><td>显示字数限制（需设置 maxlength）</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>label</td><td>设置左侧标题</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>label-width</td><td>设置左侧标题宽度</td><td>string</td><td>-</td><td>33%</td><td>-</td></tr><tr><td>size</td><td>设置输入框大小</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>error</td><td>设置输入框错误状态（红色标识）</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>center</td><td>有 label 时设置标题和输入框垂直居中（默认顶部居中）</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>no-border</td><td>非 cell 类型下是否隐藏下划线</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>required</td><td>cell 类型下必填样式</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>marker-side</td><td>必填标记的位置</td><td>string</td><td>before / after</td><td>before</td><td>1.12.0</td></tr><tr><td>prop</td><td>表单域 <code>model</code> 字段名（表单校验必填）</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>rules</td><td>表单验证规则</td><td>FormItemRule[]</td><td>-</td><td>[]</td><td>-</td></tr><tr><td>clearTrigger</td><td>显示清除图标的时机：always（输入框非空时展示）/ focus（聚焦且非空时展示）</td><td>InputClearTrigger</td><td><code>focus</code>/<code>always</code></td><td><code>always</code></td><td>1.3.7</td></tr><tr><td>focusWhenClear</td><td>点击清除按钮时是否聚焦输入框</td><td>boolean</td><td>-</td><td>true</td><td>1.3.7</td></tr><tr><td>ignoreCompositionEvent</td><td>是否忽略文本合成系统事件处理（为 false 时触发 composition 相关事件，且在合成期间触发 input 事件）</td><td>boolean</td><td>-</td><td>true</td><td>1.3.11</td></tr><tr><td>inputmode</td><td>输入数据类型提示</td><td>InputMode</td><td>-</td><td>text</td><td>1.5.0</td></tr></tbody></table><h3 id="inputmode-可选值" tabindex="-1">InputMode 可选值 <a class="header-anchor" href="#inputmode-可选值" aria-label="Permalink to "InputMode 可选值""></a></h3><blockquote><p>新增于 uni-app 3.6.16+ inputmode是html规范后期更新的内容。各家小程序还未支持此属性。</p></blockquote><p>在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性，参见<a href="https://uniapp.dcloud.net.cn/component/input.html#inputmode" target="_blank" rel="noreferrer">inputmode</a>。</p><table tabindex="0"><thead><tr><th>值</th><th>说明</th></tr></thead><tbody><tr><td>none</td><td>无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。</td></tr><tr><td>text</td><td>使用用户本地区域设置的标准文本输入键盘。</td></tr><tr><td>decimal</td><td>小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。</td></tr><tr><td>numeric</td><td>数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。</td></tr><tr><td>tel</td><td>电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。</td></tr><tr><td>search</td><td>为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。</td></tr><tr><td>email</td><td>为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email">。</td></tr><tr><td>url</td><td>为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url">。</td></tr></tbody></table><h3 id="formitemrule-数据结构" tabindex="-1">FormItemRule 数据结构 <a class="header-anchor" href="#formitemrule-数据结构" aria-label="Permalink to "FormItemRule 数据结构""></a></h3><table tabindex="0"><thead><tr><th>键名</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>required</td><td>是否为必选字段</td><td><code>boolean</code></td></tr><tr><td>message</td><td>错误提示文案</td><td><code>string</code></td></tr><tr><td>validator</td><td>通过函数进行校验，可以返回一个 <code>Promise</code> 来进行异步校验</td><td><code>(value, rule) => boolean | Promise</code></td></tr><tr><td>pattern</td><td>通过正则表达式进行校验，正则无法匹配表示校验不通过</td><td><code>RegExp</code></td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><table tabindex="0"><thead><tr><th>事件名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>input</td><td>监听输入框 input 事件</td><td><code> {value, cursor, keyCode}</code></td><td>-</td></tr><tr><td>focus</td><td>监听输入框 focus 事件</td><td><code> { value, height }</code>, height 为键盘高度</td><td>-</td></tr><tr><td>blur</td><td>监听输入框 blur 事件</td><td><code> { value }</code></td><td>-</td></tr><tr><td>clear</td><td>监听输入框清空按钮事件</td><td>-</td><td>-</td></tr><tr><td>linechange</td><td>监听输入框行数变化</td><td><code> { height: 0, heightRpx: 0, lineCount: 0 }</code></td><td>-</td></tr><tr><td>confirm</td><td>点击完成时， 触发 confirm 事件</td><td><code> { value }</code></td><td>-</td></tr><tr><td>keyboardheightchange</td><td>键盘高度发生变化的时候触发此事件</td><td><code> { height, duration }</code></td><td>-</td></tr><tr><td>clickprefixicon</td><td>点击前置图标时触发</td><td>-</td><td>-</td></tr><tr><td>clicksuffixicon</td><td>点击后置图标时触发</td><td>-</td><td>-</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to "Slot""></a></h2><table tabindex="0"><thead><tr><th>name</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>label</td><td>左侧标题插槽</td><td>-</td></tr><tr><td>prefix</td><td>前置插槽</td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to "外部样式类""></a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr><tr><td>custom-textarea-container-class</td><td>textarea 容器外部自定义样式</td><td>-</td></tr><tr><td>custom-textarea-class</td><td>textarea 外部自定义样式</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to "源代码""></a></h2>`,58);function p(k,c,g,E,u,y){const s=e("ExternalLink");return h(),l("div",null,[o,i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/textarea"},{default:a(()=>[t("文档")]),_:1}),t(" • "),i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-textarea"},{default:a(()=>[t("组件")]),_:1})])}const m=d(r,[["render",p]]);export{F as __pageData,m as default};
|