vue自定义属性directives制作Loading/extend制作loading

最新推荐文章于 2021-11-19 17:02:42 发布

丶久友

最新推荐文章于 2021-11-19 17:02:42 发布

阅读量144

点赞数

分类专栏： Vue从零到一

本文链接：https://blog.csdn.net/weixin_44614772/article/details/104887506

版权

Vue从零到一专栏收录该内容

14 篇文章 0 订阅

订阅专栏

全局的

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谷歌炸了</title>
</head>

<body>
    <div id="app">
        <div v-loading="isLoading">
            <div>{{message}}</div>
            <button @click="update">更新</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 注册一个全局loading的自定义指令
        Vue.directive('loading', {
            update(el, binding, vnode) {
                console.log(el, binding, vnode)
                if (binding.value) {
                    const div = document.createElement('div');
                    div.innerText = "加载中...",
                        div.setAttribute('id', 'loading');
                    div.style.position = 'fixed';
                    div.style.left = 0;
                    div.style.right = 0;
                    div.style.width = '100%';
                    div.style.height = "100%";
                    div.style.display = 'flex';
                    div.style.justifyContent = 'center';
                    div.style.alignItems = "center";
                    div.style.color = "white";
                    div.style.background = "rgba(0,0,0,0.7)";
                    document.body.append(div);
                } else {
                    document.body.removeChild(document.getElementById('loading'))
                }
            }
        })
        
        new Vue({
            el: "#app",
            data: {
                isLoading: false,
                message: ''
            },
            methods: {
                update() {
                    this.isLoading = true;
                    setTimeout(() => {
                        this.message = "更新完成！";
                        this.isLoading = false;
                    }, 3000);
                }
            }
        })
    </script>
</body>

</html>

组件内部的

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-loading="isLoading">
            <div>{{message}}</div>
            <button @click="update">更新</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                isLoading: false,
                message: ''
            },
            methods: {
                update() {
                    this.isLoading = true;
                    setTimeout(() => {
                        this.message = "更新完成！";
                        this.isLoading = false;
                    }, 3000);
                }
            },
            //组件内部的
            directives: {
                loading: {
                    update(el, binding, vnode) {
                        console.log(el, binding, vnode)
                        if (binding.value) {
                            const div = document.createElement('div');
                            div.innerText = "加载中...",
                                div.setAttribute('id', 'loading');
                            div.style.position = 'fixed';
                            div.style.left = 0;
                            div.style.right = 0;
                            div.style.bottom = 0;
                            div.style.width = '100%';
                            div.style.height = "100%";
                            div.style.display = 'flex';
                            div.style.justifyContent = 'center';
                            div.style.alignItems = "center";
                            div.style.color = "white";
                            div.style.background = "rgba(0,0,0,0.7)";
                            document.body.append(div);
                        } else {
                            document.body.removeChild(document.getElementById('loading'))
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

extend制作loading

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谷歌炸了</title>
    <style>
        #loading-wrapper{
            position: fixed;
            top:0;
            left:0;
            right:0;
            display: flex;
            justify-content: center;
            align-items: center;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.7);
            color:#fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showLoading">显示Loading</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 先通过Vue.extend创建了一个组件
        const LoadingComponent = Vue.extend({
            template: '<div id="loading-wrapper">{{msg}}</div>',
            props: {
                msg: {
                    type: String,
                    default: 'loading...'
                }
            }
            //组件的名称
        }, 'LoadingComponent')
        function loading(msg) {
            console.log(msg)
            const div = document.createElement('div');
            div.setAttribute('id', 'loading-wrapper');
            document.body.append(div);
            // 关键点、自己实例化了一个对象
            new LoadingComponent({
                props: {
                    msg: {
                        type: String,
                        default: msg
                    }
                }
                // 把自己实例化的组件挂载到刚刚创建的div元素上
            }).$mount('#loading-wrapper')
            return ()=>{
                document.body.removeChild(document.getElementById('loading-wrapper'))
            }
        }
        Vue.prototype.$loading=loading
        new Vue({
            el: "#app",
            data: {
                isLoading: false,
                message: ''
            },
            methods: {
                showLoading() {
                    const hide = this.$loading('正在加载中...');
                        setTimeout(() => {
                            hide();
                        }, 100)
                }
            }
        })
    </script>
</body>

</html>

将上面的代码封装成插件

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谷歌炸了</title>
    <style>
        #loading-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showLoading">显示Loading</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const loadingPlugin = {
            install: function (vm) {
                // 先通过Vue.extend创建了一个组件
                const LoadingComponent = Vue.extend({
                    template: '<div id="loading-wrapper">{{msg}}</div>',
                    props: {
                        msg: {
                            type: String,
                            default: 'loading...'
                        }
                    }
                    //组件的名称
                }, 'LoadingComponent')
                function loading(msg) {
                    console.log(msg)
                    const div = document.createElement('div');
                    div.setAttribute('id', 'loading-wrapper');
                    document.body.append(div);
                    // 关键点、自己实例化了一个对象
                    new LoadingComponent({
                        props: {
                            msg: {
                                type: String,
                                default: msg
                            }
                        }
                        // 把自己实例化的组件挂载到刚刚创建的div元素上
                    }).$mount('#loading-wrapper')
                    return ()=>{
                        document.body.removeChild(document.getElementById('loading-wrapper'))
                    }
                }
                vm.prototype.$loading=loading
            }
        }
        Vue.use(loadingPlugin)
        new Vue({
            el: "#app",
            data: {
                isLoading: false,
                message: ''
            },
            methods: {
                showLoading() {
                    const hide = this.$loading('正在加载中...');
                    setTimeout(() => {
                        hide();
                    }, 1000)
                }
            }
        })
    </script>
</body>

</html>

丶久友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义属性directives制作Loading/extend制作loading

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫