Vue 2.0学习笔记:创建Button组件

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一节中,咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例,了解了怎么注册全局组件和局部组件。并且通过这些基础知识,可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋,和我们想像的组件相差甚远。那么今天我们来看看,怎么在Vue中创建一个按钮组件。

以Bootstrap的按钮为例

很多人说Bootstrap很拙逼,灵活性不够。但我不这么认为,我是Bootstrap的粉丝,我一直很推崇Bootstrap。并不是因为其效果有多牛逼,我膜拜的是他的设计思想。别的不多说了,今天我们的目的是使用Vue来创建一个按钮组件。那么我们就用Bootstrap的按钮来举例。在Bootstrap中的按钮分为ButtonsButton组两个组件,今天先来看Buttons组件

先来简单的回忆Bootstrap的Buttons组件,其效果和使用方式如下:

简单分析

该组件是从Bootstrap4中获取的。正如上图所示,按钮中有很多不同的类和参数,所以我们将创建一个组件来完成。该组件是可以双向绑定的,也可以用于不同的地方。

根据Bootstrap的按钮风格,我们将处理各种属性,比如:

  • btnText:按钮的文本
  • btnSize:按钮的大小,在Bootstrap中是通过btn-lgbtn-sm来控制
  • btnType:按钮的类型,在Bootstrap中是通过btn-primarybtn-secondarybtn-successbtn-dangerbtn-warningbtn-infobtn-lightbtn-dark等类名来控制
  • btnOutline:边框按钮,在Bootstrap中是通过btn-outline-primarybtn-outline-secondarybtn-outline-successbtn-outline-danger等类名来控制
  • btnActive:按钮的状态,它是一个布尔值,用来控制按钮是否是当前状态,在Bootstrap中,如果有active类名,表示按钮是当前状态(激活状态)
  • btnBlock:按钮是不是块级元素,它也是一个布尔值,在Bootstrap中通过btn-block类名来控制,如果有这个类名,按钮是一个块级元素

这是对于Bootstrap中单个按钮会碰到的各种样式风格。在BootStrap中,还有一个按钮组的概念:

咱们先看看Vue怎么来写button组件。

创建按钮组件

通过前面的对Bootstrap组件的分析,可以得知,创建button组件时,其对应的props属性将会有btnTextbtnSizebtnTypebtnOutlinebtnActivebtnBlock。而在上一节中,我们知道怎么注册组件。那么接下来,直接使用注册组件的语法糖来创建。

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' : ''
        }
    }
})

上面的代码其实表示我们已经完成了按钮组件的注册,在继续往下之前,先试着了解已经完成的工作:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/create-bootstrap-v4-button-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部