精华内容
下载资源
问答
  • vue 2 全局封装 loading 组件
    千次阅读
    2022-03-12 14:39:07

    注册组件

    main.js 引入 封装好的方法
    使用 Vue.use(loading) 注册组件

    书写封装方法

    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'))
    创建 loading 实例并挂载 vue 实例上
    document.body.appendChild($loading.$el)
    
    export default {
      install (vm) {
        vm.prototype.$loading = {
          show: (options) => {
            Object.keys(options).forEach(item => {
              $loading[item] = options[item]
            })
            $loading.isShow = true
          },
          hide: () => {
            $loading.isShow = false
          }
        }
      }
    }

    组件样式和方法

    <template lang='pug'>
      .loading(v-if='isShow')
        .loading-content
          img.img(width='24' height='24' src='./loading.gif')
          .text {{ text }}
    </template>
    
    <script>
    export default {
      data () {
        return {
          text: '加载中...',
          isShow: false
        }
      }
    }
    </script>
    <style lang='less' scoped>
    .loading {
      position: fixed;
      inset: 0;
      // background-color: rgba(0, 0, 0, .8);
      backdrop-filter: blur(5px);
      z-index: 1000;
      .loading-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        .text {
          margin-top: 10px;
          color: #666;
          line-height: 20px;
          font-size: 16px;
        }
      }
    }
    </style>

    使用

    调用 this.$loading.show() 方法使用
    调用 this.$loading.hide() 方法关闭
    更多相关内容
  • vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情。 每当我们需要修改的时候,只需维护那一个...
  • vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。 one—-全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:’ ...
  • vue全局封装组件

    2022-02-07 17:23:23
    1、在component文件夹下建文件夹 ----------> 建文件(index.vue) ...2、在index文件下,写全局组件代码 3、在main.js中全局挂载组件 4、在需要的页面直接使用全局组件 5、页面展示

    1、在component文件夹下建文件夹 ----------> 建文件(index.vue)

    2、在index文件下,写全局组件代码

    3、在main.js中全局挂载组件

    4、在需要的页面直接使用全局组件

     5、页面展示

     

    展开全文
  • 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组件封装共用的方法

    千次阅读 2020-12-29 07:47:32
    这里提供两种vue封装共用组件的方法方法一:main.js中importListItemfrom'./components/list.vue'//封装共用组件方法一Vue.component('ListItem',ListItem)方法二:新建vue文件的时候再建个相应的js文件。...

    这里提供两种vue封装共用组件的方法

    方法一:

    main.js中import ListItem from './components/list.vue'//封装共用组件方法一

    Vue.component('ListItem',ListItem)

    方法二:

    新建vue文件的时候再建个相应的js文件。

    component.jsimport child from './component.vue'

    export default child.install = function (Vue) {

    Vue.component(child.name,child)

    }

    main.js中import child from './components/component/component.js'//封装共用组件方法二

    Vue.use(child)

    通过上面的两种方法定义公共组件后都可以直接和这样调用组件了,无需在每个vue文件中important组件了。

    说说方法二吧根据官方文档提供的api

    vue使用install定义安装全局组件需要install和use这两个api来配合才能完成。我更喜欢第一种但是今天看了公司的代码认识到了第二种方法,也发现了vue提供了不少提高生产效率的api往后会继续深入去学习这些api。

    同时也解决了一个困惑很长时间的问题,element ui中的message这个组件不需要vue.use安装直接就能用,因为element源码中直接将这个组件赋值到vue的prototype上了,其他的组件都只export 暴露出install方法所以其他组件需要vue.use安装

    展开全文
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue封装全局组件

    2021-09-13 20:52:21
    // 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。 // 这就是插件 // vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展 // vue3.0插件...
  • 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 ...
  • 使用vue开发项目,有些UIvue使用install定义安装全局组件需要install和use这两个api...1.全局组件单例模式这里通过实现一个 Notify移动端消息提示组件和加载组件,来对组件封装过程进行详述。实例一: Notify组件...
  • 为了页面美观,请求接口的时候延迟没有数据,页面感觉狠卡顿,封装loading,请求接口成功后隐藏掉(我这是用的vant 组件根据自己情况进行改变)。 第一步: 建立loading.vue 加载中... [removed] export ...
  • 简介 Vue.use( plugin ):安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的... 添加全局方法或属性 Vue.myGlobalMethod = f
  • vue组件封装指南

    2020-12-29 07:47:32
    目录vue组件三要素props参数slot定制插槽event自定义事件基本用法在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 template 中写好 HTML 代码,一个简单的组件就完成了一个完整...
  • 主要介绍了基于vue写一个全局Message组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue封装全局提示组件

    2021-05-15 15:39:48
    首先写一个vue组件 <template> <!-- 全局提示框 --> <transition > <div v-show="visible" class="myNotifyComponent"> <div class="msg">{{message}}</div> </div> </transition> </template> <script> export ...
  • vue组件 - 封装使用

    2022-05-06 19:58:36
    * 封装思想: 把页面上 可重用的部分 封装组件 , 从而方便项目的开发和维护 2. 封装和使用 第一步 : 定义组件 例如: 定义一个名为MyCom的组件,并在App.vue中使用 (结构如下) 第二步 : 在 App.vue中 引入 ...
  • vue组件封装

    千次阅读 2022-04-05 18:03:53
    1.2 在main.js中引入 语法如下:import '组件对象'from 'xxx.vue文件路径' 1.3 组件注册 语法如下: Vue.component("组件名","组件对象"); 1.4 把组件名在需要设置的某xxx.vue文件中当标签使用 2. 局部注册-...
  • VUE全局组件封装与使用方法

    千次阅读 2019-08-23 16:47:30
    最近整理了一下vue的知识点,正好今天有些时间把VUE全局组件封装与使用方法写一下。 1.自定义组件 <template> <div class="breadcrumb"> 面包屑 <slot/> <!-- 插槽 --> </div...
  • vue全局组件封装与使用

    千次阅读 2019-03-28 10:27:42
    一、写好组件 <template> <button class="btn"> <slot/> <!-- 插槽 --> </button> </template> <script> export default { // 传入子组件的参数写到props props:...
  • 全局组件引用局部组件写法: //全局注册 Vue.component('hed',{ template:' bbbbb', components:{fot} //局部注册 }) 2.组件中的data要以函数的形式书写,为了组件多次引用时数据不会相互干扰(全局组件与局部组件...
  • 为什么要封装组件 封装组件是为了能够更加便捷、快速的进行业务功能的开发。组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中,我们难免会写很多类似的、重复的代码,有些相似的功能但涉及的字段有...
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 某些情况下,组件也可以...
  • 一段代码在项目中出现两次就开始考虑是否应该进行封装,出现三次就肯定要封装,大到一个页面,一个组件,小到一个function和一个css样式。 封装原则 以下将封装出来的通用组件叫做子组件,引用通用组件的界面叫做父...
  • vue2的组件封装 vue2封装组件是基于Vue.extend的封装 新建index.js和toast.vue文件 index.js入口文件 import toastComponent from './toast.vue' import Vue from 'vue' let instance; const toast = function...
  • date: 2017-12-03 10:40:49tags:背景上篇介绍了如何封装一个react全局组件,这篇介绍下vue如何封装一个全局组件。思路通过Vue.extend(options),使用基础 Vue 构造器,创建一个子类,再创建这个子类的实例,挂载到...
  • Vue全局弹框组件封装

    2021-10-15 11:05:42
    Vue全局弹框组件封装前言效果图弹框组件popup-dialog.jsmain.js引入popup-dialog.js需要使用的地方使用方法 前言 最近在项目中自己封装的一个记录一下 效果图 弹框组件 popup/PopupDialog.vue <template> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,867
精华内容 9,946
关键字:

vue 组件全局封装

友情链接: serial_tutorial_source.zip