Vue 3 + TypeScript + Vite

tlw-vue3

import { TableScroll, CircleProgress, SeamlessScroll, DragButton, EchartUtil, WaterGauge, ResizableContainer } from "tlw-vue3"; import 'tlw-vue3/style.css';

TableScroll 可自动滚动表格组件

数据源

data: {
  type: Array,
  default: () => [],
},

表头配置

columnList: {
  type: Array,
  default: () => [],
},

滚动速度 (像素/帧)

speed: {
  type: Number,
  default: 0.3,
},

是否自动滚动

autoScroll: {
  type: Boolean,
  default: true,
},

容器高度

height: {
  type: [String, Number],
  default: '100%',
},

空数据提示

emptyMessage: {
  type: String,
  default: '暂无数据',
},

自定义项键值生成函数

itemKey: {
  type: Function,
  default: (item, index) => index,
},

表头背景色

headBackground: {
  type: String,
  default: '#042e71',
},

表头高度

headHeight: {
  type: Number,
  default: 50,
},

表头字体大小

headFontSize: {
  type: Number,
  default: 14,
},

表头文字颜色

headColor: {
  type: String,
  default: '#41EBE5',
},

单元格文字颜色

cellColor: {
  type: String,
  default: '#FFFFFF',
},

单元格高度

cellHeight: {
  type: Number,
  default: 40,
},

单元格背景色

cellBackground: {
  type: String,
  default: 'rgba(97, 163, 255, 0.05)',
},

单元格字体大小

cellFontSize: {
  type: Number,
  default: 12,
},

滚动方向

direction: {
  type: String,
  default: 'up', #### 'up' | 'down'
  validator: value => ['up', 'down'].includes(value),
},

是否显示滚动条

showScrollbar: {
  type: Boolean,
  default: false,
},

最大滚动高度

maxHeight: {
  type: Number,
  default: null,
},

点击行事件

clickable: {
  type: Boolean,
  default: true,
},

字体家族

fontFamily: {
  type: String,
  default: 'PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif',
},

帧率限制

fps: {
  type: Number,
  default: 60,
  validator: value => value >= 1 && value <= 120,
},

CircleProgress 圆形进度条组件

进度百分比，支持数字和字符串

percent: {
  type: [Number, String],
  default: 0,
  validator: value => (typeof value === 'string' ? Number(value) : value ?? 0) >= 0 && (typeof value === 'string' ? Number(value) : value ?? 0) <= 100,
},

进度条颜色，支持纯色和渐变

strokeColor: {
  type: [String, Array],
  default: '#1890ff',
},

背景轨道颜色，支持纯色和渐变

trailColor: {
  type: [String, Array],
  default: '#f5f5f5',
},

标题文本

title: {
  type: [String, Number],
  default: '',
},

副标题文本

subTitle: {
  type: [String, Number],
  default: '',
},

组件尺寸

size: {
  type: Number,
  default: 120,
},

进度条宽度

strokeWidth: {
  type: Number,
  default: 8,
},

进度条端点样式

strokeLinecap: {
  type: String,
  default: 'round',
},

是否显示百分比

showPercent: {
  type: Boolean,
  default: true,
},

标题字体大小

titleSize: {
  type: Number,
  default: 14,
},

副标题字体大小

subTitleSize: {
  type: Number,
  default: 20,
},

标题颜色

titleColor: {
  type: String,
  default: '#ffffff',
},

副标题颜色

subTitleColor: {
  type: String,
  default: '#ffffff',
},

标题字体粗细

titleWeight: {
  type: [String, Number],
  default: '500',
},

副标题字体粗细

subTitleWeight: {
  type: [String, Number],
  default: '600',
},

动画持续时间

duration: {
  type: Number,
  default: 600,
},

自定义百分比格式化函数

formatPercent: {
  type: Function,
  default: null,
},

SeamlessScroll 无缝滚动表格组件

列配置接口定义

interface Column { label: string; #### 列标题 value: string; #### 列数据字段 flex?: string; #### 列宽度比例 color?: string; #### 列字体颜色 fontSize?: number; #### 列字体大小 }

组件属性定义

const props = defineProps({

表格数据

data: { type: Array, default: () => [], },

列配置

columnList: { type: Array as PropType<Column[]>, default: () => [], },

表头背景色

headBackground: { type: String, default: '#042e71', },

表头高度

headHeight: { type: Number, default: 50, },

表头字体大小

headFontSize: { type: Number, default: 14, },

表头字体颜色

headColor: { type: String, default: '#41EBE5', },

单元格高度

cellHeight: { type: Number, default: 40, },

单元格字体颜色

cellColor: { type: String, default: '#FFFFFF', },

单元格背景色（偶数行）

cellBackground: { type: String, default: 'rgba(97, 163, 255, 0.05)', }, });

dragButton 可拖动按钮组件

按钮默认位置离底部距离（px）

bottom: {
    type: Number,
    default: 30
},

按钮默认位置离右边距离（px）

right: {
    type: Number,
    default: 30
},

是否自动靠边

canDock: {
    type: Boolean,
    default: true
},

是否禁用拖动

disabled: {
    type: Boolean,
    default: false
},

按钮尺寸 (px)

size: {
    type: Number,
    default: 60
},

按钮背景色

bgColor: {
    type: String,
    default: 'rgba(3, 94, 247, 0.7)'
},

按钮阴影

boxShadow: {
    type: String,
    default: '0px 4px 12px 0px rgba(173, 195, 248, 0.8)'
}

EchartUtil 图表工具类

容器类名

className: {
    type: String,
    default: 'chart',
},

图表宽度

width: {
    type: String,
    default: '100%',
},

图表高度

height: {
    type: String,
    default: '400px',
},

基础图表配置 (ECharts option)

option: {
    type: Object,
    default: () => ({}),
},

动态配置选项，会与基础配置合并

适用于需要频繁更新的配置项

dynamicOption: {
    type: Object,
    default: () => ({}),
},

地图配置

@property {string} name - 地图名称

@property {Object} data - 地图 GeoJSON 数据

mapConfig: {
    type: Object,
    default: () => ({
        name: '',
        data: null
    })
},

是否启用懒加载

当元素进入视口时再初始化图表

lazy: {
    type: Boolean,
    default: false
},

是否自动响应窗口大小变化

autoResize: {
    type: Boolean,
    default: true
},

主题配置

可以是主题名称字符串或主题对象

theme: {
    type: [String, Object],
    default: null
},

渲染器类型 'canvas' | 'svg'

renderer: {
    type: String,
    default: 'canvas',
    validator: (value) => ['canvas', 'svg'].includes(value)
},

setOption 基础配置

@property {boolean} notMerge - 是否不合并配置

@property {boolean} lazyUpdate - 是否延迟更新

baseSetOptionOpts: {
    type: Object,
    default: () => ({
        notMerge: false, #### 默认合并配置，更符合直觉
        lazyUpdate: false
    })
}

ECharts hooks 图表钩子函数

图表容器

useECharts 钩子函数

@returns {Object} 包含 ECharts 实例和方法的对象

import { useECharts } from 'tlw-vue3';

图表容器引用

const chartRef = ref(null);

初始化图表钩子

const { setOption, getInstance } = useECharts(chartRef, true);

设置图表选项

setOption(option)

waterGauge 水位 gauge 组件

名称

name?: string;

名称颜色，默认#CCC

nameColor?: string;

是否显示名称，默认 true

showName?: boolean;

当前水位值

waterLevel: number;

当前水位颜色

waterLevelColor?: string;

单位，默认 m

unit?: string;

是否显示单位，默认 true

showUnit?: boolean;

最小水位值，默认 943

minLevel?: number;

最大水位值，默认 951

maxLevel?: number;

水尺高度，默认 200px

height?: number;

水尺边框宽度，默认 1px

borderWidth?: number;

水尺边框颜色，默认#CCC

borderColor?: string;

警戒水位线宽度，默认 50px

warnWidth?: number;

警戒水位线高度，默认 2px

warnHeight?: number;

警戒水位线标签宽度，默认 50px

warnLabelWidth?: number;

刻度线宽度，默认 20px

scaleWidth?: number;

刻度线背景颜色，默认#3498db

scaleBgColor?: string;

刻度线标签颜色，默认#ccc

scaleLabelColor?: string;

警戒水位线配置

warningLevels?: WarningLevel[];

ResizableContainer 可调整高度容器组件

初始分割线位置（%）

initialSplit: { type: Number, default: 50, validator: value => value >= 0 && value <= 100, },

插槽

#top 顶部内容插槽 #bottom 底部内容插槽