文本框(Form textarea)

创建多行文本输入，并支持自动调整高度，最小和最大行数以及上下文状态。

<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>

控制尺寸

使用 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> 的高度，请将 rows 属性设置为所需的行数。如果没有为 rows 提供任何值，则它将默认为 2（浏览器默认值和最小可接受值）。将其设置为 null 或小于 2 的值将导致使用默认值 2。

<div>
  <b-form-textarea
    id="textarea-rows"
    placeholder="Tall textarea"
    rows="8"
  ></b-form-textarea>
</div>

禁用调整大小句柄

一些网络浏览器将允许用户重新调整文本区域的高度。要禁用此功能，请将 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> 也可以自动调整其高度（文本行）以适合内容，即使用户输入或删除文本也是如此。文本区域的高度将增大或缩小以适合内容（增大到 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>

自动高度执行注意事项

自动高度通过 CSS 查询计算得出的高度来工作，因此输入必须在文档（DOM）中且可见（不通过 display: none ）。初始高度是在安装时计算的。如果浏览器客户端（本身或通过 polyfill ）支持 IntersectionObserver ，则 <b-form-textarea> 将利用此优势确定何时可以看到文本区域，然后计算高度。请参阅入门页面上的 Browser support【浏览器支持】部分。

上下文状态

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>

向辅助技术和色盲用户传达上下文状态

使用这些上下文状态来表示表单控件的状态仅提供基于颜色的可视指示，而不会将其传达给辅助技术的用户（例如屏幕阅读器）或色盲用户。

确保还提供了备用状态指示。 例如，您可以在表单控件的 <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 事件触发时，就会发生格式化（提供格式化程序功能时）。您可以使用 boolean lazy-formatter 属性将格式化程序功能限制为在控件的本机 blur 事件上调用。

formatter 函数接收两个参数：输入元素的原始 value 和触发格式的本机 event 对象（如果有）。

formatter 函数应将格式化后的值作为 string 返回。

如果未提供 formatter ，则不会进行格式化。

<template>
  <div>
    <b-form-group
      class="mb-0"
      label="Textarea with formatter (on input)"
      label-for="textarea-formatter"
      description="We will convert your text to lowercase instantly"
    >
      <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
      class="mb-0"
      label="Textarea with lazy formatter (on blur)"
      label-for="textarea-lazy"
      description="This one is a little lazy!"
    >
      <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>

注意： 对于非延迟格式，如果光标不在输入值的 末尾 ，则键入字符后光标可能会跳到末尾。您可以使用提供的事件对象和 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>

v-model 修饰语

Vue 在基于自定义组件的输入的 v-model 上不正式支持 .lazy ，.trim ，和 .number 修饰符，并且可能会产生不良的用户体验。避免使用 Vue 的本机修饰符。

为了解决这个问题，<b-form-textarea> 具有三个布尔属性 trim ，number ，和 lazy ，它们分别模拟本地 Vue v-model 修饰符 .trim 和 .number 和 .lazy 。lazy 属性将在 change/blur 事件上更新 v-model。

注意：

• number 属性优先于 trim 属性（即，设置 number 时 trim 不会生效）。
• 使用 number 属性时，如果可以将值解析为数字（通过 parseFloat ），它将返回 Number 类型的值到 v-model ，否则，原始输入值将以 String 类型返回。这与本机 .number 修饰符的行为相同。
• trim 和 number 修饰符道具不会影响 input 或 change 事件返回的值。可选格式设置之后，这些事件将始终返回 <textarea> 内容的字符串值（该值可能与通过处理修饰符的 v-model update 事件返回的值不匹配）。

防反跳支持

作为 lazy 修饰符属性的替代，<b-form-textarea> 可选地支持反跳用户输入，在从用户输入最后一个字符（或发生 change 事件）开始的一段空闲时间后更新 v-model 。如果用户在空闲超时到期之前输入新字符（或删除字符），则会重新启动超时。

要启用反跳，请将 debounce 属性设置为大于零的任何整数。该值以毫秒为单位指定。将防反跳设置为 0 将禁用 debounce 。

注意：如果设置了 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>

自动获取焦点

当 autofocus 属性设置为 <b-form-textarea> 时，将文本区域插入（即 mounted【安装】）到文档中时将自动对焦，或者在 Vue <keep-alive>组件内部重新激活时。请注意，此道具 不会 在文本区域上设置 autofocus 属性，也无法告诉该文本区域何时可见。

本机和自定义事件

支持所有本机事件（自定义 input 和 change 事件除外），而无需 .native 修饰符。

定制 input 和 change 事件接收当前 value 的单个参数（在应用任何格式之后），并由用户交互触发。

自定义 update 事件传递给输入值，并在 v-model 需要更新时发出（在需要 input ，change ，和 blur 之前发出）。

您始终可以使用 .native 修饰符访问本机 input 和 change 事件。

公开的 input 属性和方法

<b-form-textarea> 在组件引用中暴露了几个本机输入元素的属性和方法(例如，将一个 ref 赋值给 <b-form-textarea ref="foo" ...> 和使用 this.$refs['foo'].propertyName 或 this.$refs['foo'].methodName(...))。

Input 属性

Input 方法

有关这些方法和属性的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement 支持因 input 类型而异。

import { BFormTextarea } from 'bootstrap-vue'
Vue.component('b-form-textarea', BFormTextarea)

import { FormTextareaPlugin } from 'bootstrap-vue'
Vue.use(FormTextareaPlugin)