更新记录
1.0.3(2019-12-30)
删除无用代码
1.0.2(2019-12-25)
解决自定义inputClass不能改变样式问题。使用/deep/操作即可,无须自定义类名
1.0.1(2019-12-24)
组件创建
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app 清空input输入框组件
主要功能:
- 可以自定义输入框的样式
- 自定义label名称
- 自定义placeholder样式及class
- 可以清除input输入框的值
- 可以根据唯一id获取对应输入框的值
- 可以自定义初始值
input 输入框自定义属性说明
属性名 |
类型 |
默认值 |
说明 |
placeholder |
String |
|
输入框空时占位符 |
placeholderClass |
String |
input-placeholder |
输入框空时占位符class |
id |
String |
|
输入框id,唯一标识,当有多个输入框时方便获取对应输入框值 |
type |
String |
text |
输入框类型 |
label |
String |
名称 |
输入框label名称 |
initValue |
String |
|
输入框初始值 |
可触发事件
事件名称 |
说明 |
inputValue |
用于获取输入框的值 |
使用示例
<template>
<view class="container">
<uni-s-input label="名字" initValue="1" placeholder="请输入姓名" id="name" @inputValue="getInputValue"></uni-s-input>
<uni-s-input label="性别" initValue="2" placeholder="请输入性别" id="sex" @inputValue="getInputValue"></uni-s-input>
<uni-s-input label="年龄" initValue="3" placeholder="请输入年龄" id="age" @inputValue="getInputValue"></uni-s-input>
</view>
</template>
<script>
import UniSInput from '@/components/uni-s-input/uni-s-input.vue'
export default {
components: {
UniSInput
},
data () {
return {
formData: {
name: '',
sex: '',
age: ''
}
}
},
methods: {
// 根据id获取对应输入框的值
getInputValue (e) { // 根据指定id获取相应input的值,可以将值赋值给formData
this.formData[e.id] = e.value
console.log(this.formData)
}
}
}
</script>
<style lang="scss" scoped>
</style>