flat: 暂存
This commit is contained in:
Apcallover
17
uni_modules/lin-select/changelog.md
Normal file
17
uni_modules/lin-select/changelog.md
Normal file
@@ -0,0 +1,17 @@
|
||||
## 1.2.6（2024-03-11）
|
||||
1.增加了value-key绑定字段；
|
||||
2.修复选中值无法绑定的问题；
|
||||
## 1.2.5（2024-01-18）
|
||||
修复v-model无法响应的问题
|
||||
## 1.2.4（2023-10-17）
|
||||
修复了vue2版本，点击选项后无法更新value的问题
|
||||
## 1.2.3（2023-09-21）
|
||||
修复了vue2版本的v-model 无法初始化绑定值的bug
|
||||
## 1.2.2（2023-08-11）
|
||||
修复了选中值未变化的bug
|
||||
## 1.2.1（2023-07-22）
|
||||
修复了一直加载中，不消失的bug
|
||||
## 1.2.0（2023-07-22）
|
||||
兼容vue2，添加了远程加载数据样式
|
||||
## 1.0.0（2023-07-06）
|
||||
先更新1.0.0版本，如有别的需求再提
|
||||
248
uni_modules/lin-select/components/lin-select/lin-select.vue
Normal file
248
uni_modules/lin-select/components/lin-select/lin-select.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 兼容vue2-->
|
||||
<view class="lin-fixed" v-show="showComboxSelect" @click="gclick"></view>
|
||||
<view class="lin-combox">
|
||||
<uni-easyinput ref="uni-easyinput" :placeholder="placeholder" type="text" @input="oninput" />
|
||||
<view class="lin-combox-select" v-show="showComboxSelect">
|
||||
<view class="lin-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" :style="'max-height:' + maxHeight + 'px;'">
|
||||
<view v-if="loading" class="fedback-popper_loading">{{ loadingText }}</view>
|
||||
<template v-else>
|
||||
<view v-if="!list.length" class="fedback-popper_nodata">暂无数据</view>
|
||||
<view v-else class="items" v-for="item, key in list" :key="key" :id="key" @click="comboxCheckHandel(item)">
|
||||
{{ item[nameKey] }}
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
emits: ['update:modelValue', 'input', 'confirm'],
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxHeight: {
|
||||
type: String || Number,
|
||||
default: 125
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '加载中'
|
||||
},
|
||||
modelValue: [Number, String],
|
||||
value: [Number, String],
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showComboxSelect: false,
|
||||
checkValue: ''
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (!this.$refs['uni-easyinput']) {
|
||||
console.error('请先导入uni-easyinput插件')
|
||||
return
|
||||
}
|
||||
this.watchInitialValue()
|
||||
},
|
||||
|
||||
watch: {
|
||||
checkValue(val) { },
|
||||
list: {
|
||||
handler(val) {
|
||||
// console.log(val, 'watch')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gclick() {
|
||||
this.showComboxSelect = false
|
||||
this.reset()
|
||||
},
|
||||
|
||||
/*
|
||||
* 判断如果数据源有数据直接获取，没有数据就进行监听
|
||||
*/
|
||||
watchInitialValue() {
|
||||
if (this.list.length) {
|
||||
this.getInitText()
|
||||
return
|
||||
}
|
||||
const unwatchList = this.$watch('list', (val) => {
|
||||
this.getInitText()
|
||||
unwatchList()
|
||||
})
|
||||
},
|
||||
|
||||
getInitText() {
|
||||
this.checkValue = this.modelValue || this.value
|
||||
if (!this.list.length) return
|
||||
if (this.checkValue === '' || this.checkValue === undefined || this.checkValue === null) return
|
||||
if (this.showComboxSelect) return
|
||||
|
||||
const _item = this.list.find((item) => {
|
||||
return item[this.valueKey] === this.checkValue
|
||||
})
|
||||
this.$refs['uni-easyinput'].val = _item[this.nameKey]
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
reset() {
|
||||
// #ifdef VUE3
|
||||
this.$emit('update:modelValue', '')
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
this.$emit('input', '')
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
this.$refs['uni-easyinput'].val = ''
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 选中事件
|
||||
*/
|
||||
comboxCheckHandel(item) {
|
||||
const text = item[this.nameKey]
|
||||
const value = item[this.valueKey]
|
||||
this.checkValue = ''
|
||||
this.checkValue = value
|
||||
this.showComboxSelect = false
|
||||
// #ifdef VUE3
|
||||
this.$emit('update:modelValue', value)
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
this.$emit('input', value)
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
this.$refs['uni-easyinput'].val = text
|
||||
})
|
||||
this.$emit('confirm', value)
|
||||
},
|
||||
|
||||
/**
|
||||
* 输入事件
|
||||
*/
|
||||
oninput(val) {
|
||||
this.$emit('update:modelValue', val);
|
||||
this.$emit('input', val)
|
||||
if (!val) {
|
||||
this.showComboxSelect = false
|
||||
return
|
||||
}
|
||||
this.showComboxSelect = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.lin-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.lin-combox {
|
||||
position: relative;
|
||||
|
||||
.lin-combox-select {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
border-radius: 3px;
|
||||
padding: 3px 0;
|
||||
z-index: 8;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
.fedback-popper_nodata {
|
||||
font-size: 13px;
|
||||
padding: 5px;
|
||||
color: #5d5959;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lin-popper__arrow {
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 32px;
|
||||
z-index: 3;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-bottom-color: #ebeef5;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.fedback-popper_loading {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
padding: 5px;
|
||||
color: #5d5959;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
82
uni_modules/lin-select/package.json
Normal file
82
uni_modules/lin-select/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "lin-select",
|
||||
"displayName": "lin-select",
|
||||
"version": "1.2.6",
|
||||
"description": "Select 下拉选择器，支持远程搜索，输入搜索",
|
||||
"keywords": [
|
||||
"lin-select，",
|
||||
"select"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.8.1"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
93
uni_modules/lin-select/readme.md
Normal file
93
uni_modules/lin-select/readme.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# lin-select
|
||||
|
||||
## **使用说明**
|
||||
|
||||
### **==注意：需要依赖 [uni-easyinput](https://ext.dcloud.net.cn/plugin?name=uni-easyinput) ，请先导入[uni-easyinput](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)后再使用；==**
|
||||
|
||||
```html
|
||||
//将插件导入到Hubilder之后,直接通过标签使用<lin-select />
|
||||
<template>
|
||||
<!-- 普通用法 -->
|
||||
|
||||
<lin-select
|
||||
:list="productList1"
|
||||
value-key="value"
|
||||
name-key="name"
|
||||
max-height="180"
|
||||
placeholder="请输入商品名称"
|
||||
@input="input2"
|
||||
v-model="mytext1"
|
||||
@confirm="confirm"
|
||||
/>
|
||||
|
||||
<!-- 远程加载数据 -->
|
||||
<lin-select
|
||||
:list="productList2"
|
||||
:loading="loading"
|
||||
loading-text="数据加载中"
|
||||
value-key="value"
|
||||
name-key="name"
|
||||
max-height="180"
|
||||
placeholder="请输入商品名称"
|
||||
@input="input2"
|
||||
v-model="mytext2"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mytext1: 1,
|
||||
mytext2: '',
|
||||
productList1: [{ "name": "特选痩肉", value: 0 }, { "name": "特选键子肉", value: 1 }, { "name": "特选梅肉", value: 2 }],
|
||||
productList2: [],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
confirm(val) {
|
||||
console.log(val, 'confirm')
|
||||
},
|
||||
|
||||
input1(val) {
|
||||
console.log(val, 666)
|
||||
},
|
||||
|
||||
// 远程加载数据
|
||||
input2(val) {
|
||||
setTimeout(() => {
|
||||
this.productList2 = [
|
||||
{ "name": "远程加载分割猪肉及附件", value: 0 },
|
||||
{ "name": "远程加载良种白条猪肉", value: 1 },
|
||||
{ "name": "远程加载土猪白条猪肉", value: 2 }
|
||||
]
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# **Props**
|
||||
|
||||
| 参数 | 说明 | 类型 | 是否必填 |
|
||||
| :----------- | :---------------- | :--------------- | :------- |
|
||||
| list | 数据源数组 | Array | 必填 |
|
||||
| value-key | 取值的 key | string | 必填 |
|
||||
| name-key | 显示的 key | string | 必填 |
|
||||
| max-height | 列表最大高度 | string \| number | 否 |
|
||||
| @input | 输入框 input 事件 | function | 否 |
|
||||
| @confirm | 点击选项事件 | function | 否 |
|
||||
| v-model | 绑定的字段 | - | 否 |
|
||||
| loading | 是否正在加载 | Boolean | 否 |
|
||||
| loading-text | 远程加载中的文案 | string | 否 |
|
||||
|
||||
## **联系作者**
|
||||
|
||||
如使用上有问题可以留言或者联系我哈，我会一直更新的；
|
||||
Reference in New Issue
Block a user