二十九、【vue面试题】手写vue plugin实现loading效果（2021/5/1）

ゝ一纸荒年。 2023-01-18 06:39 16阅读 0赞

> 构建子组件Test

> vue extend的进阶用法

*  需求希望可以自定义像

`this.$on this.$emit this.$set`这种方式实现一个loading

this.$loading( '正在加载....')

分析：

*  1.要想实现`this.$loading()` 那么必须是在vue的实例上增加一个属性也就是 `Vue.prototype.$loading`并且这个属性是一个方法
 *  2.定义这个方法

> 实现

<!DOCTYPE html>
    <html lang="en">
    
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>vueLoading</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
            <div id="root">
                    <button @click="showLoading">显示loading</button>
            </div>
            <script>
                    // vue.extend 可以返回一个构造函数
                    const LoadingComponent = Vue.extend({ 
                            template:'<div id="loading-wrapper">{ {msg}}</div>',
                            props:{ 
                                    msg:{ 
                                            type:String,
                                            default:'loading......'
                                    }
                            }
                    })
                    // 第二步执行这里的loading
                    function Loading(){ 
                            // 不知道怎么写 但是 我知道一定会返回一个函数
                            const div = document.createElement('div')
                            div.setAttribute('id','loading-wrapper')
                            document.body.append(div)
                            // 做的事情
                            // 第三部挂载，这一部分会把vue.extend里面的对象代码挂载到页面上
                            new LoadingComponent({ 
    
                            }).$mount("#loading-wrapper")
                            return ()=>{ 
                                    document.body.removeChild(document.getElementById("loading-wrapper"))
                            }
                    }
                    Vue.prototype.$loading = Loading
    
                    new Vue({ 
                            el:'#root',
                            methods:{ 
                                    showLoading(){ 
                                            // 需求 hide 是一个函数 然后调用这个方法 loading就消失
                                            // 第一步执行 this.$loading()
                                            const hide  = this.$loading()
                                            setTimeout(() => { 
                                                   hide() 
                                            }, 2000);
                                    }
                            }
                    })
            </script>
    </body>
    
    </html>

> 传参版本：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>vueLoading</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
            <div id="root">
                    <button @click="showLoading">显示loading</button>
            </div>
            <script>
                    // vue.extend 可以返回一个构造函数
                    const LoadingComponent = Vue.extend({ 
                            template:'<div id="loading-wrapper">{ {msg}}</div>',
                            props:{ 
                                    msg:{ 
                                            type:String,
                                            default:'loading......'
                                    }
                            }
                    })
                    // 第二步执行这里的loading
                    function Loading(msg){ 
                            // 不知道怎么写 但是 我知道一定会返回一个函数
                            const div = document.createElement('div')
                            div.setAttribute('id','loading-wrapper')
                            document.body.append(div)
                            // 做的事情
                            // 第三部挂载，这一部分会把vue.extend里面的对象代码挂载到页面上
                            new LoadingComponent({ 
                                    props:{ 
                                    msg:{ 
                                            type:String,
                                            default: msg
                                    }
                            }
                            }).$mount("#loading-wrapper")
                            return ()=>{ 
                                    document.body.removeChild(document.getElementById("loading-wrapper"))
                            }
                    }
                    Vue.prototype.$loading = Loading
    
                    new Vue({ 
                            el:'#root',
                            methods:{ 
                                    showLoading(){ 
                                            // 需求 hide 是一个函数 然后调用这个方法 loading就消失
                                            // 高级体现在 不仅仅只会vue里面的一些API
                                            // 第一步执行 this.$loading()
                                            const hide  = this.$loading('加载中.....')
                                            setTimeout(() => { 
                                                   hide() 
                                            }, 2000);
                                    }
                            }
                    })
            </script>
    </body>
    
    </html>

> vue封装插件版本

<!DOCTYPE html>
    <html lang="en">
    
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>vueLoading</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
            <div id="root">
                    <button @click="showLoading">显示loading</button>
            </div>
            <script>
                    const loadingPlugin = { 
                            install: function (vm) { 
                                    // vue.extend 可以返回一个构造函数
                                    const LoadingComponent = vm.extend({ 
                                            template: '<div id="loading-wrapper">{ {msg}}</div>',
                                            props: { 
                                                    msg: { 
                                                            type: String,
                                                            default: 'loading......'
                                                    }
                                            }
                                    })
                                    // 第二步执行这里的loading
                                    function Loading(msg) { 
                                            // 不知道怎么写 但是 我知道一定会返回一个函数
                                            const div = document.createElement('div')
                                            div.setAttribute('id', 'loading-wrapper')
                                            document.body.append(div)
                                            // 做的事情
                                            // 第三部挂载，这一部分会把vue.extend里面的对象代码挂载到页面上
                                            new LoadingComponent({ 
                                                    props: { 
                                                            msg: { 
                                                                    type: String,
                                                                    default: msg
                                                            }
                                                    }
                                            }).$mount("#loading-wrapper")
                                            return () => { 
                                                    document.body.removeChild(document.getElementById("loading-wrapper"))
                                            }
                                    }
                                    vm.prototype.$loading = Loading
                            }
                    }
    
                    Vue.use(loadingPlugin)
    
                    new Vue({ 
                            el: '#root',
                            methods: { 
                                    showLoading() { 
                                            // 需求 hide 是一个函数 然后调用这个方法 loading就消失
                                            // 高级体现在 不仅仅只会vue里面的一些API
                                            // 第一步执行 this.$loading()
                                            const hide = this.$loading('加载中.....')
                                            setTimeout(() => { 
                                                    hide()
                                            }, 2000);
                                    }
                            }
                    })
            </script>
    </body>
    
    </html>

> 通过源码分析又可修改为

<!DOCTYPE html>
    <html lang="en">
    
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>vueLoading</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
            <div id="root">
                    <button @click="showLoading">显示loading</button>
            </div>
            <script>
                    const loadingPlugin = function (vm) { 
                            // vue.extend 可以返回一个构造函数
                            const LoadingComponent = vm.extend({ 
                                    template: '<div id="loading-wrapper">{ {msg}}</div>',
                                    props: { 
                                            msg: { 
                                                    type: String,
                                                    default: 'loading......'
                                            }
                                    }
                            })
                            // 第二步执行这里的loading
                            function Loading(msg) { 
                                    // 不知道怎么写 但是 我知道一定会返回一个函数
                                    const div = document.createElement('div')
                                    div.setAttribute('id', 'loading-wrapper')
                                    document.body.append(div)
                                    // 做的事情
                                    // 第三部挂载，这一部分会把vue.extend里面的对象代码挂载到页面上
                                    new LoadingComponent({ 
                                            props: { 
                                                    msg: { 
                                                            type: String,
                                                            default: msg
                                                    }
                                            }
                                    }).$mount("#loading-wrapper")
                                    return () => { 
                                            document.body.removeChild(document.getElementById("loading-wrapper"))
                                    }
                            }
                            vm.prototype.$loading = Loading
                    }
    
                    Vue.use(loadingPlugin)
    
                    new Vue({ 
                            el: '#root',
                            methods: { 
                                    showLoading() { 
                                            // 需求 hide 是一个函数 然后调用这个方法 loading就消失
                                            // 高级体现在 不仅仅只会vue里面的一些API
                                            // 第一步执行 this.$loading()
                                            const hide = this.$loading('加载中.....')
                                            setTimeout(() => { 
                                                    hide()
                                            }, 2000);
                                    }
                            }
                    })
            </script>
    </body>
    
    </html>