Bot releases are hidden (Show)
Published by dntzhang over 3 years ago
Published by dntzhang over 3 years ago
Published by dntzhang over 4 years ago
Published by dntzhang over 4 years ago
Fix onclick
, onblur
lint errors.
Published by dntzhang over 4 years ago
Published by dntzhang over 4 years ago
Published by dntzhang over 4 years ago
define('my-ele', _ => {
return <span>Hello Light Dom</span>
}, {
isLightDom: true
})
Published by dntzhang over 4 years ago
import { define, WeElement } from 'omi'
define('my-component', class extends WeElement {
static propTypes = {
first: String,
last: String
}
static isLightDom = true
render(props) {
return <div>
Hello, World! I'm {props.first}, {props.last}
</div>
}
})
Published by dntzhang over 4 years ago
When using OMI to render the whole application, you don't need to get prop through getAttribute
, you can set options.ignoreAttrs
to true to improve performance.
Published by dntzhang over 4 years ago
Ignore attributes in html mode and update:
this.update(true)
For example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.
onMaskClick = ()=> {
//change props
this.props.show = false
//prevent parent component from updating diff without results
this.prevProps.show = false
//update self and ignore attributes in html mode
this.update(true)
//trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated
this.fire('close')
}
Ignore attributes in html mode and update:
this.forceUpdate()
For example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.
onMaskClick = ()=> {
this.updateProps({
show: false
})
this.fire('close')
}
Published by dntzhang over 4 years ago
import { define, h } from '../../src/omi'
define('my-component', _ => {
return h('svg', null,
h(h.f, null,
h("circle", {
cx: "18",
cy: "4.54",
r: "2"
}),
h("path", {
d: "M15 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C18.42 8.5 17.44 7 15.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L8.22 10l1.92.53.65-1.53H13l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H18v5h2v-5.5c0-1.1-.9-2-2-2z"
})))
})
Published by dntzhang over 4 years ago
Published by dntzhang almost 5 years ago
import { render, define, h } from 'omi'
const store = {
data: {
count: 1
}
}
store.sub = () => {
store.data.count--
}
store.add = () => {
store.data.count++
}
define('my-counter', _ => (
<h.f>
<button onClick={_.store.sub}>-</button>
<span>{_.store.data.count}</span>
<button onClick={_.store.add}>+</button>
</h.f>
))
define('my-app', _ => (
<div>
<my-counter use={['count']} ></my-counter>
</div>
))
render(<my-app />, 'body', store)
Published by dntzhang almost 5 years ago
You can implement computed
props through compute
, such as:
define('my-counter', _ => (
<div>
<button onClick={_.store.sub}>-</button>
<span>{_.store.data.count}</span>
<button onClick={_.store.add}>+</button>
<div>Double: {_.computed.doubleCount}</div>
</div>
), {
use: ['count'],
compute: {
doubleCount() {
return this.count * 2
}
}
})
Published by dntzhang almost 5 years ago
define('my-component', _ => (
...
...
), {
//here!!
myMethodA() { },
myMethodB() { }
})
Published by dntzhang almost 5 years ago
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Babel config:
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"pragma": "Omi.h",
"pragmaFrag": "Omi.h.f"
}
]
]
}
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago