diff --git a/packages/omi-element-ui/.gitignore b/packages/omi-element-ui/.gitignore new file mode 100644 index 000000000..d16386367 --- /dev/null +++ b/packages/omi-element-ui/.gitignore @@ -0,0 +1 @@ +build/ \ No newline at end of file diff --git a/packages/omi-element-ui/src/elements/tag/_index.css b/packages/omi-element-ui/src/elements/tag/_index.css new file mode 100644 index 000000000..315f5fa2e --- /dev/null +++ b/packages/omi-element-ui/src/elements/tag/_index.css @@ -0,0 +1,3 @@ +el-tag{ + margin: 10px; +} \ No newline at end of file diff --git a/packages/omi-element-ui/src/elements/tag/index.js b/packages/omi-element-ui/src/elements/tag/index.js new file mode 100644 index 000000000..597380a47 --- /dev/null +++ b/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 ( +
+
+

基础用法

+ 标签一 + 标签二 + 标签三 + 标签四 + 标签五 +
+
+

可移除标签

+ 标签一 + 标签二 + 标签三 + 标签四 + 标签五 +
+
+

动态编辑标签

+ {data.tags.map(item => { + return { + this.close(item) + }}>{item} + })} +
+
+

不同尺寸

+ 标签一 + 标签一 + 标签一 + 标签一 +
+
+ + ) + } +} \ No newline at end of file diff --git a/packages/omi-element-ui/src/omi-element-ui/el-tag/index.js b/packages/omi-element-ui/src/omi-element-ui/el-tag/index.js new file mode 100644 index 000000000..48b37d16e --- /dev/null +++ b/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 ( + + {props.children} + { + props.closeable ? + : + null + } + + ) + } +} \ No newline at end of file diff --git a/packages/omi-element-ui/src/tag.js b/packages/omi-element-ui/src/tag.js new file mode 100644 index 000000000..e438cde41 --- /dev/null +++ b/packages/omi-element-ui/src/tag.js @@ -0,0 +1,5 @@ +import { render } from 'omi' +import './assets/index.css' +import './elements/tag' + +render(, '#root') \ No newline at end of file