ucToast 支持position:top/bottom
This commit is contained in:
parent
7bec07d04b
commit
a2d4c4b9af
@ -9,11 +9,21 @@ based on
|
||||
*duration: 消失时间（Number），默认2000
|
||||
*distance: 弹窗间距，默认128，可设为0代表重叠
|
||||
*clickable: 是否点击消失（Boolean），默认false
|
||||
*position: top|bottom, 出现在屏幕顶部或底部，默认为 top
|
||||
-->
|
||||
<template>
|
||||
<view class="popup_list">
|
||||
<view v-for="(toast, index) of popup_list" :id="toast.uuid" :key="toast.uuid">
|
||||
<view class="mpopup" :style="{ background: toast.color ,top:index*toast.distance+50+'px'}" :class="[toast.animator,'mpopup-'+toast.type]" @click="close(toast.uuid,index)">
|
||||
<view
|
||||
class="mpopup"
|
||||
:style="{
|
||||
background: toast.color,
|
||||
top: toast.position === 'top' ? index * toast.distance + 50 + 'px' : 'initial',
|
||||
bottom: toast.position === 'bottom' ? index * toast.distance + 50 + 'px' : 'initial',
|
||||
}"
|
||||
:class="[toast.animator, 'mpopup-' + toast.type]"
|
||||
@click="close(toast.uuid, index)"
|
||||
>
|
||||
<view class="icon"></view>
|
||||
<text class="text">{{ toast.content }}</text>
|
||||
</view>
|
||||
@ -28,17 +38,13 @@ based on
|
||||
popup_list: [], //弹窗数组
|
||||
}
|
||||
},
|
||||
props:{
|
||||
},
|
||||
props: {},
|
||||
methods: {
|
||||
open: function (toast) {
|
||||
//生成uuid
|
||||
let uuid=this.guid()
|
||||
toast.uuid=uuid
|
||||
//添加动画
|
||||
toast.animator='fade_Down'
|
||||
|
||||
toast.clickable = toast.clickable || false //判断是否可点击消失/可控制消失
|
||||
toast.uuid = this.guid() //生成uuid
|
||||
toast.animator = 'fade_Down' //添加动画
|
||||
toast.clickable = toast.clickable || false //判断是否可点击消失
|
||||
toast.position = toast.position || 'top'
|
||||
toast.duration = toast.duration || 1500
|
||||
toast.distance = toast.distance || 128 // 弹窗间距
|
||||
toast.type = toast.type || 'info'
|
||||
@ -48,15 +54,15 @@ based on
|
||||
|
||||
if (!toast.clickable) {
|
||||
this.disappear(toast.uuid, toast.duration, toast.complete)
|
||||
}else{ //可点击消失
|
||||
} else {
|
||||
//可点击消失
|
||||
this.$emit('uuidCallback', toast.uuid)
|
||||
}
|
||||
|
||||
},
|
||||
//自动消失
|
||||
disappear: function (uuid, duration, complete) {
|
||||
//退出动画之后，短暂延迟后移除本元素
|
||||
this.fade_out_animator(uuid,duration).then(res=>{
|
||||
this.fade_out_animator(uuid, duration).then((res) => {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < this.popup_list.length; i++) {
|
||||
if (this.popup_list[i].uuid == res) {
|
||||
@ -65,7 +71,7 @@ based on
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
if (typeof(complete)==='function'){
|
||||
if (typeof complete === 'function') {
|
||||
complete()
|
||||
}
|
||||
}, 250)
|
||||
@ -73,8 +79,10 @@ based on
|
||||
},
|
||||
fade_out_animator: function (uuid, duration) {
|
||||
//duration秒后退出
|
||||
if(!duration||typeof(duration)!='number'){duration=1500}
|
||||
return new Promise(res=>{
|
||||
if (!duration || typeof duration != 'number') {
|
||||
duration = 1500
|
||||
}
|
||||
return new Promise((res) => {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < this.popup_list.length; i++) {
|
||||
if (this.popup_list[i].uuid == uuid) {
|
||||
@ -89,7 +97,9 @@ based on
|
||||
//可控制关闭的弹出框
|
||||
close: function (uuid, ind) {
|
||||
if (ind) {
|
||||
if(!this.popup_list[ind].clickable){return}
|
||||
if (!this.popup_list[ind].clickable) {
|
||||
return
|
||||
}
|
||||
}
|
||||
this.remove_element(uuid).then((res) => {
|
||||
setTimeout(() => {
|
||||
@ -106,7 +116,7 @@ based on
|
||||
},
|
||||
//控制移除元素
|
||||
remove_element: function (uuid) {
|
||||
return new Promise(res=>{
|
||||
return new Promise((res) => {
|
||||
for (var i = 0; i < this.popup_list.length; i++) {
|
||||
if (this.popup_list[i].uuid == uuid) {
|
||||
this.popup_list[i].animator = 'fade_Top'
|
||||
@ -115,13 +125,12 @@ based on
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
//更新
|
||||
update: function (update_list) {
|
||||
for (var i = 0; i < this.popup_list.length; i++) {
|
||||
if (this.popup_list[i].uuid == update_list.uuid) {
|
||||
this.popup_list[i].type=update_list.type;
|
||||
this.popup_list[i].type = update_list.type
|
||||
this.init(this.popup_list[i])
|
||||
this.popup_list[i].content = update_list.content
|
||||
break
|
||||
@ -131,11 +140,12 @@ based on
|
||||
//生成uuid
|
||||
guid: function () {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8)
|
||||
var r = (Math.random() * 16) | 0,
|
||||
v = c == 'x' ? r : (r & 0x3) | 0x8
|
||||
return v.toString(16)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -148,14 +158,16 @@ based on
|
||||
align-items: center;
|
||||
min-height: 45px;
|
||||
max-width: 80%;
|
||||
transition :all .5s;
|
||||
transition: all 0.5s;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
z-index: 998;
|
||||
@media screen and (min-width: 751px) { max-width: 500px }
|
||||
@media screen and (min-width: 751px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
@ -194,7 +206,6 @@ based on
|
||||
.icon {
|
||||
background-image: url('data:image/png;base64,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');
|
||||
}
|
||||
|
||||
}
|
||||
.mpopup-info {
|
||||
background: #edf2fc;
|
||||
@ -220,8 +231,7 @@ based on
|
||||
animation: fadeInTop 0.5s forwards;
|
||||
}
|
||||
/*从上到下*/
|
||||
@keyframes fadeInDown
|
||||
{
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -100px);
|
||||
@ -234,22 +244,19 @@ based on
|
||||
}
|
||||
}
|
||||
/*从下到上*/
|
||||
@keyframes fadeInTop
|
||||
{
|
||||
@keyframes fadeInTop {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, 10px);
|
||||
transform: stranslate(0, 10px);
|
||||
}
|
||||
to {
|
||||
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -100px);
|
||||
transform: stranslate(0, -100px);
|
||||
}
|
||||
}
|
||||
@keyframes rotate360
|
||||
{
|
||||
@keyframes rotate360 {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
@ -112,7 +112,7 @@ module.exports = {
|
||||
cloudPath = tempFiles[0].name
|
||||
// #endif
|
||||
} else if (mediaType === 'video') {
|
||||
let [errorChoose, { tempFilePath, tempFile, name }] = await uni.chooseVideo({ sourceType })
|
||||
let [errorChoose, { tempFilePath, tempFile, duration, size, width, height, name }] = await uni.chooseVideo({ sourceType })
|
||||
filePath = tempFilePath
|
||||
cloudPath = 'cloud.mp4'
|
||||
// #ifdef H5
|
||||
|
||||
Loading…
Reference in New Issue
Block a user