Skip to content

M
mes-pda-scan
Commit 24ad5a69 authored by 何远江's avatar 何远江
Browse files
Options

bug 修改，新增下拉框可输入组件

parent 6b636664
Hide whitespace changes
Inline Side-by-side
Showing with 1365 additions and 1302 deletions
pages/confirComplete/confirComplete.vue
View file @ 24ad5a69
......@@ -164,10 +164,10 @@ export default {
});
params.push({
lfsnr: this.goodsList[0].workorderNo,
BLDAT: 20240420,
BUDAT: 20240420,
// BLDAT: parseTime(new Date(),'{y}{m}{d}'),
// BUDAT: parseTime(new Date(),'{y}{m}{d}'),
// BLDAT: 20240420,
// BUDAT: 20240420,
BLDAT: parseTime(new Date(),'{y}{m}{d}'),
BUDAT: parseTime(new Date(),'{y}{m}{d}'),
item,
})
this.$u.api.sapApi
......
pages/packing/metering.vue
View file @ 24ad5a69
......@@ -18,7 +18,7 @@
宽(cm)：
</u-col>
<u-col span="6">
<uni-easyinput v-model="form.wide"></uni-easyinput>
<uni-easyinput v-model="form.wide" @input="updateWeight"></uni-easyinput>
</u-col>
</u-row>
<u-row gutter="16" class="itemRow">
......@@ -26,7 +26,7 @@
高(cm)：
</u-col>
<u-col span="6">
<uni-easyinput v-model="form.high"></uni-easyinput>
<uni-easyinput v-model="form.high" @input="updateWeight"></uni-easyinput>
</u-col>
</u-row>
<u-row gutter="16" class="itemRow">
......@@ -42,7 +42,7 @@
箱重(kg)：
</u-col>
<u-col span="6">
<uni-easyinput v-model="form.zxntgew"></uni-easyinput>
<uni-easyinput v-model="form.zxntgew" @input="updateWeight"></uni-easyinput>
</u-col>
</u-row>
<u-row gutter="16" class="itemRow">
......@@ -99,17 +99,19 @@ export default {
},
methods: {
updateWeight(e) {
const reg = /^\d+\*\d+\*\d+\-\d+$/
console.log(e, '----')
const reg = /^\d+\*\d+\*\d+\-\d+(\.\d+)+$/
// 验证格式，判断是否是扫码
if (reg.test(e)) {
console.log('扫码11111');
const arr = e.split('*')
this.$nextTick(() => {
setTimeout(() => {
this.form.long = arr[0]
this.form.wide = arr[1]
const data = arr[2].split('-')
this.form.high = data[0]
this.form.zxntgew = data[1]
})
}, 500)
}
}
}
......
uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
View file @ 24ad5a69
{
{
"uni-load-more.contentdown": "Pull up to show more",
"uni-load-more.contentrefresh": "loading...",
"uni-load-more.contentnomore": "No more data"
......
uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
View file @ 24ad5a69
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
View file @ 24ad5a69
{
{
"uni-load-more.contentdown": "上拉显示更多",
"uni-load-more.contentrefresh": "正在加载...",
"uni-load-more.contentnomore": "没有更多数据了"
......
uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
View file @ 24ad5a69
{
{
"uni-load-more.contentdown": "上拉顯示更多",
"uni-load-more.contentrefresh": "正在加載...",
"uni-load-more.contentnomore": "沒有更多數據了"
......
uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
View file @ 24ad5a69
<template>
<view class="uni-load-more" @click="onClick">
<!-- #ifdef APP-NVUE -->
<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
:style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
<!-- #endif -->
<!-- #ifdef H5 -->
<svg width="24" height="24" viewBox="25 25 50 50"
v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
</svg>
<!-- #endif -->
<!-- #ifndef APP-NVUE || H5 -->
<view
v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-MP">
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view v-else-if="!webviewHide && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
<image :src="imgBase64" mode="widthFix"></image>
</view>
<!-- #endif -->
<text v-if="showText" class="uni-load-more__text"
:style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text>
</view>
</template>
<script>
let platform
setTimeout(() => {
platform = uni.getSystemInfoSync().platform
}, 16)
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* LoadMore 加载更多
* @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
* @tutorial https://ext.dcloud.net.cn/plugin?id=29
* @property {String} status = [more|loading|noMore] loading 的状态
* @value more loading前
* @value loading loading中
* @value noMore 没有更多了
* @property {Number} iconSize 指定图标大小
* @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
* @property {String} iconType = [snow|circle|auto] 指定图标样式
* @value snow ios雪花加载样式
* @value circle 安卓唤醒加载样式
* @value auto 根据平台自动选择加载样式
* @property {String} color 图标和文字颜色
* @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
* @event {Function} clickLoadMore 点击加载更多时触发
*/
export default {
name: 'UniLoadMore',
emits: ['clickLoadMore'],
props: {
status: {
// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
type: String,
default: 'more'
},
showIcon: {
type: Boolean,
default: true
},
iconType: {
type: String,
default: 'auto'
},
iconSize: {
type: Number,
default: 24
},
color: {
type: String,
default: '#777777'
},
contentText: {
type: Object,
default () {
return {
contentdown: '',
contentrefresh: '',
contentnomore: ''
}
}
<template>
<view class="uni-load-more" @click="onClick">
<!-- #ifdef APP-NVUE -->
<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
:style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
<!-- #endif -->
<!-- #ifdef H5 -->
<svg width="24" height="24" viewBox="25 25 50 50"
v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
</svg>
<!-- #endif -->
<!-- #ifndef APP-NVUE || H5 -->
<view
v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-MP">
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view v-else-if="!webviewHide && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
<image :src="imgBase64" mode="widthFix"></image>
</view>
<!-- #endif -->
<text v-if="showText" class="uni-load-more__text"
:style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text>
</view>
</template>
<script>
let platform
setTimeout(() => {
platform = uni.getSystemInfoSync().platform
}, 16)
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* LoadMore 加载更多
* @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
* @tutorial https://ext.dcloud.net.cn/plugin?id=29
* @property {String} status = [more|loading|noMore] loading 的状态
* @value more loading前
* @value loading loading中
* @value noMore 没有更多了
* @property {Number} iconSize 指定图标大小
* @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
* @property {String} iconType = [snow|circle|auto] 指定图标样式
* @value snow ios雪花加载样式
* @value circle 安卓唤醒加载样式
* @value auto 根据平台自动选择加载样式
* @property {String} color 图标和文字颜色
* @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
* @event {Function} clickLoadMore 点击加载更多时触发
*/
export default {
name: 'UniLoadMore',
emits: ['clickLoadMore'],
props: {
status: {
// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
type: String,
default: 'more'
},
showIcon: {
type: Boolean,
default: true
},
iconType: {
type: String,
default: 'auto'
},
iconSize: {
type: Number,
default: 24
},
color: {
type: String,
default: '#777777'
},
contentText: {
type: Object,
default () {
return {
contentdown: '',
contentrefresh: '',
contentnomore: ''
}
}
},
showText: {
type: Boolean,
default: true
}
},
data() {
return {
webviewHide: false,
platform: platform,
imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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'
}
},
}
},
data() {
return {
webviewHide: false,
platform: platform,
imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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'
}
},
computed: {
iconSnowWidth() {
return (Math.floor(this.iconSize / 24) || 1) * 2
},
contentdownText() {
return this.contentText.contentdown || t("uni-load-more.contentdown")
},
contentrefreshText() {
return this.contentText.contentrefresh || t("uni-load-more.contentrefresh")
iconSnowWidth() {
return (Math.floor(this.iconSize / 24) || 1) * 2
},
contentnomoreText() {
return this.contentText.contentnomore || t("uni-load-more.contentnomore")
}
},
mounted() {
// #ifdef APP-PLUS
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
currentWebview.addEventListener('hide', () => {
this.webviewHide = true
})
currentWebview.addEventListener('show', () => {
this.webviewHide = false
})
// #endif
},
methods: {
onClick() {
this.$emit('clickLoadMore', {
detail: {
status: this.status,
}
})
}
}
}
</script>
<style lang="scss" >
.uni-load-more {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
height: 40px;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
contentdownText() {
return this.contentText.contentdown || t("uni-load-more.contentdown")
},
contentrefreshText() {
return this.contentText.contentrefresh || t("uni-load-more.contentrefresh")
},
contentnomoreText() {
return this.contentText.contentnomore || t("uni-load-more.contentnomore")
}
},
mounted() {
// #ifdef APP-PLUS
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
currentWebview.addEventListener('hide', () => {
this.webviewHide = true
})
currentWebview.addEventListener('show', () => {
this.webviewHide = false
})
// #endif
},
methods: {
onClick() {
this.$emit('clickLoadMore', {
detail: {
status: this.status,
}
})
}
}
}
</script>
<style lang="scss" >
.uni-load-more {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
height: 40px;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 14px;
margin-left: 8px;
}
.uni-load-more__img {
width: 24px;
height: 24px;
// margin-right: 8px;
}
.uni-load-more__img--nvue {
color: #666666;
}
.uni-load-more__img--android,
.uni-load-more__img--ios {
width: 24px;
height: 24px;
transform: rotate(0deg);
}
/* #ifndef APP-NVUE */
.uni-load-more__img--android {
animation: loading-ios 1s 0s linear infinite;
}
@keyframes loading-android {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.uni-load-more__img--ios-H5 {
position: relative;
animation: loading-ios-H5 1s 0s step-end infinite;
}
.uni-load-more__img--ios-H5 image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
@keyframes loading-ios-H5 {
0% {
transform: rotate(0deg);
}
8% {
transform: rotate(30deg);
}
16% {
transform: rotate(60deg);
}
24% {
transform: rotate(90deg);
}
32% {
transform: rotate(120deg);
}
40% {
transform: rotate(150deg);
}
48% {
transform: rotate(180deg);
}
56% {
transform: rotate(210deg);
}
64% {
transform: rotate(240deg);
}
73% {
transform: rotate(270deg);
}
82% {
transform: rotate(300deg);
}
91% {
transform: rotate(330deg);
}
100% {
transform: rotate(360deg);
}
}
/* #endif */
/* #ifdef H5 */
.uni-load-more__img--android-H5 {
animation: loading-android-H5-rotate 2s linear infinite;
transform-origin: center center;
}
.uni-load-more__img--android-H5 circle {
display: inline-block;
animation: loading-android-H5-dash 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-linecap: round;
}
@keyframes loading-android-H5-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-H5-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120;
}
}
/* #endif */
/* #ifndef APP-NVUE || H5 */
.uni-load-more__img--android-MP {
position: relative;
width: 24px;
height: 24px;
transform: rotate(0deg);
animation: loading-ios 1s 0s ease infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
border: solid 2px transparent;
border-top: solid 2px #777777;
transform-origin: center;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
animation: loading-android-MP-1 1s 0s linear infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
animation: loading-android-MP-2 1s 0s linear infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
animation: loading-android-MP-3 1s 0s linear infinite;
}
@keyframes loading-android {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-1 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-3 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
/* #endif */
</style>
margin-left: 8px;
}
.uni-load-more__img {
width: 24px;
height: 24px;
// margin-right: 8px;
}
.uni-load-more__img--nvue {
color: #666666;
}
.uni-load-more__img--android,
.uni-load-more__img--ios {
width: 24px;
height: 24px;
transform: rotate(0deg);
}
/* #ifndef APP-NVUE */
.uni-load-more__img--android {
animation: loading-ios 1s 0s linear infinite;
}
@keyframes loading-android {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.uni-load-more__img--ios-H5 {
position: relative;
animation: loading-ios-H5 1s 0s step-end infinite;
}
.uni-load-more__img--ios-H5 image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
@keyframes loading-ios-H5 {
0% {
transform: rotate(0deg);
}
8% {
transform: rotate(30deg);
}
16% {
transform: rotate(60deg);
}
24% {
transform: rotate(90deg);
}
32% {
transform: rotate(120deg);
}
40% {
transform: rotate(150deg);
}
48% {
transform: rotate(180deg);
}
56% {
transform: rotate(210deg);
}
64% {
transform: rotate(240deg);
}
73% {
transform: rotate(270deg);
}
82% {
transform: rotate(300deg);
}
91% {
transform: rotate(330deg);
}
100% {
transform: rotate(360deg);
}
}
/* #endif */
/* #ifdef H5 */
.uni-load-more__img--android-H5 {
animation: loading-android-H5-rotate 2s linear infinite;
transform-origin: center center;
}
.uni-load-more__img--android-H5 circle {
display: inline-block;
animation: loading-android-H5-dash 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-linecap: round;
}
@keyframes loading-android-H5-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-H5-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120;
}
}
/* #endif */
/* #ifndef APP-NVUE || H5 */
.uni-load-more__img--android-MP {
position: relative;
width: 24px;
height: 24px;
transform: rotate(0deg);
animation: loading-ios 1s 0s ease infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
border: solid 2px transparent;
border-top: solid 2px #777777;
transform-origin: center;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
animation: loading-android-MP-1 1s 0s linear infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
animation: loading-android-MP-2 1s 0s linear infinite;
}
.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
animation: loading-android-MP-3 1s 0s linear infinite;
}
@keyframes loading-android {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-1 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-MP-3 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
/* #endif */
</style>
uni_modules/zxz-uni-data-select/changelog.md
View file @ 24ad5a69
## 1.0.20（2024-05-09）
1.修复APP点击下拉框无法关闭
## 1.0.19（2024-04-29）
1.修复点击多个下拉框无法关闭
2.优化多选类型支持一次选择多个
3.修复小程序点击有个蓝色底
4.优化下拉菜单溢出屏幕底部时改为向上弹出
## 1.0.15（2023-11-24）
1.优化多选选中样式（tianheng20**qq.com网友提供）
2.优化chang事件（chang事件中将返回所选中的对象）
......@@ -39,4 +46,4 @@
## 1.0.0（2023-06-16）
添加下拉框检索，多选功能，自定义数据
## 1.0.4（2023-06-16）
添加下拉框检索，多选功能，自定义数据
添加下拉框检索，多选功能，自定义数据
uni_modules/zxz-uni-data-select/components/zxz-uni-data-select/zxz-uni-data-select.vue
View file @ 24ad5a69
<template>
<view class="uni-stat__select">
<!-- hide-on-phone -->
<span v-if="label" class="uni-label-text">{{label + '：'}}</span>
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
<view class="uni-select" :style="{height:multiple?'100%':' 35px'}"
:class="{'uni-select--disabled':disabled}">
<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px'}" @click="toggleSelector">
<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&&current.length>0">
<view class="tag-calss"
v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
:key="item[dataValue]">
<span class="text">{{item[dataKey]}}</span>
<view class="" @click.stop="delItem(item)">
<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
</view>
</view>
<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
<span class="text">+{{current.length-collapseTagsNum}}</span>
</view>
<input v-if="filterable&&!disabled" @input="inputChange" class="uni-select__input-text"
type="text" style="font-size: 12px;height: 52rpx;margin-left: 6px;width: auto;"
placeholder="请输入" v-model="filterInput">
</view>
<view v-else-if="current&&current.length>0&&!showSelector" class="uni-select__input-text">
{{current}}
</view>
<input v-else-if="filterable&&showSelector" :focus="isFocus" @input="inputChange"
:disabled="disabled" @click.stop="" class="uni-select__input-text" type="text"
style="font-size: 12px;position: absolute;z-index: 1;" :placeholder="placeholderOld"
v-model="filterInput">
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
<uni-icons v-if="(current.length>0 && clear&&!disabled)||(currentArr.length>0&&clear&&!disabled)"
type="clear" color="#c0c4cc" size="24" style="position: absolute;right: 0;" @click="clearVal" />
<uni-icons style="right: 0;position: absolute;" v-else :type="showSelector? 'top' : 'bottom'"
size="14" color="#999" />
</view>
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
<view class="uni-select__selector" v-if="showSelector">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
<span>{{emptyTips}}</span>
</view>
<view v-else :class="['uni-select__selector-item', {'uni-select_selector-item_active' :multiple
&& currentArr.includes(item[dataValue])}]"
style="display: flex;justify-content: space-between;align-items: center;"
v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
<span
:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</span>
<uni-icons v-if="multiple&&currentArr.includes(item[dataValue])" type="checkmarkempty"
color="#007aff" />
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* DataChecklist 数据选择器
* @description 通过数据渲染的下拉框组件
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
* @property {String} value 默认值
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
* @property {Boolean} clear 是否可以清空已选项
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
* @property {String} label 左侧标题
* @property {String} placeholder 输入框的提示文字
* @property {Boolean} disabled 是否禁用
* @event {Function} change 选中发生变化触发
*/
export default {
name: "uni-stat-select",
mixins: [uniCloud.mixinDatacom || {}],
props: {
collapseTagsNum: {
type: Number,
default: 1
},
collapseTags: {
type: Boolean,
default: false
},
dataKey: {
type: [String],
default: 'text'
},
dataValue: {
type: [String],
default: 'value'
},
multiple: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: false
},
localdata: {
type: Array,
default () {
return []
}
},
// #ifndef VUE3
value: {
type: [String, Number, Array],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [String, Number, Array],
default: ''
},
// #endif
label: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
},
emptyTips: {
type: String,
default: '无选项'
},
clear: {
type: Boolean,
default: true
},
defItem: {
type: Number,
default: 0
},
disabled: {
type: Boolean,
default: false
},
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
format: {
type: String,
default: ''
},
},
data() {
return {
showSelector: false,
current: [],
mixinDatacomResData: [],
apps: [],
channels: [],
cacheKey: "uni-data-select-lastSelectedValue",
placeholderOld: "",
currentArr: [],
filterInput: "",
isFocus: false
};
},
created() {
if (this.multiple) {
// #ifndef VUE3
this.currentArr = this.value || []
// #endif
// #ifdef VUE3
this.currentArr = this.modelValue || []
// #endif
if (this.current.length > 0) {
this.current = []
}
// #ifndef VUE3
if (this.value && this.value.length > 0 && this.filterMixinDatacomResData.length > 0) {
this.current = this.value.map(item => {
let current = this.mixinDatacomResData.find(e =>
e[this.dataValue] == item
)
return {
...current
}
})
}
// #endif
// #ifdef VUE3
if (this.modelValue && this.modelValue.length > 0 && this.filterMixinDatacomResData.length > 0) {
this.current = this.modelValue.map(item => {
let current = this.mixinDatacomResData.find(e =>
e[this.dataValue] == item
)
return {
...current
}
})
}
// #endif
} else {
// #ifndef VUE3
if (this.value || this.value == 0) {
this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
e[this.dataValue] == this.value
))
}
// #endif
// #ifdef VUE3
if (this.modelValue || this.value == 0) {
this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
e[this.dataValue] == this.modelValue
))
}
// #endif
}
this.placeholderOld = this.placeholder
this.debounceGet = this.debounce(() => {
this.query();
}, 300);
if (this.collection && !this.localdata.length) {
this.debounceGet();
}
},
computed: {
filterMixinDatacomResData() {
if (this.filterable && this.filterInput) {
return this.mixinDatacomResData.filter(e => e[this.dataKey].includes(this.filterInput))
} else {
return this.mixinDatacomResData
}
},
typePlaceholder() {
const text = {
'opendb-stat-app-versions': '版本',
'opendb-app-channels': '渠道',
'opendb-app-list': '应用'
}
const common = this.placeholder
const placeholder = text[this.collection]
return placeholder ?
common + placeholder :
common
},
valueCom() {
// #ifdef VUE3
return this.modelValue;
// #endif
// #ifndef VUE3
return this.value;
// #endif
}
},
watch: {
localdata: {
immediate: true,
handler(val, old) {
if (Array.isArray(val) && old !== val) {
this.mixinDatacomResData = val || []
}
}
},
valueCom: {
handler(newVal, oldVal) {
// console.log(newVal, oldVal);
this.initDefVal()
},
deep: true,
immediate: true
},
mixinDatacomResData: {
immediate: true,
handler(val) {
if (val.length) {
this.initDefVal()
}
}
},
},
methods: {
debounce(fn, time = 100) {
let timer = null
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, time)
}
},
// 执行数据库查询
query() {
this.mixinDatacomEasyGet();
},
// 监听查询条件变更事件
onMixinDatacomPropsChange() {
if (this.collection) {
this.debounceGet();
}
},
initDefVal() {
let defValue = ''
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
defValue = this.valueCom
} else {
let strogeValue
if (this.collection) {
strogeValue = this.getCache()
}
if (strogeValue || strogeValue === 0) {
defValue = strogeValue
} else {
let defItem = ''
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
defItem = this.mixinDatacomResData[this.defItem - 1][this.dataValue]
}
defValue = defItem
}
if (defValue || defValue === 0) {
this.emit(defValue)
}
}
if (this.multiple) {
const mixinDatacomResData = this.mixinDatacomResData || []
if (!defValue) defValue = []
this.current = defValue.map(item => {
const current = mixinDatacomResData.find(e => {
return e[this.dataValue] == item
})
return {
...current
}
})
this.currentArr = this.current.map(e => e[this.dataValue])
if (defValue.length < 1) {
this.currentArr = []
}
} else {
const def = this.mixinDatacomResData.find(item => item[this.dataValue] === defValue)
this.current = def ? this.formatItemName(def) : ''
}
},
/**
* @param {[String, Number]} value
* 判断用户给的 value 是否同时为禁用状态
*/
isDisabled(value) {
let isDisabled = false;
this.mixinDatacomResData.forEach(item => {
if (item[this.dataValue] === value) {
isDisabled = item.disable
}
})
return isDisabled;
},
inputChange(e) {
this.$emit('inputChange', e.detail.value)
},
clearVal() {
if (this.disabled) {
return
}
if (this.multiple) {
this.current = []
this.currentArr = []
this.emit([])
} else {
this.current = ""
this.currentArr = []
this.emit('')
}
if (this.collection) {
this.removeCache()
}
this.placeholderOld = this.placeholder
this.filterInput = ""
},
change(item) {
if (!item.disable) {
this.showSelector = false
if (this.multiple) {
if (!this.current) {
this.current = []
}
if (!this.currentArr) {
this.currentArr = []
}
if (this.currentArr.includes(item[this.dataValue])) {
let index = this.current.findIndex(e => {
return e[this.dataValue] == item[this.dataValue]
})
this.current.splice(index, 1)
this.currentArr.splice(index, 1)
this.emit(this.current)
} else {
this.current.push(item)
this.currentArr.push(item[this.dataValue])
this.emit(this.current)
}
this.filterInput = ""
} else {
this.current = this.formatItemName(item)
if (this.filterable) {
this.filterInput = item[this.dataKey]
}
this.emit(item[this.dataValue])
}
}
},
delItem(item) {
if (this.disabled) {
return
}
if (this.currentArr.includes(item[this.dataValue])) {
let index = this.current.findIndex(e => {
return e[this.dataValue] == item[this.dataValue]
})
this.current.splice(index, 1)
this.currentArr.splice(index, 1)
this.emit(this.current)
}
},
emit(val) {
if (this.multiple) {
this.$emit('input', this.currentArr)
this.$emit('update:modelValue', this.currentArr)
const currentArr = this.mixinDatacomResData.filter(item => this.currentArr.includes(item[this
.dataValue]))
this.$emit('change', currentArr)
} else {
this.$emit('input', val)
this.$emit('update:modelValue', val)
const current = this.mixinDatacomResData.find(item => val == item[this.dataValue])
console.log(current);
this.$emit('change', current)
}
if (this.collection) {
this.setCache(val);
}
},
toggleSelector() {
if (this.disabled) {
return
}
// if (this.filterable && this.filterInput && this.mixinDatacomResData.findIndex(e => {
// return e[this.dataKey] == this
// .filterInput
// }) < 0) {
// if (!this.multiple) {
// this.filterInput = ""
// }
// }
this.showSelector = !this.showSelector
this.isFocus = this.showSelector
if (this.filterable && this.current && this.showSelector) {
if (!this.multiple) {
this.placeholderOld = this.current
// this.filterInput = ""
}
} else if (this.filterable && !this.current && !this.showSelector) {
if (this.placeholderOld != this.placeholder) {
if (!this.multiple) {
this.current = this.placeholderOld
}
}
}
this.filterInput = ""
},
formatItemName(item) {
if (!item) {
return ""
}
let text = item[this.dataKey]
let value = item[this.dataValue]
let {
channel_code
} = item
channel_code = channel_code ? `(${channel_code})` : ''
if (this.format) {
// 格式化输出
let str = "";
str = this.format;
for (let key in item) {
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
}
return str;
} else {
return this.collection.indexOf('app-list') > 0 ?
`${text}(${value})` :
(
text ?
text :
`未命名${channel_code}`
)
}
},
// 获取当前加载的数据
getLoadData() {
return this.mixinDatacomResData;
},
// 获取当前缓存key
getCurrentCacheKey() {
return this.collection;
},
// 获取缓存
getCache(name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
return cacheData[name];
},
// 设置缓存
setCache(value, name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
cacheData[name] = value;
uni.setStorageSync(this.cacheKey, cacheData);
},
// 删除缓存
removeCache(name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
delete cacheData[name];
uni.setStorageSync(this.cacheKey, cacheData);
},
}
}
</script>
<style lang="scss">
$uni-base-color: #6a6a6a !default;
$uni-main-color: #333 !default;
$uni-secondary-color: #909399 !default;
$uni-border-3: #e5e5e5;
/* #ifndef APP-NVUE */
@media screen and (max-width: 500px) {
.hide-on-phone {
display: none;
}
}
/* #endif */
.uni-stat__select {
display: flex;
align-items: center;
// padding: 15px;
cursor: pointer;
width: 100%;
flex: 1;
box-sizing: border-box;
}
.uni-stat-box {
width: 100%;
flex: 1;
}
.uni-stat__actived {
width: 100%;
flex: 1;
// outline: 1px solid #2979ff;
}
.uni-label-text {
font-size: 14px;
font-weight: bold;
color: $uni-base-color;
margin: auto 0;
margin-right: 5px;
}
.uni-select {
font-size: 14px;
border: 1px solid $uni-border-3;
box-sizing: border-box;
border-radius: 4px;
padding: 0 5px;
padding-left: 10px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
user-select: none;
/* #endif */
flex-direction: row;
align-items: center;
border-bottom: solid 1px $uni-border-3;
width: 100%;
flex: 1;
height: 35px;
min-height: 35px;
&--disabled {
background-color: #f5f7fa;
cursor: not-allowed;
}
}
.uni-select__label {
font-size: 16px;
// line-height: 22px;
min-height: 35px;
height: 35px;
padding-right: 10px;
color: $uni-secondary-color;
}
.uni-select__input-box {
width: 100%;
height: 35px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
.tag-calss {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
font-size: 12px;
border: 1px solid #d9ecff;
border-radius: 4px;
white-space: nowrap;
height: 24px;
padding: 0 4px 0px 8px;
line-height: 22px;
box-sizing: border-box;
margin: 2px 0 2px 6px;
display: flex;
max-width: 100%;
align-items: center;
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
.text {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
font-size: 12px;
white-space: nowrap;
line-height: 22px;
color: #909399;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.uni-select__input {
flex: 1;
font-size: 14px;
height: 22px;
line-height: 22px;
}
.uni-select__input-plac {
font-size: 14px;
color: $uni-secondary-color;
}
.uni-select__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
position: absolute;
top: calc(100% + 12px);
left: 0;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 3;
padding: 4px 0;
}
.uni-select__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px;
box-sizing: border-box;
/* #endif */
}
.uni-select__selector-empty,
.uni-select__selector-item {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
line-height: 35px;
font-size: 14px;
text-align: center;
/* border-bottom: solid 1px $uni-border-3; */
padding: 0px 10px;
}
.uni-select__selector-item:hover {
background-color: #f9f9f9;
}
.uni-select__selector-empty:last-child,
.uni-select__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
.uni-select_selector-item_active {
color: #409eff;
font-weight: bold;
background-color: #f5f7fa;
border-radius: 3px;
}
.uni-select__selector__disabled {
opacity: 0.4;
cursor: default;
}
/* picker 弹出层通用的指示小三角 */
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-select__input-text {
// width: 280px;
width: 90%;
color: $uni-main-color;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
.uni-select__input-placeholder {
color: $uni-base-color;
font-size: 12px;
}
.uni-select--mask {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<template>
<view class="uni-stat__select">
<!-- hide-on-phone -->
<span v-if="label" class="uni-label-text">{{label + '：'}}</span>
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
<view class="uni-select" :style="{height:multiple?'100%':' 35px'}"
:class="{'uni-select--disabled':disabled}">
<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px'}" @click="toggleSelector">
<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&&current.length>0">
<view class="tag-calss"
v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
:key="item[dataValue]">
<span class="text">{{item[dataKey]}}</span>
<view class="" @click.stop="delItem(item)">
<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
</view>
</view>
<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
<span class="text">+{{current.length-collapseTagsNum}}</span>
</view>
<input v-if="filterable&&!disabled" @input="inputChange" class="uni-select__input-text"
type="text" style="font-size: 12px;height: 52rpx;margin-left: 6px;width: auto;"
placeholder="请输入" v-model="filterInput">
</view>
<view v-else-if="current&&current.length>0&&!showSelector" class="uni-select__input-text">
{{current}}
</view>
<input v-else-if="filterable&&showSelector" :focus="isFocus" @input="inputChange"
:disabled="disabled" @click.stop="" class="uni-select__input-text" type="text"
style="font-size: 12px;position: absolute;z-index: 1;" :placeholder="placeholderOld"
v-model="filterInput">
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
<uni-icons v-if="(current.length>0 && clear&&!disabled)||(currentArr.length>0&&clear&&!disabled)"
type="clear" color="#c0c4cc" size="24" style="position: absolute;right: 0;" @click="clearVal" />
<uni-icons style="right: 0;position: absolute;" v-else :type="showSelector? 'top' : 'bottom'"
size="14" color="#999" />
</view>
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
<view class="uni-select__selector"
:class="isDown?'uni-select__selector__down':'uni-select__selector__upwards'" v-if="showSelector">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
<span>{{emptyTips}}</span>
</view>
<view v-else :class="['uni-select__selector-item', {'uni-select_selector-item_active' :multiple
&& currentArr.includes(item[dataValue])}]"
style="display: flex;justify-content: space-between;align-items: center;"
v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
<span
:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</span>
<uni-icons v-if="multiple&&currentArr.includes(item[dataValue])" type="checkmarkempty"
color="#007aff" />
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* DataChecklist 数据选择器
* @description 通过数据渲染的下拉框组件
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
* @property {String} collapseTagsNum 多选时选中值按文字的形式展示的数量
* @property {String} collapseTags 多选时是否将选中值按文字的形式展示
* @property {String} dataKey 作为 key 唯一标识的键名
* @property {String} dataValue 作为 value 唯一标识的键名
* @property {Array} multiple 是否多选
* @property {Array} filterable 是否开启搜索
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
* @property {Boolean} clear 是否可以清空已选项
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
* @property {String} label 左侧标题
* @property {String} placeholder 输入框的提示文字
* @property {Boolean} disabled 是否禁用
* @event {Function} change 选中发生变化触发
*/
export default {
name: "uni-stat-select",
mixins: [uniCloud.mixinDatacom || {}],
props: {
collapseTagsNum: {
type: Number,
default: 1
},
collapseTags: {
type: Boolean,
default: false
},
dataKey: {
type: [String],
default: 'text'
},
dataValue: {
type: [String],
default: 'value'
},
multiple: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: false
},
localdata: {
type: Array,
default () {
return []
}
},
// #ifndef VUE3
value: {
type: [String, Number, Array],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [String, Number, Array],
default: ''
},
// #endif
label: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
},
emptyTips: {
type: String,
default: '无选项'
},
clear: {
type: Boolean,
default: true
},
defItem: {
type: Number,
default: 0
},
disabled: {
type: Boolean,
default: false
},
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
format: {
type: String,
default: ''
},
},
data() {
return {
showSelector: false,
current: [],
mixinDatacomResData: [],
apps: [],
channels: [],
cacheKey: "uni-data-select-lastSelectedValue",
placeholderOld: "",
currentArr: [],
filterInput: "",
isFocus: false,
windowHeight:0,
isDown:true,//下拉框是否朝下
};
},
created() {
this.windowHeight=uni.getSystemInfoSync().windowHeight
if (this.multiple) {
// #ifndef VUE3
this.currentArr = this.value || []
// #endif
// #ifdef VUE3
this.currentArr = this.modelValue || []
// #endif
if (this.current.length > 0) {
this.current = []
}
// #ifndef VUE3
if (this.value && this.value.length > 0 && this.filterMixinDatacomResData.length > 0) {
this.current = this.value.map(item => {
let current = this.mixinDatacomResData.find(e =>
e[this.dataValue] == item
)
return {
...current
}
})
}
// #endif
// #ifdef VUE3
if (this.modelValue && this.modelValue.length > 0 && this.filterMixinDatacomResData.length > 0) {
this.current = this.modelValue.map(item => {
let current = this.mixinDatacomResData.find(e =>
e[this.dataValue] == item
)
return {
...current
}
})
}
// #endif
} else {
// #ifndef VUE3
if (this.value || this.value == 0) {
this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
e[this.dataValue] == this.value
))
}
// #endif
// #ifdef VUE3
if (this.modelValue || this.value == 0) {
this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
e[this.dataValue] == this.modelValue
))
}
// #endif
}
this.placeholderOld = this.placeholder
this.debounceGet = this.debounce(() => {
this.query();
}, 300);
if (this.collection && !this.localdata.length) {
this.debounceGet();
}
},
computed: {
filterMixinDatacomResData() {
if (this.filterable && this.filterInput) {
return this.mixinDatacomResData.filter(e => e[this.dataKey].includes(this.filterInput))
} else {
return this.mixinDatacomResData
}
},
typePlaceholder() {
const text = {
'opendb-stat-app-versions': '版本',
'opendb-app-channels': '渠道',
'opendb-app-list': '应用'
}
const common = this.placeholder
const placeholder = text[this.collection]
return placeholder ?
common + placeholder :
common
},
valueCom() {
// #ifdef VUE3
return this.modelValue;
// #endif
// #ifndef VUE3
return this.value;
// #endif
}
},
watch: {
localdata: {
immediate: true,
handler(val, old) {
if (Array.isArray(val) && old !== val) {
this.mixinDatacomResData = val || []
}
}
},
valueCom: {
handler(newVal, oldVal) {
// console.log(newVal, oldVal);
this.initDefVal()
},
deep: true,
immediate: true
},
mixinDatacomResData: {
immediate: true,
handler(val) {
if (val.length) {
this.initDefVal()
}
}
},
},
methods: {
getIsDown(){
const query = uni.createSelectorQuery().in(this);
const _this=this
query
.select(".uni-stat-box")
.boundingClientRect((data) => {
if(_this.windowHeight-data.top>200){
_this.isDown=true
}else{
_this.isDown=false
}
})
.exec();
},
debounce(fn, time = 100) {
let timer = null
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, time)
}
},
// 执行数据库查询
query() {
this.mixinDatacomEasyGet();
},
// 监听查询条件变更事件
onMixinDatacomPropsChange() {
if (this.collection) {
this.debounceGet();
}
},
initDefVal() {
let defValue = ''
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
defValue = this.valueCom
} else {
let strogeValue
if (this.collection) {
strogeValue = this.getCache()
}
if (strogeValue || strogeValue === 0) {
defValue = strogeValue
} else {
let defItem = ''
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
defItem = this.mixinDatacomResData[this.defItem - 1][this.dataValue]
}
defValue = defItem
}
if (defValue || defValue === 0) {
this.emit(defValue)
}
}
if (this.multiple) {
const mixinDatacomResData = this.mixinDatacomResData || []
if (!defValue) defValue = []
this.current = defValue.map(item => {
const current = mixinDatacomResData.find(e => {
return e[this.dataValue] == item
})
return {
...current
}
})
this.currentArr = this.current.map(e => e[this.dataValue])
if (defValue.length < 1) {
this.currentArr = []
}
} else {
const def = this.mixinDatacomResData.find(item => item[this.dataValue] === defValue)
this.current = def ? this.formatItemName(def) : ''
}
},
/**
* @param {[String, Number]} value
* 判断用户给的 value 是否同时为禁用状态
*/
isDisabled(value) {
let isDisabled = false;
this.mixinDatacomResData.forEach(item => {
if (item[this.dataValue] === value) {
isDisabled = item.disable
}
})
return isDisabled;
},
inputChange(e) {
this.$emit('inputChange', e.detail.value)
},
clearVal() {
if (this.disabled) {
return
}
if (this.multiple) {
this.current = []
this.currentArr = []
this.emit([])
} else {
this.current = ""
this.currentArr = []
this.emit('')
}
if (this.collection) {
this.removeCache()
}
this.placeholderOld = this.placeholder
this.filterInput = ""
},
change(item) {
if (!item.disable) {
if (this.multiple) {
if (!this.current) {
this.current = []
}
if (!this.currentArr) {
this.currentArr = []
}
if (this.currentArr.includes(item[this.dataValue])) {
let index = this.current.findIndex(e => {
return e[this.dataValue] == item[this.dataValue]
})
this.current.splice(index, 1)
this.currentArr.splice(index, 1)
this.emit(this.current)
} else {
this.current.push(item)
this.currentArr.push(item[this.dataValue])
this.emit(this.current)
}
this.filterInput = ""
} else {
this.showSelector = false
this.current = this.formatItemName(item)
if (this.filterable) {
this.filterInput = item[this.dataKey]
}
this.emit(item[this.dataValue])
}
}
},
delItem(item) {
if (this.disabled) {
return
}
if (this.currentArr.includes(item[this.dataValue])) {
let index = this.current.findIndex(e => {
return e[this.dataValue] == item[this.dataValue]
})
this.current.splice(index, 1)
this.currentArr.splice(index, 1)
this.emit(this.current)
}
},
emit(val) {
if (this.multiple) {
this.$emit('input', this.currentArr)
this.$emit('update:modelValue', this.currentArr)
const currentArr = this.mixinDatacomResData.filter(item => this.currentArr.includes(item[this
.dataValue]))
this.$emit('change', currentArr)
} else {
this.$emit('input', val)
this.$emit('update:modelValue', val)
const current = this.mixinDatacomResData.find(item => val == item[this.dataValue])
console.log(current);
this.$emit('change', current)
}
if (this.collection) {
this.setCache(val);
}
},
toggleSelector() {
if (this.disabled) {
return
}
// if (this.filterable && this.filterInput && this.mixinDatacomResData.findIndex(e => {
// return e[this.dataKey] == this
// .filterInput
// }) < 0) {
// if (!this.multiple) {
// this.filterInput = ""
// }
// }
this.getIsDown()
this.showSelector = !this.showSelector
this.isFocus = this.showSelector
if (this.filterable && this.current && this.showSelector) {
if (!this.multiple) {
this.placeholderOld = this.current
// this.filterInput = ""
}
} else if (this.filterable && !this.current && !this.showSelector) {
if (this.placeholderOld != this.placeholder) {
if (!this.multiple) {
this.current = this.placeholderOld
}
}
}
this.filterInput = ""
},
formatItemName(item) {
if (!item) {
return ""
}
let text = item[this.dataKey]
let value = item[this.dataValue]
let {
channel_code
} = item
channel_code = channel_code ? `(${channel_code})` : ''
if (this.format) {
// 格式化输出
let str = "";
str = this.format;
for (let key in item) {
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
}
return str;
} else {
return this.collection.indexOf('app-list') > 0 ?
`${text}(${value})` :
(
text ?
text :
`未命名${channel_code}`
)
}
},
// 获取当前加载的数据
getLoadData() {
return this.mixinDatacomResData;
},
// 获取当前缓存key
getCurrentCacheKey() {
return this.collection;
},
// 获取缓存
getCache(name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
return cacheData[name];
},
// 设置缓存
setCache(value, name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
cacheData[name] = value;
uni.setStorageSync(this.cacheKey, cacheData);
},
// 删除缓存
removeCache(name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
delete cacheData[name];
uni.setStorageSync(this.cacheKey, cacheData);
},
}
}
</script>
<style lang="scss">
$uni-base-color: #6a6a6a !default;
$uni-main-color: #333 !default;
$uni-secondary-color: #909399 !default;
$uni-border-3: #e5e5e5;
/* #ifndef APP-NVUE */
@media screen and (max-width: 500px) {
.hide-on-phone {
display: none;
}
}
/* #endif */
.uni-stat__select {
display: flex;
align-items: center;
// padding: 15px;
// cursor: pointer;
width: 100%;
flex: 1;
box-sizing: border-box;
}
.uni-stat-box {
width: 100%;
flex: 1;
}
.uni-stat__actived {
width: 100%;
flex: 1;
// outline: 1px solid #2979ff;
}
.uni-label-text {
font-size: 14px;
font-weight: bold;
color: $uni-base-color;
margin: auto 0;
margin-right: 5px;
}
.uni-select {
font-size: 14px;
border: 1px solid $uni-border-3;
box-sizing: border-box;
border-radius: 4px;
padding: 0 5px;
padding-left: 10px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
user-select: none;
/* #endif */
flex-direction: row;
align-items: center;
border-bottom: solid 1px $uni-border-3;
width: 100%;
flex: 1;
height: 35px;
min-height: 35px;
&--disabled {
background-color: #f5f7fa;
cursor: not-allowed;
}
}
.uni-select__label {
font-size: 16px;
// line-height: 22px;
min-height: 35px;
height: 35px;
padding-right: 10px;
color: $uni-secondary-color;
}
.uni-select__input-box {
width: 100%;
height: 35px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
.tag-calss {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
font-size: 12px;
border: 1px solid #d9ecff;
border-radius: 4px;
white-space: nowrap;
height: 24px;
padding: 0 4px 0px 8px;
line-height: 22px;
box-sizing: border-box;
margin: 2px 0 2px 6px;
display: flex;
max-width: 100%;
align-items: center;
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
.text {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
font-size: 12px;
white-space: nowrap;
line-height: 22px;
color: #909399;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.uni-select__input {
flex: 1;
font-size: 14px;
height: 22px;
line-height: 22px;
}
.uni-select__input-plac {
font-size: 14px;
color: $uni-secondary-color;
}
.uni-select__selector__down {
top: calc(100% + 12px);
.uni-popper__arrow {
transform: rotateX(0deg);
top: -6px;
}
}
.uni-select__selector__upwards {
bottom: calc(100% + 12px);
.uni-popper__arrow {
transform: rotateX(180deg);
bottom: -6px;
}
}
.uni-select__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
position: absolute;
left: 0;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 3;
padding: 4px 0;
}
.uni-select__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px;
box-sizing: border-box;
/* #endif */
}
.uni-select__selector-empty,
.uni-select__selector-item {
/* #ifndef APP-NVUE */
display: flex;
// cursor: pointer;
/* #endif */
line-height: 35px;
font-size: 14px;
text-align: center;
/* border-bottom: solid 1px $uni-border-3; */
padding: 0px 10px;
}
.uni-select__selector-item:hover {
background-color: #f9f9f9;
}
.uni-select__selector-empty:last-child,
.uni-select__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
.uni-select_selector-item_active {
color: #409eff;
font-weight: bold;
background-color: #f5f7fa;
border-radius: 3px;
}
.uni-select__selector__disabled {
opacity: 0.4;
cursor: default;
}
/* picker 弹出层通用的指示小三角 */
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-select__input-text {
// width: 280px;
width: 90%;
color: $uni-main-color;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
.uni-select__input-placeholder {
color: $uni-base-color;
font-size: 12px;
}
.uni-select--mask {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
}
</style>
\ No newline at end of file
uni_modules/zxz-uni-data-select/package.json
View file @ 24ad5a69
{
"id": "zxz-uni-data-select",
"displayName": "zxz-uni-data-select 下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义数据)",
"version": "1.0.15",
"description": "通过数据驱动的下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义数据)",
"keywords": [
"uni-ui",
"select",
"uni-data-select",
"下拉框",
"下拉选"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.1"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-load-more"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"京东": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
{
"id": "zxz-uni-data-select",
"displayName": "zxz-uni-data-select 下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义数据)",
"version": "1.0.20",
"description": "通过数据驱动的下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义数据)",
"keywords": [
"uni-ui",
"select",
"uni-data-select",
"下拉框",
"下拉选择框"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.1"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-load-more"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"京东": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
uni_modules/zxz-uni-data-select/readme.md
View file @ 24ad5a69
## DataSelect 下拉框选择器 先导入示例项目看看是否满足需求，然后再下载插件，有问题可以加微weiyila520
> **组件名：zxz-uni-data-select**
> 代码块： `zxz-uni-data-select`
当选项过多时，使用下拉菜单展示并选择内容
## API
## DataSelect 下拉框选择器 <strong style="color:orangered;"><em>先导入示例项目</em></strong> 看看是否满足需求，然后再下载插件，有问题可以加微<strong style="color:orangered;"><em>weiyila520</em></strong>
> **组件名：zxz-uni-data-select**
> 代码块： `zxz-uni-data-select`
本插件基于官方插件 [uni-data-select](https://ext.dcloud.net.cn/plugin?id=7993) 进行二次开发拓展功能，支持uni-data-select本身功能不变（表单验证等）
<h1>拓展功能</h1>
<ol>
<li>支持多选功能</li>
<li>支持选项禁用</li>
<li>支持自定义显示值</li>
<li>支持搜索</li>
<li>支持多选时将选中值按文字形式展示</li>
<li>支持下拉菜单溢出屏幕底部时自动改为向上弹出</li>
<li>监听搜索输入事件</li>
</ol>
<h2>API</h2>
### zxz-uni-data-select Props
| 属性名 | 类型 | 默认值 | 说明 |
| - | - | - | - |
| v-model | String、Array、Number |- | 选中项绑定值 |
| multiple | Boolean | false | 是否多选 |
| disabled | Boolean |false | 是否禁用 |
| dataKey | String |"key" | 作为 key 唯一标识的键名 |
| dataValue | String | "value" | 作为 value 唯一标识的键名 |
| collapseTags | Boolean | false | 多选时是否将选中值按文字的形式展示|
|collapseTagsNum|Number | 1 | 多选时选中值按文字的形式展示的数量|
| localdata | Array |- | 下拉列表本地数据 |
|label | String | - | 左侧标题
|placeholder | String | "请选择" | 输入框的提示文字
|emptyTips | String |"无选项" | 无选项提示
|clear | Boolean | true| 是否清空
|format | String | - | 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
#### 如使用过程中有任何问题，或者您对组件有一些好的建议
## 欢迎加微weiyila520
| 属性名 | 类型 | 默认值 | 说明 |
| - | - | - | - |
| v-model | String、Array、Number |- | 选中项绑定值 |
| multiple | Boolean | false | 是否多选 |
| disabled | Boolean |false | 是否禁用 |
| dataKey | String |"key" | 作为 key 唯一标识的键名 |
| dataValue | String | "value" | 作为 value 唯一标识的键名 |
| filterable | Boolean | false | 是否开启搜索 |
| collapseTags | Boolean | false | 多选时是否将选中值按文字的形式展示 |
|collapseTagsNum|Number | 1 | 多选时选中值按文字的形式展示的数量 |
| localdata | Array |- | 下拉列表本地数据 |
|label | String | - | 左侧标题 |
|placeholder | String | "请选择" | 输入框的提示文字 |
|emptyTips | String |"无选项" | 无选项提示 |
|clear | Boolean | true | 是否清空 |
|format | String | - | 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"|
|@inputChange | event | event(String) | 搜索输入事件 |
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment