20. Vue-element_template全屏和动态修改组件大小-Toy模板网

这篇具有很好参考价值的文章主要介绍了20. Vue-element_template全屏和动态修改组件大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

全屏和动态修改组件大小

直接从 vue-elemten-admin 项目复制过来即可。

1. 提供获取size和修改size的方法

#vim resources/src/store/modules/app.js
const state = {
 …………
size: localStorage.getItem('size') || 'medium',
}

const mutations = {
…………
SET_SIZE: (state, size) => {
 state.size = size
 localStorage.setItem('size', size)
}
}

const actions = {
…………
setSize({ commit }, size) {
 commit('SET_SIZE', size)
}
}

#vim resources/src/store/getters.js
const getters = {
 …………
size: state => state.app.size,
}
export default getters

2. 复制组件

1. 直接从 vue-elemten-admin 复制组件 components/Screenfull

/src/components/SizeSelect/index.vue

/src/views/redirect/index.vue

/src/icons/svg/size.svg

/src/components/Screenfull/index.vue

/src/icons/svg/exit-fullscreen.svg

/src/icons/svg/fullscreen.svg

复制router

/src/views/redirect/index.vue

修改 /src/router/index.js

{
 path: '/redirect',
 component: Layout,
 hidden: true,
 children: [
   {
     path: '/redirect/:path(.*)',
     component: () => import('@/views/redirect/index')
   }
 ]
},

修改main.js 初始默认size文章来源地址https://www.toymoban.com/news/detail-474706.html

Vue.use(ElementUI, {
size: localStorage.getItem('size') || 'medium',
i18n: (key, value) => i18n.t(key, value)
})

3. 放到导航栏

   <screenfull id="screenfull" class="right-menu-item hover-effect"/>

   <el-tooltip content="Global Size" effect="dark" placement="bottom">
     <size-select id="size-select" class="right-menu-item hover-effect"/>
   </el-tooltip>

import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'

export default {
components: {
 	…………
 	Screenfull,
 SizeSelect,
},
}

到了这里，关于20. Vue-element_template全屏和动态修改组件大小的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！