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