dom

dom

dom 模块用于对 jsn 页面里的组件节点进行一部分特定操作。

你可以使用该模块来获取某个组件的 bounding rect 布局信息，或者将 list 的某个子节点滚动到当前视口，或者添加一个 font-face rule，等等。

注意： API addRule 目前仅支持添加 font-face。

API

scrollToElement(ref, options)

让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 <scroller>，<list> 等可滚动组件中。

要在你的 .vue 文件中使用这个 API，可以使用 light.requireModule('dom').scrollToElement。

参数

  • ref {Node}：你要滚动到的那个节点
  • options {Object}：
    • offset {number}： 一个到其可见位置的偏移距离，默认是 0
    • animated {boolean} 0.10+：是否需要附带滚动动画，默认是true

基本用法

const dom = light.requireModule('dom')
const el = this.$refs.nodeName;
dom.scrollToElement(el, {})

getComponentRect(ref, callback)

支持版本： >=0.9.4

通过标签的 ref 获得其布局信息，返回的信息在 callBack 中，格式参考如下：

{
  result: true,
  size: {
    bottom: 60,
    height: 15,
    left: 0,
    right: 353,
    top: 45,
    width: 353
  }
}

如果想要获取到 jsn 视口容器的布局信息，可以指定 ref 为字符串 'viewport'，即 getComponentRect('viewport', callback)。

addRule(type, contentObject)

支持版本： >=0.12.0

jsn 提供 DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family 加载 iconfont 和 custom font。

const dom = light.requireModule('dom')
dom.addRule('fontFace', {
  'fontFamily': "iconfont2",
  'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

参数

  • fontFace 协议名称，不可修改
  • fontFamily font-family的名称
  • src 字体地址，url(‘’) 是保留字段，其类型如下:
    • http 从HTTP请求加载，如 url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
    • https 从HTTPS请求加载，如 url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
    • local Android ONLY. 从assets目录读取，如 url('local://foo.ttf'), foo.ttf 是文件名在你的assets目录中
    • file 从本地文件读取，如 url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/ http:__at.alicdn.com_t_font_1469606063_76593.ttf')
    • data 从base64读取，如 url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')（上述data字段不全）

addRule 方法里的 fontFamily 可以随意取，这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符将被显示为‘?’。

如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。

调用addRule 在 beforeCreate 中是被推荐的。