docs(button): [button] update image button demo

opentiny · Oct 29, 2024 · 5733029 · 5733029
1 parent f6f512f
commit 5733029
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/examples/sites/demos/pc/app/button/image-composition-api.vue b/examples/sites/demos/pc/app/button/image-composition-api.vue
@@ -1,17 +1,17 @@
 <template>
   <tiny-button class="demo-button">
-    <img :src="image" width="26" />
+    <img :src="image" />
     <span>图片按钮</span>
   </tiny-button>
 </template>
 
 <script setup>
 import { TinyButton } from '@opentiny/vue'
 
-const image = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/email.png`
+const image = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
 </script>
 
-<style>
+<style scoped>
 .demo-button img {
   width: 16px;
   height: 16px;

diff --git a/examples/sites/demos/pc/app/button/image.vue b/examples/sites/demos/pc/app/button/image.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-button class="demo-button">
-    <img :src="image" width="26" />
+    <img :src="image" />
     <span>图片按钮</span>
   </tiny-button>
 </template>
@@ -14,13 +14,13 @@ export default {
   },
   data() {
     return {
-      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/email.png`
+      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
 .demo-button img {
   width: 16px;
   height: 16px;

diff --git a/examples/sites/public/static/images/button-image.png b/examples/sites/public/static/images/button-image.png
diff --git a/examples/sites/public/static/images/email.png b/examples/sites/public/static/images/email.png
diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less
@@ -8,7 +8,8 @@
 .@{button-prefix-cls} {
   .inject-Button-vars();
 
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   appearance: none;
   text-align: center;
   white-space: nowrap;