DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add plugin example

This commit is contained in:
dntzhang 2018-04-26 09:51:32 +08:00
parent 80eee08ae5
commit 25b362d718
8 changed files with 628 additions and 1614 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
example/hyperscript/hello.js
View File

@ -1,11 +0,0 @@
import Omi from '../../src/index.js'
const $ = Omi.tags
class Hello extends Omi.Component {
render() {
return $.div( 'Hello2 ' + this.data.name+'!')
}
}
Omi.tag('Hello', Hello)
export default Hello

12
example/hyperscript/index.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--[if lt IE 9]><script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script><![endif]-->
<script src="bundler.js"></script>
</body>
</html>

29
example/hyperscript/main.js
View File

@ -1,29 +0,0 @@
import Omi from '../../src/index.js'
import Hello from './hello.js'
const $ = Omi.tags
class App extends Omi.Component {
handleClick(e) {
alert(e.target.innerHTML)
}
style() {
return `
<style>
h3{
color:red;
cursor: pointer;
}
`
}
render() {
return $.div([
$.Hello({name: 'Omix'}),
$.h3({onclick: this.handleClick.bind(this)}, 'scoped css and event test! click me!')
])
}
}
Omi.render(new App(), 'body')

2095
example/hyperscript/bundler.js → example/plugin-x/bundler.js
View File

File diff suppressed because it is too large Load Diff

14
example/plugin-x/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

44
example/plugin-x/main.js Normal file
View File

@ -0,0 +1,44 @@
import OmiDrag from './omi-drag.js'
import Omi from '../../src/index.js'
class App extends Omi.Component {
constructor(data) {
super(data)
this.name = 'app'
}
clickHandler() {
console.log('click')
console.log(this.aa())
}
aa(){
return this.name
}
render() {
return <div>
<OmiDrag click={this.clickHandler.bind(this)}>
<div class="test">Drag Me A</div>
</OmiDrag>
</div>
}
style() {
return `
.test{
width:100px;
height:100px;
color:white;
line-height:90px;
text-align:center;
background-color:#00BFF3;
}
`
}
}
Omi.render(new App(), '#container')

35
example/plugin-x/omi-drag.js Normal file
View File

@ -0,0 +1,35 @@
import Omi from '../../src/index.js'
class OmiDrag extends Omi.Component {
constructor(data) {
super(data)
}
installed(){
console.log(this.node)
console.log(this.data)
this.node.addEventListener('click',this.data.click,false)
}
render() {
return this.data.children[0];
}
style() {
return `
.test{
width:100px;
height:100px;
color:white;
line-height:90px;
text-align:center;
background-color:#00BFF3;
}
`
}
}
export default OmiDrag

2
package.json
View File

@ -73,4 +73,4 @@
"url": "https://github.com/AlloyTeam/omix/issues/new"
},
"homepage": "http://alloyteam.github.io/omix"
}
}