点击上方蓝色字体，关注我们
这篇文章源于一个问题：
如何更改尺寸？
我看了只有一个回答，貌似答的也不对，下面说一下我的答案，其实是 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>总结知识点：
单页应用刷新页面
路径的处理
全局组件属性的控制
优惠码：7SSDNK (“实付满150减30”)
使用渠道：当当小程序或当当APP
使用时间：6月9日--6月20日
使用方法：
步骤一，挑选心仪的图书至购物车点击结算
步骤二，点击优惠券/码处
步骤三，输入优惠码7SSDNK (注意要大写)
