Vueカスタムプラグイン
7820 ワード
個人はVueの上のいくつか総括を学んで、再びVueの公式apiを見て1つのloadingコンポーネントを書きました
プラグインは通常のvueコンポーネント+プロトタイプにマウントされます
プラグインは通常のvueコンポーネント+プロトタイプにマウントされます
export default {
data () {
return {
showFlag: false
}
},
created () {
},
methods: {
changeView (obj) {
if (obj) {
this.$nextTick(() => {
this.$refs['root'].style.height = obj.clientHeight + 'px'
this.$refs['root'].style.width = obj.clientWidth + 'px'
})
} else {
this.$nextTick(() => {
this.$refs['root'].style.height = window.innerHeight + 'px'
this.$refs['root'].style.width = window.innerWidth + 'px'
})
}
},
async show (obj = undefined) {
await this.changeView(obj)
this.showFlag = true
},
hide () {
this.showFlag = false
}
}
}
#loading-plugins
position absolute
top 0
left 0
display: flex
justify-content: center
align-items: center
z-index 999
background: rgba(255,255,255,.5)
.load-box
height: 50px
width: 80px
display :flex
justify-content: center
align-items: center
.load-circle
width: 30px
height: 30px
border-radius: 50%
border: 2px solid
border-color rgba(0,0,0,.8)
border-left-color transparent
animation: loading .8s linear infinite
@keyframes loading
from
transform: rotate(0deg)
to
transform: rotate(360deg)
loading component ， this.$loading.show/hide ？
import Loading from '@/components/general/loading'
export default {
/**
* install ，
* @param {Object} Vue - Vue
* @param {Object} [pluginOptions] -
*/
install (Vue, pluginOptions = {}) {
// " "
const VueLoading = Vue.extend(Loading)
let loading = null
function show (obj = undefined) {
return new Promise((resolve) => {
if (!loading) {
let ele = document.querySelector('body')
if (obj) {
ele = obj
obj.style.position = 'relative'
}
loading = new VueLoading()
loading.father = obj
loading.$mount()
loading.show(obj)
ele.appendChild(loading.$el)
resolve()
}
})
}
function hide () {
if (loading) {
loading.hide()
loading = null
}
}
let $load = {
show (obj) {
show(obj)
},
hide () {
hide()
}
}
Object.assign($load, loading)
Vue.prototype.$loading = $load // load Vue
}
}
loading.js install （ Vue.use ）
：
import VueLoading from '@/components/plugins/loading'
Vue.use(VueLoading)
main.js Vue.use()