表格中默认数据需要计算的时候先计算好再调用

//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>

VUE实用的例子