组件别名
<b-form-textarea> 还可以通过以下别名使用
<b-textarea>
注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。
表单文本域
创建多行文本输入，支持自动高度调整、最小和最大行数以及上下文状态。
<template>
<div>
<b-form-textarea
id="textarea"
v-model="text"
placeholder="Enter something..."
rows="3"
max-rows="6"
></b-form-textarea>
<pre class="mt-3 mb-0">{{ text }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
}
}
</script>
<!-- b-form-textarea.vue -->控件大小
使用 size 属性将文本高度设置为 sm 或 lg，分别表示小或大。
要控制宽度，请将输入放在标准 Bootstrap 网格列中。
<b-container fluid>
<b-row>
<b-col sm="2">
<label for="textarea-small">Small:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-small"
size="sm"
placeholder="Small textarea"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mt-2">
<b-col sm="2">
<label for="textarea-default">Default:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-default"
placeholder="Default textarea"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mt-2">
<b-col sm="2">
<label for="textarea-large">Large:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-large"
size="lg"
placeholder="Large textarea"
></b-form-textarea>
</b-col>
</b-row>
</b-container>
<!-- b-form-textarea-sizes.vue -->显示行
要设置 <b-form-textarea> 的高度，请将 rows 属性设置为所需的行数。如果未向 rows 提供值，则它将默认为 2（浏览器默认值和可接受的最小值）。将其设置为 null 或低于 2 的值将导致使用默认值 2。
<div>
<b-form-textarea
id="textarea-rows"
placeholder="Tall textarea"
rows="8"
></b-form-textarea>
</div>
<!-- b-form-textarea-rows.vue -->禁用调整手柄
某些 Web 浏览器允许用户调整文本区域的高度。若要禁用此功能，请将 no-resize 属性设置为 true。
<div>
<b-form-textarea
id="textarea-no-resize"
placeholder="Fixed height textarea"
rows="3"
no-resize
></b-form-textarea>
</div>
<!-- b-form-textarea-no-resize.vue -->自动高度
<b-form-textarea> 还可以自动调整其高度（文本行）以适应内容，即使用户输入或删除文本也是如此。文本区域的高度将增长或缩小以适应内容（增长到 max-rows 的最大值或缩小到 rows 的最小值）。
若要设置初始最小高度（以行为单位），请将 rows 属性设置为所需的行数（或将其保留为 2 的默认值），然后通过将 max-rows 属性设置为文本的最大行数（在显示滚动条之前），设置文本区域将增长到的最大行数。
若要使高度sticky（即永不缩小），请将 no-auto-shrink 属性设置为 true。如果未设置 max-rows 或其等于或小于 rows，则 no-auto-shrink 属性不起作用。
请注意，如果浏览器支持，文本区域的调整手柄将在自动高度模式下自动禁用。
<b-container fluid>
<b-row>
<b-col sm="2">
<label for="textarea-auto-height">Auto height:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-auto-height"
placeholder="Auto height textarea"
rows="3"
max-rows="8"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mt-2">
<b-col sm="2">
<label for="textarea-no-auto-shrink">No auto-shrink:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-no-auto-shrink"
placeholder="Auto height (no-shrink) textarea"
rows="3"
max-rows="8"
no-auto-shrink
></b-form-textarea>
</b-col>
</b-row>
</b-container>
<!-- b-form-textarea-auto-height.vue -->自动高度实现说明
自动高度通过 CSS 查询计算结果高度，因此输入必须在文档 (DOM) 中并且可见（不通过 display: none 隐藏）。初始高度在挂载时计算。如果浏览器客户端支持 IntersectionObserver（原生支持或通过 polyfill 支持），<b-form-textarea> 将利用此功能来确定文本区域何时变为可见，然后计算高度。请参阅入门页面上的 浏览器支持 部分。
上下文状态
Bootstrap 包含大多数表单控件上的 valid 和 invalid 状态的验证样式。
一般来说，您会希望对特定类型的反馈使用特定状态
false（表示无效状态）非常适合在存在阻止或必填字段时使用。用户必须正确填写此字段才能提交表单。true（表示有效状态）非常适合在整个表单中进行逐字段验证并希望引导用户完成其余字段的情况。null不显示验证状态（既不是有效也不是无效）
要在 <b-form-textarea> 上应用其中一个上下文状态图标，请将 state 属性设置为 false（无效）、true（有效）或 null（无验证状态）。
<template>
<div>
<b-form-textarea
id="textarea-state"
v-model="text"
:state="text.length >= 10"
placeholder="Enter at least 10 characters"
rows="3"
></b-form-textarea>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
}
}
</script>
<!-- b-form-textarea-state.vue -->向辅助技术和色盲用户传达上下文状态
使用这些上下文状态表示表单控件的状态仅提供可视的、基于颜色的指示，不会传达给辅助技术（例如屏幕阅读器）的用户或色盲用户。
确保还提供了状态的替代指示。例如，您可以在表单控件的 <label> 文本本身中包含有关状态的提示，或提供其他帮助文本块。
aria-invalid 属性
当 <b-form-textarea> 具有无效的上下文状态（即状态为 false）时，您可能还希望将属性 aria-invalid 设置为 true 或受支持的值之一
false：无错误（默认）true或'true'：该值验证失败。'grammar'：检测到语法错误。'spelling'检测到拼写错误。
如果 state 属性设置为 false，并且 aria-invalid 属性未明确设置，<b-form-textarea> 将自动将 aria-invalid 属性设置为 'true'。
格式化程序支持
<b-form-textarea> 可选择通过将函数引用传递给 formatter 属性来支持格式化。
格式化（当提供格式化程序函数时）在控件的本机 input 和 change 事件触发时发生。您可以使用布尔属性 lazy-formatter 将格式化程序函数限制为在控件的本机 blur 事件上调用。
formatter 函数接收两个参数：输入元素的原始 value，以及触发格式化的本机 event 对象（如果可用）。
formatter 函数应将格式化后的值作为 字符串 返回。
如果没有提供 formatter，则不会进行格式化。
<template>
<div>
<b-form-group
label="Textarea with formatter (on input)"
label-for="textarea-formatter"
description="We will convert your text to lowercase instantly"
class="mb-0"
>
<b-form-textarea
id="textarea-formatter"
v-model="text1"
placeholder="Enter your text"
:formatter="formatter"
></b-form-textarea>
</b-form-group>
<p style="white-space: pre-line"><b>Value:</b> {{ text1 }}</p>
<b-form-group
label="Textarea with lazy formatter (on blur)"
label-for="textarea-lazy"
description="This one is a little lazy!"
class="mb-0"
>
<b-form-textarea
id="textarea-lazy"
v-model="text2"
placeholder="Enter your text"
lazy-formatter
:formatter="formatter"
></b-form-textarea>
</b-form-group>
<p class="mb-0" style="white-space: pre-line"><b>Value:</b> {{ text2 }}</p>
</div>
</template>
<script>
export default {
data() {
return {
text1: '',
text2: ''
}
},
methods: {
formatter(value) {
return value.toLowerCase()
}
}
}
</script>
<!-- b-form-textarea-formatter.vue -->注意：对于非延迟格式化，如果光标不在输入值的末尾，则在键入字符 后，光标可能会跳到末尾。您可以使用提供的事件对象和 event.target 访问本机输入的选择方法和属性，以控制插入点的位置。这留给读者作为练习。
只读纯文本
如果您想在表单中以纯文本形式设置 <b-form-textarea readonly> 元素的样式，请设置 plaintext 属性（无需设置 readonly，因为它会自动设置），以移除默认的表单字段样式并保留正确的文本大小、边距、填充和高度。
<template>
<div>
<b-form-textarea id="textarea-plaintext" plaintext :value="text"></b-form-textarea>
</div>
</template>
<script>
export default {
data() {
return {
text: "This is some text.\nIt is read only and doesn't look like an input."
}
}
}
</script>
<!-- b-form-textarea-plaintext.vue -->v-model 修饰符
Vue 不正式支持 .lazy、.trim 和 .number 修饰符在基于自定义组件输入的 v-model 上，并且可能会产生糟糕的用户体验。避免使用 Vue 的原生修饰符。
为了解决这个问题，<b-form-textarea> 有三个布尔属性 trim、number 和 lazy，它们模拟了原生 Vue v-model 修饰符 .trim 和 .number 和 .lazy。lazy 属性将在 change/blur 事件上更新 v-model。
注意
number属性优先于trim属性（即当设置number时，trim将不起作用）。- 当使用
number属性时，如果该值可以解析为数字（通过parseFloat），它将向v-model返回类型为Number的值，否则原始输入值将作为类型String返回。这与原生.number修饰符的行为相同。 trim和number修饰符属性不影响input或change事件返回的值。这些事件始终会在可选格式化后返回<textarea>内容的字符串值（可能与通过v-modelupdate事件返回的值不匹配，该事件处理修饰符）。
防抖支持
作为 lazy 修饰符属性的替代方案，<b-form-textarea> 可选择支持延迟用户输入，在用户输入最后一个字符后的一段空闲时间（或发生 change 事件）后更新 v-model。如果用户在空闲超时到期之前输入新字符（或删除字符），则超时将重新开始。
要启用延迟，请将属性 debounce 设置为大于零的任何整数。该值以毫秒为单位指定。将 debounce 设置为 0 将禁用延迟。
注意：如果设置了 lazy 属性，则不会发生延迟。
<template>
<div>
<b-form-textarea v-model="value" debounce="500" rows="3" max-rows="5"></b-form-textarea>
<pre class="mt-2 mb-0">{{ value }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
}
}
</script>
<!-- b-form-textarea-debounce.vue -->自动对焦
当在 <b-form-textarea> 上设置 autofocus 属性时，当文本区域插入到文档中（即已装载）或在 Vue <keep-alive> 组件中重新激活时，文本区域将自动对焦。请注意，此属性不会在文本区域上设置 autofocus 属性，也无法判断文本区域何时变为可见。
原生事件和自定义事件
支持所有原生事件（除了自定义 input 和 change 事件），无需 .native 修饰符。
自定义 input 和 change 事件接收当前 value 的单个参数（在应用任何格式化后），并由用户交互触发。
自定义 update 事件传递输入值，并在需要更新 v-model 时发出（在 input、change 和 blur 之前发出，视需要而定）。
您始终可以通过使用 .native 修饰符访问原生 input 和 change 事件。
公开的输入属性和方法
<b-form-textarea> 在组件引用上公开几个原生输入元素的属性和方法（即为 <b-form-textarea ref="foo" ...> 分配 ref，并使用 this.$refs['foo'].propertyName 或 this.$refs['foo'].methodName(...)）。
输入属性
| 属性 | 注意 |
|---|---|
.selectionStart | 读/写 |
.selectionEnd | 读/写 |
.selectionDirection | 读/写 |
.validity | 只读 |
.validationMessage | 只读 |
.willValidate | 只读 |
输入方法
| 方法 | 注意 |
|---|---|
.focus() | 聚焦输入 |
.blur() | 取消输入聚焦 |
.select() | 选择输入内的所有文本 |
.setSelectionRange() | |
.setRangeText() | |
.setCustomValidity() | |
.checkValidity() | |
.reportValidity() |
请参阅 https://mdn.org.cn/en-US/docs/Web/API/HTMLInputElement 了解更多有关这些方法和属性的信息。支持将根据输入类型而异。
组件参考
属性
所有属性默认值都 全局可配置。
属性 (单击按升序排列) | 类型 (单击按升序排列) | 默认值 | 说明 |
|---|---|---|---|
aria-invalid | Boolean 或 String | false | 使用指定的值设置“aria-invalid”属性 |
autocomplete | String | 设置表单控件上的“autocomplete”属性值 | |
autofocus | Boolean | false | 当设置为 `true` 时，尝试在挂载时自动聚焦控件，或在处于保持活动状态时重新激活。不会在控件上设置 `autofocus` 属性 |
debouncev2.1.0+ | 数字或字符串 | 0 | 当设置为大于零的毫秒数时，将对用户输入进行去抖动。如果设置了属性“lazy”，则无效 |
disabled | Boolean | false | 当设置为`true`时，禁用组件的功能并将其置于禁用状态 |
form | String | 表单控件所属的表单的 ID。在控件上设置`form`属性 | |
formatter | 函数 | 用于设置文本域格式的函数的引用 | |
id | String | 用于设置呈现内容的`id`属性，并用作根据需要生成任何其他元素 ID 的基础 | |
lazyv2.1.0+ | Boolean | false | 设置后，在“change”/“blur”事件上更新 v-model，而不是“input”。模拟 Vue '.lazy' v-model 修饰符 |
lazy-formatter | Boolean | false | 设置后，文本域在失去焦点时进行格式化，而不是每次击键（如果指定了格式化程序） |
max-rows | 数字或字符串 | 要显示的最大行数。提供后，文本域将增长（或缩小）以适应最大行数的内容 | |
name | String | 设置表单控件上`name`属性的值 | |
no-auto-shrink | Boolean | false | 设置后，防止自动高度文本域缩小以适应内容 |
no-resize | Boolean | false | 设置后，禁用浏览器的调整手柄，防止用户更改文本域的高度。在自动高度模式下自动设置 |
number | Boolean | false | 设置时尝试将输入值转换为本机数字。模拟 Vue '.number' v-model 修饰符 |
placeholder | String | 设置表单控件上`placeholder`属性的值 | |
plaintext | Boolean | false | 将表单控件设置为只读，并渲染控件以使其看起来像纯文本（无边框） |
readonly | Boolean | false | 在表单控件上设置`readonly`属性 |
required | Boolean | false | 向表单控件添加`required`属性 |
rows | 数字或字符串 | 2 | 要显示的最小行数。必须大于 1 的值 |
size | String | 设置组件外观的大小。'sm'、'md'（默认）或'lg' | |
state | Boolean | null | 控制组件的验证状态外观。`true`表示有效，`false`表示无效，`null`表示没有验证状态 |
trim | Boolean | false | 设置后，从输入值中修剪所有前导和尾随空格。模拟 Vue '.trim' v-model 修饰符 |
值v-model | 数字或字符串 | '' | 文本区域的当前值。结果始终为字符串，除非使用了“number”属性 |
wrap | String | “soft” | 要放置在文本区域的“wrap”属性上的值。控制如何返回换行符 |
v-model
属性 | 事件 |
|---|---|
值 | update |
事件
事件 | 参数 | 说明 |
|---|---|---|
blur |
| 文本区域失去焦点后发出 |
change |
| 由用户交互触发的更改事件。在任何格式化（不包括“trim”或“number”属性）和 v-model 更新后发出 |
input |
| 由用户交互触发的输入事件。在任何格式化（不包括“trim”或“number”属性）和 v-model 更新后发出 |
update |
| 发出以更新 v-model |
导入单个组件
你可以通过以下命名导出将单个组件导入到你的项目中
组件 | 命名导出 | 导入路径 |
|---|---|---|
<b-form-textarea> | BFormTextarea | bootstrap-vue |
示例
import { BFormTextarea } from 'bootstrap-vue'
Vue.component('b-form-textarea', BFormTextarea)作为 Vue.js 插件导入
此插件包含上述所有列出的单个组件。插件还包括任何组件别名。
命名导出 | 导入路径 |
|---|---|
FormTextareaPlugin | bootstrap-vue |
示例
import { FormTextareaPlugin } from 'bootstrap-vue'
Vue.use(FormTextareaPlugin)