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
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
type | 按钮类型 | String | primary | primary , ghost , ghost-primary , link |
size | 按钮大小 | String | large | large , small 。仅在type 为ghost/ghost-primary 时生效 |
icon | 按钮图标 | String | - | 可选值请参考组件Icon |
disabled | 是否禁用 | Boolean | false | - |
Button Events
@click(event)
按钮点击事件