Element Plus组件-按钮、图标、ColorPicker 颜色选择器、日历、Rate评分、Switch 开关

Element Plus组件

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

安装 Element Plus

npm install element-plus --save

• main.js 全局引用

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

安装icon

npm install @element-plus/icons

App.vue

<template>
  <div>
    <div>
      <h2>按钮图标</h2>
      <el-button type="primary">Primary</el-button>
      <el-button type="success" circle>
        <div style="width: 20px; height: 20px"><edit></edit></div>
      </el-button>
    </div>
    <div style="font-size: 20px">
      <edit style="width: 1em; height: 1em; margin-right: 8px" />
      <delete style="width: 1em; height: 1em; margin-right: 8px" />
      <search style="width: 1em; height: 1em; margin-right: 8px" />
      <moon style="width: 1em; height: 1em; margin-right: 8px" />
      <message style="width: 1em; height: 1em; margin-right: 8px" />
      <star style="width: 1em; height: 1em; margin-right: 8px" />
      <Avatar style="width: 1em; height: 1em; margin-right: 8px" />
      <Bicycle style="width: 1em; height: 1em; margin-right: 8px" />
    </div>

    <div>
      <div class="demo-color-block">
        <h2>ColorPicker 颜色选择器</h2>
        <el-color-picker v-model="color" show-alpha />
      </div>
    </div>
    <div>
      <div class="block">
        <h2>日历</h2>
        <el-date-picker v-model="value1" type="date" placeholder="Pick a day">
        </el-date-picker>
      </div>
    </div>
    <div>
      <h2>Rate评分</h2>
      <el-rate v-model="ratevalue" allow-half />
    </div>
    <div>
      <h2>Switch 开关</h2>
      <el-switch
        v-model="switchvalue"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from "vue";
import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,
  ElIcon,
  Moon,
  Avatar,
  Bicycle,
} from "@element-plus/icons";

export default defineComponent({
  setup() {
    const state = reactive({
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      value1: "",
    });
    const color = ref("rgba(13,100,102,0.8)");
    return {
      color,
      ...toRefs(state),
      ratevalue: ref(null),
    };
  },
  components: {
    // 图标插件
    Search,
    Edit,
    Check,
    Message,
    Star,
    Delete,
    ElIcon,
    Moon,
    Avatar,
    Bicycle,
  },
  data() {
    return {
      switchvalue: true,
    };
  },
});
</script>

<style lang="less"></style>

• 效果图