增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
225
tuniao-ui/components/tn-landscape/tn-landscape.vue
Normal file
225
tuniao-ui/components/tn-landscape/tn-landscape.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<view class="tn-landscape-class tn-landscape">
|
||||
<view v-if="showValue" class="tn-landscape__container" :style="[containerStyle]">
|
||||
<slot></slot>
|
||||
<view
|
||||
v-if="closeBtn"
|
||||
class="tn-landscape__icon tn-icon-close-fill"
|
||||
:class="[{
|
||||
'tn-landscape__icon--left-top': closePosition === 'leftTop',
|
||||
'tn-landscape__icon--right-top': closePosition === 'rightTop',
|
||||
'tn-landscape__icon--bottom': closePosition === 'bottom'
|
||||
}]"
|
||||
:style="[closeBtnStyle]"
|
||||
@tap="close"
|
||||
></view>
|
||||
</view>
|
||||
<view
|
||||
v-if="mask"
|
||||
class="tn-landscape__mask"
|
||||
:class="[{'tn-landscape__mask--show': showValue}]"
|
||||
:style="[maskStyle]"
|
||||
@tap="closeMask"
|
||||
></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tn-landscape',
|
||||
props: {
|
||||
// 显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 显示关闭图标
|
||||
closeBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 关闭图标颜色
|
||||
closeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 关闭图标大小，单位rpx
|
||||
closeSize: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 关闭图标位置
|
||||
// leftTop -> 左上角 rightTop -> 右上角 bottom -> 底部
|
||||
closePosition: {
|
||||
type: String,
|
||||
default: 'rightTop'
|
||||
},
|
||||
// 关闭图标top值，单位rpx
|
||||
// 当关闭图标在leftTop或者rightTop时生效
|
||||
closeTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 关闭图标right值，单位rpx
|
||||
// 当关闭图标在RightTop时生效
|
||||
closeRight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 关闭图标bottom值，单位rpx
|
||||
// 当关闭图标在bottom时生效
|
||||
closeBottom: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 关闭图标left值，单位rpx
|
||||
// 当关闭图标在leftTop时生效
|
||||
closeLeft: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 显示遮罩
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 点击遮罩可以关闭
|
||||
maskCloseable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// zIndex
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerStyle() {
|
||||
let style = {}
|
||||
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.landsacpe
|
||||
return style
|
||||
},
|
||||
closeBtnStyle() {
|
||||
let style = {}
|
||||
if (this.closePosition === 'leftTop') {
|
||||
if (this.closeTop) {
|
||||
style.top = this.closeTop + 'rpx'
|
||||
}
|
||||
if (this.closeLeft) {
|
||||
style.left = this.closeLeft + 'rpx'
|
||||
}
|
||||
} else if (this.closePosition === 'rightTop') {
|
||||
if (this.closeTop) {
|
||||
style.top = this.closeTop + 'rpx'
|
||||
}
|
||||
if (this.closeRight) {
|
||||
style.right = this.closeRight + 'rpx'
|
||||
}
|
||||
} else if (this.closePosition === 'bottom') {
|
||||
if (this.closeBottom) {
|
||||
style.bottom = this.closeBottom + 'rpx'
|
||||
}
|
||||
}
|
||||
if (this.closeSize) {
|
||||
style.fontSize = this.closeSize + 'rpx'
|
||||
}
|
||||
if (this.closeColor) {
|
||||
style.color = this.closeColor
|
||||
}
|
||||
return style
|
||||
},
|
||||
maskStyle() {
|
||||
let style = {}
|
||||
style.zIndex = this.zIndex ? this.zIndex - 1 : this.$t.zIndex.landsacpe - 1
|
||||
return style
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(val) {
|
||||
this.showValue = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showValue: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭压屏窗
|
||||
close() {
|
||||
this.showValue = false
|
||||
this.$emit('close')
|
||||
},
|
||||
// 点击遮罩关闭
|
||||
closeMask() {
|
||||
if (!this.maskCloseable) return
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-landscape {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&__container {
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&--left-top {
|
||||
top: -40rpx;
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
&--right-top {
|
||||
top: -40rpx;
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
left: 50%;
|
||||
bottom: -40rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $tn-mask-bg-color;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: scale3d(1, 1, 0);
|
||||
transition: all 0.25s ease-in;
|
||||
|
||||
&--show {
|
||||
opacity: 1 !important;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user