20260819101952
This commit is contained in:
1 parent
e91fd1d8de
commit
1ffc8e1ac9
14 files changed
+258
-886
No files matched your search
@@ -5,7 +5,7 @@ import { Loader } from '@lucide/vue'
|
||||
/* ---------- props / emits / slots ---------- */
|
||||
/**
|
||||
* 按钮视觉变体
|
||||
* @typedef {'default' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link'} ButtonType
|
||||
* @typedef {'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link'} ButtonType
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
@@ -13,9 +13,9 @@ const props = defineProps({
|
||||
type: {
|
||||
/** @type {ButtonType} */
|
||||
type: String,
|
||||
default: 'default',
|
||||
default: 'primary',
|
||||
validator: (value) =>
|
||||
['default', 'secondary', 'outline', 'ghost', 'danger', 'link'].includes(value),
|
||||
['primary', 'secondary', 'outline', 'ghost', 'danger', 'link'].includes(value),
|
||||
},
|
||||
/** 禁用态 */
|
||||
disabled: {
|
||||
|
||||
@@ -41,16 +41,16 @@
|
||||
}
|
||||
|
||||
/* 主要操作 —— 跟随主色 */
|
||||
.button-default {
|
||||
.button-primary {
|
||||
background: var(--fms-primary);
|
||||
color: var(--fms-primary-text);
|
||||
}
|
||||
|
||||
.button-default:hover:not(:disabled) {
|
||||
.button-primary:hover:not(:disabled) {
|
||||
background: var(--fms-primary-hover);
|
||||
}
|
||||
|
||||
.button-default:active {
|
||||
.button-primary:active {
|
||||
background: var(--fms-primary-active);
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ import Button from '../button/button.vue'
|
||||
|
||||
<p class="demo-label">基础用法</p>
|
||||
<div class="demo-panel">
|
||||
<Button type="default">主要操作</Button>
|
||||
<Button type="primary">主要操作</Button>
|
||||
<Button type="secondary">次要操作</Button>
|
||||
<Button type="outline">描边按钮</Button>
|
||||
<Button type="ghost">低强调</Button>
|
||||
|
||||
@@ -63,7 +63,7 @@ function openDrawer(placement) {
|
||||
</p>
|
||||
<template #footer>
|
||||
<Button type="outline" @click="drawerCustomOpen = false">取消</Button>
|
||||
<Button type="default" @click="drawerCustomOpen = false">确定</Button>
|
||||
<Button type="primary" @click="drawerCustomOpen = false">确定</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
|
||||
|
||||
@@ -116,7 +116,7 @@ function onPickerReset() {
|
||||
<Input v-model="basicModel.email" placeholder="you@example.com" allow-clear />
|
||||
</FormItem>
|
||||
<div class="form-demo-actions">
|
||||
<Button type="default" html-type="submit">提交</Button>
|
||||
<Button type="primary" html-type="submit">提交</Button>
|
||||
<Button type="outline" html-type="reset">重置</Button>
|
||||
</div>
|
||||
</Form>
|
||||
@@ -139,7 +139,7 @@ function onPickerReset() {
|
||||
<Input v-model="verticalModel.bio" type="textarea" :rows="3" :maxlength="20" show-count />
|
||||
</FormItem>
|
||||
<div class="form-demo-actions">
|
||||
<Button type="default" html-type="submit">提交</Button>
|
||||
<Button type="primary" html-type="submit">提交</Button>
|
||||
<Button type="outline" html-type="reset">重置</Button>
|
||||
</div>
|
||||
</Form>
|
||||
@@ -166,7 +166,7 @@ function onPickerReset() {
|
||||
<Input v-model="customModel.code" placeholder="6 位数字" maxlength="6" allow-clear />
|
||||
</FormItem>
|
||||
<div class="form-demo-actions">
|
||||
<Button type="default" html-type="submit">提交</Button>
|
||||
<Button type="primary" html-type="submit">提交</Button>
|
||||
<Button type="outline" html-type="reset">重置</Button>
|
||||
</div>
|
||||
</Form>
|
||||
@@ -195,7 +195,7 @@ function onPickerReset() {
|
||||
<RangePicker v-model="pickerModel.period" />
|
||||
</FormItem>
|
||||
<div class="form-demo-actions">
|
||||
<Button type="default" html-type="submit">提交</Button>
|
||||
<Button type="primary" html-type="submit">提交</Button>
|
||||
<Button type="outline" html-type="reset">重置</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
@@ -38,7 +38,7 @@ function saveWithFeedback() {
|
||||
|
||||
<p class="demo-label">基础用法</p>
|
||||
<div class="demo-panel">
|
||||
<Button type="default" @click="modalBasicOpen = true">打开模态框</Button>
|
||||
<Button type="primary" @click="modalBasicOpen = true">打开模态框</Button>
|
||||
</div>
|
||||
|
||||
<p class="demo-label">垂直居中 / 无遮罩</p>
|
||||
|
||||
Reference in new issue
Block a user