feat：转账插件
This commit is contained in:
@@ -1,137 +1,309 @@
|
||||
<template>
|
||||
<view class="u-select">
|
||||
<view class="u-select__content">
|
||||
<view class="u-select__label" @click="openSelect">
|
||||
<slot name="text">
|
||||
<text class="u-select__text">
|
||||
{{ label }}
|
||||
</text>
|
||||
</slot>
|
||||
<slot name="icon">
|
||||
<u-icon name="arrow-down" :size="iconSize" :color="iconColor"></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="u-select__options"
|
||||
:style="{zIndex: zIndex}" v-if="isOpen">
|
||||
<slot name="options">
|
||||
<view class="u-select__options_item"
|
||||
:class="current == item[keyName] ? 'active': ''"
|
||||
:key="index" v-for="(item, index) in options"
|
||||
@click="selectItem(item)">
|
||||
<slot name="optionItem" :item="item">
|
||||
<text class="u-select__item_text" :style="{color: itemColor}">
|
||||
{{item.name}}
|
||||
</text>
|
||||
</slot>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<template>
|
||||
<view class="u-select">
|
||||
<view :class="['u-select__content', disabled && 'disabled']">
|
||||
<view :class="['u-select__label', border && 'u-select__label--border']" :style="selectLabelStyle" @click="openSelect">
|
||||
<slot name="text" :currentLabel="currentLabel">
|
||||
<text class="u-select__text" :style="{ color: resolvedTextColor }" v-if="showOptionsLabel">
|
||||
{{ currentLabel }}
|
||||
</text>
|
||||
<text class="u-select__text" :style="{ color: resolvedTextColor }" v-else>
|
||||
{{ label }}
|
||||
</text>
|
||||
</slot>
|
||||
<slot name="icon">
|
||||
<up-icon name="arrow-down" :size="iconSize" :color="resolvedIconColor"></up-icon>
|
||||
</slot>
|
||||
</view>
|
||||
<u-overlay :show="isOpen" @click="overlayClick" v-if="overlay" :zIndex="zIndex" :duration="duration + 50"
|
||||
:customStyle="overlayStyle" :opacity="overlayOpacity" @touchmove.stop.prevent="noop"></u-overlay>
|
||||
<view class="u-select__options__wrap" :style="optionsWrapStyle">
|
||||
<view class="u-select__options" :style="optionsStyle" v-if="isOpen">
|
||||
<slot name="options">
|
||||
<view class="u-select__options_item" :class="current == item[keyName] ? 'active': ''"
|
||||
:style="{ color: resolvedItemColor }"
|
||||
:key="index" v-for="(item, index) in options" @click="selectItem(item)">
|
||||
<slot name="optionItem" :item="item">
|
||||
<text class="u-select__item_text" :style="{color: resolvedItemColor}">
|
||||
{{item[labelName]}}
|
||||
</text>
|
||||
</slot>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mpMixin
|
||||
} from '../../libs/mixin/mpMixin';
|
||||
import {
|
||||
mixin
|
||||
} from '../../libs/mixin/mixin';
|
||||
import {
|
||||
getWindowInfo
|
||||
} from '../../libs/function/index';
|
||||
export default {
|
||||
name:"up-select",
|
||||
emits: ['update:current', 'select'],
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: '选项'
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
current: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
itemColor: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: [String],
|
||||
default: '13px'
|
||||
}
|
||||
} ,
|
||||
data() {
|
||||
return {
|
||||
isOpen: false
|
||||
name: "up-select",
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['update:current', 'select'],
|
||||
props: {
|
||||
maxHeight: {
|
||||
type: String,
|
||||
default: '90vh'
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
overlayOpacity: {
|
||||
type: Number,
|
||||
default: 0.01
|
||||
},
|
||||
overlayStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '选项'
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
labelName: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
showOptionsLabel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
current: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 11000
|
||||
},
|
||||
itemColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: [String],
|
||||
default: '13px'
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示触发区边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 下拉面板宽度，支持 px/rpx/% 等，如 240px 或 300rpx
|
||||
optionsWidth: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
optionsWrapLeft: 'auto',
|
||||
optionsWrapRight: 'auto'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
openSelect() {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
selectItem(item) {
|
||||
this.isOpen = false
|
||||
this.$emit('update:current', item[this.keyName])
|
||||
this.$emit('select', item)
|
||||
}
|
||||
}
|
||||
computed: {
|
||||
resolvedItemColor() {
|
||||
return this.itemColor || this.upThemeVar('--up-main-color', '#303133');
|
||||
},
|
||||
resolvedTextColor() {
|
||||
return this.upThemeVar('--up-main-color', '#303133');
|
||||
},
|
||||
resolvedIconColor() {
|
||||
return this.iconColor || this.upThemeVar('--up-content-color', '#606266');
|
||||
},
|
||||
normalizedOptionsWidth() {
|
||||
if (this.optionsWidth === '' || this.optionsWidth === null || typeof this.optionsWidth === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
if (typeof this.optionsWidth === 'number') {
|
||||
return `${this.optionsWidth}px`;
|
||||
}
|
||||
return this.optionsWidth;
|
||||
},
|
||||
selectLabelStyle() {
|
||||
if (!this.border) return {};
|
||||
return {
|
||||
borderColor: this.upThemeVar('--up-border-color', '#dadbde'),
|
||||
backgroundColor: this.upThemeVar('--up-card-bg-color', '#ffffff')
|
||||
};
|
||||
},
|
||||
optionsWrapStyle() {
|
||||
const style = {
|
||||
overflowY: 'auto',
|
||||
zIndex: this.zIndex + 1,
|
||||
left: this.optionsWrapLeft,
|
||||
right: this.optionsWrapRight,
|
||||
maxHeight: this.maxHeight
|
||||
};
|
||||
if (this.normalizedOptionsWidth) {
|
||||
style.width = this.normalizedOptionsWidth;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
optionsStyle() {
|
||||
const style = {};
|
||||
if (this.normalizedOptionsWidth) {
|
||||
style.width = this.normalizedOptionsWidth;
|
||||
style.minWidth = this.normalizedOptionsWidth;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
currentLabel() {
|
||||
let name = '';
|
||||
this.options.forEach((ele) => {
|
||||
if (ele[this.keyName] === this.current) {
|
||||
name = ele[this.labelName];
|
||||
}
|
||||
});
|
||||
return name;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openSelect() {
|
||||
if (this.disabled) return;
|
||||
this.isOpen = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.isOpen) {
|
||||
this.adjustOptionsWrapPosition();
|
||||
}
|
||||
});
|
||||
},
|
||||
closeSelect() {
|
||||
this.isOpen = false;
|
||||
},
|
||||
overlayClick() {
|
||||
this.isOpen = false;
|
||||
},
|
||||
selectItem(item) {
|
||||
this.isOpen = false;
|
||||
this.$emit('update:current', item[this.keyName]);
|
||||
this.$emit('select', item);
|
||||
},
|
||||
adjustOptionsWrapPosition() {
|
||||
this.optionsWrapLeft = '0px';
|
||||
this.optionsWrapRight = 'auto';
|
||||
let wi = getWindowInfo();
|
||||
let windowWidth = wi.windowWidth;
|
||||
this.$uGetRect('.u-select__options__wrap').then(rect => {
|
||||
if (rect.left + rect.width > windowWidth) {
|
||||
// 如果右侧被遮挡，则调整到左侧
|
||||
this.optionsWrapLeft = 'auto';
|
||||
this.optionsWrapRight = `0px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-select__content {
|
||||
position: relative;
|
||||
.u-select__label {
|
||||
display: flex;
|
||||
/* #ifdef H5 */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
.u-select__text {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.u-select__options {
|
||||
min-width: 100px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #f1f1f1;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
.u-select__options_item {
|
||||
padding: 10px 12px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
/* #ifdef H5 */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.u-select__item_text {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
}
|
||||
.u-select__content {
|
||||
position: relative;
|
||||
|
||||
.u-select__label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&--border {
|
||||
padding: 8px 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-select__text {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.u-select__options__wrap {
|
||||
margin-bottom: 46px;
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.u-select__options {
|
||||
min-width: 100px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--up-border-color, #f1f1f1);
|
||||
background-color: var(--up-card-bg-color, #fff);
|
||||
|
||||
.u-select__options_item {
|
||||
padding: 10px 12px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--up-bg-color, #f7f7f7);
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.u-select__item_text {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user