feat: H5 端 uni.showActionSheet 优化大屏展示效果，支持 popover 参数

src/core/view/index.css

@@ -103,7 +103,7 @@ uni-page {
     right: 0;
     left: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.5);
 }
 
 
@@ -122,20 +122,20 @@ uni-page {
 }
 
 [nvue] uni-view,
-[nvue] uni-swiper-item,
+[nvue] uni-swiper-item,
 [nvue] uni-scroll-view {
-    display: flex;
-    flex-shrink: 0;
-    flex-grow: 0;
-    flex-basis: auto;
-    align-items: stretch;
+    display: flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: auto;
+    align-items: stretch;
     align-content: flex-start;
-}
+}
 
 [nvue-dir-row] uni-view,
 [nvue-dir-row] uni-swiper-item {
     flex-direction: row;
-}
+}
 
 [nvue-dir-column] uni-view,
 [nvue-dir-column] uni-swiper-item {
@@ -164,8 +164,8 @@ uni-page {
     position: relative;
     border: 0px solid #000000;
     box-sizing: border-box;
-}
-
-[nvue] uni-swiper-item {
-    position: absolute;
-}
+}
+
+[nvue] uni-swiper-item {
+    position: absolute;
+}

src/platforms/h5/components/app/popup/actionSheet.vue

@@ -3,40 +3,42 @@
     <transition name="uni-fade">
       <div
         v-show="visible"
-        class="uni-mask"
-        @click="_close(-1)"
+        class="uni-mask uni-actionsheet__mask"
+        @click="_close(-1)"
       />
     </transition>
     <div
-      :class="{'uni-actionsheet_toggle':visible}"
-      class="uni-actionsheet"
-    >
+      :class="{ 'uni-actionsheet_toggle': visible }"
+      :style="actionSheetStyle.content"
+      class="uni-actionsheet"
+    >
       <div class="uni-actionsheet__menu">
         <div
           v-if="title"
           class="uni-actionsheet__title"
-        >
-          {{ title }}
+        >
+          {{ title }}
         </div>
         <div
-          v-for="(itemTitle,index) in itemList"
+          v-for="(itemTitle, index) in itemList"
           :key="index"
-          :style="{color:itemColor}"
+          :style="{ color: itemColor }"
           class="uni-actionsheet__cell"
-          @click="_close(index)"
-        >
-          {{ itemTitle }}
+          @click="_close(index)"
+        >
+          {{ itemTitle }}
         </div>
       </div>
       <div class="uni-actionsheet__action">
         <div
-          :style="{color:itemColor}"
+          :style="{ color: itemColor }"
           class="uni-actionsheet__cell"
-          @click="_close(-1)"
-        >
-          取消
+          @click="_close(-1)"
+        >
+          取消
         </div>
       </div>
+      <div :style="actionSheetStyle.triangle" />
     </div>
   </uni-actionsheet>
 </template>
@@ -58,11 +60,84 @@ export default {
       type: String,
       default: '#000000'
     },
+    popover: {
+      type: Object,
+      default: null
+    },
     visible: {
       type: Boolean,
       default: false
     }
   },
+  data () {
+    return {
+      width: 0,
+      height: 0,
+      top: top
+    }
+  },
+  computed: {
+    actionSheetStyle () {
+      const style = {}
+      const contentStyle = style.content = {}
+      const triangleStyle = style.triangle = {}
+      const popover = this.popover
+      function getNumber (value) {
+        return Number(value) || 0
+      }
+      if (this.width >= 500 && popover) {
+        Object.assign(triangleStyle, {
+          position: 'absolute',
+          width: '0',
+          height: '0',
+          'margin-left': '-6px',
+          'border-style': 'solid'
+        })
+        const popoverLeft = getNumber(popover.left)
+        const popoverWidth = getNumber(popover.width)
+        const popoverTop = getNumber(popover.top)
+        const popoverHeight = getNumber(popover.height)
+        const center = (popoverLeft + popoverWidth) / 2
+        contentStyle.transform = 'none !important'
+        const contentLeft = Math.max(0, center - 300 / 2)
+        contentStyle.left = `${contentLeft}px`
+        let triangleLeft = Math.max(12, center - contentLeft)
+        triangleLeft = Math.min(300 - 12, triangleLeft)
+        triangleStyle.left = `${triangleLeft}px`
+        const vcl = this.height / 2
+        if (popoverTop + popoverHeight - vcl > vcl - popoverTop) {
+          contentStyle.top = 'auto'
+          contentStyle.bottom = `${this.height - popoverTop + 6}px`
+          triangleStyle.bottom = '-6px'
+          triangleStyle['border-width'] = '6px 6px 0 6px'
+          triangleStyle['border-color'] = '#fcfcfd transparent transparent transparent'
+        } else {
+          contentStyle.top = `${popoverTop + popoverHeight + 6}px`
+          triangleStyle.top = '-6px'
+          triangleStyle['border-width'] = '0 6px 6px 6px'
+          triangleStyle['border-color'] = 'transparent transparent #fcfcfd transparent'
+        }
+      }
+      return style
+    }
+  },
+  mounted () {
+    const fixSize = () => {
+      const {
+        windowWidth,
+        windowHeight,
+        windowTop
+      } = uni.getSystemInfoSync()
+      this.width = windowWidth
+      this.height = windowHeight + windowTop
+      this.top = windowTop
+    }
+    this.$watch('visible', value => value && fixSize())
+    window.addEventListener('resize', fixSize)
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('resize', fixSize)
+    })
+  },
   methods: {
     _close (tapIndex) {
       this.$emit('close', tapIndex)
@@ -71,67 +146,96 @@ export default {
 }
 </script>
 <style>
-	uni-actionsheet {
-		display: block;
-		box-sizing: border-box;
-	}
+uni-actionsheet {
+  display: block;
+  box-sizing: border-box;
+}
 
-	uni-actionsheet .uni-actionsheet {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		transform: translate(0, 100%);
-		backface-visibility: hidden;
-		z-index: 999;
-		width: 100%;
-		background-color: #efeff4;
-    visibility: hidden;
-		transition: transform 0.3s, visibility 0.3s;
-	}
+uni-actionsheet .uni-actionsheet {
+  position: fixed;
+  left: 6px;
+  right: 6px;
+  bottom: 6px;
+  transform: translate(0, 100%);
+  backface-visibility: hidden;
+  z-index: 999;
+  visibility: hidden;
+  transition: transform 0.3s, visibility 0.3s;
+}
 
-	uni-actionsheet .uni-actionsheet.uni-actionsheet_toggle {
-    visibility: visible;
-		transform: translate(0, 0);
-	}
+uni-actionsheet .uni-actionsheet.uni-actionsheet_toggle {
+  visibility: visible;
+  transform: translate(0, 0);
+}
 
-	uni-actionsheet .uni-actionsheet * {
-		box-sizing: border-box;
-	}
+uni-actionsheet .uni-actionsheet * {
+  box-sizing: border-box;
+}
 
-	uni-actionsheet .uni-actionsheet__menu {
-		background-color: #fcfcfd;
-	}
+uni-actionsheet .uni-actionsheet__menu,
+uni-actionsheet .uni-actionsheet__action {
+  border-radius: 5px;
+  background-color: #fcfcfd;
+}
 
-	uni-actionsheet .uni-actionsheet__action {
-		margin-top: 6px;
-		background-color: #fcfcfd;
-	}
+uni-actionsheet .uni-actionsheet__action {
+  margin-top: 6px;
+}
+
+uni-actionsheet .uni-actionsheet__cell,
+uni-actionsheet .uni-actionsheet__title {
+  position: relative;
+  padding: 10px 6px;
+  text-align: center;
+  font-size: 18px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
-	uni-actionsheet .uni-actionsheet__cell ,
-	uni-actionsheet .uni-actionsheet__title {
-		position: relative;
-		padding: 10px 0;
-		text-align: center;
-		font-size: 18px;
-	}
-	uni-actionsheet .uni-actionsheet__cell:before {
-		content: " ";
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		height: 1px;
-		border-top: 1px solid #e5e5e5;
-		color: #e5e5e5;
-		transform-origin: 0 0;
-		transform: scaleY(0.5);
-	}
+uni-actionsheet .uni-actionsheet__cell:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1px;
+  border-top: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  transform-origin: 0 0;
+  transform: scaleY(0.5);
+}
 
-	uni-actionsheet .uni-actionsheet__cell:active {
-		background-color: #ececec;
-	}
+uni-actionsheet .uni-actionsheet__cell:active {
+  background-color: #ececec;
+}
+
+uni-actionsheet .uni-actionsheet__cell:first-child:before {
+  display: none;
+}
 
-	uni-actionsheet .uni-actionsheet__cell:first-child:before {
-		display: none;
-	}
+@media screen and (min-width: 500px) {
+  .uni-mask.uni-actionsheet__mask {
+    background: none;
+  }
+  uni-actionsheet .uni-actionsheet {
+    width: 300px;
+    left: 50%;
+    right: auto;
+    top: 50%;
+    bottom: auto;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.3s, visibility 0.3s;
+  }
+  uni-actionsheet .uni-actionsheet.uni-actionsheet_toggle {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+  uni-actionsheet .uni-actionsheet__menu {
+    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
+  }
+  uni-actionsheet .uni-actionsheet__action {
+    display: none;
+  }
+}
 </style>

src/platforms/h5/view/index.css

@@ -103,7 +103,7 @@ uni-page {
     right: 0;
     left: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.5);
 }
 
 
@@ -122,20 +122,20 @@ uni-page {
 }
 
 [nvue] uni-view,
-[nvue] uni-swiper-item,
+[nvue] uni-swiper-item,
 [nvue] uni-scroll-view {
-    display: flex;
-    flex-shrink: 0;
-    flex-grow: 0;
-    flex-basis: auto;
-    align-items: stretch;
+    display: flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: auto;
+    align-items: stretch;
     align-content: flex-start;
-}
+}
 
 [nvue-dir-row] uni-view,
 [nvue-dir-row] uni-swiper-item {
     flex-direction: row;
-}
+}
 
 [nvue-dir-column] uni-view,
 [nvue-dir-column] uni-swiper-item {
@@ -164,8 +164,8 @@ uni-page {
     position: relative;
     border: 0px solid #000000;
     box-sizing: border-box;
-}
-
-[nvue] uni-swiper-item {
-    position: absolute;
-}
+}
+
+[nvue] uni-swiper-item {
+    position: absolute;
+}