dlrtoast v0.0.7

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

data 配置 参数