Button 按钮

Scan me!

按钮组件,可配置多种不同的按钮样式

引入

  1. import { Button } from 'mand-mobile'
  2. Vue.component(Button.name, Button)

代码演示

主按钮

  1. <template>
  2. <div class="md-example-child md-example-child-button md-example-child-button-0">
  3. <md-button>Primary</md-button>
  4. <md-button disabled>Primary Disabled</md-button>
  5. </div>
  6. </template>
  7. <script>
  8. import {Button} from 'mand-mobile'
  9. export default {
  10. name: 'button-demo',
  11. components: {
  12. [Button.name]: Button,
  13. },
  14. }
  15. </script>
  16.  

线性按钮小尺寸

  1. <template>
  2. <div class="md-example-child md-example-child-button md-example-child-button-2">
  3. <md-button type="ghost" size="small">Ghost-S</md-button>
  4. <md-button type="ghost" size="small" disabled style="margin-left:5px">Ghost-S</md-button>
  5. <md-button type="ghost-primary" size="small" style="margin-left:5px">Ghost-P-S</md-button>
  6. <md-button type="ghost-primary" size="small" disabled style="margin-left:5px">Ghost-P-S</md-button>
  7. </div>
  8. </template>
  9. <script>
  10. import {Button} from 'mand-mobile'
  11. export default {
  12. name: 'button-demo',
  13. components: {
  14. [Button.name]: Button,
  15. },
  16. }
  17. </script>
  18.  

线性按钮

  1. <template>
  2. <div class="md-example-child md-example-child-button md-example-child-button-1">
  3. <md-button type="ghost">Ghost</md-button>
  4. <md-button type="ghost" disabled style="margin-left:5px">Ghost</md-button>
  5. <md-button type="ghost-primary" style="margin-left:5px">Ghost-P</md-button>
  6. <md-button type="ghost-primary" disabled style="margin-left:5px">Ghost-P</md-button>
  7. </div>
  8. </template>
  9. <script>
  10. import {Button} from 'mand-mobile'
  11. export default {
  12. name: 'button-demo',
  13. components: {
  14. [Button.name]: Button,
  15. },
  16. }
  17. </script>
  18.  

文字链接按钮

  1. <template>
  2. <div class="md-example-child md-example-child-button md-example-child-button-3">
  3. <div class="md-example-box-content">每个人都有属于自己的一片森林,也许我们从来不曾去过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。</div>
  4. <md-button type="link">阅读全文</md-button>
  5. <div class="md-example-box-content" style="margin-top:10px">希望你可以记住我,记住我这样活过,这样在你身边待过。</div>
  6. <md-button type="link" icon="hollow-plus">加入收藏</md-button>
  7. <div class="md-example-box-content" style="margin-top:10px">少年时我们追求激情,成熟后却迷恋平庸。在我们寻找、伤害、背离之后,还能一如既往地相信爱情,这是一种勇气。</div>
  8. <md-button type="link" disabled>评论</md-button>
  9. </div>
  10. </template>
  11. <script>
  12. import {Button} from 'mand-mobile'
  13. export default {
  14. name: 'button-demo',
  15. components: {
  16. [Button.name]: Button,
  17. },
  18. }
  19. </script>
  20. <style lang="stylus" scoped>
  21. .md-example-child-button-3
  22. .md-example-box-content
  23. float left
  24. width 100%
  25. padding 60px h-gap-lg
  26. color color-text-base
  27. font-size font-minor-large
  28. text-align left
  29. background color-bg-base
  30. box-sizing border-box
  31. line-height 1.5
  32. text-indent 2em
  33. .md-button
  34. float left
  35. </style>
  36.  

API

Button Props

属性说明类型默认值备注
type按钮类型Stringprimaryprimary, ghost, ghost-primary, link
size按钮大小Stringlargelarge, small。仅在typeghost/ghost-primary时生效
icon按钮图标String-可选值请参考组件Icon
disabled是否禁用Booleanfalse-

Button Events

@click(event)

按钮点击事件