海泰HIS前端开发文档

Appearance

Return to top
目录

快捷键-useKeydownHandler

TIP

生效范围：组件在页面中使用、组件在ldDialog中使用

方式一、为当前组件统一注册快捷键

示例

tsx
useKeydownHandler([
  {
    keyboard: "f2",
    desc: "收费结算",
    trigger() {
      // 执行对应操作
    },
  },
  {
    keyboard: "f3",
    desc: "退费",
    trigger() {
      // 执行对应操作
    },
  },
]);

useKeydownHandler([
  {
    keyboard: "f2",
    desc: "收费结算",
    trigger() {
      // 执行对应操作
    },
  },
  {
    keyboard: "f3",
    desc: "退费",
    trigger() {
      // 执行对应操作
    },
  },
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方式二、动态添加删除快捷键

WARNING

删除时为了达到精确删除，必须为快捷键传入唯一id，程序根据唯一id删除快捷键

示例

tsx
const keyDown = useKeydownHandler([
  {
    id: "a1b2c3",
    keyboard: "f3",
    desc: "待删除",
    trigger() {
      // 执行对应操作
    },
  },
]);

// 新添加一条快捷键
keyDown.addKeydownRow({
  keyboard: "f2",
  desc: "收费结算",
  trigger() {
    // 执行对应操作
  },
});

// 删除一条快捷键
keyDown.remove("a1b2c3");

const keyDown = useKeydownHandler([
  {
    id: "a1b2c3",
    keyboard: "f3",
    desc: "待删除",
    trigger() {
      // 执行对应操作
    },
  },
]);

// 新添加一条快捷键
keyDown.addKeydownRow({
  keyboard: "f2",
  desc: "收费结算",
  trigger() {
    // 执行对应操作
  },
});

// 删除一条快捷键
keyDown.remove("a1b2c3");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

useLdTsxDialog 使用快捷键

方式一：直接使用带快捷键的组件，这样快捷键会自动注册到弹窗中

示例

tsx
const dialog = useLdTsxDialog(
  () => (
    <>
      {/* Test1组件里使用了useKeydownHandler */}
      <Test1></Test1>
    </>
  ),
  {
    title: "测试",
  }
);

const dialog = useLdTsxDialog(
  () => (
    <>
      {/* Test1组件里使用了useKeydownHandler */}
      <Test1></Test1>
    </>
  ),
  {
    title: "测试",
  }
);
1
2
3
4
5
6
7
8
9
10
11

方式二：为 useLdTsxDialog 传入keyboardLst快捷键配置

示例

tsx
const dialog = useLdTsxDialog(() => <>测试</>, {
  title: "测试",
  // 传入快捷键配置
  keyboardLst: [
    {
      keyboard: "f2",
      desc: "收费结算",
      trigger() {
        // 执行对应操作
      },
    },
    {
      keyboard: "f3",
      desc: "退费",
      trigger() {
        // 执行对应操作
      },
    },
  ],
});

const dialog = useLdTsxDialog(() => <>测试</>, {
  title: "测试",
  // 传入快捷键配置
  keyboardLst: [
    {
      keyboard: "f2",
      desc: "收费结算",
      trigger() {
        // 执行对应操作
      },
    },
    {
      keyboard: "f3",
      desc: "退费",
      trigger() {
        // 执行对应操作
      },
    },
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方式三：调用 useLdTsxDialog 的 open 方法

示例

tsx
//payTypeList为接口返回的参数
let  dialogKeydown:IKeydownConfing[]=[]
      if (payTypeList) {
        payType.value = payTypeList;
        // 注册快捷键
        dialogKeydown = payTypeList.map((e, index) => {
          return {
            keyboard: e.KEY,
            desc: e.ZFLX_MC,
            trigger: () => {
              setFocus('rad' + index)
              payTypeRef.value = e.ZFLX_ID
            }
          }
        })

//payTypeList为接口返回的参数
let  dialogKeydown:IKeydownConfing[]=[]
      if (payTypeList) {
        payType.value = payTypeList;
        // 注册快捷键
        dialogKeydown = payTypeList.map((e, index) => {
          return {
            keyboard: e.KEY,
            desc: e.ZFLX_MC,
            trigger: () => {
              setFocus('rad' + index)
              payTypeRef.value = e.ZFLX_ID
            }
          }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
tsx
dialog.getAsynControl().then((item) =>
  item.open(undefined, undefined, {
    keyboardLst: dialogKeydown,
  })
);

dialog.getAsynControl().then((item) =>
  item.open(undefined, undefined, {
    keyboardLst: dialogKeydown,
  })
);
1
2
3
4
5