这是我参与「第五届青训营 」笔记创作活动的第3天
搭建框架
vue create demo //创建项目
接下来的选择依据个人而定
初始化完成后，运行服务
cd demo //进入项目目录
yarn serve //运行服务
创建button
在./src/components/下创建button.vue文件，并创建vue模板
<template>
<button class="bbutton">
<slot></slot>
</button>
</template>
<script lang='ts'>
export default{
name: 'bbutton'
}
</script>
<style lang="scss" scoped>
</style>
这里使用了slot插槽来将文字传入button内
全局注册组件
在main.js文件注册bbutton组件
import Vue from 'vue'
import App from './App.vue'
import bbutton from './components/button.vue'
Vue.config.productionTip = false
Vue.component(bbutton.name, bbutton)
new Vue({
render: h => h(App)
}).$mount('#app')
使用button组件
在App.vue文件中使用该组件，可以按照以下的例子
<template>
<div id="app">
<bbutton>bb按钮</bbutton>
</div>
</template>
<script>
export default {
</script>
<style lang="scss" scoped>
</style>
以上便是最简单的button组件，接下来为button添加常用的属性
type属性
基本的type属性有：primary，success，cancel，warning，danger等
如何将type属性传入button呢？
首先在button.vue文件中添加props,，在其中添加type属性
<script lang='ts'>
export default {
name: 'bbutton',
props: {
type: {
type: String,
default: 'default'
}
}
}
</script>
这样就可以在使用bbutton组件时增加type属性，为了区分不同的type，需要为不同的type使用不同的sass样式
这里需要先将bbutton组件的type属性作为类传入，再用选择器对不同的类使用不同的样式
<template>
<button class="hm-button" :class="[`hm-button--${type}`]">
<slot></slot>
</button>
</template>
plain, round, circle, disabled 等属性
其余属性也是使用同样的方法添加，并对不同的类应用不同的样式
下面是bbutton.vue的内容
<template>
<button class="hm-button" :class="[`hm-button--${type}`, {
'is-plain': plain,
'is-round': round,
'is-circle': circle,
'is-disabled': disabled
}]">
<slot></slot>
</button>
</template>
<script lang='ts'>
export default {
name: 'bbutton',
props: {
type: {
type: String,
default: 'default'
},
plain: {
type: Boolean,
default: false
},
round: {
type: Boolean,
default: false
},
circle: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
}
</script>
<style lang="scss" scoped>
</style>
添加click方法
为bbutton组件添加click方法需要先在button中定义一个@click="handleClick"，并在methods中将其传入原有button的click()事件中
<template>
<button class="hm-button" :class="[`hm-button--${type}`, {
'is-plain': plain,
'is-round': round,
'is-circle': circle,
'is-disabled': disabled
}]">
<slot></slot>
</button>
</template>
<script lang='ts'>
export default {
name: 'bbutton',
props: {
type: {
type: String,
default: 'default'
},
plain: {
type: Boolean,
default: false
},
round: {
type: Boolean,
default: false
},
circle: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
handleClick (e) {
this.$emit('click', e)
}
}
</script>
<style lang="scss" scoped>
</style>
这样，一个最简单的button组件就基本创建完成了
