element 全局改变组件尺寸

Question

使用element时，如果要改变组件的尺寸大小，
1、可以在vue.use(element, {size: 'small'})初始化设置全局大小
2、也可以在使用<el-button size="small"></el-button>时单独设置

现在我有一个下拉列表，里面可以选择small,mini尺寸，动态全局改变所有页面的组件尺寸

目前我是在store里面设置一个值，然后在组件里如下类似使用：

<template>
 <el-button :size="size"></el-button>
</template>

size: state => state.size

但是这样，每使用一个组件，就要相应的写上:size="size"

有没有什么更好的解决方案？

Answer 1

说下 vue-element-admin 这个项目的实现方式：

入口文件：

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // 设置默认和刷新浏览器设置为你指定的大小
  locale: enLang, // 如果使用中文，无需设置，请删除
})

触发事件的按钮：

methods:{
    handleSetSize(size) {
      this.$ELEMENT.size = size  // 这一步很关键，这是 Element-UI 向 Vue 暴露的实例属性
      this.$store.dispatch('app/setSize', size)
      this.refreshView() // 主要为了及时当前页面生效，做了一个 replace
      this.$message({
        message: 'Switch Size Success',
        type: 'success',
      })
    },
    refreshView() {
      // In order to make the cached page re-rendered
      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)

      const { fullPath } = this.$route

      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath,
        })
      })
    },
}

那个 redirect 路由对应的文件：

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  },
}
</script>

是一个再 replace 回原来的路径方法。

Answer 2

自己加一层写个button组件

<template>
 <el-button :size="size" v-bind="$attrs" v-on="$listeners"></el-button>
</template>