mirror of https://github.com/vuejs/vue.git
fix(weex): stop trim css units in richtext component (#6927)
+ Remove the `trimCSSUnit` method. + Modify the test cases to support css units. + Add flow type annotations.
This commit is contained in:
parent
6f6e5c88af
commit
8a784d8d23
|
|
@ -1,32 +1,25 @@
|
|||
function getVNodeType (vnode) {
|
||||
/* @flow */
|
||||
|
||||
function getVNodeType (vnode: VNode): string {
|
||||
if (!vnode.tag) {
|
||||
return ''
|
||||
}
|
||||
return vnode.tag.replace(/vue\-component\-(\d+\-)?/, '')
|
||||
}
|
||||
|
||||
function isSimpleSpan (vnode) {
|
||||
return vnode.children && vnode.children.length === 1 && !vnode.children[0].tag
|
||||
function isSimpleSpan (vnode: VNode): boolean {
|
||||
return vnode.children &&
|
||||
vnode.children.length === 1 &&
|
||||
!vnode.children[0].tag
|
||||
}
|
||||
|
||||
const cssLengthRE = /^([+-]?[0-9]+(\.[0-9]+)?)(px|em|ex|%|in|cm|mm|pt|pc)$/i
|
||||
function trimCSSUnit (prop) {
|
||||
const res = String(prop).match(cssLengthRE)
|
||||
if (res) {
|
||||
return Number(res[1])
|
||||
}
|
||||
return prop
|
||||
}
|
||||
|
||||
function parseStyle (vnode) {
|
||||
function parseStyle (vnode: VNode): Object | void {
|
||||
if (!vnode || !vnode.data) {
|
||||
return
|
||||
}
|
||||
|
||||
const { staticStyle, staticClass } = vnode.data
|
||||
if (vnode.data.style || vnode.data.class || staticStyle || staticClass) {
|
||||
const styles = Object.assign({}, staticStyle, vnode.data.style)
|
||||
|
||||
const cssMap = vnode.context.$options.style || {}
|
||||
const classList = [].concat(staticClass, vnode.data.class)
|
||||
classList.forEach(name => {
|
||||
|
|
@ -34,22 +27,18 @@ function parseStyle (vnode) {
|
|||
Object.assign(styles, cssMap[name])
|
||||
}
|
||||
})
|
||||
|
||||
for (const key in styles) {
|
||||
styles[key] = trimCSSUnit(styles[key])
|
||||
}
|
||||
return styles
|
||||
}
|
||||
}
|
||||
|
||||
function convertVNodeChildren (children) {
|
||||
function convertVNodeChildren (children: Array<VNode>): Array<VNode> | void {
|
||||
if (!children.length) {
|
||||
return
|
||||
}
|
||||
|
||||
return children.map(vnode => {
|
||||
const type = getVNodeType(vnode)
|
||||
const props = { type }
|
||||
const type: string = getVNodeType(vnode)
|
||||
const props: Object = { type }
|
||||
|
||||
// convert raw text node
|
||||
if (!type) {
|
||||
|
|
@ -65,7 +54,6 @@ function convertVNodeChildren (children) {
|
|||
props.events = vnode.data.on
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'span' && isSimpleSpan(vnode)) {
|
||||
props.attr = props.attr || {}
|
||||
props.attr.value = vnode.children[0].text.trim()
|
||||
|
|
@ -83,8 +71,7 @@ function convertVNodeChildren (children) {
|
|||
|
||||
export default {
|
||||
name: 'richtext',
|
||||
// abstract: true,
|
||||
render (h) {
|
||||
render (h: Function) {
|
||||
return h('weex:richtext', {
|
||||
on: this._events,
|
||||
attrs: {
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ describe('richtext component', () => {
|
|||
attr: {
|
||||
value: [{
|
||||
type: 'image',
|
||||
style: { width: 150, height: 150 },
|
||||
style: { width: '150px', height: '150px' },
|
||||
attr: { src: 'path/to/profile.png' }
|
||||
}]
|
||||
}
|
||||
|
|
@ -293,11 +293,11 @@ describe('richtext component', () => {
|
|||
attr: {
|
||||
value: [{
|
||||
type: 'span',
|
||||
style: { fontSize: 16, color: '#FF6600' },
|
||||
style: { fontSize: '16px', color: '#FF6600' },
|
||||
attr: { value: 'ABCD' }
|
||||
}, {
|
||||
type: 'image',
|
||||
style: { width: 33.33, height: 66.67 },
|
||||
style: { width: '33.33px', height: '66.67px' },
|
||||
attr: { src: 'path/to/A.png' }
|
||||
}]
|
||||
}
|
||||
|
|
@ -471,7 +471,7 @@ describe('richtext component', () => {
|
|||
attr: {
|
||||
value: [{
|
||||
type: 'span',
|
||||
style: { fontSize: 32, color: '#F6F660' },
|
||||
style: { fontSize: '32px', color: '#F6F660' },
|
||||
attr: { value: 'ABCD' }
|
||||
}, {
|
||||
type: 'span',
|
||||
|
|
@ -543,7 +543,7 @@ describe('richtext component', () => {
|
|||
attr: {
|
||||
value: [{
|
||||
type: 'span',
|
||||
style: { fontSize: 24, color: '#ABCDEF' },
|
||||
style: { fontSize: '24px', color: '#ABCDEF' },
|
||||
attr: { value: 'ABCD' }
|
||||
}, {
|
||||
type: 'span',
|
||||
|
|
|
|||
Loading…
Reference in New Issue