JView UI

Appearance

按钮组件，用于响应用户点击行为，触发相关的业务逻辑。

按钮类型 ​

按钮的type属性支持default, primary, text, dashed四种，分别是默认按钮、主要按钮、文本按钮、虚线按钮。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button>Default</j-button>
        <j-button type="primary">Primary</j-button>
        <j-button type="text">Text</j-button>
        <j-button type="dashed">Dashed</j-button>
    </j-space>
</template>
<template>
    <j-space wrap>
        <j-button>Default</j-button>
        <j-button type="primary">Primary</j-button>
        <j-button type="text">Text</j-button>
        <j-button type="dashed">Dashed</j-button>
    </j-space>
</template>

轮廓按钮 ​

通过outlined属性支持朴素按钮风格，其背景色为透明，适合用在容器块已经有背景色的场景。

展开查看代码
vue
<template>
    <j-space wrap style="padding: 10px 20px; background-color: #bec8c8">
        <j-button outlined>Default</j-button>
        <j-button outlined type="primary">Primary</j-button>
        <j-button outlined type="dashed">Dashed</j-button>
        <j-button outlined danger>Danger</j-button>
        <j-button outlined type="primary" danger>Primary & Danger</j-button>
        <j-button outlined disabled>Disabled</j-button>
        <j-button outlined type="primary" disabled>Primary & Disabled</j-button>
        <j-button outlined danger disabled>Danger & Disabled</j-button>
        <j-button outlined type="primary" danger disabled>Primary & Danger & Disabled</j-button>
    </j-space>
</template>
<template>
    <j-space wrap style="padding: 10px 20px; background-color: #bec8c8">
        <j-button outlined>Default</j-button>
        <j-button outlined type="primary">Primary</j-button>
        <j-button outlined type="dashed">Dashed</j-button>
        <j-button outlined danger>Danger</j-button>
        <j-button outlined type="primary" danger>Primary & Danger</j-button>
        <j-button outlined disabled>Disabled</j-button>
        <j-button outlined type="primary" disabled>Primary & Disabled</j-button>
        <j-button outlined danger disabled>Danger & Disabled</j-button>
        <j-button outlined type="primary" danger disabled>Primary & Danger & Disabled</j-button>
    </j-space>
</template>

按钮图标 ​

通过icon插槽控制按钮图标，你可以使用 JView UI 官方提供的@jview/icons或者jview/icons-antd图标库中的图标，也可以通过插槽自定义图标。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button>
            <template #icon>
                <Codesandbox />
            </template>
            Default
        </j-button>
        <j-button type="primary">
            <template #icon>
                <Codepen />
            </template>
            Primary
        </j-button>
        <j-button type="primary" loading>
            <template #icon>
                <Codepen />
            </template>
            Primary & Loading
        </j-button>
        <j-button type="dashed">
            <template #icon>
                <div
                    style="
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 100%;
                        background-color: var(--vp-c-brand);
                    "
                >
                    i
                </div>
            </template>
            自定义图标
        </j-button>
        <j-button type="primary" danger>
            <template #icon>
                <CloudDownloadOutlined />
            </template>
            AntD 图标
        </j-button>
        <j-button type="primary" shape="circle">
            <template #icon>
                <Search />
            </template>
        </j-button>
        <j-button type="primary" shape="round">
            <template #icon>
                <Search />
            </template>
        </j-button>
        <j-button type="primary">
            <template #icon>
                <Search />
            </template>
        </j-button>
    </j-space>
</template>

<script setup>
import { Codesandbox, Codepen, Search } from '@jview/icons'
import { CloudDownloadOutlined } from '@jview/icons-antd'
</script>
<template>
    <j-space wrap>
        <j-button>
            <template #icon>
                <Codesandbox />
            </template>
            Default
        </j-button>
        <j-button type="primary">
            <template #icon>
                <Codepen />
            </template>
            Primary
        </j-button>
        <j-button type="primary" loading>
            <template #icon>
                <Codepen />
            </template>
            Primary & Loading
        </j-button>
        <j-button type="dashed">
            <template #icon>
                <div
                    style="
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 100%;
                        background-color: var(--vp-c-brand);
                    "
                >
                    i
                </div>
            </template>
            自定义图标
        </j-button>
        <j-button type="primary" danger>
            <template #icon>
                <CloudDownloadOutlined />
            </template>
            AntD 图标
        </j-button>
        <j-button type="primary" shape="circle">
            <template #icon>
                <Search />
            </template>
        </j-button>
        <j-button type="primary" shape="round">
            <template #icon>
                <Search />
            </template>
        </j-button>
        <j-button type="primary">
            <template #icon>
                <Search />
            </template>
        </j-button>
    </j-space>
</template>

<script setup>
import { Codesandbox, Codepen, Search } from '@jview/icons'
import { CloudDownloadOutlined } from '@jview/icons-antd'
</script>

请一定使用icon插槽展示图标，直接将图标放在Button标签内虽然也能展示图标，但是无法与loading属性协同。错误示范如下：

vue
<j-button loading>
    <Search />Default
</j-button>
<j-button loading>
    <Search />Default
</j-button>

按钮状态 ​

  • 加载中

通过loading属性可以支持按钮加载状态，加载状态下点击按钮不会触发click事件。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button type="primary" loading>加载中</j-button>
        <j-button type="primary" shape="circle" loading></j-button>
        <j-button type="primary" shhape="round" loading></j-button>
        <j-button loading></j-button>
        <j-button danger loading>Danger</j-button>
        <j-button type="primary" danger loading>Primary & Danger</j-button>
    </j-space>
</template>
<template>
    <j-space wrap>
        <j-button type="primary" loading>加载中</j-button>
        <j-button type="primary" shape="circle" loading></j-button>
        <j-button type="primary" shhape="round" loading></j-button>
        <j-button loading></j-button>
        <j-button danger loading>Danger</j-button>
        <j-button type="primary" danger loading>Primary & Danger</j-button>
    </j-space>
</template>
  • 禁用

通过disabled属性可以支持按钮禁用状态。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button disabled>Default</j-button>
        <j-button type="primary" disabled>Primary</j-button>
        <j-button type="text" disabled>Text</j-button>
        <j-button type="dashed" disabled>Dashed</j-button>
        <j-button danger disabled>Danger</j-button>
        <j-button type="primary" danger disabled>Primary & Danger</j-button>
    </j-space>
</template>
<template>
    <j-space wrap>
        <j-button disabled>Default</j-button>
        <j-button type="primary" disabled>Primary</j-button>
        <j-button type="text" disabled>Text</j-button>
        <j-button type="dashed" disabled>Dashed</j-button>
        <j-button danger disabled>Danger</j-button>
        <j-button type="primary" danger disabled>Primary & Danger</j-button>
    </j-space>
</template>

危险状态 ​

通过danger属性控制危险状态，适用于一些需要谨慎操作的按钮。

展开查看代码
vue
<template>
    <j-space wrap>
        <j-button danger>Danger</j-button>
        <j-button danger type="primary">Primary & Danger</j-button>
        <j-button danger type="text">Text & Danger</j-button>
        <j-button danger type="dashed">Dashed & Danger</j-button>
    </j-space>
</template>
<template>
    <j-space wrap>
        <j-button danger>Danger</j-button>
        <j-button danger type="primary">Primary & Danger</j-button>
        <j-button danger type="text">Text & Danger</j-button>
        <j-button danger type="dashed">Dashed & Danger</j-button>
    </j-space>
</template>

按钮尺寸 & 形状 ​

通过size属性控制按钮尺寸。

通过shape属性控制按钮形状。

展开查看代码
vue
<template>
    <j-space align="center" wrap>
        <j-button type="primary" size="small">Small</j-button>
        <j-button type="primary">Default</j-button>
        <j-button type="primary" size="large">Large</j-button>
        <j-button type="primary" shape="round" size="small">Small</j-button>
        <j-button type="primary" shape="round">Default</j-button>
        <j-button type="primary" shape="round" size="large">Large</j-button>
        <j-button type="primary" shape="circle" size="small">S</j-button>
        <j-button type="primary" shape="circle">D</j-button>
        <j-button type="primary" shape="circle" size="large">L</j-button>
    </j-space>
</template>
<template>
    <j-space align="center" wrap>
        <j-button type="primary" size="small">Small</j-button>
        <j-button type="primary">Default</j-button>
        <j-button type="primary" size="large">Large</j-button>
        <j-button type="primary" shape="round" size="small">Small</j-button>
        <j-button type="primary" shape="round">Default</j-button>
        <j-button type="primary" shape="round" size="large">Large</j-button>
        <j-button type="primary" shape="circle" size="small">S</j-button>
        <j-button type="primary" shape="circle">D</j-button>
        <j-button type="primary" shape="circle" size="large">L</j-button>
    </j-space>
</template>

独占一行 ​

通过block属性控制按钮独占一行。

展开查看代码
vue
<template>
    <j-space direction="column" style="width: 300px">
        <j-button block>Default</j-button>
        <j-button block type="primary">Primary</j-button>
        <j-button block disabled>Disabled</j-button>
        <j-button block type="dashed">Dashed</j-button>
    </j-space>
</template>
<template>
    <j-space direction="column" style="width: 300px">
        <j-button block>Default</j-button>
        <j-button block type="primary">Primary</j-button>
        <j-button block disabled>Disabled</j-button>
        <j-button block type="dashed">Dashed</j-button>
    </j-space>
</template>

属性 ​

参数说明类型默认值必填
disabled禁用按钮boolean无否
type按钮的类型"default" | "text" | "dashed" | "primary"'default'否
outlined轮廓按钮，背景色会变成透明boolean无否
feedback是否支持按钮点击反馈效果booleantrue否
block块级按钮boolean无否
shape按钮的形状"default" | "circle" | "round"'default'否
icon定制按钮的图标部分，请使用插槽#iconVNode无否
loading是否加载状态boolean无否
size按钮的尺寸"default" | "small" | "large"'default'否
danger危险按钮boolean无否
onClick点击事件回调(event: MouseEvent) => void无否

Copyright © 2022-2024 All Rights Reserved by Tusi.