结构如下

代码如下:

<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. 如何获得div对象的绝对坐标

    <script>             function test() {                 var $div0 = $('#0');                 va ...

  2. SIGAI机器学习第七集 k近邻算法

    讲授K近邻思想,kNN的预测算法,距离函数,距离度量学习,kNN算法的实际应用. KNN是有监督机器学习算法,K-means是一个聚类算法,都依赖于距离函数.没有训练过程,只有预测过程. 大纲: k近 ...

  3. 【题解】求细胞数量-C++

    题目描述一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.(1<=m,n<=100)? 输入输出格式输入格 ...

  4. thinkphp5 大量数据批量插入数据库的解决办法

    对于数据量很小,怎么玩都是可以的. but!!! 如果有几十万或者百万级别的数据,该怎么处理,请往下面看

  5. C语言学习笔记11- 文件I/O

    C语言学习笔记11- 文件I/O  ..待编辑 文件操作(CRT.C++.WIN API.MFC)

  6. FOFA 批量采集url 图形化界面编写

    这是脚本 # coding:utf- import requests,re import time import sys import getopt import base64 guizhe='' s ...

  7. ROS indigo下Kinect v1的驱动安装与调试

    ROS indigo下Kinect v1的驱动安装与调试 本文简要叙述了在ROS indigo版本下Kinect v1的驱动安装与调试过程. 1. 实验环境 (1)硬件:  台式机和Kinect v1 ...

  8. legend3---lavarel常用操作代码2

    legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...

  9. .NET Standard

    A formal specification of the APIs that are common across .NET implementations What is .NET Standard ...

  10. [Oracle] 简单建表语句

    // 注意表名,字段名,索引名 尽量不要带引号 CREATE TABLE FIRSTTB    ( "ID" NUMBER(8,0) not null primary key, & ...