JS增强 hook写法

vue3版兼容vue2版的方法命令，同时支持新的hook写法，仅支持按钮事件和setup 支持import

按钮触发JS增强 - hook写法

• 如果想要在方法中使用import，请使用方法名：按钮编码_hook
• import有限制，需要提前配置好，详见下方文档import配置
• 函数内置对象context，获取当前页面的相关信息

按钮触发函数示例

1. 自定义按钮编码 one

2. 定义按钮对应JS方法

   方法名：{按钮编码}_hook

one_hook(){
   console.log('context内置对象', this);
   import {useMessage} from "@/hooks/useMessage"
   const {createMessage} = useMessage();
   function sayHi () {
      createMessage.success("这是代码里的提示：hello world!")
   }
   sayHi();  
}

3. 配置示例图

4. 演示JS增强效果

import配置：

1.找到文件：src/views/super/online/cgform/hooks/auto/useCustomHook.ts，如果没有该文件，则配置不了

2.预置import，比如将发送消息的hook函数import进来

import * as HOOK_MESSAGE from '/@/hooks/web/useMessage';

3.自定义配置，在 $exports对象中定义需要的函数

const $exports = {
  '@': {
    hooks: {
      useMessage: HOOK_MESSAGE,
    },
};

4. 在js增强中调用， from的路径和$exports对象属性层级一致。

   import {useMessage} from "@/hooks/useMessage"
   const {createMessage} = useMessage();

扩展：

支持获取用户信息 @date 2023-05-15

aa_hook(){
   import {useUserStore} from "@/hooks/useUserStore"
   const userStore = useUserStore();

   function sayHi () {
     const userInfo = userStore.getUserInfo;
     console.log("用户信息", userInfo)
   }

   sayHi();  
}