Toast 轻提示

弹出式消息提示

引入

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

代码演示

纯文字

        <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.info('一段文字')
    },
  },
}
</script>
 
      

失败

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

      

连续调用

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

      

自定义位置

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

      

成功

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

      

载入

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

      

长文字

        <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

        <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})

显示自定义提示

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

^2.3.0+

<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()

提示隐藏事件