ec763bac35
Former-commit-id: dd2d557166a19f7b545c26fdc51c76be83330138 [formerly dd2d557166a19f7b545c26fdc51c76be83330138 [formerly dd2d557166a19f7b545c26fdc51c76be83330138 [formerly dd2d557166a19f7b545c26fdc51c76be83330138 [formerly 3b6d7a103deeba0e761cc0222d9e4903ee3645b5 [formerly 2007a97138b1e130d62374de5e6d951c0f528fb2]]]]] Former-commit-id: efe1182af59d5104ddf3bddac8d3281790b467b6 Former-commit-id: dbf4c2a4906b13246bbd7c9797179c0f9bae2778 Former-commit-id: 726940da9967826be3696d4eaabefdbb16d349f2 [formerly a57a5244c77b52b2b62d17614584408f60dd2848] Former-commit-id: 6422b28e61e141d962002813a773da0689f7064f Former-commit-id: e369b30cb4dc044fd95c31526fc4446f62c28680 Former-commit-id: dc5a0467494b5ee3b67141eda9a1b7fbb802ad87 Former-commit-id: 4344a53a21e7477d4550db754feda3cf88ccd89f Former-commit-id: a3df7d8587a7033b79c665cd656b33f6de5cf328
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<el-dropdown placement="bottom" size="small" @command="handleChange">
|
|
<el-button class="d2-mr btn-text can-hover" type="text">
|
|
<d2-icon name="font" style="font-size: 16px;"/>
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item v-for="item in options" :key="item.value" :command="item.value">
|
|
<d2-icon :name="iconName(item.value)" class="d2-mr-5"/>{{item.label}}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapActions } from 'vuex'
|
|
export default {
|
|
name: 'd2-header-size',
|
|
data () {
|
|
return {
|
|
options: [
|
|
{ label: '默认', value: 'default' },
|
|
{ label: '中', value: 'medium' },
|
|
{ label: '小', value: 'small' },
|
|
{ label: '最小', value: 'mini' }
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('d2admin/size', [
|
|
'value'
|
|
])
|
|
},
|
|
watch: {
|
|
// 注意 这里是关键
|
|
// 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
|
|
value: {
|
|
handler (val, oldVal) {
|
|
// https://github.com/d2-projects/d2-admin/pull/129
|
|
if (oldVal) {
|
|
// 这个情况在已经加载完页面 用户改变了尺寸时触发
|
|
this.$ELEMENT.size = val
|
|
// 由于已经加载过设置 需要清空缓存设置
|
|
this.pageKeepAliveClean()
|
|
// 由于已经加载过设置 需要刷新此页面
|
|
this.$router.replace('/refresh')
|
|
} else {
|
|
// 这个情况在刷新页面时触发
|
|
this.$ELEMENT.size = val
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
pageKeepAliveClean: 'd2admin/page/keepAliveClean'
|
|
}),
|
|
...mapActions({
|
|
sizeSet: 'd2admin/size/set'
|
|
}),
|
|
handleChange (value) {
|
|
this.sizeSet(value)
|
|
},
|
|
iconName (name) {
|
|
return name === this.value ? 'dot-circle-o' : 'circle-o'
|
|
}
|
|
}
|
|
}
|
|
</script>
|