feat: add more element-plus components demo

Author: YunYouJun

app/assets/scss/element/index.scss

@@ -3,13 +3,13 @@ $-colors: (
     'base': rgba(107,33,168, 1),
   ),
   'success': (
-    'base': #67c23a,
+    'base': green,
   ),
   'warning': (
-    'base': #e6a23c,
+    'base': #f9a23c,
   ),
   'danger': (
-    'base': #f56c6c,
+    'base': #ff3300,
   ),
   'error': (
     'base': #f56c6c,

app/components/TheExamples.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import zhCn from "element-plus/es/locale/lang/zh-cn";
 
-const timeValue = ref("");
 const hello = () => ElMessage.info("hello world");
 const helloSuccess = () => ElMessage.success("hello world");
 
@@ -47,25 +45,11 @@ const colorMode = computed({
 
   <TheCounter class="m-4" />
 
-  <br >
-
-  <el-icon class="cursor-pointer">
-    <el-icon-grape />
-  </el-icon>
-  <el-icon class="cursor-pointer">
-    <ElIconIceCream />
-  </el-icon>
-  <el-icon class="cursor-pointer mb-4">
-    <ElIconIceDrink />
-  </el-icon>
-
-  <br >
-
-  <el-config-provider :locale="zhCn">
-    <el-date-picker
-      v-model="timeValue"
-      type="date"
-      placeholder="请选择日期"
-    />
-  </el-config-provider>
+  <div class="flex flex-col gap-2 items-center justify-center">
+    <ExampleDatePickers />
+    <ExampleIcons />
+    <ExampleButtons />
+    <ExampleSwitches />
+    <ExampleTags />
+  </div>
 </template>

app/components/example/Buttons.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const count = ref(0)
+</script>
+
+<template>
+  <div class="my-2 flex flex-wrap items-center justify-center text-center">
+    <el-button @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="primary" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="success" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="warning" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="danger" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="info" @click="count++">
+      count is: {{ count }}
+    </el-button>
+  </div>
+</template>

app/components/example/DatePickers.vue

@@ -0,0 +1,16 @@
+
+<script setup lang="ts">
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+
+const timeValue = ref("");
+</script>
+
+<template>
+  <el-config-provider :locale="zhCn">
+    <el-date-picker
+      v-model="timeValue"
+      type="date"
+      placeholder="请选择日期"
+    />
+  </el-config-provider>
+</template>

app/components/example/Icons.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="pt-4 flex gap-2">
+    <el-icon class="cursor-pointer">
+      <el-icon-grape />
+    </el-icon>
+    <el-icon class="cursor-pointer">
+      <ElIconIceCream />
+    </el-icon>
+    <el-icon class="cursor-pointer mb-4">
+      <ElIconIceDrink />
+    </el-icon>
+  </div>
+</template>

app/components/example/Switches.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const value1 = ref(true)
+</script>
+
+<template>
+  <div>
+    <el-switch v-model="value1" />
+    <el-switch
+      v-model="value1"
+      class="m-2"
+      style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
+    />
+  </div>
+</template>

app/components/example/Tags.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <el-tag type="success" class="m-1">
+      Tag 1
+    </el-tag>
+    <el-tag type="warning" class="m-1">
+      Tag 1
+    </el-tag>
+    <el-tag type="danger" class="m-1">
+      Tag 1
+    </el-tag>
+    <el-tag type="info" class="m-1">
+      Tag 1
+    </el-tag>
+  </div>
+</template>