今天组装了一个 VueLoading 插件

刚开始接触 Vue, 还不是太熟悉, 所以没有打算过早去接触 Vue-Cli, 现在的 Vue 对于我自己的项目来说纯粹是替代 jQuery 来使用

效果图:

使用方法

1.先引入Vue 和 vue-loading 插件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./loading.js"></script>

2.创建实例, 并且在 data 中定义 isLoading 属性

创建实例前先 use 插件, 插件名称 loadingPlugin

<script>
    Vue.use(loadingPlugin);
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                isLoading: false,
            }
        },
        methods: {
            isLoad() {
                this.isLoading = !this.isLoading;
            }
        }
    });
</script>

3.调用组件

<div id="app">
    <loading :is-loading="isLoading"></loading>
</div>

通过改变 isLoading 的值达到显示隐藏动画效果
插件 CSS 样式来至于互联网

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍​‌‌​​​‌​​‌‌​‌​‌‍​‌​​‌‌​‌‌​‌​‌‌​‍​​​​​​‌​​‌‌‌​‌‌‍​‌‌‌​‌‌‌​​‌‌‌​‌​‍​‌‌​​​‌​‌‌‌‌​​‌‍​‌‌​​​‌‌‌‌‌‌‌‌‌‍​‌‌​​​‌‌‌​‌​‌​‌‍‌‌​‌‌‌‌‌‍‌​‌​‌​​‌‍‌​​​‌​‌​‍‌​​‌‌​‌​‍‌​‌‌​​‌‌‍‌​​‌​​​​‍‌​​‌‌‌‌​‍‌​​‌‌​‌‌‍‌​​‌​‌‌​‍‌​​‌​​​‌‍‌​​‌‌​​​‍‌‌​‌‌‌‌‌‍​​‌‌‌​​​​‌​‌‌​‌‍​‌‌​​​‌​​​​‌​​‌‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​​​​‌‌‌‍‌​​‌​‌‌​‍‌​​‌‌‌‌​‍‌​​‌​​​​‍‌​​‌‌​‌‌‍‌​​‌‌‌‌​‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌​‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌‌​‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​​‌​​​‍‌​​​​‌‌‌‍‌​​‌‌​‌‌‍‌​​‌‌‌‌​‍‌​​​‌‌​​‍‌‌​‌​​​‌‍‌​​‌‌‌​​‍‌​​‌​​​​‍‌​​‌​​‌​‍‌​‌​​​‌‌‍‌‌​​‌​‌‌‍‌‌​​​‌‌‌‍‌‌​‌​​​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​‌​​‌​‍‌​​‌​​‌‌