0ddbb3299a
Former-commit-id: 74b1364c402fd0e76d9e54f09cfd9d9ae0bd0223 [formerly 74b1364c402fd0e76d9e54f09cfd9d9ae0bd0223 [formerly 74b1364c402fd0e76d9e54f09cfd9d9ae0bd0223 [formerly 74b1364c402fd0e76d9e54f09cfd9d9ae0bd0223 [formerly 6302dbbbe2f175b55e955b9e815a5ced2d46da9c [formerly 31d4052b8c935ce386a8a226f8fcefaf4c77bad4]]]]] Former-commit-id: b3876f25425359511969e127335edeacdd9e905e Former-commit-id: 352ad1e7929a2a803634a58d52070c0039cd3ebd Former-commit-id: 67e132f39beda06a02e8d4b5c32e1aad1bdb3818 [formerly 8647d557e4dabc4dd8a7b7c98b0901030705262b] Former-commit-id: 01b817461fcff23fcbfb68fc24f543feddc536d1 Former-commit-id: 7c8edc8a45ce2c37fa018fdc88092a6b7927b709 Former-commit-id: 6e54374302f81b64bb07792620b934a917cafa88 Former-commit-id: 3d26d56b738f678cadfe0178ddda1c9d09a4148b Former-commit-id: cab873c1efeceaeba735b06bd3c36fd1841cc8e8
75 lines
2.0 KiB
Vue
75 lines
2.0 KiB
Vue
<template>
|
|
<el-dropdown placement="bottom" size="small" @command="handleChange">
|
|
<el-tooltip
|
|
effect="dark"
|
|
content="控件尺寸"
|
|
placement="right">
|
|
<el-button class="d2-mr btn-text can-hover" type="text">
|
|
<d2-icon name="font" style="font-size: 16px;"/>
|
|
</el-button>
|
|
</el-tooltip>
|
|
<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>
|