标签：vue pac pen 官方 border use === out time
import Vue from ‘vue‘
export default (component, props) => {
const conCtor = Vue.extend(component)
const el = new conCtor({propsData: props}).$mount()
document.body.appendChild(el.$el)
conCtor.remove = () => {
document.body.removeChild(el.$el)
conCtor.$destroy()
}
return el
}
import Vue from ‘vue‘
export const create = (component, props) => {
const vm = new Vue({
render(h) {
return h(component, {props})
}
}).$mount()
document.body.appendChild(vm.$el)
vm.remove = () => {
document.body.removeChild(vm.$el)
vm.$destroy()
}
return vm.$children[0]
}
<template>
<transition name="notice">
<div class="notice-wrapper" v-if="isShow">
<div class="notice-content">
<h5 class="header">{{title}}</h5>
<div class="body">{{content}}</div>
</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
isShow: false
}
},
props: {
title: {
type: String,
default: ‘提示‘
},
content: {
type: String,
default: ‘‘
},
duration: {
type: Number,
default: 3000
}
},
mounted() {
this.isShow = true
},
created() {
if (this.duration === 0) return
this.timer = setTimeout(() => {
this.isShow = false
}, this.duration)
},
methods: {
hide() {
this.isShow = false
}
}
}
</script>
<style scoped lang="less">
.notice-wrapper {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: inherit;
&::after {
content: ‘‘;
position: absolute;
display: block;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #eee;
opacity: 0.1;
}
.notice-content {
position: relative;
box-sizing: border-box;
width: 80%;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
padding: 10px;
background: #1989fa;
color: #fff;
box-shadow: 0px 0px 2px 2px #ccc;
border-radius: 5px;
.header {
padding: 0 0 20px 0;
margin: 0;
font-size: 16px;
}
}
}
.notice-enter,
.notice-leave-to {
opacity: 0;
}
.notice-enter-active,
.notice-leave-active {
transition: opacity 0.5s;
}
</style>
import NoticeComponent from ‘./Notice.vue‘
import createComponent from ‘../utils/create-component.js‘
export default {
install(Vue) {
Vue.prototype.createNotice = (props) => createComponent(NoticeComponent, props)
},
success(props) {
props = Object.assign({title: ‘提示‘}, props)
return createComponent(NoticeComponent, props)
},
fail(props) {
props = Object.assign({title: ‘警告‘}, props)
return createComponent(NoticeComponent, props)
}
}
//mian.js 注册
import Notice from ‘../packages/notice‘
Vue.use(Notice)
//任意组件页面使用
this.createNotice({
title: ‘提示‘,
content: ‘服务器错误‘,
duration: 5000
})
使用方式2：快捷方式使用
import Notice from ‘../packages/notice‘
Notice.fail({content: ‘服务器错误‘})
Notice.success({
content: ‘操作成功‘,
duration: 5000
})
没有了！！！
标签：vue pac pen 官方 border use === out time
原文地址：https://www.cnblogs.com/heshuaiblog/p/13187000.html
