Toast

简短的消息提示框，可自定义持续时间和提示类型。 1:提示类型：message（文字提示），success（成功）, error(异常)，warning（警告） 备注: 使用控件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代 体积: 28K

git 地址：

https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/commits/toast

cdn 地址：

<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/vue/vue.min.js"></script>
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/toast/toast.min.0.0.1.js"></script>

demo 页

http://10.168.66.123:9090/out/dealerUI/demo/components/toast/#/toast

node 环境引入

1:安装 
  npm install dlrtoast (如指定版本号：npm install [email protected])

2：引入并注册
  import Vue from 'vue'
  import dlrToast from 'dlrtoast/dist/toast.min.js'
  Vue.use(dlrToast)

例子

基本用法

<template>
  <section class="wrap">
    <p>对象配置:</p>
    <p>var option = { message: '这是一个消息提示!', duration: 2000 }</p>
    <ul>
        <li>
          <Button class="btn" type="primary" @click="showMessage()">message </Button>
        </li>
        <li>
          <Button  class="btn" type="primary" @click="showSuccess()">success</Button>
        </li>
         <li>
          <Button class="btn" type="primary" @click="showError()">error </Button>
        </li>
        <li>
          <Button class="btn" type="primary" @click="showWarnning()">warning </Button>
        </li>
      </ul>
  </section>
</template>
<script>
export default {
  name: 'ToastDemo',
  methods: {
    showMessage () {
      this.$dlrToast.message({ message: '这是一个消息提示!', duration: 2000 })
      // Vue.prototype.$dlrToast.message('message')
    },
    showSuccess () {
      this.$dlrToast.success('成功')
    },
    showError () {
      this.$dlrToast.error('异常')
    },
    showWarnning () {
      this.$dlrToast.warning('警告')
    }
  }
}
</script>
<style lang="scss">
  .wrap {
    ul {
      list-style: none;
      li {
        margin: 8px;
      }
    }
  }
</style>

API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | v-model | 双向绑定值,用于控制显示提示、隐藏 | Boolean | | false | | data | 配置参数 | Object | | null |

data 配置 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | type | 提示类型 | String |'message', 'success', 'error', 'warning' | 'message' | | message | 文本内容 | String | | | | duration | 持续时间（毫秒） | Number | | 1500 |