zan-choose-link-menu

下拉选择菜单，主要用来选择不同类型的链接。

使用场景

Design 组件里面很多地方都需要用到选择链接的功能

代码演示

:::demo 基本用法

import ChooseLinkMenu from 'zan-choose-link-menu';

class Simple extends Component {
  state = {};

  render() {
    return (
      <ChooseLinkMenu
        value={this.state.value}
        onMenuClick={this.onMenuClick}
        onDelete={this.onDelete}
        formatTag={this.formatTag}
        trigger="选择链接"
        menuItems={[
          {
            title: '地球',
            key: 'earth'
          },
          {
            title: '火星',
            key: 'mars'
          }
        ]}
      />
    );
  }

  onMenuClick = (evt, key) => {
    return this.setState({
      value: {
        type: key,
        content: key === 'earth' ? '地球欢迎你' : '火星欢迎你'
      }
    });
  };

  onDelete = () => {
    this.setState({
      value: null
    });
  };

  formatTag(value) {
    return {
      type: value.type === 'earth' ? '地球' : '火星',
      title: value.content,
      url: value.type === 'earth' ? 'https://youzan.com' : 'https://bbs.youzan.com'
    };
  }
}

ReactDOM.render(<Simple />, mountNode);

:::

API

| 参数 | 说明 | 类型 | 默认值 | 备选值 | |------|------|------|--------|--------| | value | 当前选中的值 | any | | | | menuItems | 下拉菜单数组，每一项都是一个对象，包含 title, key 两个字段 | { title: node, key: string }[] | [] | | | onMenuClick | 菜单点击回调函数 | (event, key) => void | | | | onDelete | 删除选中值时的回调函数 | event => void | | | | trigger | 没有值选中时的触发节点 | node | | | | formatTag| 选中值之后用于格式化显示的函数 | value => { type: string, title: node, url: string } | | | | isEmptyValue | 判断当前值是否是空的 | value => bool | value => !value | | | menuHideDelay | 菜单关闭延迟，毫秒 | number | 250 | | | menuShowDelay | 菜单打开延迟，毫秒 | number | 150 | | | className | 自定义额外类名 | string | '' | '' |