表格中默認數(shù)據(jù)需要計算的時候先計算好再調(diào)用
//vue
<e-table
:other-height="ComponentStateTable.otherHeight"
/>
//js
data() {
// 計算高度值
const calculatedHeight = `${(window.innerHeight - 420) / 2}`;
return {
ComponentStateTable: {
// 調(diào)用算好的高度
otherHeight: calculatedHeight,
}
使用瀏覽器緩存來切換不同變量
場景：做了兩個主題來切換使用知纷，又不想保存在數(shù)據(jù)庫咏窿，那就用瀏覽器緩存來保存狀態(tài)禁谦。
image.png
網(wǎng)頁的設(shè)置文件main.js
//-----設(shè)置主題
// 從 localStorage 獲取 styleName 的值并設(shè)置為全局變量 window.styleName 的值
// 檢查localStorage中是否存在styleName
const storedStyleName = localStorage.getItem('styleName');
// 如果不存在率寡，則設(shè)置默認值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: '油田虑绵，媒體，政治闽烙，預(yù)警'
},
{
name: 'theme2',
title: '大氣科技藍',
image: require('@/img/img_style2.jpg'),
industries: '科技捕发，電網(wǎng)，醫(yī)療很魂，地鐵'
},
// ...
],
}
},
mounted() {
// 從 localStorage 獲取 styleName 的值并設(shè)置為全局變量 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
//控制顯示的按鈕 扎酷，其中按鈕的樣式自已優(yōu)化
<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遏匆、執(zhí)行 npm install --save vue-svg-pan-zoom
方式2法挨、執(zhí)行 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中寫一個全局變量凡纳，其它界面調(diào)用
例如main.js中定義了一個styleName 的全局變量
window.styleName = 'theme2'//window為設(shè)置為全局變量
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界面調(diào)用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>
