zoukankan      html  css  js  c++  java
  • vue2和vue3插件的区别

    弹窗组件

    这个vue2和vue3是一样的

    <template>
        <div v-if="active" class="alert">
            <div class="alert-box">
                {{ text }}
            </div>
        </div>
    </template>
    <script>
    
    export default {
        data() {
            return {
                active: false,
                text: '',
                timer: null
            }
        },
        methods: {
            info(text) {
                console.log(this);
                this.text = text;
                this.active = true;
                if (this.timer) {
                    clearTimeout(this.timer);
                    this.timer = null;
                }
                this.timer = setTimeout(() => {
                    this.active = false;
                }, 2000);
            }
        }
    }
    </script>
    <style lang="less">
    .alert {
        position: fixed;
        z-index: 9;
        top: 20px;
        left: 0;
        right: 0;
        margin: auto;
         180px;
        padding: 10px 16px;
        border-radius: 2px;
        margin: auto;
        box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
            0 9px 28px 8px #0000000d;
        background-color: white;
        color: black;
        .icons {
            position: relative;
            top: 2px;
            margin-right: 6px;
        }
    }
    </style>
    

    将组件注册为全局插件--vue2

    import Alert from "./alert.vue";
    
    export default {
      install(Vue) {
        // 通过Vue.extend创建子类(注意是个构造类)
        const AlertCmp = Vue.extend(Alert);
        // 初始化这个子类
        const alertCmp = new AlertCmp();
        // 将其挂载到指定dom上,也可以不写默认挂载到body上
        const div = document.createElement("div");
        document.body.append(div);
        alertCmp.$mount(div);
     
        // 注册全局方法,方便使用
        Vue.prototype.$alert = {
          info: alertCmp.info
        };
      },
    };
    

    使用这个插件--vue2

    import Vue from 'vue'
    import App from './App.vue'
    import Alert from '../packages'
    
    Vue.config.productionTip = false;
    Vue.use(Alert);
    
    const app = new Vue({
      render: h => h(App)
    }).$mount('#app')
    

    以下是vue3版本的操作,
    我们来对比下

    将组件注册为全局插件--vue3

    import { createApp } from 'vue'
    import Alert from "./alert.vue";
    
    export default {
      install(app) {
        // 通过createApp创建子类实例 并挂载
        const div = document.createElement("div");
        document.body.append(div);
        const alertApp = createApp(Alert).mount(div)
    
        // 注册全局方法,方便使用
        app.config.globalProperties.$alert = {
          info: alertApp.info
        };
      }
    };
    

    使用这个插件--vue3

    import { createApp } from 'vue'
    import App from './App.vue'
    import alertGoodVue3 from '../packages'
    
    const app = createApp(App).use(alertGoodVue3).mount('#app')
    
  • 相关阅读:
    LeetCode 81 Search in Rotated Sorted Array II(循环有序数组中的查找问题)
    LeetCode 80 Remove Duplicates from Sorted Array II(移除数组中出现两次以上的元素)
    LeetCode 79 Word Search(单词查找)
    LeetCode 78 Subsets (所有子集)
    LeetCode 77 Combinations(排列组合)
    LeetCode 50 Pow(x, n) (实现幂运算)
    LeetCode 49 Group Anagrams(字符串分组)
    LeetCode 48 Rotate Image(2D图像旋转问题)
    LeetCode 47 Permutations II(全排列)
    LeetCode 46 Permutations(全排列问题)
  • 原文地址:https://www.cnblogs.com/dshvv/p/15693499.html
Copyright © 2011-2022 走看看