如何动态更改Element-UI组件尺寸以及源码分析

前端黑板报

发布于 2020-06-16 07:11:03

4.5K00

代码可运行

文章被收录于专栏：前端黑板报前端黑板报

运行总次数：0

代码可运行

这篇文章源于一个问题：

如何更改尺寸？

我看了只有一个回答，貌似答的也不对，下面说一下我的答案，其实是 vue-element-admin 的实现方案：

在 Vue 项目入口文件中：

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) // 这里就是把尺寸写入 cookie ：Cookies.set('size', size)，供页面刷新时使用
      this.refreshView() // 主要为了及时当前页面生效，这个刷新单页应用的方案值得学习，下面也会分析源码
      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
      // 这里使用 nextTick 是为了确保上面的 dispatch 里 promise 异步清除的任务完成
      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath,
        })
      })
    },
}

redirect 路由定义以及对应的组件：

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)', // 这里是重点,见下图路由前后对比
        component: () => import('@/views/backup/redirect/index'),
      },
    ],
  },

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

ELement-UI 里组件是如何使用 $ELEMENT.size 的？

以 Button 组件为例（只展示关键代码）：

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '', // 使用的地方
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'ElButton',
    props: {
      size: String,
    },
    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      // 计算的地方
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; // 就是这里依赖使用了 this.$ELEMENT.size 使用
      },
    },
  };
</script>