1.全局组件的目录

2.loading/index.js


import LoadingComp from './Loaiding'
const compName=LoadingComp.name //获取组件的名字 当做全局组件名字使用 const loading = {
  //Vue.use()方法就会自动执行install
 
  install(Vue) { 
    Vue.component(compName, LoadingComp)
  } }
export default loading

3.loading/Loading.vue

<template>
<div>
<h3>{{loadingMessage}}</h3>
<h3>{{aa}}</h3>
</div>
</template>
<script>
export default {
name: "Loading",
props: {
aa: {
type: String,
}
},
data() {
return {
loadingMessage: "loading..."
};
},
methods: {}, };
</script>
<style lang="scss" scoped>
</style>

4.main.js全局注册

import Loading from './components/globalComponents/loading/index'
Vue.use(Loading)

5.使用

<template>
<div>
<loading></loading> //无需注册 直接使用
</div>
</template>

批量导入多个自定义全局组件

index.js文件(上面globalComponents下面统一新建一个index.js文件)

import loading from './loading'
import mySelect from './myselect' export default {
loading,
mySelect
}
//main.js 批量导入全局自定义组件
import globalComponents from './components/globalComponents'
for (let key in globalComponents) {
Vue.use(globalComponents[key])
}

自定义全局TarBar组件

<!-- TabBar.vue-->
<template>
<div
class="tab"
v-if="defaultTarBar.textList.length!==0"
:style="{width:defaultTarBar.textList.length*45+'px'}"
>
<span
v-for="(item, index) in defaultTarBar.textList"
:key="index"
:class="[defaultTarBar.active===index?'active':'']"
@click="tabClick(index,item)"
>{{item}}</span>
</div>
</template>
<script>
export default {
name: "TabBar",
props: {
tabBar: {
type: Object,
required: true
}
},
data() {
return {
defaultTarBar: {
textList: [],
active: 0
}
};
},
methods: {
initDefaultTarBar() {
this.defaultTarBar={...this.defaultTarBar,...this.tabBar} },
tabClick(index, item) {
// console.log(index, item);
this.defaultTarBar.active = index;
this.tabBar.active = index;
}
},
created() {
this.initDefaultTarBar();
}
};
</script>
<style lang="less" scoped>
.tab {
display: flex;
flex-flow: nowrap row;
justify-content: space-between;
align-items: center;
// width: 100px;
background: #1f4b74;
overflow: hidden;
border-radius: 30px;
cursor: pointer;
text-align: center;
position: absolute;
right: 0;
top: 0; span {
flex: 1; //平分
color: #5addff;
} .active {
background: #5addff;
color: #070931;
}
}
</style>
//index.js
import TabBar from './TabBar'
const compName = TabBar.name //获取组件的名字 当做全局组件名字使用
console.log("compName", compName)
const tabBar = {
//Vue.use()方法就会自动执行install install(Vue) {
Vue.component(compName, TabBar)
} }
export default tabBar

使用tarbar.vue

自定义Swiper全局组件

<!--1Swiper使用与两组不同的数据,点击切换不同的数据源 但是两组数据的展示效果是一样的。
2.另外也是将一个很长的数据list[],切了segment段,分列一起滚动。
3. 下载安装 vue-seamless-scroll 单文件引用
-->
<template>
<div class="container" v-if="computedListData.length!==0">
<div v-for="( segmentList,index) in computedListData" :key="index">
<scroll
:data="segmentList"
:class-option="defaultSwiper.optionSetting"
class="seamless-warp"
>
<ul class="item">
<li class="li" v-for="item in segmentList" :key="item">{{item}}</li>
</ul>
</scroll>
</div>
</div>
</template>
<script>
// import vueSeamless from "vue-seamless-scroll"; import serviceCompany from "@/data/cityCell2-1/serviceCompany"; //对接情况 单位
import service from "@/data/cityCell2-1/service"; //对接情况 服务 let {
totalCount: serviceCompanyTotalCount,
list: serviceCompanyList
} = serviceCompany.data;
let { totalCount: serviceTotalCount, list: serviceList } = service.data; import scroll from "vue-seamless-scroll"; //导入组件 export default {
name: "Swiper",
props: {
swiper: {
type: Object
}
},
components: {
scroll
},
data() {
return {
serviceCompanyList: serviceCompanyList, //公司(单位)列表 15
serviceList: serviceList, //服务列表 40个
defaultSwiper: {
optionSetting: {
step: 0.4, // 数值越大速度滚动越快 limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length hoverStop: false, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
},
segment: 4,
active: 0 //配合tarbar切换的
}
};
},
computed: {
computedListData() {
const obj = {
0: this._segmentArr(
this.serviceCompanyList,
this.defaultSwiper.segment
),
1: this._segmentArr(this.serviceList, this.defaultSwiper.segment)
};
return obj[this.defaultSwiper.active];
}
},
methods: {
initDefaultSwiper() {
this.defaultSwiper = { ...this.defaultSwiper, ...this.swiper };
}
},
created() {
this.initDefaultSwiper();
},
watch: {
"swiper.active": {
handler(newVal) {
this.defaultSwiper.active = newVal;
}
}
}
};
</script>
<style lang="less" scoped>
.container {
display: flex;
flex-flow: nowrap row;
justify-content: space-between;
align-items: flex-start;
padding: 0.9rem 0.2rem 0.3rem 0.2rem; .seamless-warp {
height: 87%;
overflow: hidden;
.item {
text-align: left;
.li {
padding-left: 10px;
font-size: 14px;
margin-bottom: 0.2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative; &:before {
content: "";
width: 4px;
height: 4px;
background: rgba(90, 221, 255, 0.3);
position: absolute;
top: 9px;
left: 0;
}
}
}
}
}
</style>
//index.js
import Swiper from './Swiper'
const compName = Swiper.name //获取组件的名字 当做全局组件名字使用
const swiper = {
//Vue.use()方法就会自动执行install install(Vue) {
Vue.component(compName, Swiper)
} }
export default swiper

use

07vue 自定义全局组件 通用流程的更多相关文章

  1. vue2 自定义全局组件(Loading加载效果)

    vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...

  2. Vuejs自定义全局组件--loading

    不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...

  3. 8svg 自定义全局组件

    0.https://www.npmjs.com/package/vue2-svg-icon 直接使用vue2-svg-icon插件 .如果不使用,就使用下面用法 注意:用阿里图标时候,最好都选择#ff ...

  4. vue自定义全局组件(自定义插件)

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...

  5. vue 自定义全局组件

  6. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  7. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  8. Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合

    Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...

  9. Vue 使用use、prototype自定义自己的全局组件

    使用Vue.use()写一个自己的全局组件. 目录如下: 然后在Loading.vue里面定义自己的组件模板 <template> <div v-if="loadFlag& ...

随机推荐

  1. Java 通过Jna调用dll路径问题

    调试阶段 C++ dll --> window/system32C# dll --> C:\Program Files\Java\jdk1.8.0_171\bin [jdk bin] 打包 ...

  2. IdentityServer4 (4) 静默刷新(Implicit)

    写在前面 1.源码(.Net Core 2.2) git地址:https://github.com/yizhaoxian/CoreIdentityServer4Demo.git 2.相关章节 2.1. ...

  3. 朴素贝叶斯算法java实现(多项式模型)

    网上有很多对朴素贝叶斯算法的说明的文章,在对算法实现前,参考了一下几篇文章: NLP系列(2)_用朴素贝叶斯进行文本分类(上) NLP系列(3)_用朴素贝叶斯进行文本分类(下) 带你搞懂朴素贝叶斯分类 ...

  4. .net 跨平台桌面程序 avalonia:从项目创建到打包部署linux-64系统deepin 或 ubuntu。

    介绍: 目前微软还没有跨平台桌面程序的开发框架.github上有一个团队开始自行研发跨平台桌面框架,其中一款叫avalonia.avalonia 采用 Xaml+C#,类似于wpf,可运行于.netf ...

  5. 深入了解Promise对象,写出优雅的回调代码,告别回调地狱

    深入浅出了解Promise 引言 正文 一.Promise简介 二.Promise的三种状态 三.函数then( ) 四.函数catch( ) 五.函数finally( ) 六.函数all( ) 七. ...

  6. ls-remote -h -t git://github.com/adobe-webplatform/eve.git 报错问题

    npm ERR! Error while executing:npm ERR! D:\开发工具\git\Git\cmd\git.EXE ls-remote -h -t git://github.com ...

  7. 关于Java中for循环的i++和++i区别

    我们应该都知道i++和++i的区别是: ++i是先执行 i = i +1 再使用 i 的值,而 i++ 是先使用 i 的值再执行 i = i + 1: for循环的执行顺序如下: for(a;b;c) ...

  8. 区块链入门到实战(23)之以太坊(Ethereum) – 虚拟机架构

    以太坊(Ethereum)网络中,定义了一组通用协议用于支持智能合约的运行,其核心便是以太坊(Ethereum)虚拟机. 下图解释了该架构: 开发人员使用Solidity等开发语言开发智能合约 源程序 ...

  9. GPU虚拟机创建时间深度优化

    ​桔妹导读:GPU虚拟机实例创建速度慢是公有云面临的普遍问题,由于通常情况下创建虚拟机属于低频操作而未引起业界的重视,实际生产中还是存在对GPU实例创建时间有苛刻要求的业务场景.本文将介绍滴滴云在解决 ...

  10. 服务应用突然宕机了?别怕,Dubbo 帮你自动搞定服务隔离!

    某日中午,午睡正香的时候,接到系统的报警电话,提示生产某物理机异常宕机了,目前该物理机已恢复,需要重启上面部署的应用. 这时瞬间没有了睡意,登上堡垒机,快速重启了应用,系统恢复正常.本想着继续午睡,但 ...