腾讯omi项目中的omim，基于typescript，pr了omim-tag组件，已被commit。

omim线上体验地址：omim

github地址： mac-tag

个人blog地址： blog

demo：

import '../../src/tag/index.tsx'
import { render, h } from 'omi'function clickHandler() {console.log(1)
}
render(<div><h3>基础用法</h3><m-tag onClick={clickHandler}>default</m-tag><m-tag onClick={clickHandler} type='primary'>primary</m-tag><m-tag onClick={clickHandler} type='danger'>danger</m-tag><m-tag onClick={clickHandler} type='warn'>warn</m-tag><m-tag onClick={clickHandler} type='success'>success</m-tag><h3>带图标</h3><m-tag onClick={clickHandler} icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>default</m-tag><m-tag onClick={clickHandler} type='primary' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>primary</m-tag><m-tag onClick={clickHandler} type='danger' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>danger</m-tag><m-tag onClick={clickHandler} type='warn' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>warn</m-tag><m-tag onClick={clickHandler} type='success' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>success</m-tag><h3>不同尺寸</h3><m-tag onClick={clickHandler}>default</m-tag><m-tag onClick={clickHandler} type='danger' size='medium'>medium</m-tag><m-tag onClick={clickHandler} type='warn' size='small'>small</m-tag><m-tag onClick={clickHandler} type='success' size='mini'>mini</m-tag></div>, 'body')
复制代码

源码如下：

index.d.ts文件：

import { WeElement } from 'omi';
import '../icon';
interface Props {type: string;active: boolean;size: string;icon: object;
}
interface Data {
}
export default class Tag extends WeElement<Props, Data> {static css: any;static propTypes: {type: StringConstructor;active: BooleanConstructor;size: StringConstructor;icon: ObjectConstructor;};render(props: any): JSX.Element;
}
export {};复制代码

index.tsx文件：

import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
import '../icon'interface Props {type: string,active: boolean,size: string,icon: object
}interface Data {}@tag('m-tag')
export default class Tag extends WeElement<Props, Data>{static css = cssstatic propTypes = {type: String,active: Boolean,size: String,icon: Object}render(props) {return (<div {...extractClass(props, 'mdc-tag',props.type ? 'mdc-tag--'+`${props.type}` : '',props.size ? 'mdc-tag--' + `${props.size}` : '')}><span><slot></slot></span>{(props.icon) && <m-icon class='m-icon' {...props.icon}></m-icon>}</div>)}
}复制代码

index.scss文件：

@import '../theme';.m-icon {margin-left: 0.6em;text-align: center;display: inline-block;
}.mdc-tag {margin: 5px 5px 0 0;background-color: #fff;color: #000;padding: 0 10px;height: 32px;font-size: 12px;box-sizing: border-box;border: 1px solid rgba(64, 158, 255, 0.2);white-space: nowrap;font-family: Roboto, sans-serif;font-size: 12px;line-height: 2.25rem;font-weight: 500;letter-spacing: 0.08929em;text-decoration: none;text-transform: uppercase;padding: 0 10px;display: inline-flex;position: relative;align-items: center;justify-content: center;box-sizing: border-box;line-height: inherit;user-select: none;overflow: hidden;vertical-align: middle;
}.mdc-tag--active {background-color: #ccc;
}.mdc-tag--success {background-color: rgba(103, 194, 58, 0.1);border-color: rgba(103, 194, 58, 0.2);color: #09bb07 !important;
}
.mdc-tag--primary {background-color: rgba(64, 158, 255, 0.1);border-color: rgba(64, 158, 255, 0.2);color: #0052d9 !important;
}
.mdc-tag--warn {background-color: rgba(230, 162, 60, 0.1);border-color: rgba(230, 162, 60, 0.2);color: #e6a23c !important;
}
.mdc-tag--danger {background-color: rgba(245, 108, 108, 0.1);border-color: rgba(245, 108, 108, 0.2);color: #e64340 !important;
}.mdc-tag--mediun {height: 28px;line-height: 26px;
}.mdc-tag--small {height: 24px;padding: 0 8px;line-height: 22px;
}.mdc-tag--mini {height: 20px;padding: 0 5px;line-height: 19px;
}复制代码