144 lines
2.7 KiB
Vue
144 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="uni-popup-message">
|
|||
|
|
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
|||
|
|
<slot>
|
|||
|
|
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import popup from '../uni-popup/popup.js'
|
|||
|
|
/**
|
|||
|
|
* 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',
|
|||
|
|
mixins:[popup],
|
|||
|
|
props: {
|
|||
|
|
/**
|
|||
|
|
* 主题 success/warning/info/error 默认 success
|
|||
|
|
*/
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'success'
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 消息文字
|
|||
|
|
*/
|
|||
|
|
message: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 显示时间，设置为 0 则不会自动关闭
|
|||
|
|
*/
|
|||
|
|
duration: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 3000
|
|||
|
|
},
|
|||
|
|
maskShow:{
|
|||
|
|
type:Boolean,
|
|||
|
|
default:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.popup.maskShow = this.maskShow
|
|||
|
|
this.popup.messageChild = this
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
timerClose(){
|
|||
|
|
if(this.duration === 0) return
|
|||
|
|
clearTimeout(this.timer)
|
|||
|
|
this.timer = setTimeout(()=>{
|
|||
|
|
this.popup.close()
|
|||
|
|
},this.duration)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" >
|
|||
|
|
.uni-popup-message {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup-message__box {
|
|||
|
|
background-color: #e1f3d8;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border-color: #eee;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-width: 1px;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media screen and (min-width: 500px) {
|
|||
|
|
.fixforpc-width {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
flex: none;
|
|||
|
|
min-width: 380px;
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
max-width: 50%;
|
|||
|
|
/* #endif */
|
|||
|
|
/* #ifdef APP-NVUE */
|
|||
|
|
max-width: 500px;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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>
|