Files
mes-ui-d2/src/layout/header-aside/components/header-size/index.vue
liyang e8e427170f 添加注释以及修改 name
Former-commit-id: bbfa8c1f1912a953f083c43e3dfc66cbb8a94c38 [formerly bbfa8c1f1912a953f083c43e3dfc66cbb8a94c38 [formerly bbfa8c1f1912a953f083c43e3dfc66cbb8a94c38 [formerly bbfa8c1f1912a953f083c43e3dfc66cbb8a94c38 [formerly b0471716a10855a99f9eeec56c5d90466ca78984 [formerly 615abfaf14069173e666265406d43b7c001cbc6b]]]]]
Former-commit-id: 218d3d292b96ace88068c5151de0e4db31ec0045
Former-commit-id: 83f58431c1fe8d0e505c1b529971a3532eacec74
Former-commit-id: 9a6dd3e351174e96efc38db9815056aa3e37c68a [formerly d122a952d4566d7c512488ddb419706aa7a5e218]
Former-commit-id: d7cee2c9d8f6d46e0218662a8c62589c49f5406f
Former-commit-id: 393f897a4b405e4d182f0a1d590634d65aede702
Former-commit-id: 77c05c97905e96a99f1b5ec358b432052e5edd55
Former-commit-id: b7fb5d555038f979df68dd44ea976710a5ae689c
Former-commit-id: f572f37e0a9fb37edd68ad3c48266b2eb0d1444c
2018-09-10 16:13:45 +08:00

59 lines
1.5 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 command="">
<d2-icon :name="iconName('default')" class="d2-mr-5"/>默认
</el-dropdown-item>
<el-dropdown-item command="medium">
<d2-icon :name="iconName('medium')" class="d2-mr-5"/>
</el-dropdown-item>
<el-dropdown-item command="small">
<d2-icon :name="iconName('small')" class="d2-mr-5"/>
</el-dropdown-item>
<el-dropdown-item command="mini">
<d2-icon :name="iconName('mini')" class="d2-mr-5"/>最小
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'd2-header-size',
computed: {
...mapState('d2admin/size', [
'value'
])
},
watch: {
// 注意 这里是关键
// 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
value: {
handler (val) {
this.$ELEMENT.size = val
},
immediate: true
}
},
methods: {
...mapMutations('d2admin/size', [
'set'
]),
handleChange (value) {
this.set(value)
this.$message({
message: `设置尺寸成功 ${value}`,
type: 'success'
})
},
iconName (name) {
return name === this.value ? 'dot-circle-o' : 'circle-o'
}
}
}
</script>