feat(toast):add Toast.component for componentized usage (#464)

* feat(toast): add Toast.component for componentized usage & toast slot

* doc(toast): add Toast.component to readme

* example(toast): add componentized usage

* doc(toast): update readme

components/toast/README.en-US.md

@@ -77,3 +77,42 @@ Dynamically create a loading toast
 
 ##### Toast.hide()
 Hide current toast
+
+#### Toast.component Props
+
+<sup class="version-after">2.3.0+</sup>
+
+| Props | Description | Type | Default | Note |
+|----|-----|------|------|------|
+| icon | name of icon | String | - | refer to `Icon` component for customized icons|
+| iconSvg | use svg icon | Boolean | `false` |-|
+| content | content of message| String/Number | - |- |
+| duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
+| position | display position | String | `center` | `top/center/bottom` |
+| hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - |
+
+```html
+<md-toast>
+  <md-activity-indicator>loading...</md-activity-indicator>
+</md-toast>
+```
+
+#### Toast.component Methods
+
+<sup class="version-after">2.3.0+</sup>
+
+##### show()
+Show toast
+
+##### hide()
+Hide toast
+
+#### Toast.component Events
+
+<sup class="version-after">2.3.0+</sup>
+
+##### @show()
+Toast show event
+
+##### @hide()
+Toast hidden event

components/toast/README.md

@@ -13,6 +13,8 @@ import { Toast } from 'mand-mobile'
 Toast.succeed('操作成功')
 
 this.$toast.info('提示') // 全量引入
+
+Vue.component(Toast.component.name, Toast.component) // 组件引入
 ```
 
 ### 代码演示
@@ -77,3 +79,42 @@ this.$toast.info('提示') // 全量引入
 
 ##### Toast.hide()
 隐藏提示
+
+#### Toast.component Props 
+
+<sup class="version-after">2.3.0+</sup>
+
+|属性 | 说明 | 类型 | 默认值|备注|
+|----|-----|------|------|------|
+| icon | Icon组件图标名称 | String | - |如需自定义图标, 请查看`Icon`组件 |
+| iconSvg | 使用svg图标 | Boolean | `false` |-|
+| content | 提示内容文本 | String | - |- |
+| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
+| position | 展示位置 | String | `center` | `top/center/bottom` |
+| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
+
+```html
+<md-toast>
+  <md-activity-indicator>loading...</md-activity-indicator>
+</md-toast>
+```
+
+#### Toast.component Methods
+
+<sup class="version-after">2.3.0+</sup>
+
+##### show()
+展示提示
+
+##### hide()
+隐藏提示
+
+#### Toast.component Events
+
+<sup class="version-after">2.3.0+</sup>
+
+##### @show()
+提示展示事件
+
+##### @hide()
+提示隐藏事件

components/toast/demo/cases/demo7.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="md-example-child md-example-child-toast md-example-child-toast-7">
+    <md-toast ref="toast">
+      <md-activity-indicator
+        :size="20"
+        :text-size="16"
+        color="yellow"
+        text-color="white"
+      >loading...</md-activity-indicator>
+    </md-toast>
+    <md-button @click="showTextToast">定制Toast</md-button>
+  </div>
+</template>
+
+<script>import {Toast, Button, ActivityIndicator} from 'mand-mobile'
+
+export default {
+  name: 'toast-demo',
+  /* DELETE */
+  title: '定制Toast',
+  titleEnUS: 'Customize toast',
+  /* DELETE */
+  components: {
+    [Toast.component.name]: Toast.component,
+    [Button.name]: Button,
+    [ActivityIndicator.name]: ActivityIndicator,
+  },
+  data() {
+    return {
+      isShow: false,
+    }
+  },
+  methods: {
+    showTextToast() {
+      if (this.isShow) {
+        this.$refs.toast.hide()
+        this.isShow = false
+      } else {
+        this.$refs.toast.show()
+        this.isShow = true
+      }
+    },
+  },
+}
+</script>

components/toast/demo/index.vue

@@ -18,6 +18,7 @@ import Demo3 from './cases/demo3'
 import Demo4 from './cases/demo4'
 import Demo5 from './cases/demo5'
 import Demo6 from './cases/demo6'
+import Demo7 from './cases/demo7'
 
-export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6])}
+export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7])}
 </script>

components/toast/index.js

@@ -42,8 +42,9 @@ const Toast = function({
   vm.duration = duration
   vm.position = position
   vm.hasMask = hasMask
-  vm.visible = true
-  vm.fire()
+  // vm.visible = true
+  // vm.fire()
+  vm.show()
 
   return vm
 }
@@ -137,4 +138,6 @@ Toast.loading = (content = '', duration = 0, hasMask = true, parentNode = docume
   })
 }
 
+Toast.component = ToastOptions
+
 export default Toast

components/toast/toast.vue

@@ -2,11 +2,15 @@
   <div class="md-toast" :class="[position]">
     <md-popup
       :value="visible"
+      @show="$_onShow"
       @hide="$_onHide"
       :hasMask="hasMask"
       :maskClosable="false"
     >
-      <div class="md-toast-content">
+      <div class="md-toast-content" v-if="$slots.default">
+        <slot></slot>
+      </div>
+      <div class="md-toast-content" v-else>
         <md-icon v-if="icon" :name="icon" size="lg" :svg="iconSvg"/>
         <div class="md-toast-text" v-if="content" v-text="content"></div>
       </div>
@@ -55,7 +59,7 @@ export default {
 
   data() {
     return {
-      visible: true,
+      visible: false,
     }
   },
 
@@ -66,6 +70,9 @@ export default {
   },
 
   methods: {
+    $_onShow() {
+      this.$emit('show')
+    },
     $_onHide() {
       this.$emit('hide')
     },
@@ -79,6 +86,10 @@ export default {
         }, this.duration)
       }
     },
+    show() {
+      this.visible = true
+      this.fire()
+    },
     hide() {
       this.visible = false
     },

types/toast.d.ts

@@ -1,3 +1,5 @@
+import { MandComponent } from './component'
+
 export type ToastOptions = {
   content: string
   duration?: number
@@ -17,6 +19,7 @@ export interface Toast {
   failed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void
   loading(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void
   hide(): void
+  component: MandComponent
 }
 
 declare module 'vue/types/vue' {