基于omi的omim-tag组件-CSDN博客

本文介绍了在腾讯OMI项目中，使用TypeScript开发并提交的OMIM Tag组件的详细实现过程，包括组件的在线体验地址、GitHub源码链接及个人博客。文中展示了通过OMI框架构建的Tag组件，支持不同样式、图标和尺寸，提供了丰富的演示示例。

摘要由CSDN通过智能技术生成

腾讯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 = css

  static 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;
}

复制代码