Button 按钮

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

引入

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

代码演示

主按钮

<template>
  <div class="md-example-child md-example-child-button md-example-child-button-0">
    <md-button>Primary</md-button>
    <md-button disabled>Primary Disabled</md-button>
  </div>
</template>
<script>
import {Button} from 'mand-mobile'
export default {
  name: 'button-demo',
  components: {
    [Button.name]: Button,
  },
}
</script>
 
                

线性按钮小尺寸

<template>
  <div class="md-example-child md-example-child-button md-example-child-button-2">
    <md-button type="ghost" size="small">Ghost-S</md-button>
    <md-button type="ghost" size="small" disabled style="margin-left:5px">Ghost-S</md-button>
    <md-button type="ghost-primary" size="small" style="margin-left:5px">Ghost-P-S</md-button>
    <md-button type="ghost-primary" size="small" disabled style="margin-left:5px">Ghost-P-S</md-button>
  </div>
</template>
<script>
import {Button} from 'mand-mobile'
export default {
  name: 'button-demo',
  components: {
    [Button.name]: Button,
  },
}
</script>
 
                

线性按钮

<template>
  <div class="md-example-child md-example-child-button md-example-child-button-1">
    <md-button type="ghost">Ghost</md-button>
    <md-button type="ghost" disabled style="margin-left:5px">Ghost</md-button>
    <md-button type="ghost-primary" style="margin-left:5px">Ghost-P</md-button>
    <md-button type="ghost-primary" disabled style="margin-left:5px">Ghost-P</md-button>
  </div>
</template>
<script>
import {Button} from 'mand-mobile'
export default {
  name: 'button-demo',
  components: {
    [Button.name]: Button,
  },
}
</script>
 
                

文字链接按钮

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

API

Button Props

Button Events

@click(event)

按钮点击事件