当前位置：首页 > article >正文

Element UI按钮组件：构建响应式用户界面的秘诀

article 2024/11/18 12:47:38

Element UI按钮组件：构建响应式用户界面的秘诀

一 . 创建按钮
二 . 按钮的属性
- 2.1 type 属性
- 2.2 朴素按钮、圆角按钮
- 2.3 size 属性
- 2.4 圆形按钮
- 2.5 加载状态
- 2.6 禁用功能
- 2.7 默认聚焦
三 . 按钮组

在现代网页设计中，按钮不仅是用户交互的核心元素，也是提升用户体验的关键。Element UI 提供了一套丰富而强大的按钮组件，使得开发者能够轻松打造出既美观又功能丰富的用户界面。本文将带你学习Element UI按钮组件的基础用法以及相关特性。

ElementUI 专栏 : https://blog.csdn.net/m0_53117341/category_12780595.html

一 . 创建按钮

我们可以通过标签来创建一个 Element 样式的普通按钮

<el-button>默认按钮</el-button>

那接下来 , 我们新创建一个组件 , 来具体看一下按钮组件的详细使用

然后在 <template></template> 标签中 , 创建一个 <div> 标签 , 在 <div> 标签中书写我们的样式

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <!-- 在这里书写样式 -->
    <h1>按钮的详细使用</h1>
    <!-- 创建一个普通的按钮 -->
    <el-button>普通按钮</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

然后我们需要将这个组件注册到 Vue 中 , 打开 router 目录下的 index.js , 将我们的组件信息注册进去

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/Button'
import ButtonDetail from '@/components/ButtonDetail'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'HelloWorld', component: HelloWorld },
    { path: '/button', name: 'Button', component: Button },
    { path: '/buttondetail', name: 'ButtonDetail', component: ButtonDetail },
  ]
})

接下来 , 我们在 App.vue 主页中 , 添加一个 a 标签 , 跳转到 ButtonDetail 组件

<template>
  <div id="app">
    <!-- URL 必须是 #/ 开头 -->
    <a href="#/buttondetail">点我学习按钮的具体用法</a>

    <!-- Vue 的路由 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

此时刷新页面

小结 :

日后使用 ElementUI 的相关组件时 , 需要注意的是所有组件都是 el-组件名称 开头的 .

二 . 按钮的属性

https://element.eleme.cn/#/zh-CN/component/button

我们可以看到 , el-button 提供了许多属性

我们重点关注一些重要的属性

2.1 type 属性

我们可以通过 type 属性来去指定具体的按钮属性 (样式)

比如 : 我们可以设置成主要按钮

<el-button type="primary">主要按钮</el-button>

具体代码如下 :

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <h1>使用按钮的属性</h1>
    <el-button type="primary">蓝色按钮</el-button>
    <el-button type="success">绿色按钮</el-button>
    <el-button type="info">灰色按钮</el-button>
    <el-button type="warning">橙色按钮</el-button>
    <el-button type="danger">红色按钮</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

要注意的是 , 在 ElementUI 中 , 所有组件的属性全部写在了组件标签中

<!-- type="primary" 写在了 el-button 标签中 -->
<el-button type="primary">主要按钮</el-button>
<!-- plain="true" 写在了 el-button 标签中 -->
<el-button type="primary" plain="true">主要按钮</el-button>
<!-- round 写在了 el-button 标签中 -->
<el-button type="info" round>信息按钮</el-button>

其中 , 我们如果在标签内声明了相关属性 , 默认就为 true , 无需手动指定 true / false

2.2 朴素按钮、圆角按钮

我们可以在属性中继续设置其他属性 , 比如设置当前标签为朴素按钮、是否为圆角按钮

如果某个属性默认值为 false , 我们直接指定对应属性即可 , 无需指定 true / false

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <h1>使用按钮的属性</h1>
    <!-- 通过 plain 属性设置为朴素按钮 -->
    <el-button type="primary" plain>蓝色按钮</el-button>
    <!-- 通过 round 属性设置为圆角按钮 -->
    <el-button type="success" round>绿色按钮</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

2.3 size 属性

那我们还可以指定 size 属性 , 可以设置三个大小 : medium、small、mini

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <h1>使用按钮的属性</h1>
    <!-- size 属性可以设置按钮大小, 分为 medium、small、mini -->
    <el-button type="primary" size="mini">蓝色按钮</el-button>
    <el-button type="success" size="small">绿色按钮</el-button>
    <el-button type="info" size="medium">灰色按钮</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

2.4 圆形按钮

我们可以使用 circle 属性来设置按钮是否为圆形按钮

我们使用圆形按钮 , 一般需要搭配图标属性来使用的

那我们就可以从 ElementUI 中提供给我们的一系列图标中选择一个我们喜欢的

https://element.eleme.cn/#/zh-CN/component/icon

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <!-- 通过 icon 属性设置圆形按钮图标样式 -->
    <el-button type="primary" circle icon="el-icon-loading"></el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

2.5 加载状态

通过 loading 属性设置当前按钮出现加载动画

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <!-- 通过 loading 属性设置当前按钮出现加载动画 -->
    <el-button type="primary" loading>加载按钮</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

2.6 禁用功能

如果我们不想让用户点击按钮的话 , 就可以通过 disabled 属性设置成禁用 , 这样用户就不可选中

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <!-- 通过 disabled 属性设置当前按钮不可选中 -->
    <el-button type="info" disabled>不可选中</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

此时 , 按钮就不可以被选中了

2.7 默认聚焦

默认聚焦指的是鼠标移动到按钮附近 , 就会自动选中当前按钮

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <!-- 通过 autofocus 属性设置当前按钮自动选中 -->
    <el-button type="primary" autofocus>自动选中</el-button>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

那其实这个属性比较难看出来效果

三 . 按钮组

我们可以将多个按钮作为组连接起来 , 这样样式就变成了两个按钮相连的效果

我们使用标签来嵌套多个按钮 , 形成按钮组

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <h1>按钮组的使用</h1>
    <!-- 使用 el-button-group 标签创建按钮组 -->
    <el-button-group>
      <el-button>上一页</el-button>
      <el-button>下一页</el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

我们可以查看一下效果

我们还可以设置成跟这个一样的效果 , 我们只需要设置成 primary 样式的按钮 , 然后添加 <、> 箭头图标即可

<template>
  <!-- 手动创建一个 div 标签 -->
  <div>
    <h1>按钮组的使用</h1>
    <!-- 使用 el-button-group 标签创建按钮组 -->
    <el-button-group>
      <el-button type="primary" icon="el-icon-back">上一页</el-button>
      <el-button type="primary" icon="el-icon-right">下一页</el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>

</style>