登录  /  注册
博主信息
博文 48
粉丝 0
评论 3
访问量 54967
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Element Plus组件-按钮、图标、ColorPicker 颜色选择器、日历、Rate评分、Switch 开关
江流
原创
4488人浏览过

Element Plus组件

——按钮、图标、ColorPicker 颜色选择器、日历、Rate评分、Switch 开关

安装 Element Plus

npm install element-plus --save

  • main.js 全局引用
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import ElementPlus from 'element-plus'
  4. import 'element-plus/dist/index.css'
  5. const app = createApp(App)
  6. app.use(ElementPlus)
  7. app.mount('#app')

安装icon

npm install @element-plus/icons

App.vue

  1. <template>
  2. <div>
  3. <div>
  4. <h2>按钮图标</h2>
  5. <el-button type="primary">Primary</el-button>
  6. <el-button type="success" circle>
  7. <div style="width: 20px; height: 20px"><edit></edit></div>
  8. </el-button>
  9. </div>
  10. <div style="font-size: 20px">
  11. <edit style="width: 1em; height: 1em; margin-right: 8px" />
  12. <delete style="width: 1em; height: 1em; margin-right: 8px" />
  13. <search style="width: 1em; height: 1em; margin-right: 8px" />
  14. <moon style="width: 1em; height: 1em; margin-right: 8px" />
  15. <message style="width: 1em; height: 1em; margin-right: 8px" />
  16. <star style="width: 1em; height: 1em; margin-right: 8px" />
  17. <Avatar style="width: 1em; height: 1em; margin-right: 8px" />
  18. <Bicycle style="width: 1em; height: 1em; margin-right: 8px" />
  19. </div>
  20. <div>
  21. <div class="demo-color-block">
  22. <h2>ColorPicker 颜色选择器</h2>
  23. <el-color-picker v-model="color" show-alpha />
  24. </div>
  25. </div>
  26. <div>
  27. <div class="block">
  28. <h2>日历</h2>
  29. <el-date-picker v-model="value1" type="date" placeholder="Pick a day">
  30. </el-date-picker>
  31. </div>
  32. </div>
  33. <div>
  34. <h2>Rate评分</h2>
  35. <el-rate v-model="ratevalue" allow-half />
  36. </div>
  37. <div>
  38. <h2>Switch 开关</h2>
  39. <el-switch
  40. v-model="switchvalue"
  41. active-color="#13ce66"
  42. inactive-color="#ff4949"
  43. />
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. import { defineComponent, ref, reactive, toRefs } from "vue";
  49. import {
  50. Search,
  51. Edit,
  52. Check,
  53. Message,
  54. Star,
  55. Delete,
  56. ElIcon,
  57. Moon,
  58. Avatar,
  59. Bicycle,
  60. } from "@element-plus/icons";
  61. export default defineComponent({
  62. setup() {
  63. const state = reactive({
  64. disabledDate(time) {
  65. return time.getTime() > Date.now();
  66. },
  67. value1: "",
  68. });
  69. const color = ref("rgba(13,100,102,0.8)");
  70. return {
  71. color,
  72. ...toRefs(state),
  73. ratevalue: ref(null),
  74. };
  75. },
  76. components: {
  77. // 图标插件
  78. Search,
  79. Edit,
  80. Check,
  81. Message,
  82. Star,
  83. Delete,
  84. ElIcon,
  85. Moon,
  86. Avatar,
  87. Bicycle,
  88. },
  89. data() {
  90. return {
  91. switchvalue: true,
  92. };
  93. },
  94. });
  95. </script>
  96. <style lang="less"></style>
  • 效果图

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
**笑 2021-11-09 16:53:55
element-plus ,学到了,很好。
1楼
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学