结构如下

代码如下:

<template>
<div id="page">
<div style="width: 100%" class="flex-container column"> <div class="item one" @click="clickChart('1')" style="transform: translate(-38.4%, -24.5%) scale(0.23)">
<Pie ref="pie"></Pie>
</div>
<div class="item two" @click="clickChart('2')" style="transform: translate(-38.4%, 14.5%) scale(0.23)">
<WorldMap ref="worldMap"></WorldMap>
</div>
<div class="item three" style="transform: translate(-18.6%, -28.5%) scale(0.33);height: 20%;width: 160%">
<Home></Home>
</div>
// active 很关键 别写漏掉了
<div class="item four active" @click="clickChart('4')" style="transform: translate(0%, -9.5%) scale(0.55);">
<Geo ref="geo"></Geo>
</div>
<div class="item five" @click="clickChart('5')" style="transform: translate(38.29%, -24.5%) scale(0.23);">
<Pile ref="pile"></Pile>
</div>
<div class="item six" @click="clickChart('6')" style="transform: translate(38.29%, 14.5%) scale(0.23);">
<Gauge></Gauge>
</div>
</div>
</div>
</template>
<script>
import Geo from '@/components/Geo'
import Pile from '@/components/Pile'
import Pie from '@/components/Pie'
import Gauge from '@/components/Gauge'
import WorldMap from '@/components/WorldMap'
import Home from '@/components/Home' export default { components: {
Geo,
Pie,
Pile,
Gauge,
WorldMap,
Home
}, data() {
return {iconDisplay: ''}
},
methods: {
clickChart(clickIndex) {
let activeItem = document.querySelector('.flex-container .active')
let activeIndex = activeItem.dataset.order
let clickItem = this.items[clickIndex - ]
if (activeIndex === clickIndex) {
return
}
activeItem.classList.remove('active')
clickItem.classList.add('active')
this._setStyle(clickItem, activeItem)
this.iconDisplay = clickIndex
}, _setStyle(el1, el2) {
let transform1 = el1.style.transform
let transform2 = el2.style.transform
el1.style.transform = transform2
el2.style.transform = transform1
}
}
}
</script>
<style scoped> .active {
height: %;
width: %;
margin-left: 10px;
line-height: 300px;
background-color: rgba(, , , 0.35) !important;
z-index: ;
} .item {
padding: 0px;
margin: 0px;
position: absolute;
transform: scale(0.33);
text-align: center;
transition: all .8s;
background: rgba(, , , 0.3);
} .flex-container.column {
position: relative;
height: %;
width: %;
overflow: hidden;
box-sizing: content-box;
} </style>

vue首页组件切换的更多相关文章

  1. vue动态组件切换(选项卡)

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

  2. vue实现组件切换的两种方式

    <!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset=&q ...

  3. vue.js(17)--vue的组件切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  5. Vue系列之 => 组件切换

    组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. AntDesign vue学习笔记(四)使用组件切换

    同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...

  7. 组件切换方式(Vue.js)

    这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  8. Vue学习之组件切换及父子组件小结(八)

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. Vue学习笔记【24】——Vue组件(组件切换)

    使用flag标识符结合v-if和v-else切换组件 页面结构:(缺点:只适用于两个组件间切换,不适合多个)  <div id="app">    <input ...

随机推荐

  1. 28、[源码]-AOP原理-@EnableAspectJAutoProxy

    28.[源码]-AOP原理-@EnableAspectJAutoProxy

  2. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  3. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

  4. 2D动画如何做出3D体积感

    https://cowlevel.net/article/1959026 <AngerForce>幕后故事 这篇文章是个老坑,最近有时间开始写,也是对之前项目的一个总结和记录吧. 本篇文章 ...

  5. while练习

    题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万之 ...

  6. MySQL服务器基准测试

    一.基准测试简介 1.什么是基准测试 数据库的基准测试是对数据库的性能指标进行定量的.可复现的.可对比的测试. 基准测试与压力测试 基准测试可以理解为针对系统的一种压力测试.但基准测试不关心业务逻辑, ...

  7. MySQL数据分析实战-朱元禄-专题视频课程

    MySQL数据分析实战-496人已学习 课程介绍        本套课程由知名数据分析博主jacky老师录制,深入浅出讲解MySQL数据分析,从实战角度出发,帮助大家制胜职场!课程收益    1.学会 ...

  8. Prometheus HA详解

    Prometheus 横向扩展 当Exporter或者采集信息需要越来越多时就会考虑高可用,高可用优点不会因为集群中某个节点down而导致Prometheus不可用,可以让算力下沉; 缺点是A-Pro ...

  9. 菜单栏伸缩(附jquery-1.12.1.js)

    Css: <style type="text/css"> .leftMenu { min-width:220px; width:268px; margin:40px a ...

  10. Exception in thread "main" java.util.ConcurrentModificationException解决方案

    我想判断一个集合里面有没有"world"这个元素,如果有,我就添加一个"javaee"元素, 当时的做法是: public class ListIterator ...