前端vue 宮格組件提供常見九宮格菜單組件，擴(kuò)充性好，可切換九宮格十二宮格十五宮格

2年前作者：前端vue組件分類：Toy博客閱讀(18)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了前端vue 宮格組件提供常見九宮格菜單組件，擴(kuò)充性好，可切換九宮格十二宮格十五宮格。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

快速實(shí)現(xiàn)vue uni-app宮格組件提供常見九宮格菜單組件，擴(kuò)充性好，可切換九宮格十二宮格十五宮格; 閱讀全文下載完整代碼請(qǐng)關(guān)注微信公眾號(hào)：前端組件開發(fā)

效果圖如下：

前端vue 宮格組件提供常見九宮格菜單組件，擴(kuò)充性好，可切換九宮格十二宮格十五宮格文章來源地址http://www.zghlxwxcb.cn/news/detail-480375.html

使用方法


<!-- gridTitle:宮格名稱 gridNum: 一行展示格數(shù) gridList：宮格數(shù)據(jù) @click:宮格點(diǎn)擊按鈕 -->

<ccGridButton gridTitle="九宮格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>

<!-- gridTitle:宮格名稱 gridNum: 一行展示格數(shù) gridList：宮格數(shù)據(jù) @click:宮格點(diǎn)擊按鈕 -->

<ccGridButton gridTitle="十二宮格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>

<!-- gridTitle:宮格名稱 gridNum: 一行展示格數(shù) gridList：宮格數(shù)據(jù) @click:宮格點(diǎn)擊按鈕 -->

<ccGridButton gridTitle="十五宮格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>

HTML代碼部分


<template>

<view>

<!-- gridTitle:宮格名稱 gridNum: 一行展示格數(shù) gridList：宮格數(shù)據(jù) @click:宮格點(diǎn)擊按鈕 -->

<ccGridButton gridTitle="九宮格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>

<!-- gridTitle:宮格名稱 gridNum: 一行展示格數(shù) gridList：宮格數(shù)據(jù) @click:宮格點(diǎn)擊按鈕 -->

<ccGridButton gridTitle="十二宮格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>

<!-- gridTitle:宮格名稱 gridNum: 一行展示格數(shù) gridList：宮格數(shù)據(jù) @click:宮格點(diǎn)擊按鈕 -->

<ccGridButton gridTitle="十五宮格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>

</view>

</template>

JS代碼（引入組件填充數(shù)據(jù)）


<script>

import ccGridButton from '../components/ccGridButton.vue';

export default {

components:{

ccGridButton

},

data() {

return {

gridList: [{

name: '功能1',

imgSrc: "../../static/appointList.svg",

},

{

name: '功能2',

imgSrc: "../../static/appointNum.svg",

},

{

name: '功能3',

imgSrc: "../../static/appointList.svg",

},

{

name: '功能4',

imgSrc: "../../static/appointNum.svg",

},

{

name: '功能5',

imgSrc: "../../static/appointList.svg",

},

{

name: '功能6',

imgSrc: "../../static/appointNum.svg",

},

{

name: '功能7',

imgSrc: "../../static/appointList.svg",

},

{

name: '功能8',

imgSrc: "../../static/appointNum.svg",

},

{

name: '功能9',

imgSrc: "../../static/appointNum.svg",

},

]

}

},

methods: {

gridClick(item, index) { //格子菜單點(diǎn)擊事件

console.log('item = ' + item.name + 'index = ' + index);

uni.showModal({

title:'溫馨提示',

content:'點(diǎn)擊的功能是: ' + item.name

})

}

}

}

</script>

CSS


<style lang="less" scoped>

</style>

到了這里，關(guān)于前端vue 宮格組件提供常見九宮格菜單組件，擴(kuò)充性好，可切換九宮格十二宮格十五宮格的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

[自定義 Vue 組件] 小尾巴下拉菜單組件(2.0) TailDropDown
文章歸檔：https://www.yuque.com/u27599042/coding_star/kcoem6dgyn8drglb [自定義 Vue 組件] 下拉菜單(1.0) DropDownMenu：https://www.yuque.com/u27599042/coding_star/llltv52tchmatwg4 在 src 目錄下，創(chuàng)建 constant 目錄，在其中新建 tail_drop_down_constant.js 文件，在其中聲明組件所依賴的常量在 src 目錄下，創(chuàng)建 sty
2024年02月05日
瀏覽(22)
前端之vue 根據(jù)菜單自動(dòng)生成路由（動(dòng)態(tài)配置前端路由）
在需要權(quán)限控制的頁面，往往存在根據(jù)用戶來顯示菜單的情況，單獨(dú)根據(jù)用戶類型判斷顯然不是很好，如果后面用戶類型發(fā)生變化，項(xiàng)目修改維護(hù)可能就會(huì)比較麻煩，所以比較好的做法是根據(jù)后端返回的菜單動(dòng)態(tài)生成頁面路由，以達(dá)到完全權(quán)限控制的目的，并且若權(quán)限發(fā)生變
2024年04月10日
瀏覽(28)
【Vue3 博物館管理系統(tǒng)】使用Vue3、Element-plus菜單組件構(gòu)建前臺(tái)用戶菜單
第一章定制上中下（頂部菜單、底部區(qū)域、中間主區(qū)域顯示）三層結(jié)構(gòu)首頁第二章使用Vue3、Element-plus菜單組件構(gòu)建菜單 [第三章使用Vue3、Element-plus菜單組件構(gòu)建輪播圖] [第四章使用Vue3、Element-plus菜單組件構(gòu)建組圖文章] 上一章節(jié)給我們把博物館管理系統(tǒng)打了個(gè)地基，基本
2024年02月13日
瀏覽(36)
前端vue自定義簡(jiǎn)單實(shí)用下拉篩選下拉菜單
前端vue自定義簡(jiǎn)單實(shí)用下拉篩選下拉菜單,?閱讀全文下載完整代碼請(qǐng)關(guān)注微信公眾號(hào)：前端組件開發(fā) 效果圖如下: ? ? ? #### 使用方法 ```使用方法 !-- titleArr: 選擇項(xiàng)數(shù)組 dropArr: 下拉項(xiàng)數(shù)組 @finishDropClick: 下拉篩選完成事件-- ccDropDownMenu :titleArr=\\\"titleArr\\\" :dropArr=\\\"dropArr\\\" @finishDro
2024年02月08日
瀏覽(21)
Vue 中修改 Element 組件的下拉菜單(Dropdown) 的樣式
今天在項(xiàng)目中碰到一個(gè) UI 改造的需求，需要根據(jù)設(shè)計(jì)圖把頁面升級(jí)成 UI 設(shè)計(jì)師提供的設(shè)計(jì)圖樣式。到最后頁面改造完了，但是 UI 提供的下拉菜單樣式全部是黑色半透明的，只能硬著頭皮改了。然后，就有了一下午的頭腦風(fēng)暴。一開始，我是想著使用 /deep/ 來深度修改樣式
2024年01月17日
瀏覽(97)
Vue + Element UI 前端篇（十）：動(dòng)態(tài)加載菜單
之前我們的導(dǎo)航樹都是寫死在頁面里的，而實(shí)際應(yīng)用中是需要從后臺(tái)服務(wù)器獲取菜單數(shù)據(jù)之后動(dòng)態(tài)生成的。我們?cè)谶@里就用上一篇準(zhǔn)備好的數(shù)據(jù)格式Mock出模擬數(shù)據(jù)，然后動(dòng)態(tài)生成我們的導(dǎo)航菜單。接口模塊化我們向來講究模塊化，之前接口都集中在，interface.js，我們現(xiàn)在把
2024年02月09日
瀏覽(31)
RuoYi-Vue前端部署，菜單點(diǎn)擊無反應(yīng)
問題原因：路由懶加載導(dǎo)致現(xiàn)象：登錄功能正常，菜單點(diǎn)擊無反應(yīng)，F(xiàn)12查看無網(wǎng)絡(luò)請(qǐng)求，控制臺(tái)報(bào)錯(cuò)。解決方法1：修改permission.js文件修改為 ? 解決方法2： ?（1）安裝插件 npm install @babel/plugin-syntax-dynamic-import --save-dev （2）修改babel.config.js （3）正常打包發(fā)布。?
2024年01月18日
瀏覽(53)
vue中，右鍵菜單組件v-contextmenu的使用
vue中，右鍵菜單組件v-contextmenu的使用 1、效果右鍵菜單之禁用和子菜單 2、流程第一步：安包第二步：引入 src/main.js package.json 第三步：使用效果1-右鍵菜單之禁用和子菜單 index.vue 效果2-基本效果 index.vue 3、使用說明api npm地址——https://www.npmjs.com/package/v-contextmenu 另一個(gè)參
2024年02月06日
瀏覽(13)
若依vue框架+element ui 組件路由跳轉(zhuǎn)與菜單聯(lián)動(dòng)
在后臺(tái)管理系統(tǒng)中當(dāng)點(diǎn)擊某一按鈕時(shí)，頁面發(fā)生跳轉(zhuǎn)(路由發(fā)生跳轉(zhuǎn)，跳轉(zhuǎn)到與按鈕對(duì)應(yīng)的頁面)，在跳轉(zhuǎn)的同時(shí)在側(cè)邊欄中打開與之對(duì)應(yīng)模塊的菜單項(xiàng) 1.點(diǎn)擊按鈕跳轉(zhuǎn)到/pay/PayIndex頁面 2.在后臺(tái)管理系統(tǒng)中側(cè)邊欄使用的是element ui 中的NavMenu導(dǎo)航菜單組件，在后臺(tái)管理系統(tǒng) src/l
2024年02月14日
瀏覽(28)
Vue3:Elemenu-Plus遞歸型菜單組件封裝(2)
? ? ? ? 在上一篇文章中，以Vue2的選項(xiàng)式 API風(fēng)格，封裝了遞歸型菜單組件，但是這其中存在著一些問題，例如： ????????【1】子組件menuList.vue中，通過this.$emit()方式定義的事件，在Vue3組合式API風(fēng)格父組件中可能會(huì)被執(zhí)行多次。之所以說是可能，是因?yàn)槲疫@測(cè)試中確實(shí)遇
2024年02月13日
瀏覽(26)