FxSettingButton 设置按钮
@fx/layouts 的设置入口按钮，点击打开 FxSettingDrawer 设置抽屉。支持双形态：header 内圆形图标按钮 / 视口右下角悬浮圆钮，由 useLayoutStore 的 setting.buttonPosition 决定渲染形态。
基础用法
vue
<script setup lang="ts">
/**
* FxSettingButton 基础示例：双形态（header / fixed）切换
*/
import { computed } from "vue"
import { FxSettingButton, useLayoutStore } from "@fx/layouts"
const layout = useLayoutStore()
const variant = computed(() => layout.setting.buttonPosition)
</script>
<template>
<div class="demo-row">
<p class="demo-tip">
当前形态：<code>{{ variant }}</code> —— 点击齿轮打开设置抽屉，可在「行为 →
设置按钮位置」切换形态
</p>
<FxSettingButton variant="header" />
<FxSettingButton variant="fixed" />
</div>
</template>
<style scoped>
.demo-row {
display: flex;
align-items: center;
gap: 12px;
}
.demo-tip {
margin: 0;
font-size: 13px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
按钮内部直连 store（openSettingDrawer），无需消费方接线：
vue
<FxSettingButton variant="header" />1
双形态互斥挂载（BasicLayout 内置行为）：
vue
<!-- header 操作区尾部 -->
<FxSettingButton v-if="setting.buttonPosition === 'header'" variant="header" />
<!-- basic-layout 根部 -->
<FxSettingButton v-if="setting.buttonPosition === 'fixed'" variant="fixed" />1
2
3
4
2
3
4
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| variant | 形态：header 顶栏图标按钮 / fixed 右下角悬浮圆钮 | "header" | "fixed" | —（必填） |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击（内部已先打开设置抽屉） | (event: MouseEvent) |