LOLstyle-ui组件开发实战（二）—— Button组件(一)

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

在上一篇文章里已经用脚手架搭建好了项目环境，今天就介绍如何封装一个Button组件从建立、注册到使用。

一. 建立、注册、使用组件

1. 建立

在componets文件夹下建立一个button.vue的文件，放置button组件代码。

<template>
  <button class="lol-button"> This is a Button </button>
</template>
 
<script> export default { name: 'lolButton' } </script>
 
<style lang="scss" scoped> </style>
复制代码

2. 注册

在建立完组件后，就须要到main.js中注册组件后就可使用。

import Vue from 'vue'
import App from './App.vue'
// 导入button组件
import lolButton from './components/button.vue'
 
Vue.config.productionTip = false
 
// 注册组件
Vue.component(lolButton.name, lolButton)
 
new Vue({
  render: h => h(App)
}).$mount('#app')
复制代码

3. 使用

如今就能够在项目中使用了，咱们能够直接在App.vue中使用<lol-button></lol-button>使用咱们的button组件

<template>
  <div id="app"> <h1>LOLstyle-ui</h1> <div class="button-div"> // 使用lol-button组件 <lol-button></lol-button> </div> </div>
</template>

<script> export default { name: 'App' } </script>

<style lang="scss"> body { background-color: #0D1E28 } h1 { color: #CDBE91 } </style>

复制代码

4. 实现效果：

这就是最基本的组件封装流程。

二. 封装一个LOL风格的Button组件

1. 组件基本样式

下面是我LOLstyle-ui的样式，你们本身能够按照本身的需求设计不一样的样式

@mixin button-hover {
  color: #f0e6d2;
  border-image: linear-gradient(#f0e6d2, #DBAA41) 20 20;
}
.lol-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border-image: linear-gradient(#cdbe91, #88652A) 20 20;
  color: #cdbe91;
  background: #1e2328;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  user-select: none;
  outline: none;
  margin: 0;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;

  & + & {
    margin-left: 10px;
  }

  &:hover{
    @include button-hover;
  }

  &:focus{
    @include button-hover;
    background: linear-gradient(#1e2328, #3A3628);
  }

  &:active {
    @include button-hover;
  }

  &::-moz-focus-inner {
    border: 0;
  }
}
复制代码

将上面的代码放入button.vue中，就能够实现下面的效果

2. 组件插槽

咱们在建立lolButton时将button里的文本内容固定为This is a button致使不管咱们在使用如何写入新的内容都只能显示为This is a button，如

这显然不是咱们想要实现的效果，这时候就须要使用到插槽来帮助咱们。

插槽的使用很是简单，凡是但愿组件中内容能够灵活设置的地方，均可以用slot插槽来自定义内容。

使用slot来定义按钮上的文本内容：

<template>
    <button class="lol-button"> <span><slot></slot></span> </button>
</template>
复制代码

如今就能够正常显示咱们须要的内容了

3. button组件实现不一样属性

咱们但愿button组件能够接受不一样的属性来显示不一样的样式：

支持的属性

参数名	参数描述	参数类型	默认值
plain	是不是朴素按钮	Boolean	false
round	是不是圆角按钮	Boolean	false
circle	是不是圆形按钮	Boolean	false
disabled	是否禁用钮	Boolean	false

1). 支持button组件的plain属性

①.父组件传递plain组件

<template>
  <div id="app"> <h1>LOLstyle-ui</h1> <div class="button-div"> <lol-button plain>Plain button</lol-button> </div> </div>
</template>
复制代码

②.子组件接收父组件传值

子组件接收父组件传递的数据，同时进行props校验，并将默认值设为false

props: {
    plain: {
        type: Boolean,
        default: false
    }
}
复制代码

③.经过绑定类名的方法动态控制样式

<template>
  <button class="lol-button" :class="[{ 'is-plain': plain }]" > <span><slot></slot></span> </button>
</template>
复制代码

④.设置不一样的样式

&.is-plain {
    background: rgba(30, 35, 40, .5);
    &:hover{
      color: #E6B236;
      border-image: linear-gradient(#f0e6d2, #DBAA41) 20 20;
    }
  }
复制代码

⑤.查看效果

到这里就实现了button组件的属性，能够查看效果。

2). 支持其余属性

button其余属性如round、circle、disabled属性同plain的方法同样

①.父组件传值

<template>
  <div id="app"> <h1>LOLstyle-ui</h1> <div class="button-div"> <lol-button plain>Plain button</lol-button> <lol-button round>Round button</lol-button> <lol-button circle>Circle button</lol-button> <lol-button disabled>Disabled button</lol-button> </div> </div>
</template>
复制代码

②.子组件接收父组件传值，并效验

props: {
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
}
复制代码

③.经过绑定类名的方法动态控制样式

<template>
  <button class="lol-button" :class="[{ 'is-plain': plain, 'is-round': round, 'is-circle': circle, 'is-disabled': disabled }]" > <span><slot></slot></span> </button>
</template>
复制代码

④. 设置不一样样式

&.is-plain {
    background: rgba(30, 35, 40, .5);
    &:hover{
      color: #E6B236;
      border-image: linear-gradient(#f0e6d2, #DBAA41) 20 20;
    }
  }

  &.is-round {
    border-image: none;
    border: 2px #88652A solid;
    border-radius: 20px;
    padding: 12px 23px;
    &:hover{
      color: #E6B236;
      border: 2px #DBAA41 solid;
    }
  }

  &.is-circle {
    border-image: none;
    border: 2px #88652A solid;
    border-radius: 50%;
    padding: 12px;
    &:hover{
      color: #E6B236;
      border: 2px #DBAA41 solid;
    }
  }

  &.is-disabled {
    &:hover,
    &:focus{
      color: #5C5B57;
      background: #1E2328;
      border: 2px #5C5B57 solid;
      cursor: not-allowed;
    }
  }
复制代码

⑤. 查看效果

end

本篇文章介绍了如何封装button组件和为button组件建立属性，下一篇将介绍button组件的事件绑定和图标显示

respect by myself