@ths-base/tabs-scroll

v2.0.9

Published

9 months ago

基础标签，可自定义字体大小，是否显示图标。

0High
0Medium
0Low

thssilu

ansevenlet

[email protected]

基础标签，可自定义字体大小，是否显示图标。

示例

浅色样式

<template>
  <div>
    <t-tabs-scroll
      :data="data"
      :show-icon="showIcon"
      :active-path="activePath"
      :c-style="cStyle"
      @tab-click="clickTab"
      @tab-close="closeTab"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useSetThemeStyle } from '../../../site/hooks/theme';
import SetThemeColor from '../../../site/hooks/set-theme-variables';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    const { setThemeStyle } = useSetThemeStyle();
    const showIcon = true; // 是否显示图标
    const activePath = ref('drawer'); // 当前选中的索引
    const cStyle = {
      wrapper: {
        default:{
          'background-color': '#f1f1f3',
        }
      },
    };
    const data = [
      {
        label: '首页', // 标签显示的文字
        icon: 'edit', // 图标
        path: 'header-base', // 路径
      },
      {
        label: '活动管理',
        icon: 'edit', // 图标
        path: 'drawer', // 路径
      },
      {
        label: '活动列表',
        path: 'breadcrumb-base', // 路径
      },
      {
        label: '活动详情',
        path: 'tabs-base', // 路径
      },
      {
        label: '活动管理1',
        path: 'drawer1', // 路径
      },
      {
        label: '活动列表1',
        path: 'breadcrumb-base1', // 路径
      },
      {
        label: '活动详情1',
        path: 'tabs-base1', // 路径
      },
      {
        label: '活动管理2',
        path: 'drawer2', // 路径
      },
      {
        label: '活动列表2',
        path: 'breadcrumb-base2', // 路径
      },
      {
        label: '活动详情2',
        path: 'tabs-base2', // 路径
      },
      {
        label: '活动管理3',
        path: 'drawe3', // 路径
      },
      {
        label: '活动列表3',
        path: 'breadcrumb-base3', // 路径
      },
      {
        label: '活动详情3',
        path: 'tabs-base3', // 路径
      },
    ];

    const state = reactive({
      data,
      cStyle,
    });

    // 数据对应显示的字段名
    const keyField = {
      label: 'label', // 标签名称
      icon: 'icon', // 标签前的图标的class名
    };

    /**
     * 点击标签
     * @param item 点击后获取到的当前标签的数据
     */
    const clickTab = (item: unknown) => {
      console.log('123', item);
    };

    /**
     * 关闭标签
     * @param item 点击后获取到的当前标签的数据
     */
    const closeTab = (item: unknown) => {
      console.log('333', item);
    };

    /**
     * 切换路径
     * @param item 点击后获取到的当前标签的数据
     */
    const changePath = () => {
      activePath.value = 'drawer1';
    };

    const changeData = () => {
      state.data = [
        {
          label: '大鸭梨', // 标签显示的文字
          icon: 'edit', // 图标
          path: 'header-base', // 路径
        },
        {
          label: '烤鱼',
          path: 'drawer', // 路径
        },
        {
          label: '蛋糕',
          path: 'breadcrumb-base', // 路径
        },
      ];
    };

    /**
     *  初始化主题色及背景色
     */
    onMounted(() => {
      setThemeStyle();
    });

    return {
      ...toRefs(state),
      showIcon,
      clickTab,
      closeTab,
      activePath,
      keyField,
      changePath,
      changeData,
    };
  },
});
</script>

深色样式- 图标自行传入

<template>
  <div>
    <t-tabs-scroll
      :data="data"
      :show-icon="showIcon"
      :custom-icon="customIcon"
      :active-path="activePath"
      @tab-click="clickTab"
      @tab-close="closeTab"
      :c-style="cStyle"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useSetThemeStyle } from '../../../site/hooks/theme';
import img1 from '../../../site/assets/images/list-card.png';
export default defineComponent({
  setup() {
    const { setThemeStyle } = useSetThemeStyle();
    const showIcon = true; // 是否显示图标
    const activePath = ref('drawer'); // 当前选中的索引
    const data = [
      {
        label: '首页', // 标签显示的文字
        icon: img1, // 图标
        path: 'header-base', // 路径
      },
      {
        label: '活动管理',
        icon: img1, // 图标
        path: 'drawer', // 路径
      },
      {
        label: '活动列表1',
        path: 'breadcrumb-base', // 路径
      },
      {
        label: '活动详情',
        path: 'tabs-base', // 路径
      },
      {
        label: '活动管理1',
        path: 'drawer1', // 路径
      },
      {
        label: '活动列表1',
        path: 'breadcrumb-base1', // 路径
      },
      {
        label: '活动详情1',
        path: 'tabs-base1', // 路径
      },
      {
        label: '活动管理2',
        path: 'drawer2', // 路径
      },
      {
        label: '活动列表2',
        path: 'breadcrumb-base2', // 路径
      },
      {
        label: '活动详情2',
        path: 'tabs-base2', // 路径
      },
      {
        label: '活动管理3',
        path: 'drawe3', // 路径
      },
      {
        label: '活动列表3',
        path: 'breadcrumb-base3', // 路径
      },
      {
        label: '活动详情3',
        path: 'tabs-base3', // 路径
      },
    ];

    const state = reactive({
      data,
      customIcon: true,
      cStyle: {
        wrapper: {
          default: {
            width: '100%',
            background: '#000050',
          }
        },
        itemWrapper: {
          default: {
            background: 'rgba(255, 255, 255, 0.2)',
            color: '#FFF'
          },
          hover: {
            color: '#0DE0E8',
          },
          active: {
            color: '#FFF',
            background: '#0DE0E8'
          }
        },
        tabsButton: {
          default: {
            color: '#FFF',
            backgroundColor: 'rgba(255, 255, 255, 0.2)'
          },
          hover: {
            color: '#26D5E8',
            backgroundColor: 'rgba(255, 255, 255, 0.2)'
          },
          active: {
            backgroundColor: 'rgba(255, 255, 255, 0.2)'
          }
        },
        moreButton: {
          default: {
            width: '32px',
            color: '#FFF',
            backgroundColor: 'rgba(255, 255, 255, 0.2)'
          },
          hover: {
            color: '#26D5E8',
            backgroundColor: 'rgba(255, 255, 255, 0.2)'
          },
          active: {
            backgroundColor: 'rgba(255, 255, 255, 0.2)'
          }
        },
        dropDownWrapper: {
          default: {
            backgroundColor: '#000050',
          },
        },
        dropDownItem: {
          default: {
            background: '#000050',
            color: '#FFF'
          },
          hover: {
            background: 'rgba(255, 255, 255, 0.2)',
            color: '#26D5E8',
          }
        },
        icon: {
          default: {
          }
        }
      }
    });

    const handleChange = () => {
      state.cStyle.itemWrapper.default.color = 'yellow';
    };

    // 数据对应显示的字段名
    const keyField = {
      label: 'label', // 标签名称
      icon: 'icon', // 标签前的图标的class名
    };

    /**
     * 点击标签
     * @param item 点击后获取到的当前标签的数据
     */
    const clickTab = (item: unknown) => {
      console.log('123', item);
    };

    /**
     * 关闭标签
     * @param item 点击后获取到的当前标签的数据
     */
    const closeTab = (item: unknown) => {
      console.log('333', item);
    };

    /**
     * 切换路径
     * @param item 点击后获取到的当前标签的数据
     */
    const changePath = () => {
      activePath.value = 'drawer1';
    };

    const changeData = () => {
      state.data = [
        {
          label: '大鸭梨', // 标签显示的文字
          icon: 'edit', // 图标
          path: 'header-base', // 路径
        },
        {
          label: '烤鱼',
          path: 'drawer', // 路径
        },
        {
          label: '蛋糕',
          path: 'breadcrumb-base', // 路径
        },
      ];
    };

    /**
     *  初始化主题色及背景色
     */
    onMounted(() => {
      setThemeStyle();
    });

    return {
      ...toRefs(state),
      showIcon,
      clickTab,
      closeTab,
      activePath,
      keyField,
      changePath,
      changeData,
      handleChange,
    };
  },
});
</script>

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/tabs-scroll
yarn add @ths-base/tabs-scroll

使用

import TTabsScroll from '@ths-base/tabs-scroll';
import '@ths-base/tabs-scroll/lib/index.css';
createApp(App).use(TTabsScroll);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TTabsScroll);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ----------- | ---------------- | --------------- | ------------- | ------ | ------ | | show-icon | 是否显示图标 | boolean | | true | | | custom-icon | 是否是自定义图标，默认使用element-plus里的图标 | boolean | true|false | false | | | active-path | 当前选中项的路径 | string | | | | | data | 数据 | array | object | | | | | key-field | 字段名关键字 | object | | | | | c-style | 自定义样式 | object | -- | -- | |

keyField 的属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ----- | -------------------------------------------------- | ------ | ------ | ------ | ------ | | label | data 数据中对应文字的字段名称 | string | | label | | | icon | data 数据中对应文字前显示图标对应的 class 字段名称 | string | | icon | | | path | data 数据中对应的路径字段名称 | string | | path | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ---------------- | ------------------------ | ------------ | | wrapper | default | 外层总容器 | | itemsWrapper | default | 标签容器 | | itemWrapper | default / hover / active | 单项容器 | | icon | default | 图标的默认样式 | | tabsButton | default / hover / active | 两侧切换按钮 | | moreButton | default / hover / active | 更多按钮 | | dropDownWrapper | default | 下拉内容容器 | | dropDownItem | default / hover | 下拉内容单项 |

事件

| 事件名称 | 说明 | 回调参数 | | --------- | -------- | -------------------------------------------- | | tab-click | 点击标签 | 当前选中的标签 | | tab-close | 关闭标签 | selectedItem：当前选中的标签，data：剩余数据 |

变量使用说明

| 变量 | 说明 | | ----------------------------- | ------------ | | --t-tabs-scroll-background | 整个容器背景| | --t-tabs-scroll-tab-background | 单个标签背景| | --t-tabs-scroll-tab-color | 标签字体颜色 | | --t-tabs-scroll-tab-hover-background | 标签 hover 字体色、选中标签背景色 | | --t-tabs-scroll-tab-hover-color | 选中标签字体颜色 | | --t-tabs-scroll-button-background | 两侧按钮背景色（切换按钮、更多按钮）| | --t-tabs-scroll-button-color | 两侧按钮颜色（切换按钮、更多按钮） | | --t-tabs-scroll-button-hover-background | 两侧按钮 hover 背景色（切换按钮、更多按钮）| | --t-tabs-scroll-button-hover-color | 两侧按钮 hover颜色（切换按钮、更多按钮） | | --t-tabs-scroll-dropdown-background | 下拉内容框背景色| | --t-tabs-scroll-dropdown-border-width | 下拉内容框边框粗细 | | --t-tabs-scroll-dropdown-border-style | 下拉内容框边框样式（solid、dashed）| | --t-tabs-scroll-dropdown-border-color | 下拉内容框边框色 | | --t-tabs-scroll-dropdown-item-color | 下拉项字体颜色 | | --t-tabs-scroll-dropdown-hover-background | 下拉项 hover 背景色 | | --t-tabs-scroll-dropdown-hover-color | 下拉项 hover 字体颜色| | --t-tabs-scroll-dropdown-arrow-background | 下拉区域箭头背景色 |

其他属性及用法

作者：张金秀

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme