popover-vue2

    npm install popover-vue2

    yarn add popover-vue2

Toast

    import Vue from 'vue'
    import App from './App.vue'
    
    // first way:
    import PopoverVue2 from 'popover-vue2'
    
    Vue.use(PopoverVue2) // install global plugins
    
    // second way:
    // import {ToastPlugin} from 'popover-vue2'
    // Vue.use(ToastPlugin)
    
    // third way:
    // import ToastPlugin from 'popover-vue2/dist/es/toast'
    // Vue.use(ToastPlugin)
    
    Vue.config.productionTip = false
    
    new Vue({
        render: h => h(App),
    }).$mount('#app')


    // options
    const options = {} // default property: {duration: 2000, bg: '#ffffff', color: 'rgba(0, 0, 0, .88)', size: '14px', radius: '4px', position: 'center', className: ''}
    // position has two values:  'center' 、  'top'
    const hide = this.$toast.show('Words', options)
    
    // hide self
    hide()
    
    // destroy all
    this.$toast.destroy()

<template>
    <div id="app">
        <button @click="$toast.show('toast', { bg: 'skyblue', color: '#fff' })">Click</button>
    </div>
</template>

Directive: v-loading

import Vue from 'vue'
import App from './App.vue'

// first way:
import PopoverVue2 from 'popover-vue2' 
Vue.use(PopoverVue2) // install global plugins

// second way:
// import {LoadingPlugin} from 'popover-vue2'
// Vue.use(LoadingPlugin, {component: true}) // component true => will add global Loading component , false => different from true

// third way:
// import LoadingPlugin from 'popover-vue2/dist/es/loading'
// Vue.use(LoadingPlugin, {component: true}) // component true => will add global component , false => different from true

<template>
    <div id="app">
        <button @click="show">Click</button>
        <!--  recommend    you can use v-loading directive to use manage your status-->
        <div style="width: 100px; height: 100px; border: 1px solid blue;" v-loading="visible"></div>

        <!--     you can import Loading component,  or use the second/third way to add global component for use Loading -->
        <!--    <Loading :visible="visible" color="red" :size="60" bg="skyblue" :duration="600">custom loading</Loading>-->
    </div>
</template>

<script>
// import { Loading } from 'popover-vue2'  // you can use Loading component by the way
export default {
    name: 'App',
    components: {
        // Loading
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        show() {
            this.$toast.show('loading', { bg: 'skyblue', color: '#fff', duration: 4000, position: 'top' })
            this.visible = !this.visible

            // setTimeout(() => this.visible = false, 2000)
        }
    }
}
</script>

<style scoped>
</style>

Directive: v-lazy

import Vue from 'vue'
import App from './App.vue'

// first way:
import PopoverVue2 from 'popover-vue2' 
Vue.use(PopoverVue2) // install global plugins


// // second way:
// import {LazyPlugin} from 'popover-vue2'
// Vue.use(LazyPlugin)

// // third way:
// import LazyPlugin from 'popover-vue2/dist/es/lazy'
// Vue.use(LazyPlugin)

<template>
    <div id="app">
        <button @click="show">Click</button>
        <div style="width: 100px; height: 100px; border: 1px solid blue;" v-loading="visible"></div>
        <!-- <Loading :visible="visible" color="red" :size="60" bg="skyblue" :duration="600"></Loading> -->

        <div style="height: 300px;"><img v-lazy="'/1.png'" alt=""></div>
        <div style="height: 300px;"><img v-lazy="'/2.png'" alt=""></div>
        <div style="height: 300px;"><img v-lazy="'/3.png'" alt=""></div>
        <div style="height: 300px;"><img v-lazy="'/4.png'" alt=""></div>
        <div style="height: 300px;"><img v-lazy="'/5.png'" alt=""></div>
        <div style="height: 300px;"><img v-lazy="'/6.png'" alt=""></div>
        <div style="height: 300px;"><img v-lazy="'/7.png'" alt=""></div>
    </div>
</template>
<script>
import { Loading } from 'popover-vue2'

export default {
    name: 'App',
    components: {
        Loading
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        show() {
            this.$toast.show('loading', { bg: 'skyblue', color: '#fff', duration: 4000, position: 'top' })
            this.visible = !this.visible

            // setTimeout(() => this.visible = false, 2000)
        }
    }
}
</script>

<style scoped></style>