neo-cmp-cli 1.12.2 → 1.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index2.js +1 -1
- package/dist/loaders/component-scope-style-loader2.js +1 -1
- package/dist/neo/neoEnvManager.js +1 -1
- package/dist/package.json.js +1 -1
- package/dist/utils/cmpUtils/createCmpByTemplate.js +1 -1
- package/dist/utils/cmpUtils/createCmpByZip.js +1 -1
- package/package.json +1 -1
- package/template/antd-custom-cmp-template/package.json +1 -1
- package/template/develop/EntityGrid Web /347/273/204/344/273/266/347/232/204/350/257/246/347/273/206/345/210/206/346/236/220/346/226/207/346/241/243.md" +868 -0
- package/template/develop/{EntityList → EntityList H5 }/347/273/204/344/273/266/347/232/204/350/257/246/347/273/206/345/210/206/346/236/220/346/226/207/346/241/243.md" +2 -1
- package/template/echarts-custom-cmp-template/package.json +1 -1
- package/template/empty-cmp/model.ts +2 -1
- package/template/empty-custom-cmp-template/package.json +1 -1
- package/template/neo-bi-cmps/package.json +1 -1
- package/template/neo-custom-cmp-template/package.json +1 -1
- package/template/neo-h5-cmps/package.json +1 -1
- package/template/neo-h5-cmps/src/components/openChatPageBtn__c/index.tsx +3 -0
- package/template/neo-h5-cmps/src/components/openChatPageBtn__c/model.ts +12 -0
- package/template/neo-order-cmps/package.json +1 -1
- package/template/react-custom-cmp-template/package.json +1 -1
- package/template/react-ts-custom-cmp-template/package.json +1 -1
- package/template/vue2-custom-cmp-template/package.json +1 -1
- package/template/develop/Neo /347/274/226/350/276/221/345/231/250/346/217/220/344/276/233/347/232/204/345/261/236/346/200/247/351/205/215/347/275/256/351/241/271.pdf +0 -0
- package/template/develop/demo1/index.jsx +0 -84
- package/template/develop/demo1/index1.jsx +0 -81
- package/template/develop//345/275/223/345/211/215/345/217/257/347/224/250/347/232/204/345/261/236/346/200/247/351/205/215/347/275/256/351/241/271.pdf +0 -0
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { BaseCmp } from 'neo-ui-common';
|
|
3
|
+
// @ts-ignore
|
|
4
|
+
import { NeoEvent } from 'neo-ui-common';
|
|
3
5
|
import './style.scss'; // 组件内容样式
|
|
4
6
|
|
|
5
7
|
interface openChatPageBtnProps {
|
|
@@ -24,6 +26,7 @@ export default class openChatPageBtn extends BaseCmp<
|
|
|
24
26
|
super(props);
|
|
25
27
|
}
|
|
26
28
|
|
|
29
|
+
@NeoEvent.dispatch
|
|
27
30
|
openChatPage() {
|
|
28
31
|
const { env, aiQuery, agentApiKey } = this.props;
|
|
29
32
|
const openAIChat = env?.ctx?.util?.openAIChat;
|
|
@@ -40,6 +40,18 @@ export class openChatPageBtnModel {
|
|
|
40
40
|
agentApiKey: 'sales_assistant_agent',
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
+
/**
|
|
44
|
+
* 声明当前组件会触发的所有事件
|
|
45
|
+
* 备注：页面设计器端可用于进行事件绑定，在组件属性配置模式中配置事件动作
|
|
46
|
+
*/
|
|
47
|
+
events = [
|
|
48
|
+
{
|
|
49
|
+
apiKey: 'openChatPage', // 事件名称
|
|
50
|
+
label: '点击事件', // 事件
|
|
51
|
+
helpText: '点击后触发该事件', // 信息icon hover 时的提示文本
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
43
55
|
/**
|
|
44
56
|
* 组件面板配置，用于生成编辑器右侧属性配置面板内容
|
|
45
57
|
*/
|
|
Binary file
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useState, useRef, useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
// ===== 子组件：核心是【手动触发原生事件】 =====
|
|
5
|
-
const Son = () => {
|
|
6
|
-
const [triggerTimes, setTriggerTimes] = useState(0);
|
|
7
|
-
// 1. 创建ref，绑定到子组件的按钮DOM，获取真实DOM
|
|
8
|
-
const sonBtnRef = useRef(null);
|
|
9
|
-
|
|
10
|
-
// 子组件核心方法：运行时【手动触发原生click事件】
|
|
11
|
-
const handleManualTrigger = () => {
|
|
12
|
-
const btnDom = sonBtnRef.current;
|
|
13
|
-
if (!btnDom) return;
|
|
14
|
-
|
|
15
|
-
// ✅ 方式A：推荐 - dispatchEvent 手动触发原生click事件（父子通信必须开启bubbles: true）
|
|
16
|
-
const clickEvent = new Event('click', { bubbles: true });
|
|
17
|
-
btnDom.dispatchEvent(clickEvent, {
|
|
18
|
-
detail: { // 子组件传递给父组件的自定义参数，任意格式都可以
|
|
19
|
-
sonMsg: '子组件手动触发了自定义原生事件',
|
|
20
|
-
timestamp: new Date().getTime()
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
// ✅ 方式B：极简 - 等价写法，效果完全一致（只支持click）
|
|
25
|
-
// btnDom.click();
|
|
26
|
-
|
|
27
|
-
setTriggerTimes(prev => prev + 1);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<div style={{ padding: '20px', border: '1px solid #f00', margin: '10px' }}>
|
|
32
|
-
<h4>子组件</h4>
|
|
33
|
-
<p>手动触发原生事件次数：{triggerTimes}</p>
|
|
34
|
-
{/* 真实DOM，绑定ref，无任何onClick合成事件 */}
|
|
35
|
-
<button ref={sonBtnRef} id="son-native-btn">子组件原生按钮（无合成事件）</button>
|
|
36
|
-
<br />
|
|
37
|
-
<button onClick={handleManualTrigger} style={{ marginTop: '10px' }}>
|
|
38
|
-
点击我 → 手动触发上方按钮的原生click事件
|
|
39
|
-
</button>
|
|
40
|
-
</div>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
// ===== 父组件：核心是【监听子组件手动触发的原生事件】 =====
|
|
45
|
-
const Father = () => {
|
|
46
|
-
const [msg, setMsg] = useState('');
|
|
47
|
-
// 1. 创建ref，绑定到父组件根DOM，获取真实DOM
|
|
48
|
-
const fatherRootRef = useRef(null);
|
|
49
|
-
|
|
50
|
-
// 父组件核心：原生事件处理函数，监听子组件冒泡上来的原生事件
|
|
51
|
-
const fatherNativeEventListener = (e) => {
|
|
52
|
-
const target = e.target;
|
|
53
|
-
console.log('targetEvent:', e);
|
|
54
|
-
console.log('target:', target, target.id, target.tagName);
|
|
55
|
-
// 2. 精准判断：事件是否来自子组件的指定DOM元素
|
|
56
|
-
if (target.id === 'son-native-btn') {
|
|
57
|
-
console.log('✅ 父组件监听到：子组件手动触发的【原生click事件】');
|
|
58
|
-
setMsg(`父组件捕获到子组件原生事件 → ${new Date().toLocaleTimeString()}`);
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
// 3. 组件挂载时绑定原生事件，卸载时解绑（防止内存泄漏，必写）
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
const fatherDom = fatherRootRef.current;
|
|
65
|
-
if (!fatherDom) return;
|
|
66
|
-
// 绑定原生事件：事件名是【小写click】，监听子组件冒泡的事件
|
|
67
|
-
fatherDom.addEventListener('click', fatherNativeEventListener);
|
|
68
|
-
// 卸载解绑，避免内存泄漏
|
|
69
|
-
return () => {
|
|
70
|
-
fatherDom.removeEventListener('click', fatherNativeEventListener);
|
|
71
|
-
};
|
|
72
|
-
}, []);
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<div ref={fatherRootRef} style={{ padding: '20px', border: '1px solid #000' }}>
|
|
76
|
-
<h3>父组件</h3>
|
|
77
|
-
<p style={{ color: 'red', fontSize: '16px' }}>{msg}</p>
|
|
78
|
-
{/* 子组件直接渲染，无需传递任何props！！！ 完全解耦 */}
|
|
79
|
-
<Son />
|
|
80
|
-
</div>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export default Father;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useState, useRef, useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
// ===== 子组件：手动触发【自定义原生事件】+ 传递参数 =====
|
|
5
|
-
const Son = () => {
|
|
6
|
-
const [sonData, setSonData] = useState('我是子组件的初始数据');
|
|
7
|
-
const sonDomRef = useRef(null); // 获取子组件真实DOM
|
|
8
|
-
|
|
9
|
-
// 子组件手动触发自定义事件的核心方法
|
|
10
|
-
const triggerCustomNativeEvent = () => {
|
|
11
|
-
const dom = sonDomRef.current;
|
|
12
|
-
if (!dom) return;
|
|
13
|
-
|
|
14
|
-
// ✅ 核心：创建自定义原生事件 + 传递参数，开启冒泡
|
|
15
|
-
const customNativeEvent = new CustomEvent('son-custom-native-event', {
|
|
16
|
-
bubbles: true,
|
|
17
|
-
detail: { // 子组件传递给父组件的自定义参数，任意格式都可以
|
|
18
|
-
sonMsg: '子组件手动触发了自定义原生事件',
|
|
19
|
-
sonData: sonData,
|
|
20
|
-
timestamp: new Date().getTime()
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
// 手动触发这个自定义原生事件
|
|
24
|
-
dom.dispatchEvent(customNativeEvent);
|
|
25
|
-
|
|
26
|
-
setSonData(`子组件数据-${Math.floor(Math.random() * 100)}`);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<div ref={sonDomRef} style={{ padding: '20px', border: '1px solid #f00', margin: '10px' }} id="son-root-dom">
|
|
31
|
-
<h4>子组件</h4>
|
|
32
|
-
<p>子组件当前数据：{sonData}</p>
|
|
33
|
-
<button onClick={triggerCustomNativeEvent} style={{ marginTop: '10px' }}>
|
|
34
|
-
点击我 → 手动触发【自定义原生事件】并传参给父组件
|
|
35
|
-
</button>
|
|
36
|
-
</div>
|
|
37
|
-
);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// ===== 父组件：监听【子组件的自定义原生事件】+ 接收参数 =====
|
|
41
|
-
const Father = () => {
|
|
42
|
-
const [receiveData, setReceiveData] = useState({});
|
|
43
|
-
const fatherDomRef = useRef(null);
|
|
44
|
-
|
|
45
|
-
// 父组件监听自定义原生事件的处理函数
|
|
46
|
-
const fatherCustomEventListener = (e) => {
|
|
47
|
-
const target = e.target;
|
|
48
|
-
console.log('targetEvent:', e);
|
|
49
|
-
console.log('target:', target, target.id, target.tagName);
|
|
50
|
-
// 1. 判断事件来源是子组件
|
|
51
|
-
if (e.target.closest('#son-root-dom')) {
|
|
52
|
-
console.log('✅ 父组件监听到子组件的【自定义原生事件】');
|
|
53
|
-
// 2. ✅ 核心：通过e.detail获取子组件传递的自定义参数
|
|
54
|
-
const sonParams = e.detail;
|
|
55
|
-
setReceiveData(sonParams);
|
|
56
|
-
console.log('子组件传递的参数：', sonParams);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
const fatherDom = fatherDomRef.current;
|
|
62
|
-
if (!fatherDom) return;
|
|
63
|
-
// ✅ 核心：监听子组件的【自定义事件名】，和子组件保持一致
|
|
64
|
-
fatherDom.addEventListener('son-custom-native-event', fatherCustomEventListener);
|
|
65
|
-
// 卸载解绑
|
|
66
|
-
return () => {
|
|
67
|
-
fatherDom.removeEventListener('son-custom-native-event', fatherCustomEventListener);
|
|
68
|
-
};
|
|
69
|
-
}, []);
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<div ref={fatherDomRef} style={{ padding: '20px', border: '1px solid #000' }}>
|
|
73
|
-
<h3>父组件</h3>
|
|
74
|
-
<p style={{ color: 'blue', fontSize: '16px' }}>监听到子组件自定义事件，接收参数：</p>
|
|
75
|
-
<pre>{JSON.stringify(receiveData, null, 2)}</pre>
|
|
76
|
-
<Son />
|
|
77
|
-
</div>
|
|
78
|
-
);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
export default Father;
|