表格中默認(rèn)數(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è)置默認(rèn)值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: '大氣科技藍(lán)',  
        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>