vue3 UI-ElementPlush 使用文档 Button 按钮

管理员 2024-10-26 12:26

vue3 UI-Element Plush 使用文档 Button 按钮 element plush

第2行，绿色是鼠标移动到上面的效果

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
 
  <div>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>
 
  <div>
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </div>
 
  <div>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </div>
</template>
 
<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

鼠标移动到按钮上面鼠标变成禁止哪种标记。

<template>
  <div class="mb-4">
    <el-button disabled>Default</el-button>
    <el-button type="primary" disabled>Primary</el-button>
    <el-button type="success" disabled>Success</el-button>
    <el-button type="info" disabled>Info</el-button>
    <el-button type="warning" disabled>Warning</el-button>
    <el-button type="danger" disabled>Danger</el-button>
  </div>
 
  <div>
    <el-button plain disabled>Plain</el-button>
    <el-button type="primary" plain disabled>Primary</el-button>
    <el-button type="success" plain disabled>Success</el-button>
    <el-button type="info" plain disabled>Info</el-button>
    <el-button type="warning" plain disabled>Warning</el-button>
    <el-button type="danger" plain disabled>Danger</el-button>
  </div>
</template>

<template>
  <p>Basic link button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
    >
      {{ button.text }}
    </el-button>
  </div>
 
  <p>Disabled link button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>
 
<script setup>
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

第1行第2个是鼠标移动到上面的效果。

<template>
  <p>Basic text button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
    >
      {{ button.text }}
    </el-button>
  </div>
 
  <p>Background color always on</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      bg
    >
      {{ button.text }}
    </el-button>
  </div>
 
  <p>Disabled text button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>
 
<script setup>
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

按钮加图标。
 
<template>
  <div>
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    按钮加图标。 建议用这个
    <el-button type="primary">
      Upload<el-icon><Upload /></el-icon>
    </el-button>
    按钮加图标。建议用这个
  </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>

<template>
  <el-button-group>
    <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
    <el-button type="primary">
      Next Page<el-icon><ArrowRight /></el-icon>
    </el-button>
  </el-button-group>
 
  <el-button-group>
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
  </el-button-group>
</template>
 
<script setup>
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
} from '@element-plus/icons-vue'
</script>

<template>
  <el-button type="primary" loading>Loading</el-button>
  <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
  <el-button type="primary" loading>
    <template #loading>
      <div>
        <svg viewBox="-10, -10, 50, 50">
          <path
            
            d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
          />
        </svg>
      </div>
    </template>
    Loading
  </el-button>
</template>
 
<script setup>
import { Eleme } from '@element-plus/icons-vue'
</script>
 
<style scoped>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>

<template>
  <div class="flex flex-wrap items-center mb-4">
    <el-button size="large">Large</el-button>
    <el-button>Default</el-button>
    <el-button size="small">Small</el-button>
    <el-button size="large" :icon="Search">Search</el-button>
    <el-button :icon="Search">Search</el-button>
    <el-button size="small" :icon="Search">Search</el-button>
  </div>
  <div class="flex flex-wrap items-center mb-4">
    <el-button size="large" round>Large</el-button>
    <el-button round>Default</el-button>
    <el-button size="small" round>Small</el-button>
    <el-button size="large" :icon="Search" round>Search</el-button>
    <el-button :icon="Search" round>Search</el-button>
    <el-button size="small" :icon="Search" round>Search</el-button>
  </div>
  <div class="flex flex-wrap items-center">
    <el-button :icon="Search" size="large" circle />
    <el-button :icon="Search" circle />
    <el-button :icon="Search" size="small" circle />
  </div>
</template>
 
<script setup>
import { Search } from '@element-plus/icons-vue'
</script>

<template>
  <el-button>button</el-button>
  <el-button tag="div" role="button" tabindex="0">div</el-button>
  <el-button
    type="primary"
    tag="a"
    href="https://github.com/element-plus/element-plus"
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </el-button>
</template>

<script setup>
import { isDark } from '~/composables/dark'
</script>
 
<template>
  <div>
    <el-button color="#626aef" :dark="isDark">Default</el-button>
    <el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
 
    <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
    <el-button color="#626aef" :dark="isDark" disabled plain>
      Disabled Plain
    </el-button>
  </div>
</template>

Button API

Button 属性

属性名	说明	类型	默认值
size	尺寸	`enum`	—
type	类型	`enum`	—
plain	是否为朴素按钮	`boolean`	false
text 2.2.0	是否为文字按钮	`boolean`	false
bg 2.2.0	是否显示文字按钮背景颜色	`boolean`	false
link 2.2.1	是否为链接按钮	`boolean`	false
round	是否为圆角按钮	`boolean`	false
circle	是否为圆形按钮	`boolean`	false
loading	是否为加载中状态	`boolean`	false
loading-icon	自定义加载中状态图标组件	`string` / `Component`	Loading
disabled	按钮是否为禁用状态	`boolean`	false
icon	图标组件	`string` / `Component`	—
autofocus	原生 `autofocus` 属性	`boolean`	false
native-type	原生 type 属性	`enum`	button
auto-insert-space	自动在两个中文字符之间插入空格	`boolean`	—
color	自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色	`string`	—
dark	dark 模式, 意味着自动设置 `color` 为 dark 模式的颜色	`boolean`	false
tag 2.3.4	自定义元素标签	`string` / `Component`	button

Button 插槽

插槽名	说明
default	自定义默认内容
loading	自定义加载中组件
icon	自定义图标组件

Button Expose

属性名	说明	类型
ref	按钮 html 元素	`object`
size	按钮尺寸	`object`
type	按钮类型	`object`
disabled	按钮已禁用	`object`
shouldAddSpace	是否在两个字符之间插入空格	`object`

ButtonGroup API

ButtonGroup 属性

属性名	说明	类型	默认值
size	用于控制该按钮组内按钮的大小	`enum`	—
type	用于控制该按钮组内按钮的类型	`enum`	—

ButtonGroup 插槽

插槽名	说明	子标签
default	自定义按钮组内容	Button

联系站长

站长微信:xiaomao0055

站长QQ:14496453

按分类分组

java(160)

python(14)

MySQL(26)

layUI(8)

公众号相关(3)

MybatisPlush(6)

Cocos Creator音爆小游戏_01(2)

Cocos Creator零基础游戏开发视频教程_01(34)

Cocos Creator计算器(4)

CocosCreator 飞机大战(29)

CocosCreator 拼图游戏(16)

CocosCreator棋牌炸金花(22)

CocosCreator 3D出租车-官方(19)

Cocos 3D 懒猫跑酷(13)

MyBatis-Plus教程(0)

vue3UI-ElementPlush 使用文档(20)

CocosCreator3D基础(27)

SpringBoot资料(96)

Linux系统(10)

windows系统(2)

VUE(21)

eclipse-tomcat(14)

我是医生(8)

爬虫相关(2)

小程序(98)

小游戏(3)

小程序-商城-shop-01(6)

手机(1)

docker(1)

JS/CSS/HTML(151)

电脑知识(15)

typescript教程(4)

python-selenium(6)

python-BeautifulSoup(1)

java-selenium(4)

jsoup解析html(1)

IDEA(26)

物联网(8)

excel技巧(5)

微信小程序，基础教程(1)

excel(1)

视频制作(11)

古诗、古文(1)

电影(1)

秘术(1)

个人分类(59)

其它分类(7)

实验室软件(3)

基金证券(1)

歌曲(1)

按日期分组

2025年03月(7)

2025年02月(8)

2025年01月(11)

2024年12月(12)

2024年11月(12)

2024年10月(10)

2024年09月(2)

2024年08月(5)

2024年06月(1)

2024年05月(4)

2024年04月(8)

2024年03月(15)

2024年02月(11)

2024年01月(12)

2023年12月(18)

2023年11月(10)

2023年10月(8)

2023年09月(5)

2023年07月(12)

2023年05月(13)

2023年04月(24)

2023年03月(14)

2023年02月(5)

2023年01月(8)

2022年12月(11)

2022年11月(17)

2022年10月(39)

2022年09月(12)

2022年08月(6)

2022年07月(1)

2022年06月(5)

2022年05月(10)

2022年04月(10)

2022年03月(15)

2022年02月(8)

2022年01月(11)

2021年12月(9)

2021年11月(59)

2021年10月(46)

2021年09月(37)

2021年08月(68)

2021年07月(15)

2021年06月(5)

2021年05月(8)

2021年04月(10)

2021年03月(12)

2021年02月(20)

2021年01月(4)

2020年12月(8)

2020年11月(8)

2020年10月(16)

2020年09月(12)

2020年08月(11)

2020年07月(20)

2020年06月(23)

2020年05月(8)

2020年04月(14)

2020年03月(15)

2020年02月(18)

2020年01月(6)

2019年12月(12)

2019年11月(20)

2019年10月(18)

2019年09月(31)

2019年08月(19)

2019年07月(21)

2019年06月(20)