u
This commit is contained in:
oneao committed
1 parent
f572dce2f6
commit
e99a9fb274
356 files changed
+28877
-1055
No files matched your search
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
// 最基础的用法：内容写在默认插槽，type 不传时是 primary
|
||||
import { G3Button } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Button>默认按钮</G3Button>
|
||||
<G3Button type="primary">主要按钮</G3Button>
|
||||
<G3Button>保存</G3Button>
|
||||
</template>
|
||||
@@ -1,15 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { G3Button } from '@g3soft/ui'
|
||||
// block：占满父容器宽度，常用于抽屉底部动作区
|
||||
import { G3Button, G3Space } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-block">
|
||||
<G3Button type="primary" block>撑满宽度</G3Button>
|
||||
<div style="width: 320px; padding: 16px; border: 1px solid #d9d9d9; border-radius: 8px">
|
||||
<G3Space direction="vertical" :size="8" style="display: flex">
|
||||
<G3Button block>占满整行</G3Button>
|
||||
<G3Button type="outline" block>占满整行（描边）</G3Button>
|
||||
</G3Space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.demo-block {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
// disabled 是原生禁用：不触发 click、不参与 Tab 焦点
|
||||
import { G3Button, G3Space } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Space :size="[12, 12]" align="center" wrap>
|
||||
<G3Button disabled>主操作</G3Button>
|
||||
<G3Button type="secondary" disabled>次要操作</G3Button>
|
||||
<G3Button type="outline" disabled>描边</G3Button>
|
||||
<G3Button type="danger" disabled>删除</G3Button>
|
||||
<G3Button type="link" disabled>链接</G3Button>
|
||||
</G3Space>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
// click 回传原生 MouseEvent：可以读修饰键，也可以阻止默认行为
|
||||
import { ref } from 'vue'
|
||||
import { G3Button, G3Space } from '@g3soft/ui'
|
||||
|
||||
const last = ref('暂无')
|
||||
|
||||
function handleClick(event: MouseEvent) {
|
||||
const withKey = event.ctrlKey || event.metaKey ? '（按住了 Ctrl/Cmd）' : ''
|
||||
last.value = `点击${withKey} @ ${event.clientX},${event.clientY}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Space direction="vertical" :size="12" style="display: flex">
|
||||
<G3Space :size="8">
|
||||
<G3Button @click="handleClick">点我（可按住 Ctrl）</G3Button>
|
||||
<G3Button type="outline" @click="handleClick">也是点我</G3Button>
|
||||
</G3Space>
|
||||
<span style="color: #6b7280; font-size: 13px">最近一次：{{ last }}</span>
|
||||
</G3Space>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
// 全局默认值：显式 prop > componentDefaults > 组件内置默认
|
||||
import { G3Button, G3ConfigProvider, G3Space } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Space direction="vertical" :size="12" style="display: flex">
|
||||
<!-- 默认：primary / medium -->
|
||||
<G3Space :size="8">
|
||||
<G3Button>默认变体</G3Button>
|
||||
</G3Space>
|
||||
|
||||
<!-- 子树内所有按钮默认变成 outline / small，显式传 type 仍然优先 -->
|
||||
<G3ConfigProvider :component-defaults="{ button: { type: 'outline', size: 'small' } }">
|
||||
<G3Space :size="8" align="center">
|
||||
<G3Button>继承全局默认</G3Button>
|
||||
<G3Button type="primary" size="large">显式 prop 优先</G3Button>
|
||||
</G3Space>
|
||||
</G3ConfigProvider>
|
||||
</G3Space>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
// htmlType：表单内的提交与重置。默认是 button，所以表单里不会意外提交
|
||||
import { reactive } from 'vue'
|
||||
import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3Space } from '@g3soft/ui'
|
||||
|
||||
const model = reactive({ name: '' })
|
||||
|
||||
function onSubmit(values: Record<string, unknown>) {
|
||||
G3Message.success(`已提交：${JSON.stringify(values)}`)
|
||||
}
|
||||
|
||||
function onReset() {
|
||||
model.name = ''
|
||||
G3Message.info('已重置')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Form :model="model" :label-width="64" style="max-width: 360px" @submit="onSubmit" @reset="onReset">
|
||||
<G3FormItem name="name" label="名称">
|
||||
<G3Input v-model="model.name" placeholder="输入后回车提交" />
|
||||
</G3FormItem>
|
||||
|
||||
<G3FormItem>
|
||||
<G3Space :size="8">
|
||||
<G3Button html-type="submit">提交</G3Button>
|
||||
<G3Button html-type="reset" type="outline">重置</G3Button>
|
||||
<G3Button html-type="button" type="ghost">普通按钮</G3Button>
|
||||
</G3Space>
|
||||
</G3FormItem>
|
||||
</G3Form>
|
||||
</template>
|
||||
@@ -1,11 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { G3Button } from '@g3soft/ui'
|
||||
// #icon 插槽放图标；纯图标按钮用 type="icon"，并补 aria-label
|
||||
import { G3Button, G3Space } from '@g3soft/ui'
|
||||
import { Plus, Search, Trash2 } from '@lucide/vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Button type="primary">
|
||||
<template #icon>+</template>
|
||||
新增
|
||||
</G3Button>
|
||||
<G3Button icon-only title="搜索">🔍</G3Button>
|
||||
<G3Space :size="[12, 12]" align="center" wrap>
|
||||
<G3Button>
|
||||
<template #icon><Plus /></template>
|
||||
新增
|
||||
</G3Button>
|
||||
|
||||
<!-- 纯图标按钮：没有文字，必须给 aria-label -->
|
||||
<G3Button type="icon" aria-label="搜索">
|
||||
<template #icon><Search /></template>
|
||||
</G3Button>
|
||||
|
||||
<G3Button type="icon" size="small" aria-label="删除">
|
||||
<template #icon><Trash2 /></template>
|
||||
</G3Button>
|
||||
|
||||
<G3Button type="icon" size="large" aria-label="新增">
|
||||
<template #icon><Plus /></template>
|
||||
</G3Button>
|
||||
</G3Space>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
// loading 会拦截 click，所以它同时就是「防重复提交」开关
|
||||
import { ref } from 'vue'
|
||||
import { G3Button, G3Message, G3Space } from '@g3soft/ui'
|
||||
|
||||
const submitting = ref(false)
|
||||
|
||||
async function handleSubmit() {
|
||||
if (submitting.value) return
|
||||
submitting.value = true
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1200))
|
||||
G3Message.success('提交成功')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Space :size="[12, 12]" align="center" wrap>
|
||||
<G3Button :loading="submitting" @click="handleSubmit">
|
||||
{{ submitting ? '提交中' : '提交' }}
|
||||
</G3Button>
|
||||
|
||||
<!-- 只是展示加载态：任何变体都可以加载 -->
|
||||
<G3Button type="outline" loading>加载中</G3Button>
|
||||
<G3Button type="ghost" loading>加载中</G3Button>
|
||||
</G3Space>
|
||||
</template>
|
||||
@@ -1,9 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { G3Button } from '@g3soft/ui'
|
||||
// 3 档尺寸：small 24px / medium 32px（默认）/ large 40px
|
||||
import { G3Button, G3Space } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Button type="primary" size="small">小</G3Button>
|
||||
<G3Button type="primary">中</G3Button>
|
||||
<G3Button type="primary" size="large">大</G3Button>
|
||||
<G3Space :size="[12, 12]" align="center" wrap>
|
||||
<G3Button size="small">小号</G3Button>
|
||||
<G3Button size="medium">默认</G3Button>
|
||||
<G3Button size="large">大号</G3Button>
|
||||
</G3Space>
|
||||
</template>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { G3Button } from '@g3soft/ui'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
function handleAsync() {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Button type="primary" :loading="loading" @click="handleAsync">点击加载</G3Button>
|
||||
<G3Button disabled>禁用</G3Button>
|
||||
<G3Button type="primary" disabled>禁用（主要）</G3Button>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { G3Button } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Button type="success">成功按钮</G3Button>
|
||||
<G3Button type="warning">警告按钮</G3Button>
|
||||
<G3Button type="danger">危险按钮</G3Button>
|
||||
<G3Button type="text">文字按钮</G3Button>
|
||||
<G3Button type="link">链接按钮</G3Button>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
// 8 种视觉变体：按操作重要性选择，一屏通常只保留一个 primary
|
||||
import { G3Button, G3Space } from '@g3soft/ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Space :size="[12, 12]" wrap>
|
||||
<G3Button type="primary">主操作</G3Button>
|
||||
<G3Button type="secondary">次要操作</G3Button>
|
||||
<G3Button type="outline">描边</G3Button>
|
||||
<G3Button type="ghost">低强调</G3Button>
|
||||
<G3Button type="danger">删除</G3Button>
|
||||
<G3Button type="danger-outline">危险（描边）</G3Button>
|
||||
<G3Button type="link">链接按钮</G3Button>
|
||||
</G3Space>
|
||||
</template>
|
||||
Reference in new issue
Block a user