<template>
|
<view :class="['fy-dropdown-item', 'fy_dropdown-item']" @touchmove.stop.prevent="() => {}" :style="{'background-color': backgroundColor, 'height': activeItemHeight+'rpx'}" v-if="active">
|
<template v-if="!custom">
|
<template v-if="type == 'column'">
|
<Fy-dropdown-column :options="options" @success="onCateSuccess" />
|
</template>
|
<template v-else>
|
<scroll-view :scroll-y="true" class="fy_dropdown-item_scroll" :style="getScrollStyle">
|
<view v-for="(item, index) in options" :key="index" @click.stop.prevent="cellClick(item.value)" class="fy_dropdown-item_scroll_cell"
|
:style="{'height': `${itemHeight}rpx`, 'line-height': `${itemHeight}rpx`}">
|
<text class="fy_cell_title" :style="{ color: value == item.value ? activeColor : inactiveColor }">{{ item.label }}</text>
|
<u-icon name="arrow-down" :color="activeColor" v-if="value == item.value" size="16"></u-icon>
|
</view>
|
</scroll-view>
|
</template>
|
</template>
|
<slot v-else></slot>
|
</view>
|
</template>
|
|
<script>
|
import FyDropdownColumn from './fy-dropdown-column.vue';
|
|
/**
|
* dropdown-item 下拉菜单
|
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
|
* @property {String | Number} v-model 双向绑定选项卡选择值
|
* @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
|
* @property {Boolean} disabled 是否禁用此选项卡（默认false）
|
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
|
* @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
|
* @example <fy-dropdown-item></fy-dropdown-item>
|
*/
|
export default {
|
name: 'fy-dropdown-item',
|
components: { FyDropdownColumn },
|
props: {
|
// 当前选中项的value值
|
dropdownKey: {
|
type: String, default: ''
|
},
|
// 当前选中项的value值
|
value: {
|
type: [Number, String, Array, Object], default: ''
|
},
|
// 选项数据，如果传入了默认slot，此参数无效
|
options: {
|
type: Array, default () { return [] }
|
},
|
// 是否禁用此菜单项
|
disabled: {
|
type: Boolean, default: false
|
},
|
backgroundColor: {
|
type: String, default: 'transparent'
|
},
|
maxHeight: {
|
type: Number, default: 800
|
},
|
itemHeight: {
|
type: Number, default: 90
|
},
|
type: {
|
type: String, default: ''
|
},
|
custom: {
|
type: Boolean, default: false
|
}
|
},
|
data() {
|
return {
|
initComponent: false,
|
activeItemHeight: 300,
|
active: false, // 当前项是否处于展开状态
|
// #ifndef MP
|
parent: null,
|
// #endif
|
activeColor: '#00bcd4', // 激活时左边文字和右边对勾图标的颜色
|
inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
|
}
|
},
|
computed: {
|
getScrollHeight() {
|
let height = this.options.length * this.itemHeight;
|
if (height === 0) {
|
return 300;
|
} else if(height > this.maxHeight) {
|
return this.maxHeight;
|
} else {
|
return height;
|
}
|
},
|
getScrollStyle() {
|
return { 'height': `${this.getScrollHeight}rpx` }
|
}
|
},
|
created() {
|
this.activeItemHeight = 300;
|
// #ifdef MP
|
this.parent = null;
|
// #endif
|
},
|
mounted() {
|
this.init();
|
},
|
methods: {
|
// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
|
// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
|
// 这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
|
// 值(默认为undefined)，就是查找最顶层的$parent
|
getParent(name = undefined) {
|
try {
|
let parent = this.$parent;
|
// 通过while历遍，这里主要是为了H5需要多层解析的问题
|
while (parent) {
|
// 父组件
|
if (parent.$options && parent.$options.name !== name) {
|
// 如果组件的name不相等，继续上一级寻找
|
parent = parent.$parent;
|
} else {
|
return parent;
|
}
|
}
|
return false;
|
} catch(err) {
|
console.log(err);
|
return false;
|
}
|
},
|
// 将当前px转换为rpx
|
getScaleToRpx(px) {
|
try {
|
const screenWidth = uni.getSystemInfoSync().screenWidth;
|
const unit = 750 / screenWidth;
|
return px * unit;
|
} catch(err) {
|
return px;
|
}
|
},
|
init() {
|
try {
|
let parent = this.getParent.call(this, 'fy-dropdown');
|
if (!parent) return;
|
this.parent = parent;
|
this.active = parent.currentKey == this.dropdownKey;
|
|
if (this.initComponent === false) {
|
parent.childList.push(this); // 供父组件依次更新子组件显示内容
|
}
|
if (this.active === false) {
|
this.initComponent = true;
|
return;
|
}
|
|
if (this.type === 'cate' || this.type === 'address') {
|
this.activeItemHeight = this.getScaleToRpx(320) + 100;
|
} else if(this.type === 'column') {
|
this.activeItemHeight = this.getScaleToRpx(220) + 100;
|
} else {
|
this.activeItemHeight = this.getScrollHeight;
|
}
|
|
this.initComponent = true;
|
} catch(err) {
|
console.log(err)
|
}
|
},
|
// cell被点击
|
cellClick(value) {
|
// 修改通过v-model绑定的值
|
this.$emit('input', value);
|
// 通知父组件(fy-dropdown)收起菜单
|
this.parent.close();
|
// 发出事件，抛出当前勾选项的value
|
this.$emit('change', value);
|
},
|
onCateSuccess(data) {
|
this.parent.close();
|
this.$emit('change', data);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import './fy-dropdown-item.scss';
|
</style>
|
