bilibili小程序

使用小贴士

b-textarea

多行输入框。该组件是原生组件，使用时请注意相关限制。

属性类型默认值说明版本
value
string
输入框的内容
 
placeholderstring输入框为空时占位符 
placeholder-stylestring指定 placeholder 的样式 
placeholder-classstring指定 placeholder 的样式类
disabledbooleanfalse是否禁用 
maxlengthnumber140最大输入长度，设置为 -1 的时候不限制最大长度 
focusbooleanfalse获取焦点 
auto-heightbooleanfalse是否自动增高，设置auto-height时，style.height不生效 
cursor-spacingnumber0指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 
cursornumber指定focus时的光标位置 
show-confirm-barbooleantrue是否显示键盘上方带有”完成“按钮那一栏 
selection-startnumber-1光标起始位置，自动聚集时有效，需与selection-end搭配使用 
selection-endnumber-1光标结束位置，自动聚集时有效，需与selection-start搭配使用 
adjust-positionbooleantrue键盘弹起时，是否自动上推页面 
focuseventhandle输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 
blureventhandle输入框失去焦点时触发，event.detail = {value, cursor} 
linechangeeventhandle输入框行数变化时调用，event.detail = {height: 0, lineCount: 0} 
inputeventhandle当键盘输入时，触发 input 事件，event.detail = {value, cursor} 
confirmeventhandle点击完成时， 触发 confirm 事件，event.detail = {value: value} 

示例代码

<template>
    <div>
        <b-textarea
            class="test-input"
            :style="`font-size: 14px;color:#ff5687;background:#000;`"
            :auto-height="true"
            :value="value"
            :type="type"
        />
    </div>
</template>

<script>

export default {
    data() {
        return {
            value: '',
            type: 'text'
        }
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.test-input {
    width: 100%;
    height: 200px;
    border: 1px solid red;
    z-index: 0 !important;
}
</style>

Bug & Tip

  1. 请注意原生组件使用限制。
  2. 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 input 处理函数并不会将返回值反映到 textarea 上。
← b-switchb-radio →