网站负责人核验照,网站宣传专利被罚,正规的网站制作,湖北做网站平台哪家好Ant Design Vue-------Tabs标签页
今天就讲讲Ant Design Vue下的控件----tabs 标签页
结合项目中的需求#xff0c;讲一下该控件如何使用#xff0c;需求#xff1a;
#xff08;1#xff09;竖排样式 #xff08;2#xff09;如何使用v-for绑定数据源 #xff08;3…Ant Design Vue-------Tabs标签页
今天就讲讲Ant Design Vue下的控件----tabs 标签页
结合项目中的需求讲一下该控件如何使用需求
1竖排样式 2如何使用v-for绑定数据源 3change事件 4动态生成、动态切换子组件和component、keepAlive、nextTick的联合使用
官网案例来一个
templatea-tabs v-model:activeKeyactiveKeya-tab-pane key1 tabTab 1Content of Tab Pane 1/a-tab-panea-tab-pane key2 tabTab 2 force-renderContent of Tab Pane 2/a-tab-panea-tab-pane key3 tabTab 3Content of Tab Pane 3/a-tab-pane/a-tabs
/template
script langts setup
import { ref } from vue;
const activeKey ref(1);
/script
效果如图
项目中的代码
div styleheight: calc(100vh - 230px)a-tabs v-model:activeKeyactiveItem tab-positionleft changehandleTabChangea-tab-pane v-foritem in itemSource :tabitem.dictionaryMenuName :disableditem.isHas 1 ? false : true :keyitem.dictionaryName.split(|)[0] //a-tabs/div
1. div的样式控制垂直滚动条
2.属性设置
1v-model:activeKey 绑定的是用户当前选择的tab的key值
2tab-position:共4个位置top默认顶端left:左侧竖排展示right:右侧竖排展示bottom底部如图 3size:共三种大小small:小large:大middle:默认值如下图 4type页签的基本样式三个类型。line、card、editable-card
5Tabs.TabPane控件a-tab-pane元素和for搭配使用itemSource:数据源数组item对象。 tab:选项卡的标题key:唯一标识对应activeKeydisabled根据flag指定该标签是否可用。
6样式 :deep(.ant-tabs-left .ant-tabs-nav .ant-tabs-tab) { width: 265px; padding: 2px 20px; margin: 2px 0 0; }
3. script setup langts 和 tabs的change事件
import { onMounted, ref, reactive, toRaw, toRef, computed } from vue;const activeItem ref();
const itemSource ref([]);function queryTabsList() {let queryJson {};//往后端传值Query(queryJson).then((res) {//Query:APIitemSource.value res;activeItem.value null;//默认选项卡都未选中
}
//tabs选择事件async function handleTabChange(key) {console.log(key,key);//var arr key.split(|);//if (arr.length 0) {// let selItem arr[0]; //英文名称// let dtoName arr[1];//中文名称// ……//}
}
4. 下面讲讲更复杂的应用这种场景一般用于tabs菜单动态切换功能。
1模板
templatediv classbottom-maina-tabs v-model:activeKeyactiveKey tabPositiontop changetabItemSelected sizesmall typecard styleheight: 40pxa-tab-pane v-foritem in menuTabs :key${item?.value} :tabitem?.label //a-tabsKeepAlive v-ifisAlivecomponent :iscurrentPage :param-conditionwhereCond //KeepAlive/div/template
2脚本
const activeKey ref();const menuTabs ref([]);function initTab() {let query {name: getClass,queryParams: {},};Query(cbxQuery).then((res) {//Query:APImenuTabs.value res;});}//控制是否强制刷新
const isAlive ref(true);
const currentPage ref();//当前组件
const whereCond reactive({//当前页面传值给子组件的参数proId: , //项目名称});
//模拟的一组子组件
const typeCompentMap {base: input1,//引入input1组件invest: input2,//引入input2组件product: input3,//引入input3组件price: input4,//引入input4组件};
//tab切换事件
function tabItemSelected() {currentPage.value typeCompentMap[activeKey.value];}
//挂载事件
onMounted(() {initTab();});
//查询事件时刷新tab子组件function handleSearch() {activeKey.value base;whereCond.proId selectedProjectId.value; if (whereCond.proId) {refreshChild();}}function refreshChild() {isAlive.value false;currentPage.value typeCompentMap[activeKey.value];nextTick(() {//利用nextTick更新机制强制刷新页面isAlive.value true;});}
vue 中我们改变数据时不会立即触发视图如果需要实时获取到最新的DOM这个时候可以手动调用 nextTick
