MENU

今天组装了一个 VueLoading 插件

2021 年 02 月 01 日 • 阅读: 777 • 前端

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

效果图:

vue-loading

使用方法

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

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 样式来至于互联网

作者:王小大
出处:http://wxdas.com/48.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
添加新评论

已有 2 条评论
  1. 大佬,出个浏览器consle 教程呗!

    1. @Have什么东西? console ?@(疑问)