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