import Vue from 'vue';
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
/* 使用px：import {Button, ButtonGroup} from 'vue-ydui/dist/lib.px/button'; */
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);<template>
<div>
<yd-button type="primary">primary</yd-button>
<yd-button type="danger">danger</yd-button>
<yd-button type="warning">warning</yd-button>
<yd-button type="hollow">hollow</yd-button>
<yd-button type="disabled" disabled>disabled</yd-button>
</div>
</template>
<script type="text/babel">
export default {
}
</script>设置type属性改变按钮组件颜色；
<template>
<div>
<yd-button size="large" type="primary">primary</yd-button>
<yd-button size="large" type="danger">danger</yd-button>
<yd-button size="large" type="warning">warning</yd-button>
<yd-button size="large" type="disabled" disabled>disabled</yd-button>
<yd-button size="large" type="hollow">hollow</yd-button>
<yd-button size="large" bgcolor="#000" color="#FFF">Custom Color</yd-button>
</div>
</template>
<script type="text/babel">
export default {
}
</script>设置size属性为large即为块级按钮；
设置bgcolor(背景颜色)和color(字体颜色)即可自定义按钮颜色。
<template>
<yd-button-group>
<yd-button size="large" type="primary">Block Button</yd-button>
</yd-button-group>
</template>
<script type="text/babel">
export default {
}
</script>实际上分组只是将按钮间隔屏幕两边的距离，否则按钮将贴至屏幕边缘，在块级按钮外部添加yd-button-group即可。
<template>
<yd-button-group>
<yd-button size="large" @click.native="handleClick" type="danger">Bind Click</yd-button>
</yd-button-group>
</template>
<script type="text/babel">
export default {
methods: {
handleClick() {
alert('Hello World!');
}
}
}
</script>使用@click不加修饰符绑定事件将是无效的。