Jiess文档

Appearance

功能组件 · 通用篇 ​

概述 ​

Jiess Plus 提供一系列跨框架通用功能组件，不依赖特定 UI 库，在 Vue3 和 React 下均可使用。

组件说明适用框架
$Space间距组件全部
$SpaceItem间距子项全部
$Between左右/上下分布布局全部
$ActionButtons操作按钮组全部
$TipText提示文本 + 弹框全部
$Scrollbar自定义滚动条全部
$JiessComponentJiess 容器组件全部

框架特化文档： ElementPlus 功能组件 | Vant 功能组件 | AntDesign 功能组件

$Space / $SpaceItem —— 间距 ​

javascript
import { $Space, $SpaceItem } from '@jiess/plus/vue3';

{
    $Space: {
        mode: 'horizontal',  // 'horizontal'（水平）/ 'vertical'（垂直）
        size: 16,            // 间距像素
        children: [
            { $label: '字段1', $Input: {} },
            { $label: '字段2', $Input: {} },
            { $label: '字段3', $Input: {} },
        ],
    },
}

$Between —— 左右分布布局 ​

javascript
import { $Between } from '@jiess/plus/vue3';

{
    $Between: {
        $mode: 'horizontal',   // 'horizontal'（左右）/ 'vertical'（上下）
        left: {
            // 左侧内容
            key1: { $label: '关键词', $Input: {} },
        },
        right: {
            // 右侧内容
            $Button: { children: '搜索', type: 'primary' },
        },
    },
}
javascript
// 搜索栏典型用法
$JiessTable({
    $search: {
        $content: {
            $Between: {
                $mode: 'horizontal',
                left: {
                    keyword: { $Input: { $label: '关键词' } },
                    status: { $Select: { options: [...] } },
                },
                right: {
                    $searchBtn: {},
                    $resetBtn: {},
                },
            },
        },
    },
});

$ActionButtons —— 操作按钮组 ​

用于表格操作列或弹框底部按钮区域。

javascript
import { $ActionButtons } from '@jiess/plus/vue3';

{
    $ActionButtons: {
        children: [
            {
                $Button: {
                    children: '编辑',
                    type: 'primary',
                    onClick(row) { /* ... */ },
                },
            },
            {
                $Button: {
                    children: '删除',
                    type: 'danger',
                    onClick(row) { /* ... */ },
                },
            },
        ],
    },
}

$TipText —— 提示文本 ​

支持悬浮提示和点击弹框两种模式。

javascript
import { $TipText } from '@jiess/plus/vue3';

// 模式 1：悬浮提示（tooltip）
$TipText({
    children: '这是提示文本内容',
    type: 'tooltip',           // 悬浮提示模式
    text: '鼠标悬浮查看详情',   // 显示的文本
});

// 模式 2：点击弹框（popover）
$TipText({
    children: {
        $JiessTable: {
            action: '/api/users',
            $fields: [ /* ... */ ],
        },
    },
    type: 'popover',
    title: '用户列表',
    text: '查看所有用户',
});

$Scrollbar —— 自定义滚动条 ​

javascript
import { $Scrollbar } from '@jiess/plus/vue3';

{
    $Scrollbar: {
        height: '400px',    // 滚动区域高度
        children: {
            // 内部内容（超出高度则出现滚动条）
            $JiessTable: {
                $fields: [ /* 很多列 */ ],
            },
        },
    },
}

$JiessComponent —— Jiess 容器 ​

$JiessComponent 是 Jiess 配置对象的入口组件。在 $initHook 初始化后，导出的 JiessComponent 用于在页面中渲染 Jiess 配置。

javascript
// jiessConfig/index.js
const hook = $initHook({ ui: element, ...Vue });
export const jiess = hook.start();
export const JiessComponent = jiess.JiessComponent;
html
<!-- Vue 模板 -->
<jiess :config="tableConfig" />

响应式工具 ​

@jiess/plus 透传 @jiess/core 的响应式 API：

javascript
import { $reactive, $ref, $computed, $watch } from '@jiess/plus/vue3';
方法等价于说明
$reactive(obj)reactive(obj)创建响应式对象
$ref(value)ref(value)创建响应式引用
$computed(fn)computed(fn)计算属性
$watch(source, cb)watch(source, cb)侦听变化

定时器工具 ​

javascript
import { $timer } from '@jiess/plus/vue3';

// $timer 是基于 JiessMidder 的定时器封装
$timer.setTimeout(() => {
    console.log('2秒后执行');
}, 2000);

$timer.setInterval(() => {
    console.log('每秒执行');
}, 1000);

组件组合实战 ​

搜索栏布局组合（$Between + $Space + $Button） ​

javascript
// 典型后台搜索栏：左侧搜索字段 + 右侧操作按钮
$JiessTable({
    $search: {
        $content: {
            $Between: {
                $mode: 'horizontal',
                left: {
                    $Space: {
                        size: 12,
                        children: [
                            {
                                keyword: {
                                    $Input: {
                                        $label: '关键词',
                                        placeholder: '姓名/邮箱',
                                        clearable: true,
                                    },
                                },
                            },
                            {
                                status: {
                                    $Select: {
                                        $label: '状态',
                                        options: [
                                            { label: '全部', value: '' },
                                            { label: '启用', value: 1 },
                                            { label: '禁用', value: 0 },
                                        ],
                                    },
                                },
                            },
                            {
                                dateRange: {
                                    $DatePicker: {
                                        $label: '时间范围',
                                        type: 'daterange',
                                    },
                                },
                            },
                        ],
                    },
                },
                right: {
                    $Space: {
                        size: 8,
                        children: [
                            {
                                $Button: {
                                    children: '搜索',
                                    type: 'primary',
                                    onClick: 'search',
                                },
                            },
                            {
                                $Button: {
                                    children: '重置',
                                    onClick: 'reset',
                                },
                            },
                            {
                                $Button: {
                                    children: '导出',
                                    onClick: 'export',
                                },
                            },
                        ],
                    },
                },
            },
        },
    },
});

卡片详情布局（$Space + $Tag + $TipText） ​

javascript
// 用户详情卡片
export default {
    $Space: {
        mode: 'vertical',
        size: 16,
        style: { padding: '24px', background: '#fff' },
        children: [
            // 头部信息
            {
                $Between: {
                    $mode: 'horizontal',
                    left: {
                        tag: 'h2',
                        style: { margin: 0, fontSize: '20px' },
                        text: '用户详情',
                    },
                    right: {
                        $Tag: {
                            children: 'VIP 会员',
                            color: 'gold',
                            icon: <CrownOutlined />,
                        },
                    },
                },
            },
            // 基本信息
            {
                $TipText: {
                    text: '基本信息',
                    type: 'tooltip',
                    children: {
                        $Space: {
                            mode: 'vertical',
                            size: 8,
                            children: [
                                { tag: 'p', text: '姓名：张三' },
                                { tag: 'p', text: '邮箱：zhangsan@example.com' },
                                { tag: 'p', text: '手机：138****8888' },
                            ],
                        },
                    },
                },
            },
            // 操作按钮
            {
                $ActionButtons: {
                    children: [
                        {
                            $Button: {
                                children: '编辑',
                                type: 'primary',
                                onClick() { /* ... */ },
                            },
                        },
                        {
                            $Button: {
                                children: '禁用',
                                type: 'danger',
                                onClick() { /* ... */ },
                            },
                        },
                    ],
                },
            },
        ],
    },
};

注意事项 ​

事项说明
通用组件不依赖 UI 库$Space、$Between 等可在任何框架下使用
$TipText tooltip/popover底层依赖 antd Tooltip/Popover 或 element-plus el-tooltip/el-popover
$Scrollbar依赖于对应 UI 库的滚动条组件（若无则退化到原生）
响应式工具 API与框架原生 API 等价，推荐直接使用框架原生（Vue: reactive/ref，React: useState）

下一步 ​

蜀ICP备19017195号-2