從0搭建Vue3組件庫:button組件

来源:https://www.cnblogs.com/zdsdididi/archive/2022/08/20/16608121.html
-Advertisement-
Play Games

button組件幾乎是每個組件庫都有的；其實實現一個button組件是很簡單的。本篇文章將帶你一步一步的實現一個button組件。如果你想瞭解完整的組件庫搭建，你可以先看使用Vite和TypeScript帶你從零打造一個屬於自己的Vue3組件庫，這篇文章有詳細介紹。當然如果你只想知道一個button ...


button組件幾乎是每個組件庫都有的；其實實現一個button組件是很簡單的。本篇文章將帶你一步一步的實現一個button組件。如果你想瞭解完整的組件庫搭建，你可以先看使用Vite和TypeScript帶你從零打造一個屬於自己的Vue3組件庫，這篇文章有詳細介紹。當然如果你只想知道一個button組件如何開發出來的，只看這篇也就夠了。(樣式部分參造了elementui組件庫）。掃碼關註公眾號獲取Vue3組件庫完整搭建源代碼
image

首先我們先看下我們這個button組件要實現的功能

  • 使用type，plain屬性來定義按鈕基本樣式
  • round，size控制按鈕形狀大小
  • 通過disabled來控制按鈕是否可點擊
  • 支持icon加入圖標增強辨識度

type實現

我們的type可以傳入的值可以是primary, success, info，warning, danger分別展示不同按鈕顏色,type傳入text顯示文字按鈕(沒有邊框和背景色的按鈕)

這裡只展示了一個primary的樣式，因為其它值的樣式實現是一樣的。需要的話可以到button組件樣式進行查看。

所以在button/types.ts文件中我們定義一下type的類型：


import { ExtractPropTypes } from 'vue'

export const ButtonType = ['primary', 'success', 'info', 'warning', 'danger','text']

export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      //這裡表示type只能接收這些值
      return ButtonType.includes(value)
    }
  }
}

export type ButtonProps = ExtractPropTypes<typeof buttonProps>

接下來在button.vue中實現傳入不同值賦予不同類名，從而實現顯示不同效果。

<template>
    <button class="k-button" :class="styleClass">
        <slot />
    </button>
</template>

<script lang="ts">
import './style/index.less'
import { defineComponent, computed } from 'vue'
import { buttonProps } from './types'
export default defineComponent({
    name: 'k-button',
    props: buttonProps,
    setup(props) {
        const styleClass = computed(() => { 
            return {
                [`k-button--${props.type}`]: props.type
            }
        })

        return {
            styleClass
        };
    },
});
</script>

這樣一來傳入primary組件就會有個類名k-button--primary嗎，傳入其它值也一樣。然後我們就可以給它們寫樣式了。進入style/index.less:

.k-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
.k-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
}
.k-button--text {
  border-color: transparent;
  color: #409eff;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  &:hover {
    color: #66b1ff;
    border-color: transparent;
    background-color: transparent;
  }
}

plain(朴素按鈕)和round(圓角按鈕)

我們可以通過傳入plain和round來決定這個按鈕是否為朴素按鈕和圓角按鈕，很顯然它們是個布爾類型

//types.ts

...

export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonType.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean
}

...

然後在button.vue定義我們的styleClass

//button.vue

const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round
            }
        })

最後在style/index.less寫上我們的樣式


...

.k-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}
.is-round {
  border-radius: 20px;
}

註意

兩個連在一起的類名如：.k-button--primary.is-plain 代表一個元素只有包含這兩個類名，定義的樣式才生效

禁用按鈕

同樣的，在types.ts定義disabled的類型

//types.ts

...
export const ButtonType = ['primary', 'success', 'info', 'warning', 'danger']

export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonType.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean,
  disabled: Boolean
}

...

然後在button.vue定義我們的styleClass

//button.vue

const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round,
                'is-disabled': props.disabled
            }
        })

最後添加上我們的樣式

...
.k-button.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
}
.k-button--primary.is-disabled,
.k-button--primary.is-disabled:active,
.k-button--primary.is-disabled:focus,
.k-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #a0cfff;
  border-color: #a0cfff;
}
//朴素按鈕禁用
.k-button--primary.is-disabled.is-plain,
.k-button--primary.is-disabled.is-plain:active,
.k-button--primary.is-disabled.is-plain:focus,
.k-button--primary.is-disabled.is-plain:hover {
  color: #8cc5ff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}
...

size

通過size我們可以控制按鈕的大小，組件接收的size值有：midium, small, mini。實現方式和上面差不多，這裡就直接展示部分代碼了

  • types.ts
//types.ts

...

export const ButtonSize = ['midium', 'small', 'mini'];

export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonSize.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean,
  disabled: Boolean
}

...
  • button.vue
//button.vue

const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round,
                'is-disabled': props.disabled,
                [`k-button--${props.size}`]: props.size,
            }
        })
  • style/index.less
//index.less
...
.k-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.k-button--small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}

.k-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}

最後我們在項目中引用（examples）來查看效果;

<-- App.vue -->
<template>
    <div>
        <Button>預設按鈕</Button>
        <Button type="primary">主要按鈕</Button>
        <Button type="success">成功按鈕</Button>
        <Button type="info">信息按鈕</Button>
        <Button type="warning">警告按鈕</Button>
        <Button type="danger">危險按鈕</Button>
        <Button type="text">文字按鈕</Button>
        <br>
        <br>
        <Button plain>朴素按鈕</Button>
        <Button type="primary" plain>主要按鈕</Button>
        <Button type="success" plain>成功按鈕</Button>
        <Button type="info" plain>信息按鈕</Button>
        <Button type="warning" plain>警告按鈕</Button>
        <Button type="danger" plain>危險按鈕</Button>
        <br>
        <br>
        <Button round>圓角按鈕</Button>
        <Button type="primary" round>主要按鈕</Button>
        <Button type="success" round>成功按鈕</Button>
        <Button type="info" round>信息按鈕</Button>
        <Button type="warning" round>警告按鈕</Button>
        <Button type="danger" round>危險按鈕</Button>
        <br>
        <br>
        <Button disabled>禁用按鈕</Button>
        <Button type="primary" disabled>主要按鈕</Button>
        <Button type="success" disabled>成功按鈕</Button>
        <Button type="info" disabled>信息按鈕</Button>
        <Button type="warning" disabled>警告按鈕</Button>
        <Button type="danger" disabled>危險按鈕</Button>
        <br>
        <br>
        <Button disabled>禁用按鈕</Button>
        <Button type="primary" disabled plain>主要按鈕</Button>
        <Button type="success" disabled plain>成功按鈕</Button>
        <Button type="info" disabled plain>信息按鈕</Button>
        <Button type="warning" disabled plain>警告按鈕</Button>
        <Button type="danger" disabled plain>危險按鈕</Button>
        <br>
        <br>
        <Button>預設按鈕</Button>
        <Button size="medium">中等按鈕</Button>
        <Button size="small">小型按鈕</Button>
        <Button size="mini">超小按鈕</Button>
    </div>
</template>
<script lang="ts" setup>
import { Button } from 'kitty-ui'
</script>
<style lang="less">
.k-button {
    margin-right: 10px;
}
</style>

啟動項目我們就會在瀏覽器中看到我們的各式各樣的button組件了

1658045827629.jpg

圖標

通過icon屬性設置按鈕圖標，支持Icon組件里的所有圖標(Icon組件下一篇文章將會詳細介紹)。

  • types.ts中設置icon類型
export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonType.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean,
  disabled: Boolean,
  icon: String,
  iconPosition: String,
  size: {
    type: String,
    validator(value: string) {
      return ButtonSize.includes(value)
    }
  }
}
  • 修改button組件

icon可以傳入icon組件中定義的name，iconPosition可選right使圖標在按鈕右側。

<!-- button.vue -->
<template>
    <button class="k-button" :class="styleClass">
        <Icon class="icon" v-if="iconFont.iconName && iconFont.iconPosition != 'right'" :name="iconFont.iconName" />
        <slot />
        <Icon class="icon" v-if="iconFont.iconPosition == 'right' && iconFont.iconName" :name="iconFont.iconName" />
    </button>
</template>

<script lang="ts">
import './style/index.less'
import { defineComponent, computed } from 'vue'
import { buttonProps } from './types'
import Icon from '../Icon/icon.vue'
export default defineComponent({
    name: 'k-button',
    props: buttonProps,
    components: { Icon },
    setup(props) {

        const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round,
                'is-disabled': props.disabled,
                [`k-button--${props.size}`]: props.size,
            }
        })

        //圖標
        const iconFont = computed(() => {
            const iconName = props.icon
            const position = props.iconPosition
            return {
                iconName,
                iconPosition
            }
        })

        return {
            styleClass,
            Icon,
            iconFont
        };
    },
});
</script>

然後在examples/App.vue使用並查看效果

<template>
    <div>
        <Button type="success" icon="edit">圖標按鈕</Button>
        <Button type="primary" icon="map" icon-position="right">圖標按鈕</Button>
        <Button type="primary" icon="ashbin"></Button>
    </div>
</template>
<script lang="ts" setup>
import { Button } from 'kitty-ui'

</script>
<style lang="less">
.k-button {
    margin-right: 10px;
}
</style>

1658069989903.jpg

最後

到這裡一個button組件的開發基本就結束了，看起來一個不起眼的button組件裡面其實還是包含些許內容的。關註我將不定期更新其它組件的實現。

如果你覺得本篇文章對你有幫助的話，動動指頭點個贊吧orz，你的鼓勵將會是我持續創作的動力。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [記錄]修改Windows系統的本地用戶名(包括C:\Users\***)
    前言 一開始買了筆記本電腦後，不懂事，隨手就把電腦用戶名設置成了中文。 作為一名程式猿，實在是覺得彆扭，故在網路上尋找修改用戶名的方法，並記錄一些坑點。 提示：如果有比較多重要文件，最好提前備份。 以下內容用原來的用戶名和NewName表示新舊用戶名，記得更換為自己的實際用戶名。 我的筆記本電腦配置 ...
  • Adobe Bridge 2022 for mac(br2022)資源管理軟體
    Bridge 2022 mac版更新了，這是一款Adobe系列的資源管理軟體，它擁有強大的媒體集中資產訪問功能：可以查看、搜索、排序、管理和處理圖像文件。軟體可以使用高級過濾器、集合和搜索來查找您正在尋找的資產；可以快速組織和堆疊全景和 HDR 圖像，快速組織和堆疊全景和 HDR 圖像；還可以在ma ...
  • 設置centos系統的命令提示符為綠色
    修改PS1變數即可實現 臨時修改 export PS1='\[\e[1;32m\][\u@\h \W]\$ \[\e[0m\]' 永久修改 echo "export PS1='\[\e[1;32m\][\u@\h \W]\\$ \[\e[0m\]'" >> /etc/bashrc ...
  • Hadoop常見的文件格式及壓縮演算法
    前言 該文章中將會整理一些大數據中常見的文件格式及壓縮演算法的理論知識，作為後期實踐的理論指導。理論+實踐才會更方便用這些文件格式和壓縮演算法。 目前hadoop中常見的文件格式有textfile、sequencefile、avro、rcfile、orcfile、parquet等，上述六種文件格式又可以 ...
  • Debezium的基本使用（以MySQL為例）
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 一、Debezium介紹 摘自官網: Debezium is a set of distributed services to capture chan ...
  • MYSQL-->SQL語法
    SQL語句的特點 不區分大小寫 分為DDL,DML,DQL,DCL四個分支 註釋格式為/* */多行註釋和#單行註釋 註: DDL（Data definition Language）資料庫定義(比如說表,資料庫) DML(Data Mainpulation Language)資料庫表的增刪改查 DQ ...
  • js上傳圖片裁剪
    最近做一個圖片上傳需要裁剪一下的功能然後百度了一下，找到了cropperjs 說明文檔 https://www.npmjs.com/package/cropperjs 這是一個簡單的基礎使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
  • 大家都能看得懂的源碼 - ahooks useSet 和 useMap
    本文是深入淺出 ahooks 源碼系列文章的第十篇，該系列已整理成文檔-地址。覺得還不錯，給個 star 支持一下哈，Thanks。 今天我們來聊聊 ahooks 中對 Map 和 Set 類型進行狀態管理的 hook，順便複習一下 Set 和 Map 這兩種數據類型。 useMap 管理 Map ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類