0.0.6 • Published 4 years ago
dlrmessage v0.0.6
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 dlrmessage@0.0.2)
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 配置 参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
0.0.6
4 years ago