2021-06-29 菜单图标选择功能实现(antd pro)

创建图标文件

iconData.js文件部分代码

import * as Icons from '@ant-design/icons';
import { createFromIconfontCN } from '@ant-design/icons';

//使用试例: <Icon type="icon-system" style={{ fontSize: '16px', color: '#08c' }} />
const Icon = createFromIconfontCN({
    scriptUrl: [],
});

/**网站通用图标关键字 */
const webIcons = [
  'group',
  'bug',
  'console-sql',
  'control',
  'ci',
  'control',
  'compass',
  ...
];

/**网站通用图标 */
const webIconData = {
  group: <Icons.GroupOutlined />,
  compass: <Icons.CompassOutlined />,
  bug: <Icons.BugOutlined />,
  'console-sql': <Icons.ConsoleSqlOutlined />,
  control: <Icons.ControlOutlined />,
  ci: <Icons.CiOutlined />,
  bell: <Icons.BellOutlined />,
  ...
};

/**全部图标 */
const iconData = {
  // 'unlock':<Icons. />,

  ...webIconData, //网站通用图标
  ...dataIconData, //数据类图标
  ...suggestionIconData, //指示性图标
  ...editIconData, //编辑类图标
  ...directionIconData, //方向性图标
};

export {
  webIconData,
  iconData,
  webIcons 
};

图标选择表单

index.jsx 部分代码

import { iconData } from '@/utils/iconData';
const addMenuForm = React.createRef();

    constructor(){
        super();
        this.state={
            icon:null,
            editIconModalType:'',
            modalIconData: '',
        }
    }

<Form
  labelAlign={'left'} 
  ref={addMenuForm} 
  initialValues = {{
  icon:this.state.icon,
  }}
>
  <Form.Item 
	  labelCol={{ span: 4 }} 
	  wrapperCol={{ span: 16 }} 
	  name={'icon'} 
	  label="图标"
	  rules={[{ required: true }]}
  >
     //注入图标关键字
    <Input  hidden/>
    //显示选好的图标
    {this.state.icon  &&  iconData[this.state.icon]}
    <Button 
       type='primary' 
       size={'small'}  
       style={{marginLeft:30, }} 
       onClick={ ()=>{ 
       this._openEditIconModal('add') //打开图标选择框
       }}
    >选择</Button>
      </Form.Item>
</Form>

图标选择框

部分代码

	import { iconData, directionIcons, suggestionIcons, editIcons, dataIcons, webIcons } from '@/utils/iconData';

      <Modal
        destroyOnClose
        title={'选择图标'}
        visible={editModalType !== ''}
        okText="确认"
        cancelText="取消"
        onCancel={() => onCancel()}
        onOk={handleOk}//提交图标关键字
        width={'40vw'}
      >
      {/* tab栏配合关键字数组实现切换功能 */}
      {/* <Tabs defaultActiveKey="1" onChange={onChangeTabs}>
        <Tabs.TabPane tab="网站通用图标" key="1" > </Tabs.TabPane>
        <Tabs.TabPane tab="指示性图标" key="2" > </Tabs.TabPane>
        <Tabs.TabPane tab="编辑类图标" key="3" > </Tabs.TabPane>
        <Tabs.TabPane tab="方向性图标" key="4" > </Tabs.TabPane>
        <Tabs.TabPane tab="数据类图标" key="5" > </Tabs.TabPane>
      </Tabs> */}
        <Form
          form={form}
          layout="vertical"
          initialValues={{
          	//初始化选中图标
            icon:formVals?.icon || null
          }}
        >
         <Form.Item 
            name={'icon'}
            rules={[
                { required:true, message:'请选择图标' },
            ]}
        >
             <Radio.Group>
              <Space direction={'horizontal'} wrap>
              {
                Object.keys(iconData).map((item,index)=>
                <Radio.Button key={index}  value={item}>
                	{iconData[item]}
                </Radio.Button>
                )
              }
              {/*
              	//配合tab栏使用,
                options.map((item, index) =>
                iconData[item] && 
                <Radio.Button key={index} value={item} style={btnStyle}>
                	<Tooltip title={item} placement="bottom">		
						{iconData[item]} 
					</Tooltip>
                </Radio.Button>
                )
              */}
              </Space>
             </Radio.Group>
         </Form.Item>

        </Form>
      </Modal>