前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格

  • 前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格已关闭评论
  • 130 次浏览
  • A+
所属分类：Web前端
摘要

效果图如下：
便宜好用的国外VPS推荐

快速实现vue uni-app宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格; 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12680

效果图如下：

前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格

前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格

前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格

使用方法

 <!-- 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>
便宜好用的国外VPS推荐