update readme
This commit is contained in:
dntzhang
parent
1dd04eb1ae
commit
4f9d915708
|
|
@ -36,9 +36,10 @@
|
|||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)| Omi 官方文档 |
|
||||
| [omi-30-seconds ](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| 30 秒理解一段有用的 Omi 代码片段.|
|
||||
| [omi-canvas ](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-mp ](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
|
||||
| [omi-router ](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由。[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|
|
||||
| [omi-router ](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由。[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| 项目脚手架工具，支持 Javascript 和 Typescript |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi项目中变得超级简单.|
|
||||
|
|
|
|||
|
|
@ -38,9 +38,10 @@ Omi uses Shadow DOM based style isolation and semantic structure.
|
|||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)| Omi official documents |
|
||||
| [omi-30-seconds ](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Useful Omi snippets that you can understand in 30 seconds.|
|
||||
| [omi-canvas ](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|
|
||||
| [omi-mp ](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| Develop and generate Web HTML5 Single-Page Applications by wechat mini program.|
|
||||
| [omi-router ](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router. [→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router. [→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|
|
||||
|
|
|
|||
|
|
@ -123,3 +123,100 @@ define('my-app', class extends WeElement {
|
|||
|
||||
render(<my-app />, 'body', { emitter: mitt() })
|
||||
```
|
||||
|
||||
## Using omi to implement tree view
|
||||
|
||||
To implement the tree view, we need to rely on self dependence. For example, the following `my-node`.
|
||||
|
||||
[→ Online Demo](https://tencent.github.io/omi/packages/omi/examples/tree/)
|
||||
|
||||
```js
|
||||
import { define, render, WeElement } from 'omi'
|
||||
|
||||
define('my-node', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
open = () => {
|
||||
this.data.open = !this.data.open
|
||||
}
|
||||
|
||||
extend = () => {
|
||||
if (!this.data.children) {
|
||||
this.data.children = [{ name: 'new child' }]
|
||||
} else {
|
||||
this.addChild()
|
||||
}
|
||||
this.data.open = true
|
||||
}
|
||||
|
||||
addChild = () => {
|
||||
this.data.children.push({ name: 'new child' })
|
||||
}
|
||||
|
||||
install() {
|
||||
this.data = this.props.node
|
||||
}
|
||||
|
||||
css() {
|
||||
return `
|
||||
.add, h4{
|
||||
cursor:pointer;
|
||||
}`
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
const children = data.children
|
||||
const canOpen = children && children.length
|
||||
return (
|
||||
<li>
|
||||
<h4 onclick={this.open} ondblclick={this.extend}>
|
||||
{this.data.name}
|
||||
{canOpen && <span>[{data.open ? '-' : '+'}]</span>}
|
||||
</h4>
|
||||
|
||||
{canOpen &&
|
||||
data.open && (
|
||||
<ul>
|
||||
{children.map(child => {
|
||||
return <my-node node={child} />
|
||||
})}
|
||||
<li class="add" onclick={this.addChild}>
|
||||
+
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
define('my-tree', class extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<ul>
|
||||
<my-node node={props.node} />
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
const node = {
|
||||
name: 'my-tree',
|
||||
data: { x: 1 },
|
||||
children: [
|
||||
{
|
||||
name: 'a-1'
|
||||
},
|
||||
{
|
||||
name: 'a-2',
|
||||
children: [
|
||||
{
|
||||
name: 'a-2-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
render(<my-tree node={node} />, 'body')
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in New Issue