weex自定义组件使用报错

Question

组件代码如下，拷贝的text组件代码

'use strict'

const DEFAULT_FONT_SIZE = 32
const DEFAULT_TEXT_OVERFLOW = 'ellipsis'

const proto = {
  create () {
    const node = document.createElement('div')
    node.classList.add('weex-container')
    node.style.fontSize = DEFAULT_FONT_SIZE + 'px'
    this.textNode = document.createElement('span')
    // Give the developers the ability to control space
    // and line-breakers.
    this.textNode.style.whiteSpace = 'pre-wrap'
    this.textNode.style.wordWrap = 'break-word'
    this.textNode.style.display = '-webkit-box'
    this.textNode.style.webkitBoxOrient = 'vertical'
    this.style.lines.call(this, (this.data.style || {}).lines)
    node.appendChild(this.textNode)
    return node
  },

  clearAttr () {
    this.node.firstChild.textContent = ''
  }
}

const attr = {
  value: function (value) {
    const span = this.node.firstChild
    span.innerHTML = ''
    if (value == null || value === '') {
      return
    }
    span.textContent = value
    /**
     * Developers are supposed to have the ability to break text
     * lines manually. Using `` `` to replace text space is
     * not compatible with the ``-webkit-line-clamp``. Therefor
     * we use ``white-space: no-wrap`` instead (instead of the
     * code bellow).

      const frag = document.createDocumentFragment()
        text.split(' ').forEach(function(str) {
          const textNode = document.createTextNode(str)
          const space = document.createElement('i')
          space.innerHTML = ' '
          frag.appendChild(space)
          frag.appendChild(textNode)
        })
        frag.removeChild(frag.firstChild)
        span.appendChild(document.createElement('br'))
        span.appendChild(frag)
      })
      span.removeChild(span.firstChild)
     */
  }
}

const style = {
  lines: function (val) {
    val = parseInt(val)
    if (isNaN(val)) {
      return
    }
    if (val <= 0) {
      this.textNode.style.textOverflow = ''
      this.textNode.style.overflow = 'visible'
      this.textNode.style.webkitLineClamp = ''
    }
    else {
      const style = this.data ? this.data.style : null
      this.textNode.style.overflow = 'hidden'
      this.textNode.style.textOverflow = style
        ? style.textOverflow
        : DEFAULT_TEXT_OVERFLOW
      this.textNode.style.webkitLineClamp = val
    }
  },

  textOverflow: function (val) {
    this.textNode.style.textOverflow = val
  }
}

function init (Weex) {
  const Atomic = Weex.Atomic
  const extend = Weex.utils.extend

  // attr
  //  - value: text content.
  // style
  //  - lines: maximum lines of the text.
  function RFText (data) {
    Atomic.call(this, data)
  }
  RFText.prototype = Object.create(Atomic.prototype)
  extend(RFText.prototype, proto)
  extend(RFText.prototype, { attr })
  extend(RFText.prototype, {
    style: extend(Object.create(Atomic.prototype.style), style)
  })

  Weex.registerComponent('rftext', RFText)
}

export default { init }

使用方法如下

<script>
    import rftext from '../demo/rftext'
    global.weex.install(rftext) 
</script>
<template>
    <div class="body">
      <rftext ></rftext>
    </div>
</template>

浏览器错误截图如下。

Answer 1

@zhouxiaojie 你好，最后处理成功了吗？