• 引入
  • 代码演示
    • 纯文字
    • 失败
    • 连续调用
    • 自定义位置
    • 成功
    • 载入
    • 长文字
    • 定制Toast
  • API
    • Toast Static Methods
      • Toast({content, icon, iconSvg, duration, position, hasMask, parentNode})
      • Toast.info(content, duration, hasMask, parentNode)
      • Toast.succeed(content, duration, hasMask, parentNode)
      • Toast.failed(content, duration, hasMask, parentNode)
      • Toast.loading(content, duration, hasMask, parentNode)
      • Toast.hide()
    • Toast.component Props
    • Toast.component Methods
      • show()
      • hide()
    • Toast.component Events
      • @show()
      • @hide()

    Toast 轻提示

    Scan me!

    弹出式消息提示

    引入

    1. import { Toast } from 'mand-mobile'
    3. Toast.succeed('操作成功')
    5. this.$toast.info('提示') // 全量引入
    7. Vue.component(Toast.component.name, Toast.component) // 组件引入

    代码演示

    纯文字

    Toast 轻提示 - 图2

    1.         <template>
    2.   <div class="md-example-child md-example-child-toast md-example-child-toast-0">
    3.     <md-button @click="showTextToast">纯文字</md-button>
    4.   </div>
    5. </template>
    7. <script>
    8. import {Toast, Button} from 'mand-mobile'
    10. export default {
    11.   name: 'toast-demo',
    12.   components: {
    13.     [Button.name]: Button,
    14.   },
    15.   methods: {
    16.     showTextToast() {
    17.       Toast.info('一段文字')
    18.     },
    19.   },
    20. }
    22. </script>
    23.  
    24.

    失败

    Toast 轻提示 - 图3

            <template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-2">
    <md-button @click="showSucceedToast">失败</md-button>
  </div>
</template>

<script>
import {Toast, Button} from 'mand-mobile'

export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showSucceedToast() {
      Toast.failed('操作失败')
    },
  },
}

</script>

    连续调用

    Toast 轻提示 - 图4

            <template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-3">
    <md-button @click="start">连续调用</md-button>
  </div>
</template>

<script>
import {Toast, Button} from 'mand-mobile'

export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    start() {
      Toast.loading('载入中')
      setTimeout(() => {
        Toast.hide()
        setTimeout(() => {
          Toast.failed('载入失败')
        }, 10)
      }, 500)
    },
  },
}

</script>

    自定义位置

    Toast 轻提示 - 图5

            <template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-0">
    <md-button @click="showTextToast">自定义位置</md-button>
  </div>
</template>

<script>
import {Toast, Button} from 'mand-mobile'

export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showTextToast() {
      Toast({
        content: '自定义位置',
        position: 'bottom',
      })
    },
  },
}

</script>

    成功

    Toast 轻提示 - 图6

            <template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-1">
    <md-button @click="showSucceedToast">成功</md-button>
  </div>
</template>

<script>
import {Toast, Button} from 'mand-mobile'

export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showSucceedToast() {
      Toast.succeed('操作成功')
    },
  },
}

</script>

    载入

    Toast 轻提示 - 图7

            <template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-3">
    <md-button @click="showLoadingToast">载入</md-button>
  </div>
</template>

<script>
import {Toast, Button} from 'mand-mobile'

export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showLoadingToast() {
      Toast.loading('加载中...')
      setTimeout(() => {
        Toast.hide()
      }, 3000)
    },
  },
}

</script>

    长文字

    Toast 轻提示 - 图8

            <template>
  <div class="md-example-child md-example-child-toast md-example-child-toast-1">
    <md-button @click="showToast">长文字</md-button>
  </div>
</template>

<script>
import {Toast, Button} from 'mand-mobile'

export default {
  name: 'toast-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    showToast() {
      Toast.succeed('所有文案部分字数最多展示15个字')
    },
  },
}

</script>

    定制Toast

    Toast 轻提示 - 图9

            <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',
  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>

    API

    Toast Static Methods

    Toast({content, icon, iconSvg, duration, position, hasMask, parentNode})

    显示自定义提示

    属性说明类型默认值备注
    iconIcon组件图标名称String-如需自定义图标, 请查看Icon组件
    iconSvg使用svg图标Booleanfalse-
    content提示内容文本String--
    duration显示多少毫秒后自动消失, 若为0则一直显示Number3000-
    position展示位置Stringcentertop/center/bottom
    hasMask是否显示透明遮罩, 以此防止用户点击Booleanfalse-
    parentNode组件挂载节点HTMLElementdocument.body-
    Toast.info(content, duration, hasMask, parentNode)

    显示纯文本提示

    属性说明类型默认值
    content提示内容文本String-
    duration显示多少毫秒后自动消失, 若为0则一直显示Number3000
    hasMask是否显示透明遮罩, 以此防止用户点击Booleanfalse
    parentNode组件挂载节点HTMLElementdocument.body
    Toast.succeed(content, duration, hasMask, parentNode)

    显示成功提示

    属性说明类型默认值
    content提示内容文本String-
    duration显示多少毫秒后自动消失, 若为0则一直显示Number3000
    hasMask是否显示透明遮罩, 以此防止用户点击Booleanfalse
    parentNode组件挂载节点HTMLElementdocument.body
    Toast.failed(content, duration, hasMask, parentNode)

    显示失败提示

    属性说明类型默认值
    content提示内容文本String-
    duration显示多少毫秒后自动消失, 若为0则一直显示Number3000
    hasMask是否显示透明遮罩, 以此防止用户点击Booleanfalse
    parentNode组件挂载节点HTMLElementdocument.body
    Toast.loading(content, duration, hasMask, parentNode)

    显示载入提示

    属性说明类型默认值
    content提示内容文本String, Number-
    duration显示多少毫秒后自动消失, 若为0则一直显示Number0
    hasMask是否显示透明遮罩, 以此防止用户点击Booleantrue
    parentNode组件挂载节点HTMLElementdocument.body
    Toast.hide()

    隐藏提示

    Toast.component Props

    2.3.0+

    属性说明类型默认值备注
    iconIcon组件图标名称String-如需自定义图标, 请查看Icon组件
    iconSvg使用svg图标Booleanfalse-
    content提示内容文本String--
    duration显示多少毫秒后自动消失, 若为0则一直显示Number3000-
    position展示位置Stringcentertop/center/bottom
    hasMask是否显示透明遮罩, 以此防止用户点击Booleanfalse-
    <md-toast>
  <md-activity-indicator>loading...</md-activity-indicator>
</md-toast>

    Toast.component Methods

    2.3.0+

    show()

    展示提示

    hide()

    隐藏提示

    Toast.component Events

    2.3.0+

    @show()

    提示展示事件

    @hide()

    提示隐藏事件