bilibili小程序

使用小贴士

cover-textarea

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

仅支持在 cover-view 中使用。

textarea 属性支持

属性类型默认值说明版本
animation
string
""
执行动画的id（animation）
3.34.0
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-keyboardbooleanfalsefocus时，点击页面的时候不收起键盘3.27.0
disable-default-paddingbooleanfalse是否去掉 iOS 下的默认内边距3.27.0
linechangeeventhandle输入框行数变化时调用，event.detail = { height, lineCount, lineHeight }3.27.0
inputeventhandle键盘输入时触发，event.detail = { value, cursor, keyCode }，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。3.27.0
focuseventhandle输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度3.27.0
blureventhandle输入框失去焦点时触发，event.detail = { value }3.27.0
confirmeventhandle点击完成按钮时触发，event.detail = { value }3.27.0
keyboardheightchangeeventhandle键盘高度发生变化的时候触发此事件，event.detail = { height, duration }3.27.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 →