47 vue-directive进阶用法 vue面试题

最新推荐文章于 2024-05-07 10:03:21 发布

weixin_50464014

最新推荐文章于 2024-05-07 10:03:21 发布

阅读量52

点赞数

分类专栏： javascript 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_50464014/article/details/120696614

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

vue-directive进阶实现loading

<body>
    <div id="root">
        <div v-loading="isloading">{{data}}</div>
        <button @click="update">更新</button>
    </div>
    <script>
        Vue.directive("loading",{
            update(el,binding,vnode){
                console.log(binding)//binding的value值就是isloading
                if(binding.value){
                    //让遮罩出现
                    const div=document.createElement("div")
                    div.setAttribute('id','loading')
                    div.innerHTML="加载中..."
                    div.style.position='absolute'
                    div.style.left=0
                    div.style.top=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,.7)'
                    document.body.append(div)
                }else{
                    document.body.removeChild(document.getElementById('loading'))
                }
            }
        })
        new Vue({
            el:"#root",
            data:function(){
                return{
                    data:'',
                    isloading:false
                }
            },
            methods:{
                update(){
                    this.isloading=true
                    setTimeout(()=>{
                        //遮罩消失
                        this.isLoading=false
                        //数据要出来
                        this.data='这是后端请求的数据'
                    },3000)
                }
            }
        })
    </script>
</body>

weixin_50464014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
47 vue-directive进阶用法 vue面试题

vue-directive进阶实现loading<body> <div id="root"> <div v-loading="isloading">{{data}}</div> <button @click="update">更新</button> </div> <script> Vue.directive("loading",{.
复制链接

扫一扫