You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
571 lines
12 KiB
571 lines
12 KiB
<!--本文件由FirstUI授权予内蒙古晟誉网络科技有限责任公司（手机号： 1 5 14 82281 0 8，身份证尾号：1R6T39）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
|
<template>
|
|
<view @touchend="stop">
|
|
<view class="fui-share__sheet-mask" :style="getStyle" :class="{'fui-ss__mask-show':show}" ref="fui_ssm_ani"
|
|
@tap.stop="maskClick">
|
|
</view>
|
|
<view class="fui-share__sheet-wrap"
|
|
:class="{'fui-share__sheet-radius':radius,'fui-share__sheet-hidden':!show,'fui-share__sheet-show':show}"
|
|
:style="{zIndex:zIndex,background:background}" ref="fui_ss_ani">
|
|
<slot>
|
|
<text class="fui-share__sheet-title"
|
|
:style="{fontSize:size+'rpx',color:color}">{{!title || title==='true' || title===true?'':title}}</text>
|
|
</slot>
|
|
<view class="fui-share__sheet-box" v-for="(item,index) in items" :key="item.id">
|
|
<scroll-view :show-scrollbar="false" scroll-x class="fui-share__sheet-scroll">
|
|
<view class="fui-share__sheet-list" :class="{'fui-share__sheet-full':isFull}"
|
|
:style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}">
|
|
<view class="fui-share__sheet-item" @tap.stop="handleClick($event,index,idx)"
|
|
v-for="(obj,idx) in item.data" :key="idx">
|
|
<view class="fui-share__sheet-icon"
|
|
:style="{background:obj.background || itemBackground,width:width+'rpx',height:width+'rpx'}">
|
|
<fui-icon :name="obj.name" :size="obj.size || 120" :color="obj.color || '#181818'"
|
|
v-if="obj.name"></fui-icon>
|
|
<image class="fui-share__sheet-img"
|
|
:style="{width:(obj.width || 96)+'rpx',height:(obj.width || 96)+'rpx'}"
|
|
:src="obj.src" mode="widthFix" v-if="obj.src"></image>
|
|
</view>
|
|
<text class="fui-share__sheet-text"
|
|
:style="{fontSize:(obj.textSize || 24) + 'rpx',color:obj.textColor || '#7f7f7f'}">{{obj.text}}</text>
|
|
<button class="fui-sharesheet__btn" :open-type="obj.openType" v-if="obj.openType"></button>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="fui-share__sheet-button" :class="{'fui-ss__safe-weex':iphoneX && safeArea }"
|
|
:style="{background:btnBackground}">
|
|
<text class="fui-share__sheet-btn" :class="{'fui-ss__safe-weex':iphoneX && safeArea}"
|
|
:style="{fontSize:btnSize+'rpx',color:btnColor}" @tap.stop="cancel">{{btnText}}</text>
|
|
<view class="fui-ss__btn-line" :style="{background:lineColor}"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//非easycom模式取消注释引入字体组件，按实际路径进行调整
|
|
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
|
// #ifdef APP-NVUE
|
|
const animation = uni.requireNativePlugin('animation');
|
|
// #endif
|
|
export default {
|
|
name: "fui-share-sheet",
|
|
emits: ['click', 'cancel'],
|
|
// components:{
|
|
// fuiIcon
|
|
// },
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
itemList: {
|
|
type: Array,
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
width: {
|
|
type: [Number, String],
|
|
default: 108
|
|
},
|
|
itemBackground: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
radius: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
background: {
|
|
type: String,
|
|
default: '#EAEAEA'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '分享到'
|
|
},
|
|
size: {
|
|
type: [Number, String],
|
|
default: 24
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '#7f7f7f'
|
|
},
|
|
btnText: {
|
|
type: String,
|
|
default: '取消'
|
|
},
|
|
btnSize: {
|
|
type: [Number, String],
|
|
default: 32
|
|
},
|
|
btnColor: {
|
|
type: String,
|
|
default: '#181818'
|
|
},
|
|
btnBackground: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
lineColor: {
|
|
type: String,
|
|
default: '#ddd'
|
|
},
|
|
maskBackground: {
|
|
type: String,
|
|
default: 'rgba(0,0,0,.6)'
|
|
},
|
|
maskClosable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
zIndex: {
|
|
type: [Number, String],
|
|
default: 1001
|
|
},
|
|
isFull: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
padding: {
|
|
type: [Number, String],
|
|
default: 20
|
|
},
|
|
//是否适配底部安全区
|
|
safeArea: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
items: [],
|
|
iphoneX: false
|
|
};
|
|
},
|
|
created() {
|
|
// #ifdef APP-NVUE || MP-TOUTIAO
|
|
this.iphoneX = this.isPhoneX();
|
|
// #endif
|
|
this.initData(this.itemList)
|
|
},
|
|
// #ifdef APP-NVUE
|
|
mounted() {
|
|
if (!this.$refs['fui_ssm_ani'] || !this.$refs['fui_ss_ani']) return;
|
|
this._transtion('fui_ssm_ani', {
|
|
transform: 'translateX(-100%)'
|
|
}, 0)
|
|
this._transtion('fui_ss_ani', {
|
|
transform: 'translateY(100%)'
|
|
}, 0)
|
|
},
|
|
// #endif
|
|
computed: {
|
|
getStyle() {
|
|
return `background:${this.maskBackground};z-index:${Number(this.zIndex-10)};`
|
|
}
|
|
},
|
|
watch: {
|
|
// #ifdef APP-NVUE
|
|
show: {
|
|
handler(newVal) {
|
|
if (newVal) {
|
|
this.open();
|
|
} else {
|
|
this.close();
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
// #endif
|
|
itemList(val) {
|
|
this.initData(val)
|
|
}
|
|
},
|
|
methods: {
|
|
initData(vals) {
|
|
if (vals && vals.length > 0) {
|
|
if (Array.isArray(vals[0])) {
|
|
vals = vals.map((item, index) => {
|
|
return {
|
|
id: 'fui_s0' + index,
|
|
data: item
|
|
}
|
|
})
|
|
this.items = vals
|
|
} else {
|
|
this.items = [{
|
|
id: 'fui_s01',
|
|
data: vals
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
// #ifdef APP-NVUE
|
|
open() {
|
|
setTimeout(() => {
|
|
this._animation(true);
|
|
}, 20);
|
|
},
|
|
close() {
|
|
this._animation(false);
|
|
},
|
|
_transtion(ref, styles, duration, callback) {
|
|
animation.transition(
|
|
this.$refs[ref].ref, {
|
|
styles: styles,
|
|
duration: duration,
|
|
needLayout: false,
|
|
delay: 0 //ms
|
|
}, () => {
|
|
callback && callback()
|
|
});
|
|
},
|
|
_animation(type) {
|
|
if (!this.$refs['fui_ssm_ani'] || !this.$refs['fui_ss_ani']) return;
|
|
if (type) {
|
|
this._transtion('fui_ssm_ani', {
|
|
transform: 'translateX(0)'
|
|
}, 0, () => {
|
|
this._transtion('fui_ssm_ani', {
|
|
opacity: 1
|
|
}, 250)
|
|
})
|
|
} else {
|
|
this._transtion('fui_ssm_ani', {
|
|
opacity: 0
|
|
}, 250, () => {
|
|
this._transtion('fui_ssm_ani', {
|
|
transform: 'translateX(-100%)'
|
|
}, 0)
|
|
})
|
|
}
|
|
this._transtion('fui_ss_ani', {
|
|
transform: `translateY(${type ? '0' : '100%'})`
|
|
}, 250)
|
|
},
|
|
// #endif
|
|
// #ifdef APP-NVUE || MP-TOUTIAO
|
|
isPhoneX() {
|
|
if (!this.safeArea) return false;
|
|
//34px
|
|
const res = uni.getSystemInfoSync();
|
|
let iphonex = false;
|
|
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
|
|
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
|
|
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
|
|
'iphone14pro', 'iphone14promax'
|
|
]
|
|
const model = res.model.replace(/\s/g, "").toLowerCase()
|
|
const newModel = model.split('<')[0]
|
|
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
|
|
.bottom > 0)) {
|
|
iphonex = true;
|
|
}
|
|
return iphonex;
|
|
},
|
|
// #endif
|
|
maskClick(e) {
|
|
if (!this.maskClosable) return;
|
|
this.cancel(e)
|
|
},
|
|
cancel(e) {
|
|
// #ifdef APP-NVUE
|
|
e.stopPropagation();
|
|
// #endif
|
|
this.$emit('cancel', {})
|
|
},
|
|
handleClick(e, index, idx) {
|
|
// #ifdef APP-NVUE
|
|
e.stopPropagation();
|
|
// #endif
|
|
if (Array.isArray(this.itemList[0])) {
|
|
this.$emit('click', {
|
|
index: index,
|
|
subIndex: idx,
|
|
item: this.itemList[index][idx]
|
|
})
|
|
|
|
} else {
|
|
this.$emit('click', {
|
|
index: idx,
|
|
item: this.itemList[idx]
|
|
})
|
|
}
|
|
},
|
|
stop(e) {
|
|
// #ifdef APP-NVUE
|
|
e.stopPropagation();
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fui-share__sheet-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* #ifndef APP-NVUE */
|
|
transition: all 0.25s ease-in-out;
|
|
visibility: hidden;
|
|
/* #endif */
|
|
/* #ifdef APP-NVUE */
|
|
transition-property: opacity;
|
|
transition-timing-function: ease-in-out;
|
|
transition-duration: .25s;
|
|
/* #endif */
|
|
opacity: 0;
|
|
}
|
|
|
|
.fui-ss__mask-show {
|
|
/* #ifndef APP-NVUE */
|
|
visibility: visible;
|
|
/* #endif */
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.fui-share__sheet-wrap {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
visibility: hidden;
|
|
min-height: 100rpx;
|
|
/* #endif */
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* #ifndef APP-NVUE */
|
|
transform: translate3d(0, 100%, 0);
|
|
transition: all 0.25s ease-in-out;
|
|
/* #endif */
|
|
|
|
/* #ifdef APP-NVUE */
|
|
/* transition-property: opacity;
|
|
transition-duration: .25s; */
|
|
transform: translateY(100%);
|
|
/* #endif */
|
|
transform-origin: center center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* #ifdef APP-NVUE */
|
|
.fui-share__sheet-hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.fui-share__sheet-radius {
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
/* #ifndef APP-NVUE */
|
|
overflow: hidden;
|
|
/* #endif */
|
|
}
|
|
|
|
|
|
.fui-share__sheet-show {
|
|
/* #ifndef APP-NVUE */
|
|
transform: translate3d(0, 0, 0);
|
|
visibility: visible;
|
|
/* #endif */
|
|
|
|
/* #ifdef APP-NVUE */
|
|
opacity: 1 !important;
|
|
/* #endif */
|
|
}
|
|
|
|
|
|
.fui-share__sheet-title {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
display: flex;
|
|
/* #endif */
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #7F7F7F;
|
|
padding: 24rpx 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.fui-share__sheet-box {
|
|
/* #ifdef APP-NVUE */
|
|
width: 100%;
|
|
/* #endif */
|
|
/* #ifdef APP-NVUE */
|
|
width: 750rpx;
|
|
/* #endif */
|
|
padding: 24rpx 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.fui-share__sheet-scroll {
|
|
/* #ifdef APP-NVUE */
|
|
width: 750rpx;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
}
|
|
|
|
.fui-share__sheet-list {
|
|
/* #ifndef APP-NVUE */
|
|
white-space: nowrap;
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.fui-share__sheet-full {
|
|
/* #ifndef APP-NVUE */
|
|
min-width: 100%;
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.fui-share__sheet-item {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 16rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.fui-share__sheet-item:active {
|
|
opacity: .5;
|
|
}
|
|
|
|
.fui-sharesheet__btn {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-width: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* #ifndef APP-NVUE */
|
|
.fui-sharesheet__btn::after {
|
|
border-width: 0;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.fui-share__sheet-icon {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
transform: translateZ(0);
|
|
/* #endif */
|
|
border-radius: 24rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fui-share__sheet-img {
|
|
/* #ifndef APP-NVUE */
|
|
display: block;
|
|
/* #endif */
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
}
|
|
|
|
.fui-share__sheet-text {
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
padding-top: 16rpx;
|
|
}
|
|
|
|
.fui-share__sheet-button {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
display: flex;
|
|
/* #endif */
|
|
|
|
/* #ifndef APP-NVUE || MP-TOUTIAO */
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
/* #endif */
|
|
flex: 1;
|
|
height: 96rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
margin-top: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.fui-ss__btn-line {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
/* #ifdef APP-NVUE */
|
|
height: 0.5px;
|
|
z-index: -1;
|
|
/* #endif */
|
|
|
|
/* #ifndef APP-NVUE */
|
|
height: 1px;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
transform-origin: 0 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
/* #endif */
|
|
}
|
|
|
|
.fui-share__sheet-btn {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
z-index: 2;
|
|
/* #endif */
|
|
|
|
/* #ifndef APP-NVUE || MP-TOUTIAO */
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
/* #endif */
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
line-height: 96rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* #ifdef H5 */
|
|
cursor: pointer;
|
|
/* #endif */
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* #ifdef APP-NVUE || MP-TOUTIAO */
|
|
.fui-ss__safe-weex {
|
|
padding-bottom: 34px;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.fui-share__sheet-btn:active {
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
</style>
|