cover-input · bilibili小程序

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

仅支持在 cover-view 中使用。

input 属性支持

属性	类型	默认值	说明	版本
animation	string	""	执行动画的id（animation）	3.34.0
value	string		输入框的初始内容	3.27.0
type	string	text	input 的类型	3.27.0
password	boolean	false	是否是密码类型	3.27.0
placeholder	string		输入框为空时占位符	3.27.0
placeholder-style	object		指定 placeholder 的样式, 仅支持 `color` 、 `fontSize`	3.27.0
placeholder-class	string		指定 placeholder 的样式类	3.27.0
disabled	boolean	false	是否禁用	3.27.0
maxlength	number	140	最大输入长度，设置为 -1 的时候不限制最大长度	3.27.0
cursor-spacing	number	0	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	3.27.0
focus	boolean	false	获取焦点	3.27.0
confirm-type	string	done	设置键盘右下角按钮的文字，仅在type='text'时生效	3.27.0
confirm-hold	boolean	false	点击键盘右下角按钮时是否保持键盘不收起	3.27.0
cursor	number	-1	指定focus时的光标位置	3.27.0
selection-start	number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用	3.27.0
selection-end	number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用	3.27.0
adjust-position	boolean	true	键盘弹起时，是否自动上推页面	3.27.0
hold-keyboard	boolean	false	focus时，点击页面的时候不收起键盘	3.27.0
input	eventhandle		键盘输入时触发，event.detail = { value, cursor, keyCode }，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。	3.27.0
focus	eventhandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	3.27.0
blur	eventhandle		输入框失去焦点时触发，event.detail = { value }	3.27.0
confirm	eventhandle		点击完成按钮时触发，event.detail = { value }	3.27.0
keyboardheightchange	eventhandle		键盘高度发生变化的时候触发此事件，event.detail = { height, duration }	3.27.0

type 的合法值

值	说明
text	文本输入键盘
number	数字输入键盘
digit	带小数点的数字键盘

confirm-type 的合法值

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

默认样式

.bl___cover-input {
    font-size: 13px;
    padding: 2px;
    width: 122px;
    overflow: hidden;
}

示例代码

<template>
  <cover-view class="bl-cover-view">
    <cover-label>我是cover-input</cover-label>
    <cover-input
        class="bl-cover-input"
        type="text"
        :placeholder-style="placeholderStyle"
        placeholder="请输入cover-input数据"
    >
    </cover-input>
  </cover-view>
</template>
<script>
export default {
  data() {
    return {
      placeholderStyle: {
        color: '#0EB10A'
      }
    }
  },
  methods: {}
}
</script>

<style scoped>
.bl-cover-view {
  flex-direction: column;
}

.bl-cover-input {
  width: 100%;
  padding: 0 5px;
  border: 1px solid red;
  border-radius: 8px;
  color: #0EB10A;
}
</style>