toast: Support prop:position. Close #973

src/components/toast/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vux-toast">
     <div class="weui-mask_transparent" v-show="isShowMask && show"></div>
-    <transition :name="transition">
+    <transition :name="currentTransition">
       <div class="weui-toast" :style="{width: width}" :class="toastClass" v-show="show">
         <i class="weui-icon-success-no-circle weui-icon_toast" v-show="type !== 'text'"></i>
         <p class="weui-toast__content" v-if="text" :style="style" v-html="$t(text)"></p>
@@ -12,7 +12,10 @@
 </template>
 
 <script>
+import SafariFixIssue from '../../mixins/safari-fix'
+
 export default {
+  mixins: [SafariFixIssue],
   props: {
     value: Boolean,
     time: {
@@ -23,10 +26,7 @@ export default {
       type: String,
       default: 'success'
     },
-    transition: {
-      type: String,
-      default: 'vux-fade'
-    },
+    transition: String,
     width: {
       type: String,
       default: '7.6em'
@@ -35,7 +35,8 @@ export default {
       type: Boolean,
       default: false
     },
-    text: String
+    text: String,
+    position: String
   },
   data () {
     return {
@@ -48,12 +49,27 @@ export default {
     }
   },
   computed: {
+    currentTransition () {
+      if (this.transition) {
+        return this.transition
+      }
+      if (this.position === 'top') {
+        return 'vux-slide-from-top'
+      }
+      if (this.position === 'bottom') {
+        return 'vux-slide-from-bottom'
+      }
+      return 'vux-fade'
+    },
     toastClass () {
       return {
         'weui-toast_forbidden': this.type === 'warn',
         'weui-toast_cancel': this.type === 'cancel',
         'weui-toast_success': this.type === 'success',
-        'weui-toast_text': this.type === 'text'
+        'weui-toast_text': this.type === 'text',
+        'vux-toast-top': this.position === 'top',
+        'vux-toast-bottom': this.position === 'bottom',
+        'vux-toast-middle': this.position === 'middle'
       }
     },
     style () {
@@ -64,6 +80,8 @@ export default {
   },
   watch: {
     show (val) {
+      this.fixSafariOverflowScrolling('auto')
+
       if (val) {
         this.$emit('input', true)
         this.$emit('on-show')
@@ -74,6 +92,7 @@ export default {
           this.show = false
           this.$emit('input', false)
           this.$emit('on-hide')
+          this.fixSafariOverflowScrolling('touch')
         }, this.time)
       }
     },
@@ -90,6 +109,32 @@ export default {
 @import '../../styles/weui/icon/weui_icon_font';
 @import '../../styles/weui/widget/weui_tips/weui_toast';
 
+.weui-toast.vux-toast-top {
+  top: @toast-position-top-offset;
+}
+.weui-toast.vux-toast-bottom {
+  top: auto;
+  bottom: @toast-position-bottom-offset;
+  transform: translateX(-50%);
+}
+.weui-toast.vux-toast-middle {
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.vux-slide-from-top-enter, .vux-slide-from-top-leave-active {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-100%)!important;
+}
+.vux-slide-from-bottom-enter, .vux-slide-from-bottom-leave-active {
+  opacity: 0;
+  transform: translateX(-50%) translateY(100%)!important;
+}
+.vux-slide-from-top-enter-active,
+.vux-slide-from-top-leave-active,
+.vux-slide-from-bottom-enter-active,
+.vux-slide-from-bottom-leave-active {
+  transition: all 400ms cubic-bezier(.36,.66,.04,1);
+}
 .weui-toast {
   transform: translateX(-50%);
   margin-left: 0!important;

src/components/toast/metas.yml

@@ -63,6 +63,12 @@ props:
     default: ''
     en: content of the toast, text or html, the same function as default slot
     zh-CN: 提示内容，支持 html，和默认slot同样功能
+  position:
+    version: v2.1.1-rc.4
+    type: String
+    default: 'default'
+    en: 'toast position, available values: default, top, middle, bottom'
+    zh-CN: 显示位置，可选值 default, top, middle, bottom
 slots:
   default:
     en: default slot, the content of the toast
@@ -75,6 +81,11 @@ events:
     en: emits when toast hides
     zh-CN: 提示隐藏时触发
 changes:
+  v2.1.1-rc.4:
+    en:
+      - '[feature] Support position setting. #973 @ LaiXuechao'
+    zh-CN:
+      - '[feature] 支持显示位置设置 #973 @LaiXuechao'
   v2.1.1-rc.2:
     en:
       - '[feature] Add more less variables'

src/demos/Toast.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <div style="padding:15px;">
+      <x-button @click.native="showPosition('top')" type="primary">Top</x-button>
+      <x-button @click.native="showPosition('middle')" type="primary">Middle</x-button>
+      <x-button @click.native="showPosition('bottom')" type="primary">Bottom</x-button>
+      <x-button @click.native="showPosition('')" type="primary">Default</x-button>  
+    </div>
+
+    <toast v-model="showPositionValue" type="text" :time="800" is-show-mask text="Hello World" :position="position">{{ $t('Basic Usage') }}</toast>
     <group>
       <x-switch :title="$t('Basic Usage')" v-model="show1"></x-switch>
       <x-switch :title="$t('type:text')" v-model="show2"></x-switch>
@@ -8,18 +16,22 @@
       <x-switch :title="$t('time:1s')" v-model="show5"></x-switch>
       <x-switch :title="$t('long text')" v-model="show6"></x-switch>
     </group>
+
     <toast v-model="show1" @on-hide="onHide">{{ $t('Basic Usage') }}</toast>
     <toast v-model="show2" type="text">{{$t('success')}}</toast>
     <toast v-model="show3" type="cancel">{{$t('type:cancel')}}</toast>
     <toast v-model="show4" type="warn">{{$t('type:warn')}}</toast>
     <toast v-model="show5" :time="1000">{{$t('time:1s')}}</toast>
     <toast v-model="show6" type="text" width="20em">{{$t('show me code')}}</toast>
+
     <group :title="$t('prop:text')">
       <x-switch :title="$t('type:success')" v-model="show7"></x-switch>
       <x-switch :title="$t('type:text')" v-model="show8"></x-switch>
     </group>
+
     <toast v-model="show7" text="Hello World"></toast>
     <toast v-model="show8" type="text" text="Hello World"></toast>
+
     <group :title="$t('As a plugin(>=v0.1.3)')">
       <x-switch :title="$t('default')" v-model="show9" @on-change="onChange"></x-switch>
     </group>
@@ -49,17 +61,24 @@ default:
   zh-CN: 默认
 As a plugin(>=v0.1.3):
   zh-CN: 插件形式调用
+position:
+  zh-CN: 位置
 </i18n>
 
 <script>
-import { Toast, Group, XSwitch } from 'vux'
+import { Toast, Group, XSwitch, XButton } from 'vux'
 export default {
   components: {
     Toast,
     Group,
-    XSwitch
+    XSwitch,
+    XButton
   },
   methods: {
+    showPosition (position) {
+      this.position = position
+      this.showPositionValue = true
+    },
     onHide () {
       console.log('on hide')
     },
@@ -91,7 +110,9 @@ export default {
       show6: false,
       show7: false,
       show8: false,
-      show9: false
+      show9: false,
+      position: 'default',
+      showPositionValue: false
     }
   }
 }

src/mixins/safari-fix.js

@@ -0,0 +1,14 @@
+export default {
+  mounted () {
+    this.$overflowScrollingList = document.querySelectorAll('.vux-fix-safari-overflow-scrolling')
+  },
+  methods: {
+    fixSafariOverflowScrolling (type) {
+      if (!this.$overflowScrollingList.length) return
+      if (!/iphone/i.test(navigator.userAgent)) return
+      for (let i = 0; i < this.$overflowScrollingList.length; i++) {
+        this.$overflowScrollingList[i].style.webkitOverflowScrolling = type
+      }
+    }
+  }
+}

src/styles/variable.less

@@ -218,6 +218,9 @@
 */
 @toast-content-font-size: 16px;
 @toast-top: 180px;
+@toast-position-top-offset: 10px;
+@toast-position-bottom-offset: 10px;
+
 
 /**
 * icon

src/theme.less

@@ -21,3 +21,6 @@
 @form-preview-button-primary-color: #FF9900;
 
 @tabbar-text-active-color: #35495e;
+
+@toast-position-top-offset: 56px;
+@toast-position-bottom-offset: 60px;