使用用例

基本按钮类型 type

spread和shrink; spread时按钮只能是圆形，且不包含文字

<template>
  <div style="background: var(--font-dark-gray)">
    <div class="in-bk">
      <GButton class="w-50 mg-10" type="spread">无法包含文字</GButton>
      <GButton class="w-50 mg-10" type="spread" icon="fork"></GButton>
      <GButton class="w-50 mg-10" type="shrink" shape="round"></GButton>
      <GButton class="w-100 mg-10" type="shrink">确认</GButton>
    </div>
  </div>
</template>

显示代码

复制代码片段

使用 Icon 来定义按钮图标

图片形式传入icon, 如果想要定义样式，使用后代选择器

自定义icon

icon会置于左侧位置，且当按钮为圆形时展示在按钮中央。传入值种类如下： 1. 图片路径: 包含/,.，视作图片路径或base64。2. 可变色图标： 以$开头，激活时提高颜色亮度。 3. 黑色背景图标：自带黑色圆形背景。 2，3类图标会在移除$字首后，以decoration-${icon}的方式传入class中。通过:deep伪类和后代选择器创建自定义css图标，选择器见代码css部分。

<template>
  <div style="background: var(--font-dark-gray); color: var(--blank-white);">
    <div>
      <GButton class="w-150 mg-10" type="shrink" balance icon="round">round</GButton>
      <GButton class="w-150 mg-10" type="shrink" balance icon="fork">fork</GButton>
      <GButton class="w-150 mg-10" type="shrink" balance icon="del">del</GButton>
      <GButton class="w-150 mg-10" type="shrink" balance icon="loading">loading</GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$menu"></GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$sort"></GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$filter"></GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$back"></GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$close"></GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$add"></GButton>
      <GButton class="w-50 mg-10" type="shrink" balance shape="round" icon="$reduce"></GButton>
    </div>
    <div style="padding-left: 10px;font-size: 20px;">图片形式传入icon, 如果想要定义样式，使用后代选择器</div>
    <div>
      <GButton class="w-150 mg-10 customed-image" type="shrink" :icon="$withBase('/flower.webp')" balance>图片icon</GButton>
    </div>
    <div style="padding-left: 10px;font-size: 20px;">自定义icon</div>
    <div>
      <GButton class="w-150 mg-10" type="shrink" icon="custom" balance>自定义</GButton>
    </div>
  </div>
</template>
<style>
/** 非所有例子都有对应实例按钮 */
/** 举例一: 给按钮传入类名，通过后代选择器选中1类型的图片，类 */
.customed-image.button-wrap-button .button-wrap-special {
  transform: rotate(180deg);
}
/** 举例二: 使用可变色图标, $custom, 关键路径为.decoration-custom::before, 双类名提供优先级支持 */
.decoration-colord-image.decoration-custom::before {
  background-image: url(./assets/custom.png);
  background-size: 80%;
}

/** 举例三: 使用黑背图标, custom, 关键路径为.decoration-custom::before, 双类名提供优先级支持，通常操作伪元素来表现样式，可使用背景图替代 */
.decoration-black-bgi.decoration-custom::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 0;
  height: 0;

  --b-width: 9px;
  border: calc(var(--b-width) * 2) solid rgb(251, 204, 62);
  border-top: none;
  border-left: var(--b-width) solid transparent;
  border-right: var(--b-width) solid transparent;
}
</style>

显示代码

复制代码片段

disable 和 sleep

使用disable禁用按钮，内置sleep方法实现按钮后禁用一段时间。

<template>
  <div style="background: var(--font-dark-gray)">
    <div class="in-bk">
      <GButton class="w-100 mg-10" type="shrink">确认</GButton>
      <GButton class="w-100 mg-10" type="shrink" disable>确认</GButton>
      <GButton class="w-300 mg-10" type="shrink" :sleep="1000">确认(后禁用)</GButton>
    </div>
  </div>
</template>

显示代码

复制代码片段

主题

主题分为light，dark，默认dark。

<template>
  <div style="background: var(--blank-white)">
    <GButton class="w-150 mg-10" type="shrink" icon="fork" theme="dark" balance>确认</GButton>
  </div>
</template>

显示代码

复制代码片段

杂项

使用balance来控制文字表现。使用shape来快速定义按钮形状。提供一个有replay属性的对象，按钮会在点击时尝试执行函数。

<template>
  <div style="background: var(--font-dark-gray)">
    <div class="in-bk">
      <GButton class="w-150 mg-10" type="shrink" attention>attention</GButton>
    </div>
    <div class="in-bk">
      <GButton class="w-200 mg-10 bk" type="shrink" icon="round">确认</GButton>
      <GButton class="w-200 mg-10 bk" type="shrink" icon="round" balance>确认</GButton>
    </div>
    <div class="in-bk">
      <GButton class="w-50 mg-10 bk" type="shrink" shape="round"></GButton>
    </div>
  </div>
</template>

显示代码

复制代码片段

参数定义

参数	说明	类型	是否可选	默认值
type	按钮类型	'shrink' | 'spread'	可选	shrink
shape	按钮形状	'round'	可选	-
balance	当按钮长度过小时，用于平衡视觉效果	boolean	可选	-
icon	按钮按钮图标	string	可选	-
disable	按钮是否禁用	boolean	可选	-
attention	红色感叹号	boolean	可选	-
theme	按钮主题	'dark' | 'light'	可选	light
sleep	点击后禁用时间	number	可选	-
sound	按钮声音	{ replay: () => void }	可选	-