更新记录
1.0.0(2023-05-06)
下载此版本
第一版,hello uni
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
使用实例
(由于markdown在网页中的显示问题,事件名称o nClick和o nInput中的空格需要手动去除)
常规用法
<v-cell title="标题1" content="内容" @o nClick="o nClick"></v-cell>
<v-cell title="标题2" content="隐藏箭头" :rightArrow="false"></v-cell>
无下划线
<v-cell :bottomLineShow="false" title="标题1" content="内容" ></v-cell>
<v-cell :bottomLineShow="false" title="标题2" content="内容" @o nClick="o nClick"></v-cell>
输入框、右侧文字、右侧图标
<v-cell title="标题1" placeholder="请输入" input :rightArrow="false" @o nInput="o nInput"></v-cell>
<v-cell title="标题2" placeholder="请输入" input :rightArrow="false" @o nInput="o nInput" rightText="单位kg"></v-cell>
<v-cell title="标题1" placeholder="请输入" input :rightArrow="false" @o nInput="o nInput" rightImage="../../static/logo.png"></v-cell>
左侧图标
<v-cell title="标题1" @o nClick="o nClick" leftImage="../../static/logo.png"></v-cell>
<v-cell title="标题1" @o nClick="o nClick" leftImage="../../static/logo.png"></v-cell>
右侧图标
<v-cell title="标题1" @onClick="onClick" rightImage="../../static/logo.png"></v-cell>
<v-cell title="标题1" @onClick="onClick" rightImage="../../static/logo.png"></v-cell>
点击事件
o nClick(e) {
uni.showToast({
title:'点击了'
})
},
o nInput(e){
console.log("onInput:",e)
},
组件属性
属性 |
类型 |
默认值 |
说明 |
title |
string |
|
左侧标题文本 |
content |
string |
|
button类型中中间显示的文本 |
rightText |
string |
|
右侧文本,例如单位:km |
placeholder |
string |
|
input类型中提示文本 |
rightImage |
string |
|
右侧图片地址 |
leftImage |
string |
|
左侧图标地址 |
input |
boolean |
false |
是否为输入框类型 |
showClear |
boolean |
true |
输入框显示清除按钮 |
rightArrow |
boolean |
true |
显示右箭头 |
bottomLineShow |
boolean |
true |
底部分割线是否显示 |
组件事件
名称 |
说明 |
o nClick |
当cell不为input时,点击cell触发 |
o nInput |
输入框输入时触发,并传递输入的内容 |