BootstrapVue Button 属性列表

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

Button属性列表

属性名称类型说明
hrefString链接的URL
refStringa标签的ref属性,rel 属性指定从源文档到目标文档的关系
targetString默认值'_self',a标签的target属性(_blank、_parent、_self、_top)
activeBoolean默认值false,设置为true表示按钮为激活状态
disabledBoolean默认值false,启用禁用按钮
toString 或
Object
router-link 属性: 表示vue router路由目标,也可以是对象或者路径字符串
:to="{path:'/users/itxst',query:{id:'1000'}}"
或 :to="/home/itxst"
appendBooleanrouter-link 属性:默认值false,append属性,地址栏无限制追加to内容
replaceBooleanrouter-link 属性:默认值false,设置true不会向history里面添加新的记录,
点击浏览器返回上一页按钮会跳转到上上一个页面
eventString 或 
Object
router-link 属性:设置触发链接的事件
active-classStringrouter-link 属性:设置按钮激活状态时的CSS类名
exactBooleanrouter-link 属性:默认值false,设置为true切换到别的路由的时候,激活样式一直存在
exact-active-classStringrouter-link 属性当exact为true的样式
router-tagStringrouter-link 属性,如果不熟悉vue router请点击下面链接查看
https://router.vuejs.org/zh/
no-prefetchBoolean默认false,nuxt-link 属性是否预先获取链接页面
blockBoolean默认false,设置为true按钮的宽度是100%(即父容器的宽度)
sizeString按钮的大小“sm”、“md”(默认)或“lg”
variantString主题颜色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.
typeString按钮类型'button', 'submit'或'reset'
tagString默认'button',设置要渲染的html标签
pillBoolean默认false,当设置为‘true’时,渲染成圆角外观的按钮
squaredBoolean默认false,当设置为‘true’时,渲染成直角外观的按钮
pressedBoolean当设置为‘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>

在线试一试