89 lines
2.7 KiB
Markdown
89 lines
2.7 KiB
Markdown
# lx-input
|
||
|
||
### 属性:
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
| ----------- | ------- | ---------- | ---------------------------------------------------------- |
|
||
| value | String | '' | 输入框绑定值，支持v-model |
|
||
| list | Array | [] | 下拉框显示数据 |
|
||
| hidden.sync | Boolean | false | 聚焦时返回true, 点击其他地方会返回false，解决input滑动穿透 |
|
||
| labelName | String | label | list列表显示的字段名 |
|
||
| isLoading | Boolean | false | 外部传入，显示加载中 |
|
||
| placeholder | String | 请输入内容 | 输入框提示 |
|
||
| disabled | Boolean | false | 外部传入， 禁止聚焦 |
|
||
|
||
### 事件:
|
||
|
||
| 事件名 | 说明 |
|
||
| --------- | -------------------------------------------- |
|
||
| input | 当前输入框内容 |
|
||
| unAble | 禁止聚焦点击时触发 |
|
||
| focus | 聚焦时触发 |
|
||
| clickMask | 下拉框激活时，点击其他地方触发，会关闭下拉框 |
|
||
| clickItem | 点击某一项触发， 返回点击的list的子项 |
|
||
|
||
|
||
|
||
### 简单示例:
|
||
|
||
```
|
||
|
||
<template>
|
||
// page-meta 解决input聚焦时滑动穿透， 你有其他方案可以用自己的方案
|
||
<page-meta :page-style="`overflow: ${ hidden ? 'hidden' : 'unset'}`"></page-meta>
|
||
<view class="content">
|
||
<view class="inputContent">
|
||
<view class="label">省级</view>
|
||
<lx-input class="input" v-model="value1" :list="list1" :hidden.sync="hidden"></lx-input>
|
||
</view>
|
||
<view class="inputContent">
|
||
<view class="label">市级</view>
|
||
<lx-input class="input" v-model="value2" :list="list2" :hidden.sync="hidden"></lx-input>
|
||
</view>
|
||
<view class="inputContent">
|
||
<view class="label">县级</view>
|
||
<lx-input class="input" v-model="value3" :list="list3" :hidden.sync="hidden"></lx-input>
|
||
</view>
|
||
<view style="height: 1000px;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value1:'',
|
||
value2:'',
|
||
value3:'',
|
||
list1:[],
|
||
list2:[],
|
||
list3:[],
|
||
|
||
hidden:false,
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
padding: 0 30rpx;
|
||
.inputContent{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top:100rpx;
|
||
.label{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-right: 15rpx;
|
||
}
|
||
.input {
|
||
flex:1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|