Skip to content

肖康 / H5_2.0

Go to a project
Commit b1243184 by LJM
Options

css

parent 2bc7ce15
Inline Side-by-side
Showing with 659 additions and 662 deletions
App.vue
...@@ -22,5 +22,23 @@ uni-page-head { ...@@ -22,5 +22,23 @@ uni-page-head {
body { body {
background: #f5f5f5; background: #f5f5f5;
} }
::v-deep uni-modal .uni-modal {
border-radius: 10rpx;
}
::v-deep uni-modal .uni-modal__hd {
color: #323233;
}
::v-deep uni-modal .uni-modal__btn_default {
color: #323233 !important;
}
::v-deep uni-modal .uni-modal__btn_primary {
color: #1969f9 !important;
}
::v-deep uni-modal .uni-modal__btn:after {
border-left: 1px solid #ebedf0;
}
::v-deep uni-modal .uni-modal__ft:after {
border-top: 1px solid #ebedf0;
}
/* #endif */ /* #endif */
</style> </style>
assets/css/mine/news.scss
...@@ -198,9 +198,12 @@ ...@@ -198,9 +198,12 @@
} }
.ad { .ad {
padding: 28rpx 24rpx 30rpx 24rpx; padding: 28rpx 24rpx 30rpx 24rpx;
image { .box {
width: 100%; margin-bottom: 24rpx;
height: 302px; image {
width: 100%;
height: 302px;
}
} }
} }
} }
......
pages.json
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
} }
], ],
"globalStyle": { "globalStyle": {
"maxWidth": 750
}, },
"uniIdRouter": {} "uniIdRouter": {}
} }
\ No newline at end of file
pages/mine/article.vue
...@@ -20,17 +20,19 @@ ...@@ -20,17 +20,19 @@
</view> </view>
<view class="content" v-html="detail.content"></view> <view class="content" v-html="detail.content"></view>
</view> </view>
<view class="hot-article"> <view class="hot-article" v-if="detail.hot_article_list && detail.hot_article_list.length > 0">
<view class="title row verCenter"> <view class="title row verCenter">
<text class="t1">热门文章</text> <text class="t1">热门文章</text>
<text class="iconfont icon-a-juxing1"></text> <text class="iconfont icon-a-juxing1"></text>
</view> </view>
<view class="list" v-if="detail.hot_article_list && detail.hot_article_list.length > 0"> <view class="list">
<view class="box" v-for="(item, index) in detail.hot_article_list" :key="index">{{ index + 1 }}. {{ item.title }}</view> <view class="box" v-for="(item, index) in detail.hot_article_list" :key="index">{{ index + 1 }}. {{ item.title }}</view>
</view> </view>
</view> </view>
<view class="ad" v-if="detail.h5_news_detail_ad && detail.h5_news_detail_ad.length > 0"><image v-for="(item, index) in detail.h5_news_detail_ad" :key="index" :src="item.images"></image></view> <view class="ad" v-if="detail.h5_news_detail_ad && detail.h5_news_detail_ad.length > 0">
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff"><uni-popup-share></uni-popup-share></uni-popup> <a class="box" :href="item.url" v-for="(item, index) in detail.h5_news_detail_ad" :key="index"><image mode="aspectFill" :src="item.images" lazy-load="true"></image></a>
</view>
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff"><uni-popup-share @select="selectChange"></uni-popup-share></uni-popup>
</view> </view>
</template> </template>
...@@ -58,19 +60,6 @@ export default { ...@@ -58,19 +60,6 @@ export default {
onShow() { onShow() {
this.getData(); this.getData();
}, },
filters: {
formatDate(value) {
// 过滤器函数
const date = new Date(value * 1000);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hour = ('0' + date.getHours()).slice(-2);
const minute = ('0' + date.getMinutes()).slice(-2);
const second = ('0' + date.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
},
methods: { methods: {
handleChangeTitle(e) { handleChangeTitle(e) {
uni.navigateTo({ uni.navigateTo({
...@@ -80,6 +69,9 @@ export default { ...@@ -80,6 +69,9 @@ export default {
open() { open() {
this.$refs.share.open('bottom'); this.$refs.share.open('bottom');
}, },
selectChange(e) {
console.log(e);
},
toUrl(id, type, name) { toUrl(id, type, name) {
if (type == 1) { if (type == 1) {
uni.navigateTo({ uni.navigateTo({
......
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
<template> <template>
<view class="uni-popup-share"> <view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view> <view class="uni-share-title">
<view class="uni-share-content"> <text class="uni-share-title-text">{{ shareTitleText }}</text>
<view class="uni-share-content-box"> </view>
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)"> <view class="uni-share-content">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> <view class="uni-share-content-box">
<text class="uni-share-text">{{item.text}}</text> <view class="uni-share-content-item" v-for="(item, index) in bottomData" :key="index" @click.stop="select(item, index)">
</view> <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{ item.text }}</text>
</view> </view>
</view> </view>
<view class="uni-share-button-box"> </view>
<button class="uni-share-button" @click="close">{{cancelText}}</button> <view class="uni-share-button-box">
</view> <view class="uni-share-button" @click="close">{{ cancelText }}</view>
</view> </view>
</view>
</template> </template>
<script> <script>
import popup from '../uni-popup/popup.js' import popup from '../uni-popup/popup.js';
import { import { initVueI18n } from '@dcloudio/uni-i18n';
initVueI18n import messages from '../uni-popup/i18n/index.js';
} from '@dcloudio/uni-i18n' const { t } = initVueI18n(messages);
import messages from '../uni-popup/i18n/index.js' export default {
const { t } = initVueI18n(messages) name: 'UniPopupShare',
export default { mixins: [popup],
name: 'UniPopupShare', emits: ['select'],
mixins:[popup], props: {
emits:['select'], title: {
props: { type: String,
title: { default: ''
type: String, },
default: '' beforeClose: {
}, type: Boolean,
beforeClose: { default: false
type: Boolean, }
default: false },
} data() {
}, return {
data() { bottomData: [
return { {
bottomData: [{ text: '微信',
text: '微信', icon: 'https://img.ichunt.com/images/ichunt/202305/27/5bbbd6fb77046c311d544937f89284d9.png',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png', name: 'wx'
name: 'wx' },
}, {
{ text: '朋友圈',
text: '支付宝', icon: 'https://img.ichunt.com/images/ichunt/202305/27/a92b05438b5c89daff38c729cb63faba.png',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png', name: 'wx'
name: 'wx' },
}, {
{ text: '复制链接',
text: 'QQ', icon: 'https://img.ichunt.com/images/ichunt/202305/27/726bff17f48ad6866f9e6956c19cb1a8.png',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png', name: 'link'
name: 'qq' },
}, {
{ text: '二维码',
text: '新浪', icon: 'https://img.ichunt.com/images/ichunt/202305/27/8478b5b31e6bc6f84676369ff18a9556.png',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png', name: 'code'
name: 'sina' }
}, ]
// { };
// text: '百度', },
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png', created() {},
// name: 'copy' computed: {
// }, cancelText() {
// { return t('uni-popup.cancel');
// text: '其他', },
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png', shareTitleText() {
// name: 'more' return this.title || t('uni-popup.shareTitle');
// } }
] },
} methods: {
}, /**
created() {}, * 选择内容
computed: { */
cancelText() { select(item, index) {
return t("uni-popup.cancel") this.$emit('select', {
}, item,
shareTitleText() { index
return this.title || t("uni-popup.shareTitle") });
} this.close();
}, },
methods: { /**
/** * 关闭窗口
* 选择内容 */
*/ close() {
select(item, index) { if (this.beforeClose) return;
this.$emit('select', { this.popup.close();
item, }
index }
}) };
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script> </script>
<style lang="scss" > <style lang="scss">
.uni-popup-share { .uni-popup-share {
background-color: #fff; background-color: #fff;
border-top-left-radius: 11px; border-top-left-radius: 10rpx;
border-top-right-radius: 11px; border-top-right-radius: 10rpx;
} }
.uni-share-title { .uni-share-title {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 40px; height: 40px;
} }
.uni-share-title-text { .uni-share-title-text {
font-size: 14px; font-size: 28rpx;
color: #666; color: #292b33;
} font-weight: 600;
.uni-share-content { }
/* #ifndef APP-NVUE */ .uni-share-content {
display: flex; /* #ifndef APP-NVUE */
/* #endif */ display: flex;
flex-direction: row; /* #endif */
justify-content: center; flex-direction: row;
padding-top: 10px; justify-content: center;
} padding-top: 10px;
}
.uni-share-content-box { .uni-share-content-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 360px; width: 360px;
} }
.uni-share-content-item { .uni-share-content-item {
width: 90px; width: 90px;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 10px 0; padding: 10px 0;
align-items: center; align-items: center;
} }
.uni-share-content-item:active { .uni-share-content-item:active {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.uni-share-image { .uni-share-image {
width: 30px; width: 96rpx;
height: 30px; height: 96rpx;
} }
.uni-share-text { .uni-share-text {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
color: #3B4144; color: #3b4144;
} }
.uni-share-button-box { .uni-share-button-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
padding: 10px 15px; padding: 10px 15px;
} border-top: 16rpx solid #f7f8fa;
}
.uni-share-button { .uni-share-button {
flex: 1; flex: 1;
border-radius: 50px; border-radius: 50px;
color: #666; color: #484b59;
font-size: 16px; font-size: 16px;
} text-align: center;
}
.uni-share-button::after { .uni-share-button::after {
border-radius: 50px; border-radius: 50px;
} }
</style> </style>
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
{ {
"uni-popup.cancel": "取消", "uni-popup.cancel": "取消",
"uni-popup.ok": "确定", "uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入", "uni-popup.placeholder": "请输入",
"uni-popup.title": "提示", "uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到" "uni-popup.shareTitle": "立即分享给好友"
} }
\ No newline at end of file
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
{ {
"uni-popup.cancel": "取消", "uni-popup.cancel": "取消",
"uni-popup.ok": "確定", "uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入", "uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示", "uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到" "uni-popup.shareTitle": "立即分享给好友"
} }
\ No newline at end of file
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
<template> <template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"> <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart"> <view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" <uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
:duration="duration" :show="showTrans" @click="onTap" /> <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" <view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view>
:show="showTrans" @click="onTap"> </uni-transition>
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"> </view>
<slot /> <!-- #ifdef H5 -->
</view> <keypress v-if="maskShow" @esc="onTap" />
</uni-transition> <!-- #endif -->
</view> </view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template> </template>
<script> <script>
// #ifdef H5 // #ifdef H5
import keypress from './keypress.js' import keypress from './keypress.js';
// #endif // #endif
/** /**
* PopUp 弹出层 * PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题 * @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出 * @value top 顶部弹出
* @value center 中间弹出 * @value center 中间弹出
* @value bottom 底部弹出 * @value bottom 底部弹出
* @value left 左侧弹出 * @value left 左侧弹出
* @value right 右侧弹出 * @value right 右侧弹出
* @value message 消息提示 * @value message 消息提示
* @value dialog 对话框 * @value dialog 对话框
* @value share 底部分享示例 * @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画 * @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃) * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色 * @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色 * @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区 * @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false} * @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发 * @event {Function} maskClick 点击遮罩触发
*/ */
export default { export default {
name: 'uniPopup', name: 'uniPopup',
components: { components: {
// #ifdef H5 // #ifdef H5
keypress keypress
// #endif // #endif
}, },
emits: ['change', 'maskClick'], emits: ['change', 'maskClick'],
props: { props: {
// 开启动画 // 开启动画
animation: { animation: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层 // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框 // message: 消息提示 ; dialog : 对话框
type: { type: {
type: String, type: String,
default: 'center' default: 'center'
}, },
// maskClick // maskClick
isMaskClick: { isMaskClick: {
type: Boolean, type: Boolean,
default: null default: null
}, },
// TODO 2 个版本后废弃属性 ，使用 isMaskClick // TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: { maskClick: {
type: Boolean, type: Boolean,
default: null default: null
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: 'none' default: 'none'
}, },
safeArea: { safeArea: {
type: Boolean, type: Boolean,
default: true default: true
}, },
maskBackgroundColor: { maskBackgroundColor: {
type: String, type: String,
default: 'rgba(0, 0, 0, 0.4)' default: 'rgba(0, 0, 0, 0.4)'
}, }
}, },
watch: { watch: {
/** /**
* 监听type类型 * 监听type类型
*/ */
type: { type: {
handler: function(type) { handler: function(type) {
if (!this.config[type]) return if (!this.config[type]) return;
this[this.config[type]](true) this[this.config[type]](true);
}, },
immediate: true immediate: true
}, },
isDesktop: { isDesktop: {
handler: function(newVal) { handler: function(newVal) {
if (!this.config[newVal]) return if (!this.config[newVal]) return;
this[this.config[this.type]](true) this[this.config[this.type]](true);
}, },
immediate: true immediate: true
}, },
/** /**
* 监听遮罩是否可点击 * 监听遮罩是否可点击
* @param {Object} val * @param {Object} val
*/ */
maskClick: { maskClick: {
handler: function(val) { handler: function(val) {
this.mkclick = val this.mkclick = val;
}, },
immediate: true immediate: true
}, },
isMaskClick: { isMaskClick: {
handler: function(val) { handler: function(val) {
this.mkclick = val this.mkclick = val;
}, },
immediate: true immediate: true
}, },
// H5 下禁止底部滚动 // H5 下禁止底部滚动
showPopup(show) { showPopup(show) {
// #ifdef H5 // #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题 // fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible' document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible';
// #endif // #endif
} }
}, },
data() { data() {
return { return {
duration: 300, duration: 300,
ani: [], ani: [],
showPopup: false, showPopup: false,
showTrans: false, showTrans: false,
popupWidth: 0, popupWidth: 0,
popupHeight: 0, popupHeight: 0,
config: { config: {
top: 'top', top: 'top',
bottom: 'bottom', bottom: 'bottom',
center: 'center', center: 'center',
left: 'left', left: 'left',
right: 'right', right: 'right',
message: 'top', message: 'top',
dialog: 'center', dialog: 'center',
share: 'bottom' share: 'bottom'
}, },
maskClass: { maskClass: {
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)' backgroundColor: 'rgba(0, 0, 0, 0.4)'
}, },
transClass: { transClass: {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
right: 0 right: 0
}, },
maskShow: true, maskShow: true,
mkclick: true, mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top' popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
} };
}, },
computed: { computed: {
isDesktop() { isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500 return this.popupWidth >= 500 && this.popupHeight >= 500;
}, },
bg() { bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') { if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent' return 'transparent';
} }
return this.backgroundColor return this.backgroundColor;
} }
}, },
mounted() { mounted() {
const fixSize = () => { const fixSize = () => {
const { const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync();
windowWidth, this.popupWidth = windowWidth;
windowHeight, this.popupHeight = windowHeight + (windowTop || 0);
windowTop, // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
safeArea, if (safeArea && this.safeArea) {
screenHeight, // #ifdef MP-WEIXIN
safeAreaInsets this.safeAreaInsets = screenHeight - safeArea.bottom;
} = uni.getSystemInfoSync() // #endif
this.popupWidth = windowWidth // #ifndef MP-WEIXIN
this.popupHeight = windowHeight + (windowTop || 0) this.safeAreaInsets = safeAreaInsets.bottom;
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复 // #endif
if (safeArea && this.safeArea) { } else {
// #ifdef MP-WEIXIN this.safeAreaInsets = 0;
this.safeAreaInsets = screenHeight - safeArea.bottom }
// #endif };
// #ifndef MP-WEIXIN fixSize();
this.safeAreaInsets = safeAreaInsets.bottom // #ifdef H5
// #endif // window.addEventListener('resize', fixSize)
} else { // this.$once('hook:beforeDestroy', () => {
this.safeAreaInsets = 0 // window.removeEventListener('resize', fixSize)
} // })
} // #endif
fixSize() },
// #ifdef H5 // #ifndef VUE3
// window.addEventListener('resize', fixSize) // TODO vue2
// this.$once('hook:beforeDestroy', () => { destroyed() {
// window.removeEventListener('resize', fixSize) this.setH5Visible();
// }) },
// #endif // #endif
}, // #ifdef VUE3
// #ifndef VUE3 // TODO vue3
// TODO vue2 unmounted() {
destroyed() { this.setH5Visible();
this.setH5Visible() },
}, // #endif
// #endif created() {
// #ifdef VUE3 // this.mkclick = this.isMaskClick || this.maskClick
// TODO vue3 if (this.isMaskClick === null && this.maskClick === null) {
unmounted() { this.mkclick = true;
this.setH5Visible() } else {
}, this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
// #endif }
created() { if (this.animation) {
// this.mkclick = this.isMaskClick || this.maskClick this.duration = 300;
if (this.isMaskClick === null && this.maskClick === null) { } else {
this.mkclick = true this.duration = 0;
} else { }
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick // TODO 处理 message 组件生命周期异常的问题
} this.messageChild = null;
if (this.animation) { // TODO 解决头条冒泡的问题
this.duration = 300 this.clearPropagation = false;
} else { this.maskClass.backgroundColor = this.maskBackgroundColor;
this.duration = 0 },
} methods: {
// TODO 处理 message 组件生命周期异常的问题 setH5Visible() {
this.messageChild = null // #ifdef H5
// TODO 解决头条冒泡的问题 // fix by mehaotian 处理 h5 滚动穿透的问题
this.clearPropagation = false document.getElementsByTagName('body')[0].style.overflow = 'visible';
this.maskClass.backgroundColor = this.maskBackgroundColor // #endif
}, },
methods: { /**
setH5Visible() { * 公用方法，不显示遮罩层
// #ifdef H5 */
// fix by mehaotian 处理 h5 滚动穿透的问题 closeMask() {
document.getElementsByTagName('body')[0].style.overflow = 'visible' this.maskShow = false;
// #endif },
}, /**
/** * 公用方法，遮罩层禁止点击
* 公用方法，不显示遮罩层 */
*/ disableMask() {
closeMask() { this.mkclick = false;
this.maskShow = false },
}, // TODO nvue 取消冒泡
/** clear(e) {
* 公用方法，遮罩层禁止点击 // #ifndef APP-NVUE
*/ e.stopPropagation();
disableMask() { // #endif
this.mkclick = false this.clearPropagation = true;
}, },
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) { open(direction) {
// fix by mehaotian 处理快速打开关闭的情况 // fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) { if (this.showPopup) {
return return;
} }
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'];
if (!(direction && innerType.indexOf(direction) !== -1)) { if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type direction = this.type;
} }
if (!this.config[direction]) { if (!this.config[direction]) {
console.error('缺少类型：', direction) console.error('缺少类型：', direction);
return return;
} }
this[this.config[direction]]() this[this.config[direction]]();
this.$emit('change', { this.$emit('change', {
show: true, show: true,
type: direction type: direction
}) });
}, },
close(type) { close(type) {
this.showTrans = false this.showTrans = false;
this.$emit('change', { this.$emit('change', {
show: false, show: false,
type: this.type type: this.type
}) });
clearTimeout(this.timer) clearTimeout(this.timer);
// // 自定义关闭事件 // // 自定义关闭事件
// this.customOpen && this.customClose() // this.customOpen && this.customClose()
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.showPopup = false this.showPopup = false;
}, 300) }, 300);
}, },
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容 // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() { touchstart() {
this.clearPropagation = false this.clearPropagation = false;
}, },
onTap() { onTap() {
if (this.clearPropagation) { if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue // fix by mehaotian 兼容 nvue
this.clearPropagation = false this.clearPropagation = false;
return return;
} }
this.$emit('maskClick') this.$emit('maskClick');
if (!this.mkclick) return if (!this.mkclick) return;
this.close() this.close();
}, },
/** /**
* 顶部弹出样式处理 * 顶部弹出样式处理
*/ */
top(type) { top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top' this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
this.ani = ['slide-top'] this.ani = ['slide-top'];
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
right: 0, right: 0,
backgroundColor: this.bg backgroundColor: this.bg
} };
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
if (type) return if (type) return;
this.showPopup = true this.showPopup = true;
this.showTrans = true this.showTrans = true;
this.$nextTick(() => { this.$nextTick(() => {
if (this.messageChild && this.type === 'message') { if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose() this.messageChild.timerClose();
} }
}) });
}, },
/** /**
* 底部弹出样式处理 * 底部弹出样式处理
*/ */
bottom(type) { bottom(type) {
this.popupstyle = 'bottom' this.popupstyle = 'bottom';
this.ani = ['slide-bottom'] this.ani = ['slide-bottom'];
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
paddingBottom: this.safeAreaInsets + 'px', paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg backgroundColor: this.bg
} };
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
if (type) return if (type) return;
this.showPopup = true this.showPopup = true;
this.showTrans = true this.showTrans = true;
}, },
/** /**
* 中间弹出样式处理 * 中间弹出样式处理
*/ */
center(type) { center(type) {
this.popupstyle = 'center' this.popupstyle = 'center';
this.ani = ['zoom-out', 'fade'] this.ani = ['zoom-out', 'fade'];
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
/* #endif */ /* #endif */
bottom: 0, bottom: 0,
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center'
} };
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
if (type) return if (type) return;
this.showPopup = true this.showPopup = true;
this.showTrans = true this.showTrans = true;
}, },
left(type) { left(type) {
this.popupstyle = 'left' this.popupstyle = 'left';
this.ani = ['slide-left'] this.ani = ['slide-left'];
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
bottom: 0, bottom: 0,
top: 0, top: 0,
backgroundColor: this.bg, backgroundColor: this.bg,
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: 'flex', display: 'flex',
flexDirection: 'column' flexDirection: 'column'
/* #endif */ /* #endif */
} };
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
if (type) return if (type) return;
this.showPopup = true this.showPopup = true;
this.showTrans = true this.showTrans = true;
}, },
right(type) { right(type) {
this.popupstyle = 'right' this.popupstyle = 'right';
this.ani = ['slide-right'] this.ani = ['slide-right'];
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,
right: 0, right: 0,
top: 0, top: 0,
backgroundColor: this.bg, backgroundColor: this.bg,
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: 'flex', display: 'flex',
flexDirection: 'column' flexDirection: 'column'
/* #endif */ /* #endif */
} };
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
if (type) return if (type) return;
this.showPopup = true this.showPopup = true;
this.showTrans = true this.showTrans = true;
} }
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.uni-popup { .uni-popup {
position: fixed; position: fixed;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 99; z-index: 9999;
/* #endif */ /* #endif */
&.top, &.top,
&.left, &.left,
&.right { &.right {
/* #ifdef H5 */ /* #ifdef H5 */
top: var(--window-top); top: var(--window-top);
/* #endif */ /* #endif */
/* #ifndef H5 */ /* #ifndef H5 */
top: 0; top: 0;
/* #endif */ /* #endif */
} }
.uni-popup__wrapper { .uni-popup__wrapper {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: relative; position: relative;
/* iphonex 等安全区设置，底部安全区适配 */ /* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom); // padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom); // padding-bottom: env(safe-area-inset-bottom);
/* #endif */ /* #endif */
&.left, &.left,
&.right { &.right {
/* #ifdef H5 */ /* #ifdef H5 */
padding-top: var(--window-top); padding-top: var(--window-top);
/* #endif */ /* #endif */
/* #ifndef H5 */ /* #ifndef H5 */
padding-top: 0; padding-top: 0;
/* #endif */ /* #endif */
flex: 1; flex: 1;
} }
} }
} }
.fixforpc-z-index { .fixforpc-z-index {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 999; z-index: 999;
/* #endif */ /* #endif */
} }
.fixforpc-top { .fixforpc-top {
top: 0; top: 0;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment