devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementPlus UI 按钮使用，图标，提示框，导航，标签页，提示框，水平导航，垂直导航，面包屑， 下拉菜单，带有边框的卡片的风格_elementui-plus 图标的使用

作者：Li_阴宅 | 2024-06-20 22:31:40

赞

踩

elementui-plus 图标的使用

2.图标 - 邓瑞编程 (dengruicode.com)

视频资源：

4.导航_哔哩哔哩_bilibili

第一步可以参考这篇：

Vue3如何使用element-ui_element ui vue 3-CSDN博客

-------------------------------------------button按钮

第二步引入

        

  1.  <template>
  2.         <h3>按钮</h3>
  3.         <el-button>默认按钮</el-button>
  4.         <el-button type="primary">主要按钮</el-button>
  5.         <el-button type="success">成功按钮</el-button>
  6.         <el-button type="info">信息按钮</el-button>
  7.         <el-button type="warning">警告按钮</el-button>
  8.         <el-button type="danger">危险按钮</el-button>
  9.  
  10.         <hr>
  11.         <h3>按钮属性</h3>
  12.         <el-button plain>朴素按钮</el-button>
  13.         <el-button round>圆角按钮</el-button>
  14.         <el-button circle>圆</el-button>
  15.         <el-button disabled>禁用按钮</el-button>
  16.         <el-button loading>加载中</el-button>
  17.  
  18.         <hr>
  19.         <h3>尺寸</h3>
  20.         <el-button size="large">大型按钮</el-button>
  21.         <el-button>默认按钮</el-button>
  22.         <el-button size="small">小型按钮</el-button>
  23.     </template>
  24.  
  25.     <style scoped>
  26.  
  27.     </style>

按钮呈现效果

图标引入

   局部引入，使用要注册组件

  1. <template>
  2.     <div>
  3.         <el-icon :size="size" :color="color">
  4.             <Edit></Edit>
  5.         </el-icon>
  6.     </div>
  7. </template>
  8.  
  9. <script>
  10. import { Edit } from '@element-plus/icons-vue';
  11. export default {
  12.     name: "MyIcons",
  13.     components: {
  14.         Edit
  15.     }
  16. }
  17. </script>
  18.  
  19. <style></style>

效果

提示框，三个组件为消息，确认框和通知

----------------------------------------------------提示框---------------------------------

通知属性

  1. <script setup>
  2. import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
  3.  
  4. // 消息
  5. const openMsg = () => {
  6.     ElMessage({
  7.         type: 'success', // success | warning | info | error
  8.         message: 'dengruicode.com',
  9.         showClose: true
  10.     })
  11. }
  12.  
  13. // 确认框
  14. const openConfirm = () => {
  15.     ElMessageBox.confirm('确认删除?', '标题', {
  16.         type: 'warning',
  17.         confirmButtonText: '确认',
  18.         cancelButtonText: '取消'
  19.     }).then(() => {
  20.         console.log('确认')
  21.     }).catch(() => {
  22.         console.log('取消')
  23.     })
  24. }
  25.  
  26. // 通知
  27. const openNotifiy = () => {
  28.     ElNotification({
  29.         title: '标题',
  30.         message: '邓瑞编程',
  31.         duration: 1500 // 展示时间 [单位:毫秒]
  32.     })
  33. }
  34.  
  35. // 通知2
  36. const openNotifiy2 = () => {
  37.     ElNotification({
  38.         type: 'success', // success | warning | info | error
  39.         title: '标题',
  40.         message: 'dengruicode.com',
  41.         duration: 1500,
  42.         position: 'bottom-right'
  43.     })
  44. }
  45. </script>
  46.  
  47. <template>
  48.     <el-button @click="openMsg">消息</el-button>
  49.     <el-button @click="openConfirm">确认框</el-button>
  50.     <el-button @click="openNotifiy">通知</el-button>
  51.     <el-button @click="openNotifiy2">通知2</el-button>
  52. </template>
  53.  
  54. <style scoped></style>

效果图 

----------------------------------------------导航-----------------------------------------

水平导航

代码写法，设置默认选中的标签

  1. <script setup>
  2.  import {  ref } from 'vue'
  3. //默认选中的菜单索引
  4. //const selectedIndex = ref("2-2")
  5. const selectedIndex = ref("3")
  6. //选中菜单触发的回调
  7. const selected = (index, indexPath) => {
  8.      console.log("index", index, "indexPath", indexPath)
  9. }
  10. </script>
  11. <template>
  12.     <h3>水平导航</h3>
  13.     <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected">
  14.         <el-menu-item index="1">邓瑞编程</el-menu-item>
  15.         <el-sub-menu index="2">
  16.             <template #title>我的工作台</template>
  17.             <el-menu-item index="2-1">选项1</el-menu-item>
  18.             <el-menu-item index="2-2">选项2</el-menu-item>
  19.             <el-menu-item index="2-3">选项3</el-menu-item>
  20.         </el-sub-menu>
  21.         <el-menu-item index="3">消息中心</el-menu-item>
  22.         <el-menu-item index="4">订单管理</el-menu-item>
  23.     </el-menu>
  24. </template>

设置字体颜色，设置选中的字体颜色

  1. <h3>水平导航-自定义样式</h3>
  2.     <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
  3.         text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
  4.         <el-menu-item index="1">邓瑞编程</el-menu-item>
  5.         <el-sub-menu index="2">
  6.             <template #title>我的工作台</template>
  7.             <el-menu-item index="2-1">选项1</el-menu-item>
  8.             <el-menu-item index="2-2">选项2</el-menu-item>
  9.             <el-menu-item index="2-3">选项3</el-menu-item>
  10.         </el-sub-menu>
  11.         <el-menu-item index="3">消息中心</el-menu-item>
  12.         <el-menu-item index="4">订单管理</el-menu-item>
  13.     </el-menu>

垂直导航写法,style中可以定义宽度

 

  1.  
  2.     <h3>垂直导航</h3><br>
  3.     <el-menu :default-active="selectedIndex" @select="selected" style="width: 200px;">
  4.         <el-sub-menu index="1">
  5.             <template #title>
  6.                 <el-icon>
  7.                     <Search />
  8.                 </el-icon>
  9.                 <span>导航一</span>
  10.             </template>
  11.             <el-menu-item-group>
  12.                 <el-menu-item index="1-1">选项1</el-menu-item>
  13.                 <el-menu-item index="1-2">选项2</el-menu-item>
  14.             </el-menu-item-group>
  15.         </el-sub-menu>
  16.         <el-menu-item index="2">
  17.             <el-icon>
  18.                 <Edit />
  19.             </el-icon>
  20.             <template #title>导航二</template>
  21.         </el-menu-item>
  22.         <el-menu-item index="3">
  23.             <el-icon>
  24.                 <Delete />
  25.             </el-icon>
  26.             <template #title>导航三</template>
  27.         </el-menu-item>
  28.         <el-menu-item index="4">
  29.             <el-icon>
  30.                 <Setting />
  31.             </el-icon>
  32.             <template #title>导航四</template>
  33.         </el-menu-item>
  34.     </el-menu>

面包屑,separator时分割符的意思

  1.     <h3>面包屑</h3>
  2.     <el-breadcrumb separator="/">
  3.         <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
  4.         <el-breadcrumb-item>邓瑞编程</el-breadcrumb-item>
  5.         <el-breadcrumb-item>dengruicode.com</el-breadcrumb-item>
  6.     </el-breadcrumb>

 下拉菜单

  1. <h3>下拉菜单</h3><br>
  2.     <el-dropdown @command="userCommand">
  3.         <span>
  4.             个人中心<el-icon>
  5.                 <User />
  6.             </el-icon>
  7.         </span>
  8.         <template #dropdown>
  9.             <el-dropdown-menu>
  10.                 <el-dropdown-item command="order">订单</el-dropdown-item>
  11.                 <el-dropdown-item command="logout">退出</el-dropdown-item>
  12.             </el-dropdown-menu>
  13.         </template>
  14.     </el-dropdown>

---------------------标签页---------------------------------------------------------------

v-model是用来定义默认选中的标签和名称

点击标签页时，调用Click方法

卡片2的内容，点击2呈现2 

标签页默认风格代码：

  1. <script setup>
  2.  
  3. import { ref, reactive } from 'vue'
  4.  
  5. //默认选中的标签名称
  6. const selectedName = ref("2")
  7.  
  8. //选中标签触发的回调
  9. const tabClick = (tab, event) => {
  10.     console.log("tab", tab.props, "event", event)
  11. }
  12.  
  13. const tab = reactive({
  14.     arr: [
  15.         { name: "1", title: '邓瑞', content: '内容1' },
  16.         { name: "2", title: '邓瑞编程', content: '内容2' },
  17.         { name: "3", title: 'dengruicode.com', content: '内容3' },
  18.     ]
  19. })
  20. </script>
  21. <template>
  22.     <h3>标签页</h3>
  23.     <el-tabs v-model="selectedName" @tab-click="tabClick">
  24.         <el-tab-pane label="邓瑞" name="1">内容1</el-tab-pane>
  25.         <el-tab-pane label="邓瑞编程" name="2">内容2</el-tab-pane>
  26.         <el-tab-pane label="dengruicode.com" name="3">内容3</el-tab-pane>
  27.     </el-tabs>
  28. </template>

卡片风格

  1.  <h3>卡片风格</h3>
  2.     <el-tabs v-model="selectedName" @tab-click="tabClick" type="card">
  3.         <el-tab-pane label="邓瑞" name="a">内容1</el-tab-pane>
  4.         <el-tab-pane label="邓瑞编程" name="b">内容2</el-tab-pane>
  5.         <el-tab-pane label="dengruicode.com" name="b">内容3</el-tab-pane>
  6.     </el-tabs>

带有边框的卡片的风格

  1. <h3>带有边框的卡片风格</h3>
  2.     <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
  3.         <el-tab-pane label="邓瑞" name="A">内容1</el-tab-pane>
  4.         <el-tab-pane label="邓瑞编程" name="B">内容2</el-tab-pane>
  5.         <el-tab-pane label="dengruicode.com" name="C">内容3</el-tab-pane>
  6.     </el-tabs>

动态删除和添加

  1. const tabAdd = () => {
  2.     let index = tab.arr.length
  3.     index++
  4.  
  5.     tab.arr.push({
  6.         name: index,
  7.         title: '新选项卡' + index,
  8.         content: '内容' + index
  9.     })
  10. }
  11.  
  12. //移除
  13. const tabRemove = (name) => {
  14.     console.log("name:", name)
  15.  
  16.     const index = tab.arr.findIndex((value) => {
  17.         return value.name === name
  18.     })
  19.  
  20.     tab.arr.splice(index, 1) //移除元素
  21. }
  1. <h3>动态添加</h3>
  2.     <el-button @click="tabAdd">添加</el-button>
  3.  
  4.     <el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
  5.         <el-tab-pane v-for="(value) in tab.arr" :key="value.name" :label="value.title" :name="value.name">
  6.             {{ value.content }}
  7.         </el-tab-pane>
  8.     </el-tabs>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/741094
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号