thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

562
components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue Normal file
View File

@ -0,0 +1,562 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 40 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-dropdown__menu" ref="fui_dm_wrap" @tap="resetCalc">
<slot></slot>
<view class="fui-ddm__mask" :style="{background:maskBackground}" v-if="isShow && isMask" @tap="close(1)">
</view>
<view class="fui-dropdown__menu-list"
:class="{'fui-ddm__down':direction!=='up','fui-ddm__up':direction==='up','fui-ddm__down-show':isShow && direction!=='up','fui-ddm__up-show':isShow && direction==='up'}"
:style="getStyles" v-if="isNvueShow || !isNvue" ref="fui_ddm_list">
<scroll-view :show-scrollbar="false" class="fui-ddm__scroll" scroll-y
:style="{height:isNvue?maxHeight+'rpx':'auto', maxHeight:maxHeight+'rpx',minWidth:minWidth+'rpx'}">
<view>
<view class="fui-dropdown__menu-item"
:style="{background:background,padding:padding,borderBottomColor:splitLine && isNvue?lineColor:'transparent'}"
:class="{'fui-ddm__reverse':isReverse,'fui-ddm__item-line':splitLine && itemList.length-1!==index}"
v-for="(model,index) in itemList" :key="index" @tap.stop="itemClick(index)">
<view class="fui-ddm__checkbox"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddm__checkbox-color':(!checkboxColor || checkboxColor===true) && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox">
<view class="fui-ddm__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
v-if="model.checked"></view>
</view>
<view class="fui-ddm__flex">
<view class="fui-ddm__icon-box"
:class="{'fui-ddm__icon-ml':!isReverse && isCheckbox,'fui-ddm__icon-mr':isReverse}"
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model.src">
<image :src="model.src" :style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}"></image>
</view>
<text class="fui-ddm__item-text"
:class="{'fui-ddm__text-pl':!isReverse && (isCheckbox || model.src),'fui-ddm__text-pr':isReverse && (isCheckbox || model.src)}"
:style="{fontSize:size+'rpx',color:selectedColor && model.checked?selectedColor:color}">{{model.text}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
name: "fui-dropdown-menu",
emits: ['click', 'close'],
props: {
options: {
type: Array,
default () {
return []
}
},
maxHeight: {
type: [Number, String],
default: 400
},
minWidth: {
type: [Number, String],
default: 0
},
left: {
type: [Number, String],
default: 0
},
//right大于等于0时生效，left失效
right: {
type: [Number, String],
default: -1
},
background: {
type: String,
default: '#fff'
},
radius: {
type: [Number, String],
default: 0
},
padding: {
type: String,
default: '32rpx'
},
isCheckbox: {
type: Boolean,
default: true
},
//选择框选中后颜色
checkboxColor: {
type: String,
default: ''
},
//选择框未选中时边框颜色
borderColor: {
type: String,
default: '#ccc'
},
//是否只展示对号，无边框背景
isCheckMark: {
type: Boolean,
default: false
},
//对号颜色
checkmarkColor: {
type: String,
default: '#fff'
},
//选择框与内容是否颠倒排列
isReverse: {
type: Boolean,
default: false
},
//是否需要分割线条
splitLine: {
type: Boolean,
default: false
},
lineColor: {
type: String,
default: '#eee'
},
iconWidth: {
type: [Number, String],
default: 48
},
size: {
type: [Number, String],
default: 32
},
color: {
type: String,
default: '#181818'
},
selectedColor: {
type: String,
default: ''
},
isMask: {
type: Boolean,
default: true
},
maskBackground: {
type: String,
default: 'transparent'
},
//down/up
direction: {
type: String,
default: 'down'
}
},
watch: {
// #ifdef APP-NVUE
isShow(val) {
if (val) {
this.isNvueShow = true;
this.$nextTick(() => {
setTimeout(() => {
this._animationFn(true);
}, 50);
});
} else {
this._animationFn(false);
}
},
// #endif
options(newVal) {
this.initData(newVal)
}
},
data() {
let isNvue = false;
// #ifdef APP-NVUE
isNvue = true;
// #endif
return {
isNvue,
isNvueShow: false,
// #ifdef APP-NVUE
n_left: 0,
n_top: 20,
// #endif
itemList: [],
isShow: false
};
},
computed: {
getStyles() {
let styles = `border-radius:${this.radius}rpx;background:${this.background};`
let right = Number(this.right || 0)
let left = Number(this.left || 0)
if (right >= 0) {
styles += 'right:0;'
} else {
// #ifndef APP-NVUE
styles += `left:${left}rpx;`
// #endif
}
// #ifdef APP-NVUE
left = Math.floor(uni.upx2px(left))
styles += `left:${this.n_left+left}px;top:${this.n_top}px;height:${this.maxHeight}rpx;`
// if (this.direction === 'up') {
// styles += `transform: translate(0, -${this.maxHeight}rpx);`
// }
// #endif
return styles
},
getChkColor() {
let color = this.checkboxColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
created() {
this.initData(this.options)
},
// #ifdef APP-NVUE
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.resetCalc()
}, 100)
})
},
// #endif
methods: {
resetCalc(callback, height) {
// #ifdef APP-NVUE
if (!this.$refs['fui_dm_wrap']) return;
dom.getComponentRect(this.$refs['fui_dm_wrap'], option => {
if (option && option.result && option.size) {
let cbk = callback && typeof callback === 'function'
let height = option.size.height
if (cbk && height) {
height = height
}
let top = option.size.top
this.n_left = option.size.left;
this.n_top = this.direction === 'down' ? height + top : top
if (cbk) {
callback(true)
}
}
})
// #endif
},
// #ifdef APP-NVUE
_animationFn(type) {
if (!this.$refs['fui_ddm_list']) return;
let styles = {
opacity: type ? 1 : 0
}
if (this.direction === 'up') {
styles.transform = `translate(0, -100%)`
}
animation.transition(
this.$refs['fui_ddm_list'].ref, {
styles,
duration: 300, //ms
timingFunction: 'ease',
needLayout: false,
delay: 0 //ms
},
() => {
if (!type) {
this.isNvueShow = false;
}
}
);
},
// #endif
initData(vals) {
if (vals && vals.length > 0) {
if (typeof vals[0] !== 'object') {
vals = vals.map(item => {
return {
text: item,
checked: false
}
})
} else {
vals.map(item => {
item.checked = item.checked || false
})
}
this.itemList = vals;
}
},
itemClick(index) {
let item = this.itemList[index]
let vals = [...this.itemList]
vals.forEach((item, idx) => {
if (index === idx) {
item.checked = true
} else {
item.checked = false
}
})
this.itemList = vals;
this.$emit('click', {
index: index,
...item
})
this.close(2)
},
close(type) {
this.isShow = false;
if (type === 1) {
this.$emit('close', {})
}
},
show() {
this.isShow = true;
}
}
}
</script>
<style scoped>
.fui-dropdown__menu {
flex: 1;
position: relative;
}
.fui-ddm__scroll {
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
flex: 1;
}
.fui-dropdown__menu-list {
/* #ifndef APP-NVUE */
position: absolute;
overflow: hidden;
z-index: 992;
visibility: hidden;
transition: all 0.3s ease-in-out;
/* #endif */
box-shadow: 0 0 10rpx rgba(2, 4, 38, 0.05);
opacity: 0;
/* #ifdef APP-NVUE */
position: fixed;
flex-direction: row;
transition: opacity 0.3s ease-in-out;
/* #endif */
}
.fui-ddm__down {
transform-origin: 0 0;
/* #ifndef APP-NVUE */
bottom: 0;
transform: translate3d(0, 100%, 0) scaleY(0);
/* #endif */
}
.fui-ddm__down-show {
/* #ifndef APP-NVUE */
transform: translate3d(0, 100%, 0) scaleY(1);
visibility: visible;
opacity: 1;
/* #endif */
}
.fui-ddm__up {
transform-origin: 0 100%;
/* #ifndef APP-NVUE */
top: 0;
transform: translate3d(0, -100%, 0) scaleY(0);
/* #endif */
/* #ifdef APP-NVUE */
transform: translate(0, -100%);
/* #endif */
}
.fui-ddm__up-show {
/* #ifndef APP-NVUE */
transform: translate3d(0, -100%, 0) scaleY(1);
visibility: visible;
opacity: 1;
/* #endif */
}
.fui-ddm__mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
}
.fui-dropdown__menu-item {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
box-sizing: border-box;
transform: scale(1) translateZ(0);
/* #endif */
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
position: relative;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-ddm__flex {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
box-sizing: border-box;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.fui-ddm__item-line {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-width: 0.5px;
border-bottom-style: solid;
border-bottom-color: #EEEEEE;
/* #endif */
/* #ifndef APP-NVUE */
border-bottom-width: 0;
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-ddm__item-line::after {
content: '';
position: absolute;
border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
/* #ifdef H5 */
transform: scaleY(0.5);
/* #endif */
/* #ifndef H5 */
transform: scaleY(0.5) translateZ(0);
/* #endif */
transform-origin: 0 100%;
bottom: 0;
right: 0;
left: 32rpx;
pointer-events: none;
}
/* #endif */
.fui-dropdown__menu-item:active {
/* #ifdef APP-NVUE */
background-color: rgba(0, 0, 0, .2) !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, .2)) !important;
/* #endif */
}
.fui-ddm__reverse {
justify-content: space-between;
flex-direction: row-reverse;
}
.fui-ddm__checkbox {
font-size: 0;
color: rgba(0, 0, 0, 0);
width: 40rpx;
height: 40rpx;
border-width: 1px;
border-style: solid;
/* #ifdef APP-NVUE */
border-radius: 40rpx;
/* #endif */
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
border-radius: 50%;
vertical-align: top;
flex-shrink: 0;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* #ifndef APP-NVUE */
.fui-ddm__checkbox-color {
background: var(--fui-color-primary, #465CFF) !important;
border-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
.fui-is__checkmark {
border-width: 0 !important;
background-color: transparent !important;
}
.fui-ddm__checkmark {
width: 20rpx;
height: 40rpx;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: #FFFFFF;
border-right-style: solid;
border-right-width: 3px;
border-right-color: #FFFFFF;
/* #ifndef APP-NVUE */
box-sizing: border-box;
transform: rotate(45deg) scale(0.5) translateZ(0);
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(45deg) scale(0.5);
/* #endif */
transform-origin: 54% 48%;
}
.fui-ddm__item-text {
/* #ifndef APP-NVUE */
word-break: break-all;
/* #endif */
font-weight: normal;
}
.fui-ddm__text-pl {
padding-left: 24rpx;
}
.fui-ddm__text-pr {
padding-right: 24rpx;
}
.fui-ddm__icon-box {
overflow: hidden;
background-color: #F1F4FA;
/* #ifndef APP-NVUE */
flex-shrink: 0;
/* #endif */
}
.fui-ddm__icon-ml {
margin-left: 24rpx;
}
.fui-ddm__icon-mr {
margin-right: 24rpx;
}
</style>