vue - 大屏小屏缩放判断

1.store

const state = {
  stageWidth: "large"
};
const mutations = {
  CHANGE_WIDTH: (state, str) => {
    state.stageWidth = str;
  }
};
const actions = {
  changeWidth({ commit }, data) {
    commit("CHANGE_WIDTH", data);
  }
};

//getters.js
const getters = {
  stageWidth: state => state.app.stageWidth
};

2.App.vue

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            fullWidth: document.documentElement.clientWidth
        };
    },
    name: 'App',
    computed: {
        ...mapGetters(['stageWidth'])
    },
    methods: {
        handleResize() {
            let that = this;
            that.fullWidth = document.documentElement.clientWidth;
            if (that.fullWidth < 768 && that.stageWidth == 'large') {
                that.$store.dispatch('app/changeWidth', 'small');
            }
            if (that.fullWidth > 768 && that.stageWidth == 'small') {
                that.$store.dispatch('app/changeWidth', 'large');
            }
        }
    },
    created() {
        if (this.fullWidth < 768 && this.stageWidth == 'large') {
            this.$store.dispatch('app/changeWidth', 'small');
        }
        if (this.fullWidth > 768 && this.stageWidth == 'small') {
            this.$store.dispatch('app/changeWidth', 'large');
        }
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy: function() {
        window.removeEventListener('resize', this.handleResize);
    }
};
</script>

3.使用

 <el-table-column label="操作" align="center" header-align="center" width="100" :fixed="stageWidth == 'small' ? false : 'right'">
          <template slot-scope="scope">
               <el-button type="text" size="mini" @click="jumpToEdit(scope.row.pcid)">编辑</el-button>
               <el-button type="text" size="mini"  @click="deleteProcess(scope.row)">删除</el-button>
          </template>
</el-table-column>