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

最新推荐文章于 2024-05-27 12:41:44 发布

叶川飞流

最新推荐文章于 2024-05-27 12:41:44 发布

阅读量198

点赞数

分类专栏：前端js面试题集锦记录

本文链接：https://blog.csdn.net/weixin_41033048/article/details/116327858

版权

本文介绍了如何通过Vue.js的extend方法实现一个自定义的loading效果。通过分析需求，确定需要在Vue实例上添加一个属性，并创建相应的方法。文中提供了不带参数和带参数的实现方式，以及封装为Vue插件的解决方案。

摘要由CSDN通过智能技术生成

构建子组件Test

<!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>vueExtend</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
       <div id="root">
               <Test :msg="message" />
       </div>
       <script>
       			//Vue.extend返回一个构造函数
                const component = Vue.extend({
   
                        template:'<div>{
   {msg}}</div>',
                        props:{
   
                                msg:{
   
                                        type:String
                                }
                        }
                })
                Vue.component('Test',component) //根据源码，这里是挂载到全局上来的
                new Vue({
   
                        el:"#root",
                        data(){
   
                                return{
   
                                        message:'test component'
                                }
                        }
                })
       </script>
</body>
</html>

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:{

最低0.47元/天解锁文章

叶川飞流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二十九、【vue面试题】手写vue plugin实现loading效果（2021/5/1）

构建子组件Test<!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"&.
复制链接

扫一扫

专栏目录