首页 前端知识 antd vue Tabs控件的使用

antd vue Tabs控件的使用

2024-06-19 08:06:54 前端知识 前端哥 94 922 我要收藏

Ant Design Vue-------Tabs标签页

今天就讲讲Ant Design Vue下的控件----tabs 标签页

结合项目中的需求,讲一下该控件如何使用,需求:

(1)竖排样式
(2)如何使用v-for绑定数据源
(3)change事件
(4)动态生成、动态切换(子组件和component、keepAlive、nextTick的联合使用)

官网案例来一个:

<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
    <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const activeKey = ref('1');
</script>

效果如图:

项目中的代码:

<div style="height: calc(100vh - 230px)">
          <a-tabs v-model:activeKey="activeItem" tab-position="left" @change="handleTabChange">
            <a-tab-pane v-for="item in itemSource" :tab="item.dictionaryMenuName" :disabled="item.isHas == 1 ? false : true" :key="item.dictionaryName.split('|')[0]" />
          </a-tabs>
        </div>

注:div的样式控制垂直滚动条;

1.tab-position=left控制竖排样式。这里顺便把常用的属性设置也列出来:

(1)v-model:activeKey 绑定的是用户当前选择的tab的key值;

(2)tab-position:共4个位置;top默认顶端;left:左侧竖排展示;right:右侧竖排展示;bottom:底部,如图:

(3)size:共三种大小;small:小,large:大,middle:默认值,如下图:

(4)type:页签的基本样式,三个类型。line、card、editable-card

(6)class样式:

:deep(.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab) {

    width: 265px;

    padding: 2px 20px;

    margin: 2px 0 0;

  }

2.绑定数据源

Tabs.TabPane控件a-tab-pane元素和for搭配使用:

itemSource:数据源(数组)

 item:对象

tab:选项卡的标题;key:唯一标识,对应activeKey;

disabled:根据flag指定该标签是否可用。

3. script setup lang="ts"  和 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:API
      itemSource.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)模板

<template>
      <div class="bottom-main">
        <a-tabs v-model:activeKey="activeKey" tabPosition="top" @change="tabItemSelected" size="small" type="card" style="height: 40px">
          <a-tab-pane v-for="item in menuTabs" :key="`${item?.value}`" :tab="item?.label" />
        </a-tabs>
        <KeepAlive v-if="isAlive">
          <component :is="currentPage" :param-condition="whereCond" />
        </KeepAlive></div
    ></template>

(2)脚本

const activeKey = ref('');
  const menuTabs = ref([]);
  function initTab() {
    let query = {
      name: 'getClass',
      queryParams: {},
    };
    Query(cbxQuery).then((res) => {//Query:API
      menuTabs.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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12810.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!