安徽六安有什么特产,温州云优化seo,云尚网络公司,科技公司一般是做什么系列文章目录
第一章 定制上中下#xff08;顶部菜单、底部区域、中间主区域显示#xff09;三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 [第五…系列文章目录
第一章 定制上中下顶部菜单、底部区域、中间主区域显示三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 [第五章 使用Vue3、Element-plus菜单组件构建组图文章] 文章目录 系列文章目录[TOC](文章目录) 前言1、学习Element-plus 的tabs组件选项卡功能1.1、tabs 组件1.2、基础用法1.3、卡片风格的标签1.4、标签位置的设置1.5、Tabs 属性1.6、Tabs 事件 2、博物馆管理系统数据展示2.1、产品原型图2.2、准备mock数据2.3、通过axios加载数据 总结 前言
在第一章节我们把博物馆管理系统打了个地基基本的产品架构和框架已经都落实到位 第二章节使用Vue3、Element-plus菜单组件构建顶部区域的菜单包括父子菜单 第三章节使用Vue3、Element-plus走马灯组件构建轮播图 本章节我们做1件事使用Vue3、Element-plus tabs组件构建选项卡功能
1、学习Element-plus 的tabs组件选项卡功能
1.1、tabs 组件
分隔内容上有关联但属于不同类别的数据集合。
1.2、基础用法
基础的、简洁的标签页。
Tabs 组件提供了选项卡功能 默认选中第一个标签页你也可以通过 value 属性来指定当前选中的标签页。
templateel-tabs v-modelactiveName tab-clickhandleClickel-tab-pane labelUser namefirstUser/el-tab-paneel-tab-pane labelConfig namesecondConfig/el-tab-paneel-tab-pane labelRole namethirdRole/el-tab-paneel-tab-pane labelTask namefourthTask/el-tab-pane/el-tabs
/template....................
/el-menu1.3、卡片风格的标签
可以设置具有卡片风格的标签。
只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。
templateel-tabs v-modelactiveName typecard tab-clickhandleClickel-tab-pane labelUser namefirstUser/el-tab-paneel-tab-pane labelConfig namesecondConfig/el-tab-paneel-tab-pane labelRole namethirdRole/el-tab-paneel-tab-pane labelTask namefourthTask/el-tab-pane/el-tabs
/template....................
/el-menu1.4、标签位置的设置
可以通过 tab-position 设置标签的位置
标签一共有四个方向的设置 tabPosition“left|right|top|bottom”
1.5、Tabs 属性
属性名说明类型可选值默认值model-value / v-model绑定值选中选项卡的 namestring / number—第一个选项卡的 nametype风格类型stringcard/border-card—closable标签是否可关闭boolean—falseaddable标签是否可增加boolean—falseeditable标签是否同时可增加和关闭boolean—falsetab-position选项卡所在位置stringtop/right/bottom/lefttopstretch标签的宽度是否自撑开boolean—falsebefore-leave切换标签之前的钩子函数 若返回 false 或者返回被 reject 的 Promise则阻止切换。Function(activeName, oldActiveName)——
1.6、Tabs 事件
事件名说明回调参数tab-clicktab 被选中时触发(pane: TabsPaneContext, ev: Event)tab-changeactiveName 改变时触发(name: TabPaneName)tab-remove点击 tab 移除按钮时触发(name: TabPaneName)tab-add点击 tab 新增按钮时触发—edit点击 tab 的新增或移除按钮后触发(paneName: TabPaneName
2、博物馆管理系统数据展示
2.1、产品原型图 2.2、准备mock数据
mock数据是JSON格式的数据会使用axios去加载解析后放置到tabs组件里去显示
2.3、通过axios加载数据 templatediv classmain-boxdiv classmain!-- 经典产品 --div styletext-align: center;margin: 60px 2px 20px 2pxh1主題收藏/h1
!-- div stylemargin: 20px 0 ; color: #6a737dh3我们的产品后端主要基于JavaMysqlRedisSpringCloud alibaba技术实现前端使用了Vue3、Router、Axios、Echarts等技术/h3/div--!-- 项目介绍 Tab --div stylemargin: 20px 0; text-align: left; el-tabs tab-positionbottom typeborder-card classdemo-tabs el-tab-pane v-foritem in carouseProjectData :labelitem.subTitle el-row :gutter20el-col :span12 img :srcitem.picture stylewidth: 100%;height: 400px; alt//el-colel-col :span12div classtitle{{item.title}}/divdiv classsubTitlep v-htmlitem.content /p/div/el-col/el-row/el-tab-pane/el-tabs/div/div!-- 经典产品END --/div/div
/templatescriptimport axios from axios;export default {name: VueHome,data() {return { carouseProjectData: [], }},created() { //获取项目数据this.getData(carouseProjectData , ../../static/mock/project/data.json );},methods: {getData(val , url){axios.get( url ).then((response) {this[val] response.data.success.data;});},}
}
/script 总结
效果可见地址中间的【主題收藏】模块http://139.159.230.49/
以上就是今天要讲的内容本文介绍了在Vue3里如何使用Element-plus tabs组件构建选项卡功能如何使用axios去加载Vue项目里的JSON格式文件数据填充到 tabs组件。
