feat(button): [button] add custom-style attribute (#3535)

* feat(button): [button] add custom-style attribute

* fix: revise inspection comments

examples/sites/demos/apis/button.js

@@ -63,6 +63,21 @@ export default {
           pcDemo: 'dynamic-disabled',
           mfDemo: ''
         },
+        {
+          name: 'custom-style',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置 custom-style 属性按钮样式',
+            'en-US': 'Set the custom-style attribute to customize the button style'
+          },
+          meta: {
+            stable: '3.25.0'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'icon',
+          mfDemo: 'type'
+        },
         {
           name: 'ghost',
           type: 'boolean',

examples/sites/demos/mobile-first/app/button/type.vue

@@ -4,7 +4,7 @@
     <tiny-button type="primary"> 主要按钮 </tiny-button>
     <tiny-button type="success"> 成功按钮 </tiny-button>
     <tiny-button type="info"> 信息按钮 </tiny-button>
-    <tiny-button type="warning"> 警告按钮 </tiny-button>
+    <tiny-button type="warning" :custom-style="{ maxWidth: 'none' }"> 警告按钮 警告按钮警告按钮警告按钮</tiny-button>
     <tiny-button type="danger"> 危险按钮 </tiny-button>
     <tiny-button type="text"> 文本按钮 </tiny-button>
   </div>

examples/sites/demos/mobile-first/app/button/webdoc/button.js

@@ -72,9 +72,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>type</code> 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。<p>',
+          '<p>通过 <code>type</code> 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。设置 <code>custom-style</code> 属性按钮样式<p>',
         'en-US':
-          '<p>You can use the <code>type</code> attribute to set different theme styles, including primary, success, info, warning, danger, and text.</p>'
+          '<p>You can use the <code>type</code> attribute to set different theme styles, including primary, success, info, warning, danger, and text. The <code>custom-style</code> property sets the button style.</p>'
       },
       codeFiles: ['type.vue']
     },

examples/sites/demos/pc/app/button/icon-composition-api.vue

@@ -3,7 +3,9 @@
     <tiny-layout>
       <tiny-row>
         <tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
-        <tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
+        <tiny-button :icon="TinyIconSearch" :custom-style="{ maxWidth: 'none' }">
+          图标按钮图标按钮图标按钮图标按钮
+        </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="TinyIconStarO"> 图标按钮 </tiny-button>

examples/sites/demos/pc/app/button/icon.vue

@@ -3,7 +3,9 @@
     <tiny-layout>
       <tiny-row>
         <tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
-        <tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
+        <tiny-button :icon="IconSearch" :custom-style="{ maxWidth: 'none' }">
+          图标按钮图标按钮图标按钮图标按钮
+        </tiny-button>
         <tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="IconStarO"> 图标按钮 </tiny-button>

examples/sites/demos/pc/app/button/webdoc/button.js

@@ -47,8 +47,9 @@ export default {
         'en-US': 'Icon Button'
       },
       desc: {
-        'zh-CN': '通过 <code>icon</code> 属性，设置按钮展示图标。',
-        'en-US': 'Display icons and receive an icon component through the <code>icon</code> settings button'
+        'zh-CN': '通过 <code>icon</code> 属性，设置按钮展示图标。<code>custom-style</code>属性设置按钮样式。',
+        'en-US':
+          'Display icons and receive an icon component through the <code>icon</code> settings button. The <code>custom-style</code> property sets the button style.'
       },
       codeFiles: ['icon.vue']
     },

packages/vue/src/button/src/index.ts

@@ -79,6 +79,11 @@ export const buttonProps = {
     type: Boolean,
     default: false
   },
+  /** 自定义样式 */
+  customStyle: {
+    type: Object,
+    default: () => ({})
+  },
   /** 是否幽灵按钮 */
   ghost: Boolean,
   /** 点击事件 */

packages/vue/src/button/src/mobile-first.vue

@@ -22,6 +22,7 @@
         customClass
       )
     "
+    :style="customStyle"
     :tabindex="tabindex"
     v-bind="a($attrs, ['class', 'style', 'id'], true)"
   >
@@ -62,7 +63,8 @@ export default defineComponent({
     'tabindex',
     'href',
     'customClass',
-    'banner'
+    'banner',
+    'customStyle'
   ],
   components: { IconLoading: iconLoading() },
   setup(props, context): any {

packages/vue/src/button/src/pc.vue

@@ -30,6 +30,7 @@
         'is-only-icon': icon && !loading && !(text || slots.default)
       }
     ]"
+    :style="customStyle"
     :tabindex="tabindex"
     v-bind="a($attrs, ['class', 'style', 'title', 'id'], true)"
   >
@@ -66,7 +67,8 @@ export default defineComponent({
     'circle',
     'tabindex',
     'customClass',
-    'ghost'
+    'ghost',
+    'customStyle'
   ],
   components: { IconLoading: iconLoadingShadow() },
   setup(props, context) {