单页示例合集
本节整理了大量的html单页，以供参考
说明
- 部分简单的Demo通过Jiess Playground运行，可实现在线编辑运行
- 其他复杂的Demo可在线直接预览，文档中会展示其完整的多文件代码
基础示例
基础示例
最简单的示例，当然从hello开始
初识add
- 同步任务中，添加的元素会自动渲染
- 异步任务中，需要调用this.forceUpdate()更新渲染
提示
Jiess中最基础的方法：所有需要渲染的元素，标签，字符串，调用add方法添加后才会渲染
初识render
接收扁平化配置，并返回JsRender节点，用于描述节点信息
提示
Jiess中最基础的方法：用于所有组件，标签的渲染，渲染时对它们提供属性；且支持节点的嵌套
初识render属性
以直观的示例，介绍扁平化配置与标签属性的对应关系
初识is属性
- 未配置：默认渲染成div元素
- 已配置：渲染成指定的标签或组件
提示
is用于描述节点的类型，它可以是普通html标签（p,span），也可以是任意类型的组件
初识children属性
指定当前标签或组件的内层子元素，多个子元素使用数组包裹
提示
作为配置对象的一个属性，其最大的特点是可以接收观察者，用响应式数据动态控制子元素的渲染
render嵌套
与HTML的DOM节点嵌套类型；最终嵌套得到JsRender节点树
生命周期
基于vue和react的生命周期，并给出统一命名的生命周期回调
事件处理
重点在于事件的命名规范，以及事件的正确捕获
初识Jiess组件
Jiess组件中的节点构造与setup构造函数，语法一致
初识Jiess响应式
响应式数据通过观察者与渲染属性手动建立关联
响应式的深度控制
手动控制对代理对象的观察深度
响应式结果矫正
对观察者提供矫正器，可以实时将观察到的值进行矫正，再应用于关联属性
响应式结果矫正-实践
将观察到的数据矫正为组件节点，直接实现矫正渲染
$computed计算属性
参考vue的计算属性，功能相似
响应式整体监听
当未对观察器提供待观察属性时，则监听整个响应式代理对象
$if与$show
参考vue的v-if和v-show指令，功能相似
$elseIf
必须与$if配合使用，需要注意的是，Jiess中没有$else，可用$elseIf:true取代
$watch响应式观察
观察Jiess响应数据；参考vue3中的watch或vue2中this.$watch
$watchEffect副作用
参考vue3中的watchEffect，功能相似
ref节点获取
获取原生DOM节点，在不同原框架环境存在差异，以下分别示例：
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 实例</title>
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 导入环境适配代码 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module">
function setup() {
this.onMounted(({ refs }) => {
// 组件渲染完毕，获取dom节点
console.log('onMounted', refs)
});
// 提供ref字符串，在mounted生命周期获取dom节点
this.add(this.render({ ref: 'ref-name' }, '受控节点'));
}
// --------------------------------------------------------
const { JiessComponent } = JiessCore.$entry(JiessEnv);
new Vue({
render: h => h(JiessComponent, { attrs: { setup } })
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 实例</title>
<!-- 导入 Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- 导入环境适配代码 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
function setup() {
this.onMounted(({ refs }) => {
// 组件渲染完毕，获取dom节点
console.log('onMounted', refs)
});
// 提供ref字符串，在mounted生命周期获取dom节点
this.add(this.render({ ref: 'ref-name' }, '受控节点1'));
// 提供ref函数，在回调中获取dom节点
this.add(this.render({
ref: dom => {
console.log(dom);
}
}, '受控节点2'));
}
// --------------------------------------------------------
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue);
Vue.createApp({
render: () => Vue.h(JiessComponent, { setup })
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 实例</title>
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 导入环境适配代码 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module">
function setup() {
this.add(
this.render({
ref: v => {
// 节点挂载完毕，才能打印节点
this.onMounted(() => {
console.log(v.current)
});
}
}, '受控节点')
)
}
// --------------------------------------------------------
const { JiessComponent } = JiessCore.$entry(JiessEnv, React);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, { setup }));
</script>
</body>
</html>异步setup
异步加载渲染元素，需要使用this.forceUpdate更新
JiessFragment
渲染为空标签，类似react中的fragment，vue中的template
插槽-vue
Jiess中使用vue组件中的各种类型插槽
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 实例</title>
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 导入环境适配代码 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
// 定义带插槽的vue组件
const CustomVue = {
render(h) {
return h('div', [
this.$slots.default,
this.$slots.slot1,
this.$scopedSlots.slot2({ message: 'vue作用域插槽的回传数据' })
])
}
};
function setup() {
this.add(
this.render({
is: CustomVue,
$slots: { slot2: ({ message }) => message }
},
'普通的基础数据类型，使用default插槽',
this.render({}, '未指定插槽名，也使用default插槽'),
this.render({ slot: 'slot1' }, '使用vue具名插槽'),
)
)
}
// --------------------------------------------------------
const { JiessComponent } = JiessCore.$entry(JiessEnv);
new Vue({
render: h => h(JiessComponent, { attrs: { setup } })
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 实例</title>
<!-- 导入 Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- 导入环境适配代码 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
</head>
<body>
<body>
<div id="root" />
<script type="module">
// 定义带插槽的vue组件
const CustomVue = {
render() {
return Vue.h('div', [
this.$slots.default(),
this.$slots.slot1(),
this.$slots.slot2({ message: 'vue作用域插槽的回传数据' })
])
}
};
function setup() {
this.add(
this.render({
is: CustomVue,
$slots: {
slot1: () => '使用vue具名插槽',
slot2: ({ message }) => message
}
},
'普通的基础数据类型，使用default插槽',
this.render({}, '未指定插槽名，也使用default插槽'),
)
)
}
// --------------------------------------------------------
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue);
Vue.createApp({
render: () => Vue.h(JiessComponent, { setup })
}).mount('#root');
</script>
</body>
</html>插槽-Jiess
使用Jiess组件中定义的通用插槽
插槽-Jiess-实践
带丰富交互的Jiess插槽使用示例
数据注入provider
Jiess组件间，跨层级数据注入；即后代组件跨代获取祖先组件共享数据
表单组件
基础表单
区域渲染工具area，控制区域内的渲染及数据交互
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, { area: $Area });
new Vue({
render: h => h(JiessComponent, { attrs: { setup } })
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, { area: $Area });
Vue.createApp({
render: () => Vue.h(JiessComponent, { setup })
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, { area: $Area });
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, { setup }));
</script>
</body>
</html>js
import { $Input, $InputNumber } from '../../../../../jiess-base/vue2element/cdn/index.js';
// vue2 环境中区域渲染，完整的嵌套结构
// el-form -> el-card -> jiess-space -> jiess-sapce-item -> el-form-item -> 核心元素
// el-form的控制：
// 配置对象param中定义formParam配置对象
// 也可以通过hasForm:false，移除对form的渲染
// el-card的控制：
// 配置对象param中的非特殊属性，默认为card的属性
// 也可以通过hasCard:false，移除对card的渲染
// jiess-space的控制：
// 配置对象param中定义spaceParam配置对象
// 也可以通过hasSpace:false，移除对space的渲染
// jiess-sapce-item的控制：
// 元素配置对象中定义$spaceParamItem配置对象
// 也可以通过$hasSpaceItem:false，移除对sapce-item的渲染
// el-form-item的控制：
// 元素配置对象中定义$formItem配置对象
// 也可以通过$hasFormItem:false，移除对form-item的渲染
// $brother的使用：
// 元素配置对象中定义$brother配置数组
// 该数组由多个元素构成，与核心元素构成兄弟关系，并置于核心元素后面
// 类似于 [核心元素, ...$brother]
// 区域标题：建议使用card的标题能力，移除card则没有card标题
// label标题：改功能属于form-item，移除form-item则没有label
export default function() {
// 每个area对象，对应着一块区域的渲染
const area = this.area({
header: '区域标题',
// 全局定义每个元素默认占据的快递
// 容器整宽为24，非必要，默认为8
span: 12,
// 回显初始值
initialValues: {
name: '王小明'
}
});
// 每一次的add会构建一个单独
area.add(
$Input({
// $name为表单唯一标识，为必要属性
$name: 'name',
// 定义标题，非必要
$label: '姓名',
// 校验规则，非必要
$rules: ['required'],
}),
$InputNumber({ $name: 'age', $label: '年龄' })
);
// 元素添加完毕，确定渲染
const action = area.done();
// 区域数据的操作
this.add(
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: async () => {
await action.setFieldValue('name', '坤坤');
}
}, '设置name的值'),
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: async () => {
await action.setFieldsValue({ name: '坤坤' });
}
}, '设置区域的值'),
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: async () => {
const name = await action.getFieldValue('name');
alert(name);
}
}, '获取name的值'),
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: async () => {
const values = await action.getFieldsValue();
alert(JSON.stringify(values));
}
}, '获取区域的值'),
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: async () => {
const values = await action.validateFields();
alert(JSON.stringify(values));
}
}, '校验并获取数据'),
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: async () => {
await action.resetFields();
}
}, '重置区域数据')
);
}js
import { $Input, $InputNumber } from '../../../../../jiess-base/vue3element/cdn/index.js';
// vue3 环境中区域渲染，完整的嵌套结构
// el-form -> el-card -> jiess-space -> jiess-sapce-item -> el-form-item -> 核心元素
// el-form的控制：
// 配置对象param中定义formParam配置对象
// 也可以通过hasForm:false，移除对form的渲染
// el-card的控制：
// 配置对象param中的非特殊属性，默认为card的属性
// 也可以通过hasCard:false，移除对card的渲染
// jiess-space的控制：
// 配置对象param中定义spaceParam配置对象
// 也可以通过hasSpace:false，移除对space的渲染
// jiess-sapce-item的控制：
// 元素配置对象中定义$spaceParamItem配置对象
// 也可以通过$hasSpaceItem:false，移除对sapce-item的渲染
// el-form-item的控制：
// 元素配置对象中定义$formItem配置对象
// 也可以通过$hasFormItem:false，移除对form-item的渲染
// $brother的使用：
// 元素配置对象中定义$brother配置数组
// 该数组由多个元素构成，与核心元素构成兄弟关系，并置于核心元素后面
// 类似于 [核心元素, ...$brother]
// 区域标题：建议使用card的标题能力，移除card则没有card标题
// label标题：改功能属于form-item，移除form-item则没有label
export default function() {
// 每个area对象，对应着一块区域的渲染
const area = this.area({
header: '区域标题',
// 全局定义每个元素默认占据的快递
// 容器整宽为24，非必要，默认为8
span: 12,
// 回显初始值
initialValues: {
name: '王小明'
}
});
// 每一次的add会构建一个单独
area.add(
$Input({
// $name为表单唯一标识，为必要属性
$name: 'name',
// 定义标题，非必要
$label: '姓名',
// 校验规则，非必要
$rules: ['required'],
}),
$InputNumber({ $name: 'age', $label: '年龄' })
);
// 元素添加完毕，确定渲染
const action = area.done();
// 区域数据的操作
this.add(
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: async () => {
await action.setFieldValue('name', '坤坤');
}
}, '设置name的值'),
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: async () => {
await action.setFieldsValue({ name: '坤坤' });
}
}, '设置区域的值'),
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: async () => {
const name = await action.getFieldValue('name');
alert(name);
}
}, '获取name的值'),
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: async () => {
const values = await action.getFieldsValue();
alert(JSON.stringify(values));
}
}, '获取区域的值'),
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: async () => {
const values = await action.validateFields();
alert(JSON.stringify(values));
}
}, '校验并获取数据'),
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: async () => {
await action.resetFields();
}
}, '重置区域数据')
);
}js
import { $Input, $InputNumber } from '../../../../../jiess-base/react168antd/cdn/index.js';
// react 环境中区域渲染，完整的嵌套结构
// ant-form -> ant-card -> jiess-space -> jiess-sapce-item -> ant-form-item -> 核心元素
// ant-form的控制：
// 配置对象param中定义formParam配置对象
// 也可以通过hasForm:false，移除对form的渲染
// ant-card的控制：
// 配置对象param中的非特殊属性，默认为card的属性
// 也可以通过hasCard:false，移除对card的渲染
// jiess-space的控制：
// 配置对象param中定义spaceParam配置对象
// 也可以通过hasSpace:false，移除对space的渲染
// jiess-sapce-item的控制：
// 元素配置对象中定义$spaceParamItem配置对象
// 也可以通过$hasSpaceItem:false，移除对sapce-item的渲染
// ant-form-item的控制：
// 元素配置对象中定义$formItem配置对象
// 也可以通过$hasFormItem:false，移除对form-item的渲染
// $brother的使用：
// 元素配置对象中定义$brother配置数组
// 该数组由多个元素构成，与核心元素构成兄弟关系，并置于核心元素后面
// 类似于 [核心元素, ...$brother]
// 区域标题：建议使用card的标题能力，移除card则没有card标题
// label标题：改功能属于form-item，移除form-item则没有label
export default function() {
// 每个area对象，对应着一块区域的渲染
const area = this.area({
title: '区域标题',
// 全局定义每个元素默认占据的宽度
// 容器整宽为24，非必要，默认为8
span: 12,
// 回显初始值
initialValues: {
name: '王小明'
}
});
// 每一次的add会构建一个单独
area.add(
$Input({
// $name为表单唯一标识，为必要属性
$name: 'name',
// 定义标题，非必要
$label: '姓名',
// 校验规则，非必要
$rules: ['required'],
}),
$InputNumber({ $name: 'age', $label: '年龄' })
);
// 元素添加完毕，确定渲染
const action = area.done();
// 区域数据的操作
this.add(
this.render({
is: antd.Button,
type: 'primary',
onClick: async () => {
await action.setFieldValue('name', '坤坤');
}
}, '设置name的值'),
this.render({
is: antd.Button,
type: 'primary',
onClick: async () => {
await action.setFieldsValue({ name: '坤坤' });
}
}, '设置区域的值'),
this.render({
is: antd.Button,
type: 'primary',
onClick: async () => {
const name = await action.getFieldValue('name');
alert(name);
}
}, '获取name的值'),
this.render({
is: antd.Button,
type: 'primary',
onClick: async () => {
const values = await action.getFieldsValue();
alert(JSON.stringify(values));
}
}, '获取区域的值'),
this.render({
is: antd.Button,
type: 'primary',
onClick: async () => {
const values = await action.validateFields();
alert(JSON.stringify(values));
}
}, '校验并获取数据'),
this.render({
is: antd.Button,
type: 'primary',
onClick: async () => {
await action.resetFields();
}
}, '重置区域数据')
);
}输入框类
本例集中展示输入框组件类的快捷渲染
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, { area: $Area });
new Vue({
render: h => h(JiessComponent, { attrs: { setup } })
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, { area: $Area });
Vue.createApp({
render: () => Vue.h(JiessComponent, { setup })
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, { area: $Area });
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, { setup }));
</script>
</body>
</html>js
import { $Input, $InputNumber, $Autocomplete } from '../../../../../jiess-base/vue2element/cdn/index.js';
export default function() {
const area = this.area({
header: '各种输入框',
formParam: { labelWidth: '108px' }
});
area.add(
$Input({ $name: 'name', $label: '姓名' }),
$InputNumber({ $name: 'age', $label: '年龄' })
);
area.add(
$Input({
$label: '搜索框',
// $name: 'web-site',
// 变形写法，用于指定默认值
$name: {
config: [{
inputField: 'web-site',
inputDone: v => 'mysite'
}]
}
},
[
this.render({ slot: 'prepend' }, 'https://'),
this.render({ slot: 'append' }, '.com')
]
)
)
area.add(
$Input({
$name: 'content',
$label: '文本域',
type: 'textarea'
}),
$Autocomplete({
$name: 'autocomplete',
$label: 'Autocomplete',
'fetch-suggestions': (queryString, cb) => {
cb(
[
{ value: '选项1', link: 1 },
{ value: '选项2', link: 2 },
]
)
}
})
)
// 元素添加完毕，确定渲染
const action = area.done();
}js
import { $Input, $InputNumber, $Autocomplete } from '../../../../../jiess-base/vue3element/cdn/index.js';
export default function() {
const area = this.area({
header: '各种输入框',
formParam: { labelWidth: '108px' }
});
area.add(
$Input({ $name: 'name', $label: '姓名' }),
$InputNumber({ $name: 'age', $label: '年龄' })
);
area.add(
$Input({
// $name: 'web-site',
// 变形写法，用于指定默认值
$name: {
config: [{
inputField: 'web-site',
inputDone: v => 'mysite'
}]
},
$label: '搜索框',
$slots: {
prepend: () => 'https://',
append: () => '.com'
}
})
)
area.add(
$Input({
$name: 'content',
$label: '文本域',
type: 'textarea'
}),
$Autocomplete({
$name: 'autocomplete',
$label: 'Autocomplete',
'fetch-suggestions': (queryString, cb) => {
cb(
[
{ value: '选项1', link: 1 },
{ value: '选项2', link: 2 },
]
)
}
})
)
// 元素添加完毕，确定渲染
const action = area.done();
}js
import { $Input, $InputNumber, $Autocomplete, $Search, $Password, $TextArea } from '../../../../../jiess-base/react168antd/cdn/index.js';
export default function() {
const area = this.area({ title: '各种输入框' });
area.add(
$Input({ $name: 'name', $label: '姓名' }),
$InputNumber({ $name: 'age', $label: '年龄' })
);
area.add(
$Input({
addonBefore: 'https:',
prefix: '//',
suffix: '.',
addonAfter: 'com',
defaultValue: 'mysite',
$name: 'web-site',
$label: '搜索框'
}),
$Search({
$name: 'search-text',
$label: '搜索框'
}),
$Password({
$name: 'password',
$label: '密码框'
}),
$Autocomplete({
$name: 'autocomplete',
$label: 'Autocomplete',
options: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
]
}),
$TextArea({
$name: 'content',
$label: '文本域',
$span: 24
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}下拉框类
本例集中展示下拉框组件的快捷渲染以及下拉数据的加载
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, { area: $Area });
new Vue({
render: h => h(JiessComponent, { attrs: { setup } })
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, { area: $Area });
Vue.createApp({
render: () => Vue.h(JiessComponent, { setup })
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, { area: $Area });
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, { setup }));
</script>
</body>
</html>js
import { $Select } from '../../../../../jiess-base/vue2element/cdn/index.js';
const options = [
{ text: '选项1', value: 1 },
{ text: '选项2', value: 2 }
];
const { $val, $ref } = JiessCore;
export default function() {
const area = this.area({
header: '下拉框类',
formParam: { labelWidth: '108px' }
});
area.add(
$Select({
$name: 'slt1',
$label: '基础用法',
$options: options,
multiple: true
}),
$Select({
$name: 'slt2',
$label: '函数回调下拉',
$options: cb => {
// 回调模拟异步更新下拉数据
setTimeout(() => { cb(options) }, 1600)
},
}),
$Select({
$name: 'slt3',
$label: '异步函数下拉',
$options: async () => {
// 异步函数模拟异步更新下拉数据
const opts = await new Promise(resolve => {
setTimeout(() => resolve(options), 1600)
})
// 可用于异步渲染下拉
return opts
},
})
);
// 响应式数据模拟异步更新下拉数据
const opts = $ref([]);
setTimeout(() => opts.value = options, 1600);
area.add(
$Select({
$name: 'slt4',
$label: '响应式下拉',
$options: $val(opts, 'value'),
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}js
import { $Select } from '../../../../../jiess-base/vue3element/cdn/index.js';
const options = [
{ text: '选项1', value: 1 },
{ text: '选项2', value: 2 }
];
const { $val, $ref } = JiessCore;
export default function() {
const area = this.area({
header: '下拉框类',
formParam: { labelWidth: '108px' }
});
area.add(
$Select({
$name: 'slt1',
$label: '基础用法',
$options: options,
multiple: true
}),
$Select({
$name: 'slt2',
$label: '函数回调下拉',
$options: cb => {
// 回调模拟异步更新下拉数据
setTimeout(() => { cb(options) }, 1600)
},
}),
$Select({
$name: 'slt3',
$label: '异步函数下拉',
$options: async () => {
// 异步函数模拟异步更新下拉数据
const opts = await new Promise(resolve => {
setTimeout(() => resolve(options), 1600)
})
// 可用于异步渲染下拉
return opts
},
})
);
// 响应式数据模拟异步更新下拉数据
const opts = $ref([]);
setTimeout(() => opts.value = options, 1600);
area.add(
$Select({
$name: 'slt4',
$label: '响应式下拉',
$options: $val(opts, 'value'),
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}js
import { $Select } from '../../../../../jiess-base/react168antd/cdn/index.js';
const options = [
{ text: '选项1', value: 1 },
{ text: '选项2', value: 2 }
];
const { $val, $ref } = JiessCore;
export default function() {
const area = this.area({ title: '下拉框类' });
area.add(
$Select({
$name: 'slt1',
$label: '基础用法',
$options: options,
multiple: true
}),
$Select({
$name: 'slt2',
$label: '函数回调下拉',
$options: cb => {
// 回调模拟异步更新下拉数据
setTimeout(() => { cb(options) }, 1600)
},
}),
$Select({
$name: 'slt3',
$label: '异步函数下拉',
$options: async () => {
// 异步函数模拟异步更新下拉数据
const opts = await new Promise(resolve => {
setTimeout(() => resolve(options), 1600)
})
// 可用于异步渲染下拉
return opts
},
})
);
// 响应式数据模拟异步更新下拉数据
const opts = $ref([]);
setTimeout(() => opts.value = options, 1600);
area.add(
$Select({
$name: 'slt4',
$label: '响应式下拉',
$options: $val(opts, 'value'),
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}级联面版
本例集中展示级联选择器和级联面板的快捷渲染，以及面板数据的加载
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, { area: $Area });
new Vue({
render: h => h(JiessComponent, { attrs: { setup } })
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, { area: $Area });
Vue.createApp({
render: () => Vue.h(JiessComponent, { setup })
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import { $Area } from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, { area: $Area });
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, { setup }));
</script>
</body>
</html>js
import { $Cascader, $CascaderPanel } from '../../../../../jiess-base/vue2element/cdn/index.js';
const options = [{
label: '选项1',
value: 1,
children: [
{ label: '选项1-1', value: 11 },
{ label: '选项1-2', value: 12 }
]
},
{
label: '选项2',
value: 2,
children: [
{ label: '选项2-1', value: 21 },
{ label: '选项2-2', value: 22 }
],
}
];
export default function() {
const { $val, $ref } = JiessCore;
const area = this.area({
header: '级联面版',
formParam: { labelWidth: '108px' }
});
// 给级联选择器提供静态下拉数据
area.add($Cascader({ $name: 'cas1', $label: '基础用法', options }));
// 异步获取下拉数据
const opts = $ref([]);
setTimeout(() => {
opts.value = options;
}, 1600);
area.add(
$Cascader({
$name: 'cas2',
$label: '异步级联',
options: $val(opts, 'value'),
})
);
// 级联面版
area.add(
$CascaderPanel({
$span: 24,
$name: 'panel',
$label: '级联面板',
options: $val(opts, 'value'),
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}js
import { $Cascader, $CascaderPanel } from '../../../../../jiess-base/vue3element/cdn/index.js';
const options = [{
label: '选项1',
value: 1,
children: [
{ label: '选项1-1', value: 11 },
{ label: '选项1-2', value: 12 }
]
},
{
label: '选项2',
value: 2,
children: [
{ label: '选项2-1', value: 21 },
{ label: '选项2-2', value: 22 }
],
}
];
export default function() {
const { $val, $ref } = JiessCore;
const area = this.area({
header: '级联面版',
formParam: { labelWidth: '108px' }
});
// 给级联选择器提供静态下拉数据
area.add($Cascader({ $name: 'cas1', $label: '基础用法', options }));
// 异步获取下拉数据
const opts = $ref([]);
setTimeout(() => {
opts.value = options;
}, 1600);
area.add(
$Cascader({
$name: 'cas2',
$label: '异步级联',
options: $val(opts, 'value'),
})
);
// 级联面版
area.add(
$CascaderPanel({
$span: 24,
$name: 'panel',
$label: '级联面板',
options: $val(opts, 'value'),
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}js
import { $Cascader } from '../../../../../jiess-base/react168antd/cdn/index.js';
const options = [{
label: '选项1',
value: 1,
children: [
{ label: '选项1-1', value: 11 },
{ label: '选项1-2', value: 12 }
]
},
{
label: '选项2',
value: 2,
children: [
{ label: '选项2-1', value: 21 },
{ label: '选项2-2', value: 22 }
],
}
];
export default function() {
const { $val, $ref } = JiessCore;
const area = this.area({ title: '级联面版' });
// 给级联选择器提供静态下拉数据
area.add($Cascader({ $name: 'cas1', $label: '基础用法', options }));
// 异步获取下拉数据
const opts = $ref([]);
setTimeout(() => {
opts.value = options;
}, 1600);
area.add(
$Cascader({
$name: 'cas2',
$label: '异步级联',
options: $val(opts, 'value'),
})
);
// 元素添加完毕，确定渲染
const action = area.done();
}全局弹框
基础弹框
全局弹框的基本使用
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
new Vue({
render: h => h(JiessComponent, {
attrs: {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}
})
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
Vue.createApp({
render: () => Vue.h(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
})
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}));
</script>
</body>
</html>js
export default function() {
this.add(
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: () => {
this.dialog(show => {
return {
title: '基础弹框示例',
children: [
'弹框中的内容',
// 使用vue2组件的footer插槽渲染底部按钮
this.render({ slot: 'footer' },
this.render({
is: ELEMENT.Button,
type: 'primary',
size: 'small',
onClick: () => {
// 点击确认按钮关闭
show.value = false
}
}, '确定')
)
]
};
})
}
}, '点击弹框')
)
}js
export default function() {
this.add(
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: () => {
this.dialog(show => {
return {
title: '基础弹框示例',
$slots: {
// 使用vue3组件的footer插槽渲染底部按钮
footer: () => this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: () => {
// 点击确认按钮关闭
show.value = false
}
}, '确定')
},
children: '弹框中的内容'
};
})
}
}, '点击弹框')
)
}js
export default function() {
this.add(
this.render({
is: antd.Button,
type: 'primary',
onClick: () => {
this.dialog(show => {
return {
title: '基础弹框示例',
children: '弹框中的内容',
onOk: () => {
// 点击确认按钮关闭
show.value = false
}
};
})
}
}, '点击弹框')
)
}无限弹框
示例中，弹框可以无限弹出，不限制弹出层数
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
new Vue({
render: h => h(JiessComponent, {
attrs: {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}
})
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
Vue.createApp({
render: () => Vue.h(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
})
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}));
</script>
</body>
</html>js
export default function() {
let level = 1;
const area = this.area({ header: '无限弹框示例' });
const config = (show) => ({
title: `当前层级【第${level++}层】`,
children: [
this.render({
is: ELEMENT.Button,
children: '新弹出一层',
onClick: () => this.dialog(config)
}),
this.render({
is: ELEMENT.Button,
children: '关闭当前层',
onClick: () => show.value = false
}),
this.render({
is: ELEMENT.Button,
children: '关闭最上层',
onClick: () => this.dialog().close()
}),
this.render({
is: ELEMENT.Button,
children: '关闭所有层',
onClick: () => {
level = 1;
this.dialog().closeAll();
},
})
]
});
area.add(
this.render({
is: ELEMENT.Button,
type: 'primary',
children: '开启无限弹框',
onClick: () => this.dialog(config),
}),
).done();
}js
export default function() {
let level = 1;
const area = this.area({ header: '无限弹框示例' });
const config = (show) => ({
title: `当前层级【第${level++}层】`,
children: [
this.render({
is: ElementPlus.ElButton,
children: '新弹出一层',
onClick: () => this.dialog(config)
}),
this.render({
is: ElementPlus.ElButton,
children: '关闭当前层',
onClick: () => show.value = false
}),
this.render({
is: ElementPlus.ElButton,
children: '关闭最上层',
onClick: () => this.dialog().close()
}),
this.render({
is: ElementPlus.ElButton,
children: '关闭所有层',
onClick: () => {
level = 1;
this.dialog().closeAll();
},
})
]
});
area.add(
this.render({
is: ElementPlus.ElButton,
type: 'primary',
children: '开启无限弹框',
onClick: () => this.dialog(config),
}),
).done();
}js
export default function() {
let level = 1;
const area = this.area({ title: '无限弹框示例' });
const config = (show) => ({
title: `当前层级【第${level++}层】`,
children: [
this.render({
is: antd.Button,
children: '新弹出一层',
onClick: () => this.dialog(config)
}),
this.render({
is: antd.Button,
children: '关闭当前层',
onClick: () => show.value = false
}),
this.render({
is: antd.Button,
children: '关闭最上层',
onClick: () => this.dialog().close()
}),
this.render({
is: antd.Button,
children: '关闭所有层',
onClick: () => {
level = 1;
this.dialog().closeAll();
},
})
]
});
area.add(
this.render({
is: antd.Button,
type: 'primary',
children: '开启无限弹框',
onClick: () => this.dialog(config),
}),
).done();
}高级弹框
示例中，演示高级弹框工具$tan的使用
展开代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/vue2.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
new Vue({
render: h => h(JiessComponent, {
attrs: {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}
})
}).$mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/vue3.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
Vue.createApp({
render: () => Vue.h(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
})
}).mount('#root');
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/react.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}));
</script>
</body>
</html>js
export default function() {
this.add(
this.render({
is: ELEMENT.Button,
type: 'primary',
onClick: () => {
// 点击按钮，弹出弹框
this.$tan({
title: '弹框标题',
width: '1080px',
children: '这是弹框的内容',
buttons: (close, show) => {
// 数组中的元素为按钮配置，使用时结合各自UI按钮按钮文档配置
return [{
type: 'primary',
text: '确定',
onClick: () => {
// 打开第二层弹框
this.$tan({
title: '提示',
children: '您点击了确定按钮',
onClose: (innerClose) => {
// 关闭二层弹框
innerClose();
// 关闭外层弹框
close();
}
})
}
},
// 这里没有绑定事件，则点击触发关闭事件
{
type: 'primary',
text: '关闭',
onClick: () => close()
}
]
}
});
}
}, '点击打开弹框')
)
}js
export default function() {
this.add(
this.render({
is: ElementPlus.ElButton,
type: 'primary',
onClick: () => {
// 点击按钮，弹出弹框
this.$tan({
title: '弹框标题',
width: '1080px',
children: '这是弹框的内容',
buttons: (close, show) => {
// 数组中的元素为按钮配置，使用时结合各自UI按钮按钮文档配置
return [{
type: 'primary',
text: '确定',
onClick: () => {
// 打开第二层弹框
this.$tan({
title: '提示',
children: '您点击了确定按钮',
onClose: (innerClose) => {
// 关闭二层弹框
innerClose();
// 关闭外层弹框
close();
}
})
}
},
// 这里没有绑定事件，则点击触发关闭事件
{
type: 'primary',
text: '关闭',
onClick: () => close()
}
]
}
});
}
}, '点击打开弹框')
)
}js
export default function() {
this.add(
this.render({
is: antd.Button,
type: 'primary',
onClick: () => {
// 点击按钮，弹出弹框
this.$tan({
title: '弹框标题',
width: '1080px',
children: '这是弹框的内容',
// 解开内置的取消按钮
cancelButtonProps: null,
// 在antd中，只允许控制确定按钮
button: (close, show) => {
return {
text: '确定',
onClick: () => {
// 打开第二层弹框
this.$tan({
title: '提示',
children: '您点击了确定按钮',
onClose: innerClose => {
// 关闭二层弹框
innerClose();
// 关闭外层弹框
close();
}
})
}
}
}
});
}
}, '点击打开弹框')
)
}通用列表
普通基础列表
使用JiessTable组件渲染列表，并动态增减列表行
vue2代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
new Vue({
render: h => h(JiessComponent, {
attrs: {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}
})
}).$mount('#root');
</script>
</body>
</html>js
import { $JiessTable } from '../../../../../../jiess-base/vue2element/cdn/index.js';
import items from './items.js';
// 列表初始数据
const datas = [
{ name: '刘备', sex: '男', age: 32, key: 0 },
{ name: '关羽', sex: '男', age: 27, key: 1 },
{ name: '张飞', sex: '男', age: 18, key: 2 },
];
export default function() {
let key = 1;
let tableMidder = null;
this.add(
this.render({
is: ELEMENT.Button,
onClick: () => {
const newLine = { name: `貂蝉${key++}`, sex: '女', age: 16, key };
tableMidder.proxy.datas = [...tableMidder.proxy.datas, newLine];
}
}, '添加行'),
this.render({
items,
datas,
is: $JiessTable,
// midder是列表内联系各功能模块的纽带
create: midder => tableMidder = midder,
render(midder, { table }) {
// 渲染列表节点
this.add(table)
}
})
)
}js
import { $ActionButton } from '../../../../../../jiess-base/vue2element/cdn/index.js';
export default function(midder) {
return [
{ text: '姓名', prop: 'name' },
{ text: '性别', prop: 'sex' },
{ text: '年龄', prop: 'age' },
{
text: '操作',
prop: 'action',
width: '108px',
fixed: 'right',
render: ({ row, $index }) => {
const { proxy } = midder;
return this.render({
is: $ActionButton,
size: 'mini',
type: 'danger',
text: '删除',
pop: '确定要删除吗？',
onClick: () => {
proxy.datas = proxy.datas.filter((_, idx) => idx !== $index);
}
});
}
},
]
}vue3代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
Vue.createApp({
render: () => Vue.h(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
})
}).mount('#root');
</script>
</body>
</html>js
import { $JiessTable } from '../../../../../../jiess-base/vue3element/cdn/index.js';
import items from './items.js';
// 列表初始数据
const datas = [
{ name: '刘备', sex: '男', age: 32, key: 0 },
{ name: '关羽', sex: '男', age: 27, key: 1 },
{ name: '张飞', sex: '男', age: 18, key: 2 },
];
export default function() {
let key = 1;
let tableMidder = null;
this.add(
this.render({
is: ElementPlus.ElButton,
onClick: () => {
const newLine = { name: `貂蝉${key++}`, sex: '女', age: 16, key };
tableMidder.proxy.datas = [...tableMidder.proxy.datas, newLine];
}
}, '添加行'),
this.render({
items,
datas,
is: $JiessTable,
// midder是列表内联系各功能模块的纽带
create: midder => tableMidder = midder,
render(midder, { table }) {
// 渲染列表节点
this.add(table)
}
})
)
}js
import { $ActionButton } from '../../../../../../jiess-base/vue3element/cdn/index.js';
export default function(midder) {
return [
{ text: '姓名', prop: 'name' },
{ text: '性别', prop: 'sex' },
{ text: '年龄', prop: 'age' },
{
text: '操作',
prop: 'action',
width: '108px',
fixed: 'right',
render: ({ row, $index }) => {
const { proxy } = midder;
// 这里是简单的删除模拟
return this.render({
is: $ActionButton,
type: 'danger',
text: '删除',
size: 'small',
pop: '确定要删除吗？',
onClick: () => {
proxy.datas = proxy.datas.filter((_, idx) => idx !== $index);
}
});
}
},
]
}react代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance
});
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}));
</script>
</body>
</html>js
import { $JiessTable } from '../../../../../../jiess-base/react168antd/cdn/index.js';
import items from './items.js';
// 列表初始数据
const datas = [
{ name: '刘备', sex: '男', age: 32, key: 0 },
{ name: '关羽', sex: '男', age: 27, key: 1 },
{ name: '张飞', sex: '男', age: 18, key: 2 },
];
export default function() {
let key = 1;
let tableMidder = null;
this.add(
this.render({
is: antd.Button,
onClick: () => {
const newLine = { name: `貂蝉${key++}`, sex: '女', age: 16, key };
tableMidder.proxy.datas = [...tableMidder.proxy.datas, newLine];
}
}, '添加行'),
this.render({
items,
datas,
is: $JiessTable,
// midder是列表内联系各功能模块的纽带
create: midder => tableMidder = midder,
render(midder, { table }) {
// 渲染列表节点
this.add(table)
}
})
)
}js
import { $ActionButton } from '../../../../../../jiess-base/react168antd/cdn/index.js';
export default function(midder) {
return [
{ text: '姓名', prop: 'name' },
{ text: '性别', prop: 'sex' },
{ text: '年龄', prop: 'age' },
{
text: '操作',
prop: 'action',
width: '108px',
fixed: 'right',
// react需配置key属性
key: 'action',
render: (_, record) => {
const { proxy } = midder;
// 这里是简单的删除模拟
return this.render({
is: $ActionButton,
danger: true,
text: '删除',
size: 'small',
type: 'primary',
pop: '确定要删除吗？',
onClick: () => {
proxy.datas = proxy.datas.filter(row => row.key !== record.key);
},
}, '删除').getNative();
}
},
]
}普通筛选列表
使用通用筛选区组件，通过接口调用，实现完整的增删改查
vue2代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance,
// 注入全局的消息提示
$msg: (message, type = 'success') => ELEMENT.Message({ message, type })
});
new Vue({
render: h => h(JiessComponent, {
attrs: {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}
})
}).$mount('#root');
</script>
</body>
</html>js
import {
$TableTools,
$SuperTable,
$TableFilter
} from '../../../../../../jiess-base/vue2element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Add from '../../components/AddEdit/Add.js';
import items from './items.js';
export default function() {
this.add(
this.render({
items,
is: $SuperTable,
httpApi: tableBaseApi.list,
httpKey: tableBaseApi.listKey,
container(midder) {
return {
title: '学生列表',
extra: this.render({
midder,
is: $TableTools,
buttons: [{
type: 'primary',
text: '新增',
onClick: () => {
midder.open(Add, async (data) => {
await tableBaseApi.add(data);
}, {
type: 'add',
param: { class: 'no-padding' }
});
}
}]
}),
}
},
filter(midder) {
return this.render({
is: $TableFilter,
midder,
// buttons: [{
// text: '自定右上按钮',
// onClick() {
// console.log('点击')
// }
// }]
})
},
})
)
}js
import {
$Input,
$Select,
$InputNumber,
$ActionButtons,
} from '../../../../../../jiess-base/vue2element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Edit from '../../components/AddEdit/Edit.js';
const genderOptions = [
{ text: '男', value: 1 },
{ text: '女', value: 2 },
];
export default function(midder) {
return [{ text: 'ID', prop: 'id' }, {
text: '姓名',
prop: 'name',
renderItem(type, prop, text) {
return $Input({ $name: prop, $label: text });
}
},
{
text: '性别',
prop: 'gender',
renderItem(type, prop, text) {
return $Select({
$name: prop,
$label: text,
$options: genderOptions
})
},
render({ row }) {
if (row.gender) genderOptions.find(opt => opt.value === row.gender).text;
}
},
{
text: '年龄',
prop: 'age',
renderItem(type, prop, text) {
return $InputNumber({ $name: prop, $label: text });
},
},
{
text: '操作',
prop: 'action',
width: '220px',
fixed: 'right',
render: ({ row }) => {
return this.render({
is: $ActionButtons,
buttons: [{
text: '详情',
type: 'success',
tip: '查看本条数据',
onClick: async () => {
const data = await tableBaseApi.detail({ id: row.id });
console.log('本条数据的完整信息：', data);
}
}, {
text: '编辑',
type: 'primary',
tip: '修改本条数据',
onClick: async () => {
midder.open(Edit, async (data, close) => {
await tableBaseApi.edit(data, row.id);
}, {
record: row,
type: 'edit',
param: { class: 'no-padding' },
});
}
}, {
text: '删除',
type: 'danger',
pop: '确定删除？',
onClick: async () => {
await tableBaseApi.delete({ id: row.id });
this.$msg('操作成功');
midder.table.reload();
}
}],
});
}
},
]
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Add',
setup({ midder, ...props }) {
common.call(this, midder, { type: 'add', ...props })
}
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Edit',
// 使用列表行数据，用于编辑回显
setup({ midder, record, ...props }) {
common.call(this, midder, {
type: 'edit',
row: record,
...props
});
}
// 调用详情接口，异步获取情详情数据，用于编辑回显
// async setup({ midder, record, ...props }) {
// const row = await ModuleApi.detail(record.id);
// common.call(this, midder, { type: 'edit', row, ...props });
// this.forceUpdate();
// }
}js
export default function(midder, { type, row }) {
const area = this.area({
gutter: 8,
shadow: 'never',
initialValues: row
});
// 从items.js配置文件中提取表单元素，并将其渲染到当前编辑或新增页面
area.add(Object.values(midder[type].items).map(item => item(area)));
// action赋值到对应类型下，自动处理数据
midder[type].action = area.done();
}vue3代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance,
// 注入全局的消息提示
$msg: (message, type = 'success') => ElementPlus.ElMessage({ message, type })
});
Vue.createApp({
render: () => Vue.h(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
})
}).mount('#root');
</script>
</body>
</html>js
import {
$TableTools,
$SuperTable,
$TableFilter
} from '../../../../../../jiess-base/vue3element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Add from '../../components/AddEdit/Add.js';
import items from './items.js';
export default function() {
this.add(
this.render({
items,
is: $SuperTable,
httpApi: tableBaseApi.list,
httpKey: tableBaseApi.listKey,
container(midder) {
return {
title: '学生列表',
extra: this.render({
midder,
is: $TableTools,
buttons: [{
type: 'primary',
text: '新增',
onClick: () => {
midder.open(Add, async (data) => {
await tableBaseApi.add(data);
}, {
type: 'add',
param: { class: 'no-padding' }
});
}
}]
}),
}
},
filter(midder) {
return this.render({
is: $TableFilter,
midder,
// buttons: [{
// text: '自定右上按钮',
// onClick() {
// console.log('点击')
// }
// }]
})
},
})
)
}js
import {
$Input,
$Select,
$InputNumber,
$ActionButtons,
} from '../../../../../../jiess-base/vue3element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Edit from '../../components/AddEdit/Edit.js';
const genderOptions = [
{ text: '男', value: 1 },
{ text: '女', value: 2 },
];
export default function(midder) {
return [{ text: 'ID', prop: 'id' }, {
text: '姓名',
prop: 'name',
renderItem(type, prop, text) {
return $Input({ $name: prop, $label: text });
}
},
{
text: '性别',
prop: 'gender',
renderItem(type, prop, text) {
return $Select({
$name: prop,
$label: text,
$options: genderOptions
})
},
render({ row }) {
if (row.gender) genderOptions.find(opt => opt.value === row.gender).text;
}
},
{
text: '年龄',
prop: 'age',
renderItem(type, prop, text) {
return $InputNumber({ $name: prop, $label: text });
},
},
{
text: '操作',
prop: 'action',
width: '220px',
fixed: 'right',
render: ({ row }) => {
return this.render({
is: $ActionButtons,
buttons: [{
text: '详情',
type: 'success',
tip: '查看本条数据',
onClick: async () => {
const data = await tableBaseApi.detail({ id: row.id });
console.log('本条数据的完整信息：', data);
}
}, {
text: '编辑',
type: 'primary',
tip: '修改本条数据',
onClick: async () => {
midder.open(Edit, async (data, close) => {
await tableBaseApi.edit(data, row.id);
}, {
record: row,
type: 'edit',
param: { class: 'no-padding' },
});
}
}, {
text: '删除',
type: 'danger',
pop: '确定删除？',
onClick: async () => {
await tableBaseApi.delete({ id: row.id });
this.$msg('操作成功');
midder.table.reload();
}
}],
});
}
},
]
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Add',
setup({ midder, ...props }) {
common.call(this, midder, { type: 'add', ...props })
}
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Edit',
// 使用列表行数据，用于编辑回显
setup({ midder, record, ...props }) {
common.call(this, midder, {
type: 'edit',
row: record,
...props
});
}
// 调用详情接口，异步获取情详情数据，用于编辑回显
// async setup({ midder, record, ...props }) {
// const row = await ModuleApi.detail(record.id);
// common.call(this, midder, { type: 'edit', row, ...props });
// this.forceUpdate();
// }
}js
export default function(midder, { type, row }) {
const area = this.area({
gutter: 8,
shadow: 'never',
initialValues: row
});
// 从items.js配置文件中提取表单元素，并将其渲染到当前编辑或新增页面
area.add(Object.values(midder[type].items).map(item => item(area)));
// action赋值到对应类型下，自动处理数据
midder[type].action = area.done();
}react代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/react168antd/css/base.css" />
<link href="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/reset.css" rel="stylesheet">
<!-- 引入react库 -->
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入ant-design -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/5.9.0/antd.min.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envReact.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/react168antd/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, React, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance,
// 注入全局的消息提示
$msg: (message, type = 'success') => antd.message[type](message),
});
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}));
</script>
</body>
</html>js
import {
$TableTools,
$SuperTable,
$TableFilter
} from '../../../../../../jiess-base/react168antd/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Add from '../../components/AddEdit/Add.js';
import items from './items.js';
export default function() {
this.add(
this.render({
items,
is: $SuperTable,
httpApi: tableBaseApi.list,
httpKey: tableBaseApi.listKey,
container(midder) {
return {
title: '学生列表',
extra: this.render({
midder,
is: $TableTools,
buttons: [{
type: 'primary',
text: '新增',
onClick: () => {
midder.open(Add, async (data) => {
await tableBaseApi.add(data);
}, {
type: 'add',
param: { class: 'no-padding' }
});
}
}]
}).getNative()
};
},
filter(midder) {
return this.render({
is: $TableFilter,
midder,
// buttons: [{
// text: '自定右上按钮',
// onClick() {
// console.log('点击')
// }
// }]
})
},
})
)
}js
import {
$Input,
$Select,
$InputNumber,
$ActionButtons,
} from '../../../../../../jiess-base/react168antd/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Edit from '../../components/AddEdit/Edit.js';
const genderOptions = [
{ text: '男', value: 1 },
{ text: '女', value: 2 },
];
export default function(midder) {
return [{ text: 'ID', prop: 'id' }, {
text: '姓名',
prop: 'name',
renderItem(type, prop, text) {
return $Input({ $name: prop, $label: text });
}
},
{
text: '性别',
prop: 'gender',
renderItem(type, prop, text) {
return $Select({
$name: prop,
$label: text,
$options: genderOptions
})
},
render(_, { gender }) {
if (gender) genderOptions.find(opt => opt.value === gender).text;
}
},
{
text: '年龄',
prop: 'age',
renderItem(type, prop, text) {
return $InputNumber({ $name: prop, $label: text });
},
},
{
text: '操作',
prop: 'action',
width: '220px',
fixed: 'right',
// antd中需要配置key
key: 'action',
render: (_, record) => {
return this.render({
is: $ActionButtons,
buttons: [{
text: '详情',
type: 'success',
tip: '查看本条数据',
onClick: async () => {
const data = await tableBaseApi.detail({ id: record.id });
console.log('本条数据的完整信息：', data);
}
}, {
text: '编辑',
type: 'primary',
tip: '修改本条数据',
onClick: async () => {
midder.open(Edit, async (data, close) => {
await tableBaseApi.edit(data, record.id);
}, {
record,
type: 'edit',
param: { class: 'no-padding' },
});
}
}, {
text: '删除',
type: 'danger',
pop: '确定删除？',
onClick: async () => {
await tableBaseApi.delete({ id: record.id });
this.$msg('操作成功');
midder.table.reload();
}
}],
}).getNative();
}
},
]
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Add',
setup({ midder, ...props }) {
common.call(this, midder, { type: 'add', ...props })
}
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Edit',
// 使用列表行数据，用于编辑回显
setup({ midder, record, ...props }) {
common.call(this, midder, {
type: 'edit',
row: record,
...props
});
}
// 调用详情接口，异步获取情详情数据，用于编辑回显
// async setup({ midder, record, ...props }) {
// const row = await ModuleApi.detail(record.id);
// common.call(this, midder, { type: 'edit', row, ...props });
// this.forceUpdate();
// }
}js
export default function(midder, { type, row }) {
const area = this.area({
gutter: 8,
shadow: 'never',
initialValues: row
});
// 从items.js配置文件中提取表单元素，并将其渲染到当前编辑或新增页面
area.add(Object.values(midder[type].items).map(item => item(area)));
// action赋值到对应类型下，自动处理数据
midder[type].action = area.done();
}展开筛选列表
使用可展开筛选区组件，通过接口调用，实现完整的增删改查
vue2代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/vue2element/css/base.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入vue库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue2.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/vue2element/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, {}, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance,
$msg: (message, type = 'success') => ELEMENT.Message({ message, type })
});
new Vue({
render: h => h(JiessComponent, {
attrs: {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
}
})
}).$mount('#root');
</script>
</body>
</html>js
import {
$TableTools,
$SuperTable,
$ExpandFilter
} from '../../../../../../jiess-base/vue2element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Add from '../../components/AddEdit/Add.js';
import items from './items.js';
export default function() {
this.add(
this.render({
items,
is: $SuperTable,
httpApi: tableBaseApi.list,
httpKey: tableBaseApi.listKey,
container(midder) {
return {
title: '学生列表',
extra: this.render({
midder,
is: $TableTools,
buttons: [{
type: 'primary',
text: '新增',
onClick: () => {
midder.open(Add, async (data) => {
await tableBaseApi.add(data);
}, {
type: 'add',
param: { class: 'no-padding' }
});
}
}]
}),
}
},
filter(midder) {
return this.render({
is: $ExpandFilter,
midder,
// layoutParam: {
// buttons: [{
// text: '自定右上按钮',
// onClick() {
// console.log('点击')
// }
// }]
// }
})
},
})
)
}js
import {
$Input,
$Select,
$InputNumber,
$ActionButtons,
} from '../../../../../../jiess-base/vue2element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Edit from '../../components/AddEdit/Edit.js';
const genderOptions = [
{ text: '男', value: 1 },
{ text: '女', value: 2 },
];
export default function(midder) {
return [{ text: 'ID', prop: 'id' }, {
text: '姓名',
prop: 'name',
renderItem(type, prop, text) {
return $Input({ $name: prop, $label: text });
}
},
{
text: '性别',
prop: 'gender',
renderItem(type, prop, text) {
return $Select({
$name: prop,
$label: text,
$options: genderOptions
})
},
render({ row }) {
if (row.gender) genderOptions.find(opt => opt.value === row.gender).text;
}
},
{
text: '年龄',
prop: 'age',
renderItem(type, prop, text) {
return $InputNumber({ $name: prop, $label: text });
},
},
{
text: '操作',
prop: 'action',
width: '220px',
fixed: 'right',
render: ({ row }) => {
return this.render({
is: $ActionButtons,
buttons: [{
text: '详情',
type: 'success',
tip: '查看本条数据',
onClick: async () => {
const data = await tableBaseApi.detail({ id: row.id });
console.log('本条数据的完整信息：', data);
}
}, {
text: '编辑',
type: 'primary',
tip: '修改本条数据',
onClick: async () => {
midder.open(Edit, async (data, close) => {
await tableBaseApi.edit(data, row.id);
}, {
record: row,
type: 'edit',
param: { class: 'no-padding' },
});
}
}, {
text: '删除',
type: 'danger',
pop: '确定删除？',
onClick: async () => {
await tableBaseApi.delete({ id: row.id });
this.$msg('操作成功');
midder.table.reload();
}
}],
});
}
},
]
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Add',
setup({ midder, ...props }) {
common.call(this, midder, { type: 'add', ...props })
}
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Edit',
// 使用列表行数据，用于编辑回显
setup({ midder, record, ...props }) {
common.call(this, midder, {
type: 'edit',
row: record,
...props
});
}
// 调用详情接口，异步获取情详情数据，用于编辑回显
// async setup({ midder, record, ...props }) {
// const row = await ModuleApi.detail(record.id);
// common.call(this, midder, { type: 'edit', row, ...props });
// this.forceUpdate();
// }
}js
export default function(midder, { type, row }) {
const area = this.area({
gutter: 8,
shadow: 'never',
initialValues: row
});
// 从items.js配置文件中提取表单元素，并将其渲染到当前编辑或新增页面
area.add(Object.values(midder[type].items).map(item => item(area)));
// action赋值到对应类型下，自动处理数据
midder[type].action = area.done();
}vue3代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 演示</title>
<link rel="stylesheet" href="../../../../../jiess-base/vue3element/css/base.css" />
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<!-- 引入Jiess核心库 -->
<script src="https://unpkg.com/@jiess/plus/umd/envVue3.js"></script>
<script src="https://unpkg.com/@jiess/plus/umd/JiessCore.js"></script>
<!-- 引入Jiess工具库 -->
<script src="//unpkg.com/@jiess/http/umd/JiessHttp.js"></script>
<script src="//unpkg.com/@jiess/utils"></script>
<script src="//unpkg.com/@jiess/http/umd/JiessLoading"></script>
<script src="//unpkg.com/@jiess/utils/jiess-utils/umd/JiessMidder.js"></script>
</head>
<body>
<div id="root" />
<script type="module">
import {
$Area,
$JiessDialog,
$tanInstance,
$dialogInstance
} from '../../../../../jiess-base/vue3element/cdn/index.js';
import setup from './config/index.js';
const { JiessComponent } = JiessCore.$entry(JiessEnv, Vue, {
area: $Area,
$tan: $tanInstance,
dialog: $dialogInstance,
$msg: (message, type = 'success') => ElementPlus.ElMessage({ message, type })
});
Vue.createApp({
render: () => Vue.h(JiessComponent, {
setup() {
// 在项目最外层使用全局弹框组件
this.add(this.render({ is: $JiessDialog }));
setup.call(this);
}
})
}).mount('#root');
</script>
</body>
</html>js
import {
$TableTools,
$SuperTable,
$ExpandFilter
} from '../../../../../../jiess-base/vue3element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Add from '../../components/AddEdit/Add.js';
import items from './items.js';
export default function() {
this.add(
this.render({
items,
is: $SuperTable,
httpApi: tableBaseApi.list,
httpKey: tableBaseApi.listKey,
container(midder) {
return {
title: '学生列表',
extra: this.render({
midder,
is: $TableTools,
buttons: [{
type: 'primary',
text: '新增',
onClick: () => {
midder.open(Add, async (data) => {
await tableBaseApi.add(data);
}, {
type: 'add',
param: { class: 'no-padding' }
});
}
}]
}),
}
},
filter(midder) {
return this.render({
is: $ExpandFilter,
midder,
// layoutParam: {
// buttons: [{
// text: '自定右上按钮',
// onClick() {
// console.log('点击')
// }
// }]
// }
})
},
})
)
}js
import {
$Input,
$Select,
$InputNumber,
$ActionButtons,
} from '../../../../../../jiess-base/vue3element/cdn/index.js';
import { tableBaseApi } from '../../../../../assets/services/api-common.js';
import Edit from '../../components/AddEdit/Edit.js';
const genderOptions = [
{ text: '男', value: 1 },
{ text: '女', value: 2 },
];
export default function(midder) {
return [{ text: 'ID', prop: 'id' }, {
text: '姓名',
prop: 'name',
renderItem(type, prop, text) {
return $Input({ $name: prop, $label: text });
}
},
{
text: '性别',
prop: 'gender',
renderItem(type, prop, text) {
return $Select({
$name: prop,
$label: text,
$options: genderOptions
})
},
render({ row }) {
if (row.gender) genderOptions.find(opt => opt.value === row.gender).text;
}
},
{
text: '年龄',
prop: 'age',
renderItem(type, prop, text) {
return $InputNumber({ $name: prop, $label: text });
},
},
{
text: '操作',
prop: 'action',
width: '220px',
fixed: 'right',
render: ({ row }) => {
return this.render({
is: $ActionButtons,
buttons: [{
text: '详情',
type: 'success',
tip: '查看本条数据',
onClick: async () => {
const data = await tableBaseApi.detail({ id: row.id });
console.log('本条数据的完整信息：', data);
}
}, {
text: '编辑',
type: 'primary',
tip: '修改本条数据',
onClick: async () => {
midder.open(Edit, async (data, close) => {
await tableBaseApi.edit(data, row.id);
}, {
record: row,
type: 'edit',
param: { class: 'no-padding' },
});
}
}, {
text: '删除',
type: 'danger',
pop: '确定删除？',
onClick: async () => {
await tableBaseApi.delete({ id: row.id });
this.$msg('操作成功');
midder.table.reload();
}
}],
});
}
},
]
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Add',
setup({ midder, ...props }) {
common.call(this, midder, { type: 'add', ...props })
}
}js
import common from './common.js';
export default {
isJiess: true,
name: 'Edit',
// 使用列表行数据，用于编辑回显
setup({ midder, record, ...props }) {
common.call(this, midder, {
type: 'edit',
row: record,
...props
});
}
// 调用详情接口，异步获取情详情数据，用于编辑回显
// async setup({ midder, record, ...props }) {
// const row = await ModuleApi.detail(record.id);
// common.call(this, midder, { type: 'edit', row, ...props });
// this.forceUpdate();
// }
}js
export default function(midder, { type, row }) {
const area = this.area({
gutter: 8,
shadow: 'never',
initialValues: row
});
// 从items.js配置文件中提取表单元素，并将其渲染到当前编辑或新增页面
area.add(Object.values(midder[type].items).map(item => item(area)));
// action赋值到对应类型下，自动处理数据
midder[type].action = area.done();
}注：可展开组件目前仅支持vue-element环境
拓展用法
JiessBetween线性布局
实现了基本的左右布局，常用于卡片头部，弹框底部等
staticValues初始表单数据
指定表单初始化时的数据源，与initialValues相比，数据不会被过滤
自定义表单验证
本例含自定义表单验证，以及全局注入自定义表单验证