BootstrapVue Button 属性列表

BootstrapVue Button的组件属性列表默认值及说明，href、target、active、replace、type等属性。

Button属性列表

属性名称	类型	说明
href	String	链接的URL
ref	String	a标签的ref属性，rel 属性指定从源文档到目标文档的关系
target	String	默认值'_self'，a标签的target属性(_blank、_parent、_self、_top)
active	Boolean	默认值false，设置为true表示按钮为激活状态
disabled	Boolean	默认值false，启用禁用按钮
to	String 或 Object	router-link 属性: 表示vue router路由目标，也可以是对象或者路径字符串 :to="{path:'/users/itxst',query:{id:'1000'}}" 或 :to="/home/itxst"
append	Boolean	router-link 属性:默认值false，append属性，地址栏无限制追加to内容
replace	Boolean	router-link 属性:默认值false，设置true不会向history里面添加新的记录, 点击浏览器返回上一页按钮会跳转到上上一个页面
event	String 或 Object	router-link 属性:设置触发链接的事件
active-class	String	router-link 属性:设置按钮激活状态时的CSS类名
exact	Boolean	router-link 属性:默认值false，设置为true切换到别的路由的时候,激活样式一直存在
exact-active-class	String	router-link 属性当exact为true的样式
router-tag	String	router-link 属性，如果不熟悉vue router请点击下面链接查看 https://router.vuejs.org/zh/
no-prefetch	Boolean	默认false，nuxt-link 属性是否预先获取链接页面
block	Boolean	默认false，设置为true按钮的宽度是100%(即父容器的宽度)
size	String	按钮的大小“sm”、“md”(默认)或“lg”
variant	String	主题颜色variant 属性支持primary, secondary, success, danger, warning, info, light 和 dark.线框按钮支持outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light and outline-dark.
type	String	按钮类型'button'， 'submit'或'reset'
tag	String	默认'button',设置要渲染的html标签
pill	Boolean	默认false，当设置为‘true’时，渲染成圆角外观的按钮
squared	Boolean	默认false，当设置为‘true’时，渲染成直角外观的按钮
pressed	Boolean	当设置为‘true’时，点击按钮的下压效果

Button事件

<!--button支持click事件-->
<div id="app">
     <b-button @click="showMsg()" variant="success">点击这个按钮看看</b-button> 
     <b-button href="http://www.itxst.com" variant="warning">链接按钮</b-button> 
     <b-button to="/product" variant="primary">Vue-Router按钮 </b-button>
     <b-button type="submit" variant="info">Submit按钮</b-button>
     <b-button type="reset" variant="danger">Reset按钮</b-button>
    </div>
    <script>
        //注册BootstrapVue组件
        Vue.component('BootstrapVue', BootstrapVue);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                };
            },
            methods: { 
              showMsg(){
                alert(1);
              }
            }
        });
</script>

在线试一试