dlrtoast

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 dlrtoast@0.0.2)
 
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