omi - rpx support

This commit is contained in:
dntzhang 2018-11-11 20:04:20 +08:00
parent 6a38c1e026
commit 28dc8452ae
7 changed files with 1577 additions and 4 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,16 @@
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Add Omi in 30 Seconds</title>
</head>
<body>
<script src="b.js"></script>
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
</body>
</html>

View File

@ -0,0 +1,34 @@
import { render, WeElement, define, rpx } from '../../src/omi'
define('my-counter',
class extends WeElement {
static observe = true
css() {
return rpx(`div{font-size:375rpx}`)
}
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
render() {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{this.data.count}</span>
<button onClick={this.add}>+</button>
</div>
)
}
})
render(<my-counter />, 'body')

View File

@ -1,6 +1,6 @@
{
"name": "omi",
"version": "4.0.25",
"version": "4.0.26",
"description": "Next generation web framework.",
"main": "dist/omi.js",
"jsnext:main": "dist/omi.esm.js",
@ -16,6 +16,7 @@
"use": "rollup -c config/rollup.example.js --watch",
"decorators": "rollup -c config/rollup.example.js --watch",
"mobx": "rollup -c config/rollup.example.js --watch",
"rpx": "rollup -c config/rollup.example.js --watch",
"todo-app": "rollup -c config/rollup.example.js --watch",
"observe": "rollup -c config/rollup.example.js --watch",
"children": "rollup -c config/rollup.example.js --watch",

View File

@ -7,6 +7,7 @@ import { tag } from './tag'
import { observe } from './observe'
import { cloneElement } from './clone-element'
import { getHost } from './get-host'
import { rpx } from './rpx'
const Component = WeElement
@ -21,11 +22,12 @@ const omi = {
define,
observe,
cloneElement,
getHost
getHost,
rpx
}
options.root.Omi = omi
options.root.Omi.version = '4.0.25'
options.root.Omi.version = '4.0.26'
export default omi
@ -40,5 +42,6 @@ export {
define,
observe,
cloneElement,
getHost
getHost,
rpx
}

5
packages/omi/src/rpx.js Normal file
View File

@ -0,0 +1,5 @@
export function rpx(str) {
return str.replace(/([1-9]\d*|0)(\.\d*)*rpx/g, (a, b) => {
return (window.innerWidth * Number(b)) / 750 + 'px'
})
}