隨著技術的發(fā)展，開發(fā)的復雜度也越來越高，傳統(tǒng)開發(fā)方式將一個系統(tǒng)做成了整塊應用，經常出現(xiàn)的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動全身。

通過組件化開發(fā)，可以有效實現(xiàn)單獨開發(fā)，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發(fā)效率低，降低維護成本。?組件化對于任何一個業(yè)務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進行，例如結合業(yè)務特性的模塊拆分策略、模塊間的交互方式和構建系統(tǒng)等等

今天給大家介紹的一款組件：前端Vue自定義等分底部菜單導航按鈕 自適應文字寬度 可更改組件位置；附源碼下載地址：https://ext.dcloud.net.cn/plugin?id=14128

效果圖如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-659288.html

cc-BotMenu?前端Vue自定義等分底部菜單導航按鈕 自適應文字寬度 可更改組件位置

使用方法

<!-- upTextArr：上面標題數(shù)組 downTextArr：下面標題數(shù)組? selIndex：選擇序列 selColor：選中顏色 @menuClick：按鈕點擊事件 -->

<cc-BotMenu :upTextArr="uptextArr" :downTextArr="downTextArr" :selIndex="selIndex" selColor="orange"

@menuClick="menuClick"></cc-BotMenu>

HTML代碼實現(xiàn)部分

<template>

<view class="content">

<!-- 自定義等分底部菜單按鈕 -->

<view class="bottomV">

<!-- upTextArr：上面標題數(shù)組 downTextArr：下面標題數(shù)組? selIndex：選擇序列 selColor：選中顏色 @menuClick：按鈕點擊事件 -->

<cc-BotMenu :upTextArr="uptextArr" :downTextArr="downTextArr" :selIndex="selIndex" selColor="orange"

@menuClick="menuClick"></cc-BotMenu>

</view>

</view>

</template>

<script>

export default {

data() {

return {

title: 'Hello',

uptextArr: ['1', "2", "3", "4", '5'],

downTextArr: ['國家標準', "行業(yè)標準", "省級標準", "團體標準", '企業(yè)標準'],

selIndex: "0",

}

},

onLoad() {

},

methods: {

// 按鈕點擊事件

menuClick(tag) {

// 點擊序列賦值

this.selIndex = tag;

}

}

}

</script>

<style>

page {

background-color: lightgray;

}

.content {

display: flex;

flex-direction: column;

}

.bottomV {

/* 設置視圖置頂 */

display: flex;

flex-direction: row;

position: fixed;

margin-top: calc(100vh - 168px);

height: 60px;

z-index: 9999 !important;

width: 100vw;

background-color: white;

padding-left: 0px;

padding-bottom: 20px;

}

</style>

到了這里，關于前端Vue自定義等分底部菜單導航按鈕 自適應文字寬度 可更改組件位置的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！