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'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6. const app = createApp(App)
  8. app.use(ElementPlus)
  10. 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>
  21.     <div>
  22.       <div class="demo-color-block">
  23.         <h2>ColorPicker 颜色选择器</h2>
  24.         <el-color-picker v-model="color" show-alpha />
  25.       </div>
  26.     </div>
  27.     <div>
  28.       <div class="block">
  29.         <h2>日历</h2>
  30.         <el-date-picker v-model="value1" type="date" placeholder="Pick a day">
  31.         </el-date-picker>
  32.       </div>
  33.     </div>
  34.     <div>
  35.       <h2>Rate评分</h2>
  36.       <el-rate v-model="ratevalue" allow-half />
  37.     </div>
  38.     <div>
  39.       <h2>Switch 开关</h2>
  40.       <el-switch
  41.         v-model="switchvalue"
  42.         active-color="#13ce66"
  43.         inactive-color="#ff4949"
  44.       />
  45.     </div>
  46.   </div>
  47. </template>
  49. <script>
  50. import { defineComponent, ref, reactive, toRefs } from "vue";
  51. import {
  52.   Search,
  53.   Edit,
  54.   Check,
  55.   Message,
  56.   Star,
  57.   Delete,
  58.   ElIcon,
  59.   Moon,
  60.   Avatar,
  61.   Bicycle,
  62. } from "@element-plus/icons";
  64. export default defineComponent({
  65.   setup() {
  66.     const state = reactive({
  67.       disabledDate(time) {
  68.         return time.getTime() > Date.now();
  69.       },
  70.       value1: "",
  71.     });
  72.     const color = ref("rgba(13,100,102,0.8)");
  73.     return {
  74.       color,
  75.       ...toRefs(state),
  76.       ratevalue: ref(null),
  77.     };
  78.   },
  79.   components: {
  80.     // 图标插件
  81.     Search,
  82.     Edit,
  83.     Check,
  84.     Message,
  85.     Star,
  86.     Delete,
  87.     ElIcon,
  88.     Moon,
  89.     Avatar,
  90.     Bicycle,
  91.   },
  92.   data() {
  93.     return {
  94.       switchvalue: true,
  95.     };
  96.   },
  97. });
  98. </script>
  100. <style lang="less"></style>
  • 效果图

更多相关文章

  1. 初学者的docker学习
  2. node npm webpack初步体验
  3. 什么是RockyLinux，你应该考虑吗？
  4. Ubuntu中安装vmware tools工具
  5. Docker php安装扩展步骤
  6. Elasticsearch—用logstash增量导入Mysql数据
  7. Elasticsearch 5.0.0集群安装
  8. php生成PDF文件的方法
  9. json数据类型，安装MySQL

随机推荐

  1. android与html5的交互——数据库操作，UI操
  2. Android源码分析之WindowManager.LayoutP
  3. android googleMap使用并在指定的位置上
  4. Google Android开发精华教程
  5. Android中调用startActivity结果导致：java
  6. Android消息机制字典型探究（二）
  7. Android(安卓)Sqlite的增、删、改、查
  8. android调用照相机拍照获取照片并做简单
  9. Android(安卓)RIL CDMA分支总结(1)
  10. Android应用程序基础知识