Message

弹窗，分alert、confirm 类型： 备注: 使用控件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代 体积: 37K

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/message/message.min.0.0.1.js"></script>

demo 页

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

node 环境引入

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

2：引入并注册
  import Vue from 'vue'
  import dlrMessage from 'dlrmessage'
  Vue.use(dlrMessage)

例子

代码示例

<template>
  <section class="wrap">
    <ul>
        <li>
          <Button class="btn" type="primary" @click="msgAlert1()">alert 简单模式 </Button>
        </li>
        <li>
          <Button class="btn" type="primary" @click="msgAlert2()">alert 对象模式 </Button>
        </li>
        <li>
          <Button  class="btn" type="primary" @click="msgConfirm1()">confirm 简单模式</Button>
        </li>
        <li>
          <Button  class="btn" type="primary" @click="msgConfirm2()">confirm 对象模式</Button>
        </li>
      </ul>
  </section>
</template>
<script>
export default {
  name: 'messageDemo',
  methods: {
    msgAlert1 () {
      this.$dlrMessage.alert('这是一条提示信息1')
    },
    msgAlert2 () {
      const okInfo = {
        message: '这是一条提示信2',
        okBtn: {
          text: 'ok了',
          handler: function () {
            console.log('ok handler')
          }
        }
      }
      this.$dlrMessage.alert(okInfo)
    },
    // 确认框
    msgConfirm1 () {
      this.$dlrMessage.confirm('确定要刷新?')
    },
    msgConfirm2 () {
      const config = {
        message: '确定刷新?',
        okBtn: {
          text: '确定',
          handler: function () {
            console.log('confirm ok')
          }
        },
        cancelBtn: {
          text: '取消',
          handler: function (params) {
            console.log('confirm cancel')
          }
        }
      }
      this.$dlrMessage.confirm(config)
    }
  }
}
</script>
<style lang="scss">
  .wrap {
    ul {
      list-style: none;
      li {
        margin: 8px;
      }
    }
  }
</style>

API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | | | | | |

data 配置 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | | | | | |