表格中默认数据需要计算的时候先计算好再调用
//vue
<e-table
:other-height="ComponentStateTable.otherHeight"
/>
//js
data() {
// 计算高度值
const calculatedHeight = `${(window.innerHeight - 420) / 2}`;
return {
ComponentStateTable: {
// 调用算好的高度
otherHeight: calculatedHeight,
}
使用浏览器缓存来切换不同变量
场景：做了两个主题来切换使用，又不想保存在数据库，那就用浏览器缓存来保存状态。
image.png
网页的设置文件main.js
//-----设置主题
// 从 localStorage 获取 styleName 的值并设置为全局变量 window.styleName 的值
// 检查localStorage中是否存在styleName
const storedStyleName = localStorage.getItem('styleName');
// 如果不存在，则设置默认值theme1到window对象和localStorage中
if (!storedStyleName) {
window.styleName = 'theme1';
localStorage.setItem('styleName', 'theme1');
} else {
// 如果存在，则直接从localStorage中获取值赋给window对象
window.styleName = storedStyleName;
}
//这里是判断不同的主题变量使用不同的样式
if (window.styleName === 'theme1') {
import('@/themes/theme1/theme/index.css')
import('@/themes/theme1/mystyle.scss')
import('@/themes/theme1/variables.scss')
// alert(styleName)
} else if (window.styleName === 'theme2') {
import('@/themes/theme2/theme/index.css')
import('@/themes/theme2/mystyle.scss')
import('@/themes/theme2/variables.scss')
// alert(styleName)
}
主题页面.vue
<template>
<div >
<ul class="themeList">
<li v-for="(theme, index) in themes" :key="index" >
<div class="mystle">
<el-card class="box-card">
<div>
<p class="margin_b10 font_b">{{ theme.title }}</p>
<p><img :src="theme.image" style="width: 100%; height: auto;" /></p>
<p class="margin_t10 textcolor">{{ theme.industries }}</p>
<p class="margin_t10 textcolor">
<el-button
v-if="currentStyleName === theme.name"
type="success"
@click="changeStyleName(theme.name)"
>
<span>正在使用</span>
</el-button>
<el-button
v-else
type="primary"
@click="changeStyleName(theme.name)"
>
<span>立即使用</span>
</el-button>
</p>
</div>
</el-card>
</div>
</li>
</ul>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data() {
return {
//获取主题初始值
currentStyleName: localStorage.getItem('styleName'), // 初始值
//主题样式
themes: [
{
name: 'theme1',
title: '科技炫酷红',
image: require('@/img/img_style1.jpg'),
industries: '油田，媒体，政治，预警'
},
{
name: 'theme2',
title: '大气科技蓝',
image: require('@/img/img_style2.jpg'),
industries: '科技，电网，医疗，地铁'
},
// ...
],
}
},
mounted() {
// 从 localStorage 获取 styleName 的值并设置为全局变量 window.styleName 的值
window.styleName = localStorage.getItem('styleName') || 'theme1';
},
methods: {
changeStyleName(newStyle) {
// 更新window对象中的styleName属性
window.styleName = newStyle;
// 更新localStorage中的styleName值
localStorage.setItem('styleName', newStyle);
console.log('localStorage.styleName set to:', newStyle);
// 刷新页面
location.reload();
// alert(window.styleName);
}
}
}
</script>
自定义tabs
// html
//控制显示的按钮 ，其中按钮的样式自已优化
<el-button :class="stationShow?'station_close':'station_open'" @click="stationShow = true,stationShow2 = false"></el-button>
<el-button :class="stationShow2?'station_close':'station_open'" @click="stationShow2 = true,stationShow = false"></el-button>
//显示隐藏的容器
<div v-show="stationShow" ></div>
<div v-show="stationShow2" ></div>
// JS
data() {
return {
stationShow:true,//定义一个要显示的变量
stationShow2:false,//定义第二个tab要显示的变量
}
}
1、svg缩放拖拽组件
vue-svg-pan-zoom 组件
安装组件:
方式1、执行 npm install --save vue-svg-pan-zoom
方式2、执行 cnpm install vue-svg-pan-zoom
//页面代码
<template>
<SvgPanZoom
class=""
style="width: 100%;height:calc(100vh - 460px);"
:zoomEnabled="true"
:controlIconsEnabled="false"
:fit="false"
:center="true"
:customEventsHandler="eventsHandler"
>
<svg style="width: 100%;height: 180px" viewBox="0 0 707.8 195.12"></svg>
</SvgPanZoom>
</template>
<script>
//引用组件
import SvgPanZoom from 'vue-svg-pan-zoom'
export default {
components: { SvgPanZoom }//控件声明
};
</script>
2、返回上一页写法
//html
<el-button type="primary" @click="goOff()" >返回</el-button>
//js 返回上一页
methods: {
goOff(){
if (window.history.length <= 1) {
this.$router.push({path:'/'})
return false
} else {
this.$router.go(-1)
}
},
}
3、在JS中写一个全局变量，其它界面调用
例如main.js中定义了一个styleName 的全局变量
window.styleName = 'theme2'//window为设置为全局变量
if (styleName === 'theme1') {
import('@/themes/theme1/theme/index.css')
import('@/themes/theme1/mystyle.scss')
import('@/themes/theme1/variables.scss')
// alert(styleName)
} else if (styleName === 'theme2') {
import('@/themes/theme2/theme/index.css')
import('@/themes/theme2/mystyle.scss')
import('@/themes/theme2/variables.scss')
// alert(styleName)
}
video.vue界面调用styleName变量
<template>
<div class="">
<video width="100%" autoplay loop="loop" style="mix-blend-mode: lighten;">
<source :src="`@/themes/${styleName}/img/map.mp4`" type="video/mp4">
</video>
</div>
</template>
<script>
export default {
data() {
return {
styleName: ''
};
},
created() {
this.styleName = window.styleName;
}
}
</script>
