ucToast 支持position:top/bottom

ucToast/ucToast.vue

@@ -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
+      toast.uuid = this.guid() //生成uuid
-				let uuid=this.guid()
+      toast.animator = 'fade_Down' //添加动画
-				toast.uuid=uuid
+      toast.clickable = toast.clickable || false //判断是否可点击消失
-				//添加动画
+      toast.position = toast.position || 'top'
-				toast.animator='fade_Down'
-        
-				toast.clickable = toast.clickable || false //判断是否可点击消失/可控制消失
       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}
+      if (!duration || typeof duration != 'number') {
-				return new Promise(res=>{
+        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);
   }

unitool/index.js

@@ -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