<div id="app">
        <div class="container">
            <div class="block">
                <vue-button btn-text="Primary" btn-type="primary"></vue-button>
                <vue-button btn-text="Secondary" btn-type="secondary"></vue-button>
                <vue-button btn-text="Success" btn-type="success"></vue-button>
                <vue-button btn-text="Danger" btn-type="danger"></vue-button>
                <vue-button btn-text="Warning" btn-type="warning"></vue-button>
                <vue-button btn-text="Info" btn-type="info"></vue-button>
                <vue-button btn-text="Light" btn-type="light"></vue-button>
                <vue-button btn-text="Dark" btn-type="dark"></vue-button>
                <vue-button btn-text="Link" btn-type="link"></vue-button>
            </div>

            <div class="block">
                <vue-button btn-text="Primary" btn-outline="primary"></vue-button>
                <vue-button btn-text="Secondary" btn-outline="secondary"></vue-button>
                <vue-button btn-text="Success" btn-outline="success"></vue-button>
                <vue-button btn-text="Danger" btn-outline="danger"></vue-button>
                <vue-button btn-text="Warning" btn-outline="warning"></vue-button>
                <vue-button btn-text="Info" btn-outline="info"></vue-button>
                <vue-button btn-text="Light" btn-outline="light"></vue-button>
                <vue-button btn-text="Dark" btn-outline="dark"></vue-button>
                <vue-button btn-text="Link" btn-outline="link"></vue-button>
            </div>

            <div class="block">
                <vue-button btn-text="Large button" btn-type="primary" btn-size="lg"></vue-button>
                <vue-button btn-text="Default button" btn-type="primary"></vue-button>
                <vue-button btn-text="Small button" btn-type="primary" btn-size="sm"></vue-button>
            </div>
            <div class="block">
                <vue-button btn-text="Large block button" btn-type="primary" btn-size="lg" btn-block=true></vue-button>
                <vue-button btn-text="Small block button" btn-type="primary" btn-size="sm" btn-block=true></vue-button>
            </div>
            <div class="block">
                <vue-button btn-text="Primary" btn-type="primary" btn-size="lg" btn-active=true></vue-button>
            </div>
        </div>
    </div>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  margin: 10px 0;
}

Vue.component('vue-button', {
    props: [
        'btnText',    // 按钮文本内容
        'btnType',    // 按钮类型
        'btnSize',    // 按钮尺寸大小
        'btnOutline', // 只有边框的按钮样式
        'btnActive',  // 按钮状态，是一个布尔值，true表示激活（当前状态）
        'btnBlock'    // 按钮是不是块元素，是一个布遥值，true表示块元素
    ],
    template: `
        <button type="button" class="btn" 
            :class='[computedType, computedSize, computedOutline, computedActive, computedBlock]'
        >{{ btnText }}</button>
    `,
    computed: {
        // 控制按钮的类型
        computedType: function () {
            return `btn-${this.btnType}`
        },

        // 控制按钮大小尺寸
        computedSize: function () {
            return `btn-${this.btnSize}`
        },

        // 控制按钮边框
        computedOutline: function () {
            return `btn-outline-${this.btnOutline}`
        },

        // 控制按钮是否激活
        computedActive: function () {
            return  this.btnActive === 'true' ? 'active' : ''
        },

        // 控制按钮是否是块元素
        computedBlock: function () {
            return this.btnBlock === 'true' ? 'btn-block' : ''
        }
    }
})

let app = new Vue({
  el: '#app'
})