message.js
import Message from './message.vue'
export default {
install(Vue) {
const Profile = Vue.extend(Message)
// 弹出弹窗
Vue.prototype.$message = function(params) {
const instance = new Profile()
let timer = 500
for (const key in params) {
if (Object.hasOwnProperty.call(params, key)) {
const value = params[key]
instance[key] = value
if (key === 'timer') {
timer = value
}
}
}
instance.vm = instance.$mount()
setTimeout(() => {
document.body.appendChild(instance.vm.$el)
setTimeout(() => {
Vue.prototype.$closeMessage()
}, timer)
})
return instance
}
// 关闭弹窗
Vue.prototype.$closeMessage = function() {
const instance = new Profile()
instance.vm = instance.$mount()
const message = document.body.lastElementChild
if (!message) return
document.body.removeChild(message)
return instance
}
}
}
message.vue
<template>
<view class="message flex-center">
<view class="icon success" v-show="type==='success'" />
<view class="icon circle" v-show="type==='circle'" />
<view class="content">
{{message}}
</view>
</view>
</template>
<script>
export default {
name: 'Message',
props: {
message: {
type: String,
default: ''
},
timer: {
type: Number,
default: 1000
},
type: {
type: String,
default: ''
}
},
}
</script>
<style lang="scss" scoped>
.message {
padding: 25rpx 40rpx;
// height: 80rpx;
background: rgba(0, 0, 0, 0.80);
border-radius: 10rpx;
font-size: 30rpx;
color: #FFFFFF;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.icon {
width: 28rpx;
height: 28rpx;
background-color: #FFFFFF;
border-radius: 50%;
margin-right: 10rpx;
position: relative;
}
.success::before {
position: absolute;
content: " ";
width: 6rpx;
height: 12rpx;
transform: rotate(45deg);
border-right: 2rpx solid #333;
border-bottom: 2rpx solid #333;
top: 6rpx;
left: 10rpx;
}
.circle {
border-radius: 50%;
border: 2rpx solid #FFFFFF;
background-color: transparent;
border-left-color: transparent;
}
}
</style>