tf-contextmenu

脚手架

右侧菜单组件

注意事项

如果项目中安装组件后报错, 类似于: Cannot find module '@babel/runtime/core-js/object/keys', 需在项目中安装npm install @babel/runtime-corejs2

1. API文档

字段名称	字段含义	默认值
items	右侧菜单配置, 示例:[{name: '', click(data){}, render(data){}}]	[]
noSelect	右键的时候, 不选中文字	true
cursor	鼠标显示的样式	''
extra	额外的数据	会传给items中每项的click和render回调
antd Popover组件的字段都支持	参考: https://3x.ant.design/components/popover-cn/

2. 使用示例

import TfContextmenu from 'tf-contextmenu'
import 'tf-contextmenu/lib/tf-contextmenu/style/index.css'

export default function App() {
  return (
    <TfContextmenu
      items={[ // 支持字段有: name, click, render
        { 
          name: '点击1',  
          click(data) {
            console.log('点击1', data)
          }
        },
        { 
          render(data) { // 优先级比name高
            return <span>点击2</span>
          },  
          click() {
            console.log('点击2')
          }
        }
      ]}
      placement="right"
    >
      <span>右侧菜单</span>
    </TfContextmenu>
  )
}

3. 命令

npm start // 运行测试
npm run build // 构建生产
npm run pub // 发布

4. 版本更新说明

0.1.2:
  解决antd v4和v3调用Popover组件内部api导致的不兼容的问题

0.1.0:
  初始版本