前端vue 宫格组件提供常见九宫格菜单组件,扩充性好,可切换九宫格 十二宫格 十五宫格
快速实现vue uni-app宫格组件提供常见九宫格菜单组件,扩充性好,可切换九宫格 十二宫格 十五宫格; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12680
效果图如下:
使用方法
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="九宫格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十二宫格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十五宫格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>
HTML代码部分
<template>
<view>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="九宫格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十二宫格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十五宫格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>
</view>
</template>
JS代码 (引入组件 填充数据)
<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) { //格子菜单点击事件
console.log('item = ' + item.name + 'index = ' + index);
uni.showModal({
title:'温馨提示',
content:'点击的功能是: ' + item.name
})
}
}
}
</script>
CSS
<style lang="less" scoped>
</style>
前端vue 宫格组件提供常见九宫格菜单组件,扩充性好,可切换九宫格 十二宫格 十五宫格的更多相关文章
- 22Flutter中的常见的按钮组件 以及自定义按钮组件
/* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...
- 第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件
jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...
- 偏前端-vue.js学习之路初级(二)组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- 前端-Vue基础3(父子组件交互)
1.子组件往父组件传值 点击子组件的值,子组件自增,父组件的值也跟着自增 通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法 点击子组件触发cli ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Web前端-Vue.js必备框架(三)
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Vue两种组件类型介绍:递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- Web前端-Vue.js必备框架(一)
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- 图与网络分析—R实现(二)
图与网络 网络在各种实际背景问题中以各种各样的形式存在.交通.电子和通讯网络遍及我们日常生活的各个方面,网络规划也广泛用于解决不同领域中的各种问题,如生产.分配.项目计划.厂址选择.资源管理和财务策划 ...
- 如何快速在Ubuntu上搭建python环境?
如何快速在Ubuntu上搭建python环境? 一.准备好python源码包 使用curl命令获取python源码包的过程很缓慢且容易失败,因此提前去官网下载好后放在本地是最好的办法. 二.启动镜像并 ...
- pysimplegui之第一个程序,包括回调函数,事件,阻塞等待内容
自定义窗口 API 调用(您的第一个窗口) 总结一下:我遇到的坑, 比如拿输入框的内容的时候可以直接通过value[key] 几种窗口模式就是什么时候用timeout这个参数 关闭窗口可以的一边形式 ...
- C# Kafka重置到最新的偏移量,即从指定的Partition订阅消息使用Assign方法
在使用Kafka的过程中,消费者断掉之后,再次开始消费时,消费者会从断掉时的位置重新开始消费. 场景再现:比如昨天消费者晚上断掉了,今天上午我们会发现kafka消费的数据不是最新的,而是昨天晚上的数据 ...
- .NET CORE 部署到IIS上,HTTP 错误 500.19 - Internal Server Error
经排查,是因为项目中web.config的rewrite节点不支持,注释掉此节点即可,或者尝试下载相关依赖以支持此节点
- STM32新建模板【HAL库】
看到这篇笔记的小伙伴可能会觉得我在做无用功,明明可以通过 STM32CubeMx 软件直接生成的,还在这里慢慢的创建项目.我觉得在学习的时候最好少借助工具,当我们过度依赖工具的时候,决绝问题的能力可能 ...
- 关于为element Tree组件实现仿文件夹效果及右键菜单
<template> <div class="custom-tree-container" @contextmenu.native="handlePas ...
- C# 系统菜单弹出框方向
右键菜单,tootip等弹出时,弹出的位置经常在左侧,使用体验不好. 弹出方向有左对齐和右对齐 SystemParameters.MenuDropAlignment 当右对齐时,值为false 可以在 ...
- Centos7.x 安装jenkins
一.安装 前提:需查看是否安装了JDK 1.第一种方法 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat ...
- SQL课设之报刊订阅管理
E-R图: 一些常用命令: 1.登录mysql 2.选择进入数据库 相关SQL代码如下: CREATE TABLE Administrator( Gname varchar(50)PRIMARY K ...