bilibili小程序

使用小贴士

cover-textarea

基础库 3.27.0 开始支持，低版本需做兼容处理。

仅支持在 cover-view 中使用。

textarea 属性支持

属性类型默认值必填说明版本
valuestring是输入框的初始内容3.27.0
placeholderstring否输入框为空时占位符3.27.0
placeholder-stylestring否指定 placeholder 的样式3.27.0
placeholder-classstring否指定 placeholder 的样式, 仅支持 color 、 fontSize3.27.0
disabledbooleanfalse否是否禁用3.27.0
maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度3.27.0
cursor-spacingnumber0否指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离3.27.0
focusbooleanfalse否获取焦点3.27.0
auto-heightbooleanfalse否是否自动增高，设置auto-height时，style.height不生效3.27.0
confirm-typestringdone否设置键盘右下角按钮的文字3.27.0
cursornumber-1否指定focus时的光标位置3.27.0
show-confirm-barbooleantrue否是否显示键盘上方带有”完成“按钮那一栏3.27.0
selection-startnumber-1否光标起始位置，自动聚集时有效，需与selection-end搭配使用3.27.0
selection-endnumber-1否光标结束位置，自动聚集时有效，需与selection-start搭配使用3.27.0
adjust-positionbooleantrue否键盘弹起时，是否自动上推页面3.27.0
hold-keyboardbooleanfalse否focus时，点击页面的时候不收起键盘3.27.0
disable-default-paddingbooleanfalse否是否去掉 iOS 下的默认内边距3.27.0
linechangefunction否输入框行数变化时调用，event.detail = { height, lineCount, lineHeight }3.27.0
inputfunction否键盘输入时触发，event.detail = { value, cursor, keyCode }，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。3.27.0
focusfunction否输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度3.27.0
blurfunction否输入框失去焦点时触发，event.detail = { value }3.27.0
confirmfunction否点击完成按钮时触发，event.detail = { value }3.27.0
keyboardheightchangefunction否键盘高度发生变化的时候触发此事件，event.detail = { height, duration }3.27.0
animation
string
""
否执行动画的id（animation）
3.34.0

confirm-type 的合法值

值说明
send右下角按钮为“发送”
search右下角按钮为“搜索”
next右下角按钮为“下一个”
go右下角按钮为“前往”
done右下角按钮为“完成”
return右下角按钮为“换行”

默认样式

.bl___cover-textarea {
    font-size: 13px;
    padding: 2px;
    word-wrap: break-word;
    width: 300px;
    height: 150px;
    overflow: hidden;
}

示例代码

<template>
    <cover-view class="bl-cover-view">
        <cover-label>我是cover-textarea</cover-label>
        <cover-textarea
            class="bl-cover-textarea"
            :placeholder="placeholder"
            :placeholder-class="placeholderClass"
        ></cover-textarea>
    </cover-view>
</template>
<script>
export default {
    data() {
        return {
          placeholder: '请输入cover-textarea输入数据',
          placeholderClass: 'placeholder-class'
        };
    },
    methods: {}
};
</script>
<style scoped>
.bl-cover-view {
    flex-direction: column;
}

.bl-cover-textarea {
    width: 100%;
    color: #0EB10A;
    border: 1px solid red;
    border-radius: 4px;
}

.placeholder-class {
    color: #0EB10A;
}
</style>
← cover-inputcover-label →