@aochuang/common 1.0.135 → 1.0.137

package/components/dialog/dialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     ref="dialog"
     class="ui-dialog"
-    :class="['ui-dialog--' + size, {'is-closeable': closeable, 'is-hide-header': hideHeader}]"
+    :class="['ui-dialog--' + size, {'is-closeable': closeable, 'is-hide-header': hideHeader, 'is-mobile': isMobile}]"
     :top="dialogTop"
     :append-to-body="true"
     :visible.sync="dialogVisible"
@@ -25,6 +25,7 @@
 import ElDialog from 'element-ui/lib/dialog'
 import 'element-ui/lib/theme-chalk/dialog.css'
 import { getDialogOpenCallback, getDialogCloseCallback } from './utils'
+import { isMobile } from '../../utils/browse.js'
 
 export default {
   name: 'UiDialog',
@@ -77,7 +78,8 @@ export default {
   },
   data () {
     return {
-      showContent: this.visible
+      showContent: this.visible,
+      isMobile: isMobile()
     }
   },
   computed: {
@@ -184,4 +186,55 @@ export default {
     display: inline-block;
   }
 }
+.ui-dialog.is-mobile{
+  display: flex;
+  align-items: flex-end;
+  .el-dialog{
+    width: 100% !important;
+    max-height: 90vh;
+    margin: 0 !important;
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px 8px 0 0;
+  }
+  .el-dialog__header{
+    flex-shrink: 0;
+    border-radius: 8px 8px 0 0;
+  }
+  .el-dialog__body{
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+  }
+}
+.ui-dialog.is-mobile.dialog-fade-enter-active{
+  animation: none;
+  .el-dialog{
+    animation: ui-dialog-mobile-slide-in .3s ease-out;
+  }
+}
+.ui-dialog.is-mobile.dialog-fade-leave-active{
+  animation: none;
+  .el-dialog{
+    animation: ui-dialog-mobile-slide-out .3s ease-in;
+  }
+}
+@keyframes ui-dialog-mobile-slide-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes ui-dialog-mobile-slide-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
 </style>

package/components/image/image.vue

@@ -15,13 +15,15 @@
         @error="handleImageError"
         :style="imageStyle"
       />
-      <ui-icon
-        v-if="status === 'error'"
-        name="image-error-line"
-        class="ui-image__error"
-        :size="iconSize"
-        color="#aaa"
-      ></ui-icon>
+      <div v-if="status === 'error'" class="ui-image__error" :class="{'has-slot': $slots.error}">
+        <slot name="error">
+          <ui-icon
+            name="image-error-line"
+            :size="iconSize"
+            color="#aaa"
+          ></ui-icon>
+        </slot>
+      </div>
       <div class="ui-image__preview" v-if="previewable && status === 'success'" @click="handlePreviewClick">
         <ui-icon name="sousuo" :size="30" color="#fff"></ui-icon>
       </div>
@@ -215,7 +217,7 @@ export default {
       if (!this.source) {
         return
       }
-      const clickFn = getImageClickFn()
+      const clickFn = getImageClickFn() 
       if (clickFn) {
         clickFn({
           alt: this.alt,
@@ -318,7 +320,7 @@ export default {
     img {
       display: none!important;
     }
-    .ui-image__error{
+    .ui-image__error:not(.has-slot){
       position: absolute;
       left: 50%;
       top: 50%;

package/components/popup-select/popup-select.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ui-popup-select">
-    <div class="ui-popup-select__handle">
+    <div class="ui-popup-select__handle" @click.capture="handleHandleClick">
       <ui-select
         ref="select"
         v-model="innerValue"
@@ -27,7 +27,7 @@
         :size="popupSize"
         v-model="showPopupDialog"
       >
-        <slot name="popup"></slot>
+        <slot name="popup" :close="closePopup"></slot>
       </ui-dialog>
     </div>
   </div>
@@ -37,7 +37,7 @@ export default {
   name: 'UiPopupSelect',
   props: {
     value: {
-      type: String
+      type: [String, Number]
     },
     filterable: {
       type: Boolean,
@@ -78,6 +78,10 @@ export default {
     },
     tempItems: {
       type: Array
+    },
+    popupOnClick: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -96,6 +100,17 @@ export default {
     }
   },
   methods: {
+    handleHandleClick (event) {
+      if (!this.popupOnClick) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      this.showPopupDialog = true
+    },
+    closePopup () {
+      this.showPopupDialog = false
+    },
     handleChange (evt) {
       this.$emit('change', evt)
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/common",
-  "version": "1.0.135",
+  "version": "1.0.137",
   "description": "",
   "main": "index.js",
   "publishConfig": {

package/utils/browse.js

@@ -0,0 +1,8 @@
+export function isMobile () {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+  const userAgent = navigator.userAgent
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) ||
+    (/Macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1)
+}