<template>
|
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
|
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
|
</view>
|
</template>
|
|
<script>
|
|
/**
|
* PopUp 弹出层-消息提示
|
* @description 弹出层-消息提示
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
* @property {String} type = [success|warning|info|error] 主题样式
|
* @value success 成功
|
* @value warning 提示
|
* @value info 消息
|
* @value error 错误
|
* @property {String} message 消息提示文字
|
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
*/
|
|
export default {
|
name: 'UniPopupMessage',
|
props: {
|
/**
|
* 主题 success/warning/info/error 默认 success
|
*/
|
type: {
|
type: String,
|
default: 'success'
|
},
|
/**
|
* 消息文字
|
*/
|
message: {
|
type: String,
|
default: ''
|
},
|
/**
|
* 显示时间，设置为 0 则不会自动关闭
|
*/
|
duration: {
|
type: Number,
|
default: 3000
|
}
|
},
|
inject: ['popup'],
|
data() {
|
return {}
|
},
|
created() {
|
this.popup.childrenMsg = this
|
},
|
methods: {
|
open() {
|
if (this.duration === 0) return
|
clearTimeout(this.popuptimer)
|
this.popuptimer = setTimeout(() => {
|
this.popup.close()
|
}, this.duration)
|
},
|
close() {
|
clearTimeout(this.popuptimer)
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.uni-popup-message {
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
flex-direction: row;
|
background-color: #e1f3d8;
|
padding: 10px 15px;
|
border-color: #eee;
|
border-style: solid;
|
border-width: 1px;
|
}
|
.uni-popup-message-text {
|
font-size: 14px;
|
padding: 0;
|
}
|
|
.uni-popup__success {
|
background-color: #e1f3d8;
|
}
|
|
.uni-popup__success-text {
|
color: #67C23A;
|
}
|
|
.uni-popup__warn {
|
background-color: #faecd8;
|
}
|
|
.uni-popup__warn-text {
|
color: #E6A23C;
|
}
|
|
.uni-popup__error {
|
background-color: #fde2e2;
|
}
|
|
.uni-popup__error-text {
|
color: #F56C6C;
|
}
|
|
.uni-popup__info {
|
background-color: #F2F6FC;
|
}
|
|
.uni-popup__info-text {
|
color: #909399;
|
}
|
</style>
|
