feat: add switch example

element-plus · Sep 13, 2023 · cee8df4 · cee8df4
1 parent e90e6b7
commit cee8df4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -10,20 +10,20 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "element-plus": "^2.3.9",
+    "element-plus": "^2.3.12",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@iconify-json/ep": "^1.1.12",
-    "@types/node": "^20.5.1",
-    "@vitejs/plugin-vue": "^4.3.1",
+    "@types/node": "^20.6.0",
+    "@vitejs/plugin-vue": "^4.3.4",
     "sass": "^1.66.1",
-    "typescript": "^5.1.6",
-    "unocss": "^0.53.6",
-    "unplugin-vue-components": "^0.25.1",
+    "typescript": "^5.2.2",
+    "unocss": "^0.55.7",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.9",
-    "vite-ssg": "^0.22.2",
-    "vue-tsc": "^1.8.8"
+    "vite-ssg": "^0.23.1",
+    "vue-tsc": "^1.8.11"
   },
   "license": "MIT"
 }
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     Logos: typeof import('./components/Logos.vue')['default']

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -12,6 +12,8 @@ const curDate = ref("");
 const toast = () => {
   ElMessage.success("Hello");
 };
+
+const value1 = ref(true);
 </script>
 
 <template>
@@ -44,6 +46,15 @@ const toast = () => {
     <el-tag type="info" class="m-1">Tag 1</el-tag>
   </div>
 
+  <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>
+
   <div class="my-2">
     <el-input class="m-2" v-model="input" style="width: 200px" />
     <el-date-picker