v1.0
This commit is contained in:
hupeng
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="uv-drop-down-item" @click="clickHandler">
|
||||
<uv-text :text="label" :size="getTextStyle.size" :color="getTextStyle.color" lines="1" :custom-style="{marginRight: '10rpx',maxWidth:'200rpx'}"></uv-text>
|
||||
<uv-icon :name="getDownIcon.name" :size="getDownIcon.size" :color="getDownIcon.color" v-if="[1,'1'].indexOf(type)==-1"></uv-icon>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
/**
|
||||
* DropDown 下拉框
|
||||
* @description 下拉筛选
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
|
||||
* @property {String | Number} name 字段标识
|
||||
* @property {String | Number} type 类型 1 没有筛选项，直接进行选中和不选中 2 有多个选项
|
||||
* @property {String | Number} label 筛选项的文本
|
||||
* @property {Boolean} isDrop 该项是否打开
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-drop-down-item',
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['click'],
|
||||
props: {
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 类型 1 没有筛选项，直接进行选中和不选中 2 有多个选项
|
||||
type: {
|
||||
type: [String, Number],
|
||||
default: '2'
|
||||
},
|
||||
// 筛选的文本
|
||||
label: {
|
||||
type: [String],
|
||||
default: ''
|
||||
},
|
||||
// 筛选值
|
||||
value: {
|
||||
type: [String, Number, null],
|
||||
default: ''
|
||||
},
|
||||
// 是否下拉菜单打开
|
||||
isDrop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parentData: {
|
||||
defaultValue: [0, '0', 'all'],
|
||||
textSize: '30rpx',
|
||||
textColor: '#333',
|
||||
textActiveSize: '30rpx',
|
||||
textActiveColor: '#3c9cff',
|
||||
extraIcon: {},
|
||||
extraActiveIcon: {},
|
||||
sign: '',
|
||||
clickHandler: Function
|
||||
},
|
||||
active: false,
|
||||
isDroped: false,
|
||||
elId: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isDrop: {
|
||||
handler(newVal) {
|
||||
this.isDroped = newVal;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
value: {
|
||||
handler(newVal) {
|
||||
this.active = this.parentData.defaultValue.indexOf(newVal) == -1;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDownIcon() {
|
||||
const style = {
|
||||
size: '30rpx',
|
||||
color: '#333',
|
||||
...this.parentData.extraIcon
|
||||
}
|
||||
if (this.active || this.isDroped) {
|
||||
style.color = this.parentData.extraActiveIcon?.color ? this.parentData.extraActiveIcon?.color : '#3c9cff';
|
||||
style.size = this.parentData.extraActiveIcon?.size ? this.parentData.extraActiveIcon?.size : '30rpx';
|
||||
}
|
||||
if (this.isDroped) {
|
||||
style.name = this.parentData.extraActiveIcon?.name;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
getTextStyle() {
|
||||
const style = {
|
||||
size: this.parentData.textSize,
|
||||
color: this.parentData.textColor
|
||||
};
|
||||
if (this.active || this.isDroped) {
|
||||
style.size = this.parentData.textActiveSize;
|
||||
style.color = this.parentData.textActiveColor;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.elId = this.$uv.guid();
|
||||
this.getParentData('uv-drop-down');
|
||||
if (!this.parent) {
|
||||
this.$uv.error('uv-drop-down必须搭配uv-drop-down-item组件使用');
|
||||
}
|
||||
uni.$on('HANDLE_DROPDOWN_ONE', id => {
|
||||
if (this.isDroped && this.elId != id) {
|
||||
this.isDroped = false;
|
||||
}
|
||||
})
|
||||
uni.$on(`${this.parentData.sign}_CLOSEPOPUP`, async () => {
|
||||
if (this.isDroped) {
|
||||
this.isDroped = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
async clickHandler() {
|
||||
let data = {};
|
||||
uni.$emit('HANDLE_DROPDOWN_ONE', this.elId);
|
||||
switch (+this.type) {
|
||||
case 1:
|
||||
this.active = !this.active;
|
||||
data = {
|
||||
name: this.name,
|
||||
active: this.active,
|
||||
type: this.type
|
||||
};
|
||||
break;
|
||||
case 2:
|
||||
this.isDroped = !this.isDroped;
|
||||
data = {
|
||||
name: this.name,
|
||||
active: this.isDroped,
|
||||
type: this.type
|
||||
};
|
||||
break;
|
||||
}
|
||||
this.parentData.clickHandler(data);
|
||||
this.$emit('click', data);
|
||||
uni.$emit(`${this.parentData.sign}_CLICKMENU`, {
|
||||
show: +this.type > 1 && this.isDroped
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
.uv-drop-down-item {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="uv-drop-down-popup">
|
||||
<uv-transition :show="show" mode="fade" :duration="300" :custom-style="overlayStyle" @click="clickOverlay">
|
||||
<view class="uv-dp__container" ref="uvDPContainer" :style="{height: `${height}px`}">
|
||||
<view class="uv-dp__container__list" ref="uvDPList">
|
||||
<slot>
|
||||
<view class="uv-dp__container__list--item" v-for="(item,index) in list" :key="index" @click="clickHandler(item,index)" :style="[itemCustomStyle(index)]">
|
||||
<uv-text :text="item[keyName]" :size="getTextSize(index)" :color="getTextColor(index)"></uv-text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</uv-transition>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
/**
|
||||
* DropDownPopup 下拉框
|
||||
* @description 下拉筛选框
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
|
||||
* @property {String | Number} name 字段标识
|
||||
* @property {String | Number} zIndex 弹出层的层级
|
||||
* @property {String | Number} opacity 遮罩层的透明度
|
||||
* @property {Boolean} clickOverlayOnClose 是否允许点击遮罩层关闭弹窗
|
||||
* @property {Object} currentDropItem 当前下拉筛选菜单对象
|
||||
* @property {String} keyName 指定从当前下拉筛选菜单对象元素中读取哪个属性作为文本展示
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-drop-down-popup',
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
sign: {
|
||||
type: [String, Number],
|
||||
default: 'UVDROPDOWN'
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 999
|
||||
},
|
||||
opacity: {
|
||||
type: [Number, String],
|
||||
default: 0.5
|
||||
},
|
||||
clickOverlayOnClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 当前下拉选项对象
|
||||
currentDropItem: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
child: []
|
||||
}
|
||||
}
|
||||
},
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
rect: {},
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
overlayStyle() {
|
||||
let { height = 0, top = 0 } = this.rect;
|
||||
// #ifdef H5
|
||||
top += this.$uv.sys().windowTop;
|
||||
// #endif
|
||||
const style = {
|
||||
position: 'fixed',
|
||||
top: `${top+height}px`,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: this.zIndex,
|
||||
bottom: 0,
|
||||
'background-color': `rgba(0, 0, 0, ${this.opacity})`
|
||||
}
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
},
|
||||
list() {
|
||||
try {
|
||||
return Array.isArray(this.currentDropItem.child) ? this.currentDropItem.child : [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
getTextColor(index) {
|
||||
return index => {
|
||||
const active = this.currentDropItem.activeIndex == index;
|
||||
const color = this.currentDropItem.color;
|
||||
const activeColor = this.currentDropItem.activeColor;
|
||||
if (active) {
|
||||
return activeColor ? activeColor : '#3c9cff';
|
||||
}
|
||||
return color ? color : '#333';
|
||||
}
|
||||
},
|
||||
getTextSize(index) {
|
||||
return index => {
|
||||
const active = this.currentDropItem.activeIndex == index;
|
||||
const size = this.currentDropItem.size;
|
||||
const activeSize = this.currentDropItem.activeSize;
|
||||
if (active) {
|
||||
return activeSize ? activeSize : '30rpx';
|
||||
}
|
||||
return size ? size : '30rpx';
|
||||
}
|
||||
},
|
||||
itemCustomStyle() {
|
||||
return index => {
|
||||
const active = this.currentDropItem.activeIndex == index;
|
||||
const style = {};
|
||||
if (active && this.currentDropItem.itemActiveCustomStyle) {
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.currentDropItem.itemActiveCustomStyle));
|
||||
}
|
||||
if (this.currentDropItem.itemCustomStyle) {
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.currentDropItem.itemCustomStyle))
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
clickHandler(item, index) {
|
||||
this.currentDropItem.activeIndex = index;
|
||||
this.$emit('clickItem', item);
|
||||
},
|
||||
init() {
|
||||
uni.$off(`${this.sign}_GETRECT`);
|
||||
uni.$on(`${this.sign}_GETRECT`, rect => {
|
||||
this.rect = rect;
|
||||
})
|
||||
uni.$off(`${this.sign}_CLICKMENU`);
|
||||
uni.$on(`${this.sign}_CLICKMENU`, async res => {
|
||||
if (res.show) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.show = true;
|
||||
this.$nextTick(async () => {
|
||||
// #ifndef H5 || MP-WEIXIN
|
||||
await this.$uv.sleep(60);
|
||||
// #endif
|
||||
const res = await this.queryRect();
|
||||
// #ifndef APP-NVUE
|
||||
this.height = res.height;
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.animation(res.height);
|
||||
// #endif
|
||||
this.$emit('popupChange', { show: true });
|
||||
})
|
||||
},
|
||||
close() {
|
||||
if(!this.show) return;
|
||||
this.height = 0;
|
||||
// #ifndef APP-NVUE
|
||||
this.height = 0;
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.animation(0);
|
||||
// #endif
|
||||
this.show = false;
|
||||
uni.$emit(`${this.sign}_CLOSEPOPUP`);
|
||||
this.$emit('popupChange', { show: false });
|
||||
},
|
||||
clickOverlay() {
|
||||
if (this.clickOverlayOnClose) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
// 查询内容高度
|
||||
queryRect() {
|
||||
// #ifndef APP-NVUE
|
||||
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uvGetRect(`.uv-dp__container__list`).then(size => {
|
||||
resolve(size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，使用dom模块查询元素高度
|
||||
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(this.$refs.uvDPList, res => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// nvue下设置高度
|
||||
animation(height, duration = 200) {
|
||||
// #ifdef APP-NVUE
|
||||
const ref = this.$refs['uvDPContainer'];
|
||||
animation.transition(ref, {
|
||||
styles: {
|
||||
height: `${height}px`
|
||||
},
|
||||
duration
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.uv-dp__container {
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
transition: all .15s;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
}
|
||||
.uv-dp__container__list {
|
||||
&--item {
|
||||
padding: 20rpx 60rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<uv-sticky :disabled="!isSticky">
|
||||
<view ref="dropDownRef" class="uv-drop-down" :style="[$uv.addStyle(customStyle)]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</uv-sticky>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
/**
|
||||
* DropDown 下拉框
|
||||
* @description 下拉筛选
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
|
||||
* @property {String | Number} sign 组件唯一标识，需要手动传
|
||||
* @property {Boolean} is-sticky = [true|false] 是否吸顶
|
||||
* @property {Array} default-value 默认值，表示参数value属于这里面的值，就说明是未选中即是默认展示的值。eg：上面示例中的{label: '全部',value: 'all'} 即是默认值。后续处理逻辑也可以根据是否是其中值进行过滤。
|
||||
* @property {String} textSize 每项字体大小
|
||||
* @property {String} textColor 每项文本颜色
|
||||
* @property {String} textActiveSize 每项选中状态字体大小
|
||||
* @property {String} textActiveColor 每项选中状态文本颜色
|
||||
* @property {Object} extraIcon 每项右侧图标
|
||||
* @property {Object} extraActiveIcon 每项选中后右侧图标
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-drop-down',
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['click'],
|
||||
props: {
|
||||
isSticky: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
sign: {
|
||||
type: [String, Number],
|
||||
default: 'UVDROPDOWN'
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
default: () => [0, '0', 'all']
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '30rpx'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
textActiveSize: {
|
||||
type: String,
|
||||
default: '30rpx'
|
||||
},
|
||||
textActiveColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
extraIcon: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
name: 'arrow-down',
|
||||
size: '30rpx',
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
extraActiveIcon: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
name: 'arrow-up',
|
||||
size: '30rpx',
|
||||
color: '#3c9cff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
parentData() {
|
||||
return [this.defaultValue, this.textSize, this.textColor, this.textActiveColor, this.textActiveSize, this.extraIcon, this.extraActiveIcon, this.sign, this.clickHandler];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
uni.$emit(`${this.sign}_CLICKMENU`, {
|
||||
show: false
|
||||
});
|
||||
this.$nextTick(async () => {
|
||||
const rect = await this.queryRect();
|
||||
uni.$emit(`${this.sign}_GETRECT`, rect);
|
||||
})
|
||||
},
|
||||
// 查询内容高度
|
||||
queryRect() {
|
||||
// #ifndef APP-NVUE
|
||||
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uvGetRect(`.uv-drop-down`).then(size => {
|
||||
resolve(size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，使用dom模块查询元素高度
|
||||
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(this.$refs.dropDownRef, res => {
|
||||
res.size.top = res.size.top <= 0 ? 0 : res.size.top;
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
clickHandler(data) {
|
||||
this.$emit('click', data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
.uv-drop-down {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #dadbde;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user