zan-choose-link-menu v5.0.0

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