add el-tag

packages/omi-element-ui/.gitignore

@@ -0,0 +1 @@
+build/

packages/omi-element-ui/src/elements/tag/_index.css

@@ -0,0 +1,3 @@
+el-tag{
+    margin: 10px;
+}

packages/omi-element-ui/src/elements/tag/index.js

@@ -0,0 +1,64 @@
+import { tag, WeElement } from "omi";
+import "../../omi-element-ui/el-tag";
+import style from "./_index.css";
+
+@tag('my-app', true)
+class MyApp extends WeElement {
+    static get data() {
+        return {
+            tags:['标签1','标签2','标签3']
+        }
+    }
+
+    css() {
+        return style
+    }
+
+    close = item => {
+        this.data.tags = this.data.tags.filter(tag => {
+            return tag != item
+        });
+        this.update();
+    }
+
+    render(props,data) {
+        console.log(data);
+        
+        return (
+            <div>
+                <div>
+                    <h3>基础用法</h3>
+                    <el-tag>标签一</el-tag>
+                    <el-tag type="success">标签二</el-tag>
+                    <el-tag type="info" >标签三</el-tag>
+                    <el-tag type="waring" >标签四</el-tag>
+                    <el-tag type="danger">标签五</el-tag>
+                </div>
+                <div>
+                    <h3>可移除标签</h3>
+                    <el-tag closeable>标签一</el-tag>
+                    <el-tag type="success" closeable>标签二</el-tag>
+                    <el-tag type="info" closeable>标签三</el-tag>
+                    <el-tag type="waring" closeable>标签四</el-tag>
+                    <el-tag type="danger" closeable>标签五</el-tag>
+                </div>
+                <div>
+                    <h3>动态编辑标签</h3>
+                    {data.tags.map(item => {
+                        return <el-tag key={item} closeable onClose={() => {
+                            this.close(item)
+                        }}>{item}</el-tag>      
+                    })}
+                </div>
+                <div>
+                    <h3>不同尺寸</h3>
+                    <el-tag closeable>标签一</el-tag>
+                    <el-tag size="medium" closeable>标签一</el-tag>
+                    <el-tag size="small" closeable>标签一</el-tag>
+                    <el-tag size="mini" closeable>标签一</el-tag>
+                </div>
+            </div>
+
+        )
+    }
+}

packages/omi-element-ui/src/omi-element-ui/el-tag/index.js

@@ -0,0 +1,36 @@
+import { tag, WeElement } from "omi";
+import "../style/global/index.css";
+import style from "../style/_tag.scss";
+
+@tag('el-tag', true)
+class ElTag extends WeElement {
+  css() {
+    return style
+  }
+
+  render(props) {
+    let classStr = "el-tag";
+    if (props.type) {
+      classStr += ` el-tag--${props.type}`
+    };
+    if (props.size) {
+      classStr += ` el-tag--${props.size}`
+    };
+    if(props.hit) {
+      classStr += ' is-hit';
+    };
+    return (
+      <span className={classStr} style={{'background-color':props.color}}>
+        {props.children}
+        {
+          props.closeable ?
+            <i
+              className="el-tag__close el-icon-close"
+              onClick={props.onClose}
+            /> :
+            null
+        }
+      </span>
+    )
+  }
+}

packages/omi-element-ui/src/tag.js

@@ -0,0 +1,5 @@
+import { render } from 'omi'
+import './assets/index.css'
+import './elements/tag'
+
+render(<my-app />, '#root')