精华内容
下载资源
问答
  • 2021-09-13 20:52:21

    封装插件:在 src/componets/index.js里定义插件
    src/main.js 里使用插件

    src/componets/index.js

    // 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
    // 这就是插件
    // vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
    // vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展
    
    import XtxSkeleton from './xtx-skeleton.vue'
    
    export default {
      install (app) {
        // 在app上进行扩展,app提供 component directive 函数
        // 如果要挂载原型 app.config.globalProperties 方式
        app.component(XtxSkeleton.name, XtxSkeleton)
      }
    }
    

    src/main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import './mock'
    +import XtxUI from './components/index.js'
    
    import 'normalize.css'
    import '@/assets/styles/common.less'
    +// 插件的使用,在main.js使用app.use(插件)
    +createApp(App).use(store).use(router).use(XtxUI).mount('#app')
    
    更多相关内容
  • Vue封装全局组件

    2022-03-07 16:49:44
    项目中肯定会常用的一些基础组件,比如弹窗,toast之类的,要是在每个页面去引入的话那也太麻烦了,还好vue提供了一个全局注册组件的api,即Vue.compoment。 在入口文件main.js里import需要的组件,使用Vue....

    项目中肯定会常用的一些基础组件,比如弹窗,toast之类的,要是在每个页面去引入的话那也太麻烦了,还好vue提供了一个全局注册组件的api,即Vue.compoment。

    在入口文件main.js里import需要的组件,使用Vue.compoment注册即可

    // src/main.js
    import model from '@/components/BaseModel'
    import toast from '@/components/BaseButton'
    
    Vue.component('BaseModel', BaseModel)
    Vue.component('BaseButton', BaseButton)
    
    // 省略其他...
    

    之后再任何页面直接< BaseModel>< /BaseModel>就可以使用了。但是,如果你的项目很多,封装的全局组件很多,这样一个个引入然后注册就有点麻烦了,为了好管理,最好还是使用动态注册。首先我们把所有的基础组件都放在一个Base的文件夹里面,在里面新建一index.js文件

    // components/base/index
    const components = require.context('./', false, /\.vue$/) // require.context获取指定目录下符合条件的文件,这里获取所有base目录下的组件
    components.keys().map(item => {
      Vue.components
    })
    export default Vue => {
      components.keys().map(item => {
        Vue.components(item, components(item).default)
      })
    }
    

    然后在main.js里代码如下:

    // src/main.js
    import components from '@/src/components/base'
    Vue.ues(components)
    
    展开全文
  • 主要为大家详细介绍了Vue封装组件全局注册并引用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • import App from "./App.vue"; import SubDialog from '@/components/sub.js' let instance: any = null; instance = createApp(App) instance.use(SubDialog) instance.mount(document.getElementById("app")} 在...

    在main.ts中

    import App from "./App.vue";
    import SubDialog from '@/components/sub.js'
    let instance: any = null;
    instance = createApp(App)
    instance.use(SubDialog)
    instance.mount(document.getElementById("app")}
    

    在components下的sub.js

    import SubDialog from './SubDialog.vue'
    import { createApp } from 'vue'
    
    let mountNode
    let createMount = (opts) => {
    	if(mountNode){//确保只存在一个弹框
    		document.body.removeChild(mountNode)
        	mountNode = null
    	}
      mountNode = document.createElement('div')
      document.body.appendChild(mountNode)
      const app = createApp(SubDialog, {
        ...opts,
         modelValue: true,
        remove() { //传入remove函数,组件内可移除dom 组件内通过props接收
          app.unmount(mountNode)
          document.body.removeChild(mountNode)
        }
      })
      return app.mount(mountNode)
    }
    function V3Popup(options = {}) {
      options.id = options.id || 'v3popup_' + 1 //唯一id 删除组件时用于定位
      let $inst = createMount(options)
      return $inst
    }
    V3Popup.install = app => {
      app.component('v3-popup', SubDialog)
      app.config.globalProperties.$subDialog = V3Popup
      // app.provide('subDialog', V3Popup)
    }
    export default V3Popup
    
    

    components下的SubDialog.vue

    <template>
      <!-- 封装弹框 -->
      <div>
        <el-dialog
          custom-class="subDialog"
          :title="dialogTitle"
          v-model="dialogPopVisible"
          :width="popupWidth"
          :before-close="onBeforeClose"
          :center="true"
        >
          <div>输入内容</div>
          <template #footer class="dialog-footer">
            footer
        </el-dialog>
      </div>
    </template>
    <script setup lang="ts">
    import { ref, computed, defineProps } from "vue";
    const props = defineProps({
      title: {
        type: String,
        default: "",
      },
      width: {
        type: String,
        default: "550px",
      },
      option: {
        type: Object,
        default: {
          //可传递其他值
        },
      },
      cancelClick: {
        type: Function,
        default: () => {},
      },
      saveClick: {
        type: Function,
        default: () => {},
      },
    });
    const dialogPopVisible = ref(true); // 窗体显示控制
    const popupWidth = computed(() => {
      return props.width || "550px";
    });
    const dialogTitle = computed(() => {
      return props.title || "标题";
    });
    const Cancel = () => {
      dialogPopVisible.value = false;
      props.cancelClick();
    };
    const Save = () => {
      dialogPopVisible.value = false;
      props.saveClick('传值');
    };
    const onBeforeClose = (done) => {
      done();
    };
    </script>
    
    <style lang="scss">
    .subDialog {
      &.el-dialog {
        z-index: 99;
        background-color: #ffffff;
        margin-top: 20% !important;
      }
      .el-dialog__header {
        width: 100%;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        padding: 0 25px;
        text-align: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }
      .el-dialog__headerbtn {
        font-size: 20px;
        width: 40px;
        height: 40px;
      }
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
      }
      .el-dialog__body {
        box-sizing: border-box;
        padding: 20px 25px;
      }
      .el-dialog__footer {
        text-align: right;
        height: 60px;
        line-height: 60px;
        padding: 0;
        margin-right: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
      }
    }
    </style>
    
    

    .vue中使用

    const { proxy }: any = getCurrentInstance();
    proxy.$subDialog({
        title: "title",
        width: "550px",
        option: {
    
        },
        cancelClick: () => {},
        saveClick: async (val) => {
          console.log(val)
        },
      });
    
    展开全文
  • vue2的组件封装 vue2封装组件是基于Vue.extend的封装 新建index.js和toast.vue文件 index.js入口文件 import toastComponent from './toast.vue' import Vue from 'vue' let instance; const toast = function...

    vue2的组件封装

    vue2封装组件是基于Vue.extend的封装

    新建index.jstoast.vue文件
    在这里插入图片描述
    index.js入口文件

    	
    import toastComponent from './toast.vue'
    import Vue from 'vue'
    let instance;
    const toast = function(text) {
      if(instance) {
        instance.text = text;
        instance.show()
        return
      }
      const toastFn = Vue.extend(toastComponent)
      instance = new toastFn({
        propsData:{
          text:text
        }
      })
      instance.$mount(document.createElement('div'))
      document.body.appendChild(instance.$el)
    }
    
    export default toast
    

    toast.vue组件内容

    <template>
      <div v-show="isshow" class="toast">{{ text }}</div>
    </template>
    
    <script>
    export default {
      props:{
        text:{
          type:String,
          default:""
        }
      },
      data() {
        return {
          isshow:false,
          timeid:null
        }
      },
      mounted() {
        this.show()
      },
      methods:{
        show() {
          this.isshow=true;
          clearTimeout(this.timeid);
          this.timeid = setTimeout(() => {
            this.isshow=false;
          }, 3000)
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .toast{
        position: fixed;
        width: 3.6rem;
        line-height: 0.6rem;
        text-align: center;
        left: 50%;
        bottom: 1rem;
        margin-left: -1.8rem;
        color: #ffffff;
        font-size: 0.28rem;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    </style>
    

    vue2的使用方法

    可以直接挂载到全局,每个页面的this可以直接用

    import toast from "@/component/toast"
    
    Vue.prototype.$toast= toast;
    

    也可以在每个页面需要的时候,再加在

    import toast from "@/component/toast"
    
    toast('弹窗')
    

    vue3的组件封装

    由于vue3取消了extend,所以如果想获取组件的$el需要换个写法

    index.js入口文件

    import toastComponent from "./toast.vue";
    import { createApp } from "vue";
    let instance;
    const toast = function(text) {
      if (instance) {
        instance.text = text;
        instance.show();
        return;
      }
      instance = createApp(toastComponent).mount(document.createElement("div"));
      instance.text = text;
      document.body.appendChild(instance.$el);
    };
    
    export default toast;
    

    toast.vue插件内容

    <template>
      <div v-show="isshow" class="toast">{{ text }}</div>
    </template>
    
    <script>
    import { toRefs, reactive } from "vue";
    export default {
      props: {
        text: {
          type: String,
          default: ""
        }
      },
      setup(props) {
        let state = reactive({
          text: props.text,
          isshow: true
        });
        let timeid = null;
    
        function show() {
          state.isshow = true;
          clearTimeout(timeid);
          timeid = setTimeout(() => {
            state.isshow = false;
          }, 3000);
        }
        show();
        return {
          ...toRefs(state),
          show
        };
      }
    };
    </script>
    
    <style lang="less" scoped>
    .toast {
      position: fixed;
      width: 360px;
      line-height: 60px;
      text-align: center;
      left: 50%;
      top: 100px;
      margin-left: -180px;
      color: #ffffff;
      font-size: 16px;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    </style>
    
    

    vue3的组件使用方法

    可以按需使用,跟vue2的使用方法一样

    也可以全局挂载

    const app = Vue.createApp({})
    
    app.config.globalProperties.toast = toast
    

    但这仅限于使用options API

    如果使用 Composition API

    官方还是推荐使用 provideinject 方式

    展开全文
  • 言归正传,今天我们来聊聊 VUE全局组件与局部组件。 2. 全局组件 2.1 不使用组件的写法 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({
  • vue项目中全局注册js文件 js文件便捷添加样式 vue项目中全局注册js文件 首先是创建一个js文件叫Toast.js export const Toast = { Toast1: () => { var p = document.createElement("div") p.innerHTML = "11" ...
  • vue全局封装组件

    2022-02-07 17:23:23
    1、在component文件夹下建文件夹 ----------> 建文件(index.vue) ...2、在index文件下,写全局组件代码 3、在main.js中全局挂载组件 4、在需要的页面直接使用全局组件 5、页面展示
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3 - 消息提示组件封装(全局)

    千次阅读 2021-08-24 08:44:39
    组件使用的方式不够便利,封装成工具函数方式。 显示消息提示时需要动画从上滑入且淡出。 定义组件: src/components/library/xtx-message.vue <template> <transition name="down"> <div class=...
  • 为什么要封装组件 封装组件是为了能够更加便捷、快速的进行业务功能的开发。组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中,我们难免会写很多类似的、重复的代码,有些相似的功能但涉及的字段有...
  • vue3 封装 toast组件

    2022-05-30 09:15:14
    vue3 setup语法糖封装 toast 组件
  • vue3封装全局loading

    2021-07-05 11:41:01
    在components文件夹中新建myLoad.vue组件 <template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div> </template> <script> export ...
  • vue3 注册全局组件(公用组件)

    千次阅读 2022-03-10 14:15:10
    vue3 注册全局组件
  • 例如组件使用频率非常高(table,Input,button,等)这些组件 几乎每个页面都在使用便可以封装全局组件 案例------我这儿封装一个Card组件想在任何地方去使用 <template> <div class="card"> &...
  • vue封装一个全局使用的组件
  • Vue.component('组件名', 组件对象) } } Vue.use(MyPlugin) vue3.0中是这样定义的: (main.js) const MyPlugin = { install(app){ app.component('组件名', 组件对象) } } app.use(MyPlugin) 区别:vue2...
  • vue 2 全局封装 loading 组件

    千次阅读 2022-03-12 14:39:07
    import Vue from 'vue' import loading from './loading.vue' // loading 样式 let $app = Vue.extend(loading) 在 vue 中注册loading组件 let $loading = new $app().$mount(document.createElement('div')) 创建 ...
  • Vue3封装全局Loading

    千次阅读 2021-06-05 09:41:53
    在components文件夹中新建myLoad.vue组件 <template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div> </template> <script> export ...
  • vue 全局弹窗组件封装

    2022-05-25 21:51:20
    vue 全局弹窗组件封装
  • Vue中封装公共组件,并且注册到全局,Vue封装全局组件
  • vue封装全局提示组件

    2021-05-15 15:39:48
    由于现有组件的提示框样式无法满足UI的要求,所以自己封装一个全局提示框, 效果如下 1.首先写一个vue组件 <template> <!-- 全局提示框 --> <transition > <div v-show="visible" class="myNotifyComponent"> ...
  • Vue3全局异步组件注册封装(超简单)
  • 1.loading组件export default {props: {title: {type: String,default: '正在载入...'}}}.fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to /* .fade-leave-active ...
  • Vue3/Vue2中全局组件的注册使用

    千次阅读 2021-08-17 19:28:32
    Vue全局组件的注册 我们经常会在利用Vue开发的项目中,多次重复使用某一段代码结构,这就需要我们把它封装成公共组件,注册在全局进行多次复用。 Vue 官方提供的常规方法 在Vue项目中src/components路径下补充...
  • date: 2017-12-03 10:40:49tags:背景上篇介绍了如何封装一个react全局组件,这篇介绍下vue如何封装一个全局组件。思路通过Vue.extend(options),使用基础 Vue 构造器,创建一个子类,再创建这个子类的实例,挂载到...
  • 目录结构popup/index.vue{{title}}{{content}}{{cancelText}}{{confirmText}}export default {name: 'index',data () {return {title: '提示',content: null,cancelText: '取消',confirmText: '确认',cancel: ...
  • 主要介绍了基于vue写一个全局Message组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用vue开发项目,有些UIvue使用install定义安装全局组件需要install和use这两个api...1.全局组件单例模式这里通过实现一个 Notify移动端消息提示组件和加载组件,来对组件的封装过程进行详述。实例一: Notify组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,433
精华内容 10,173
关键字:

vue3封装全局组件