silver-display

展示性组件基类

Usage no npm install needed!

<script type="module">
  import silverDisplay from 'https://cdn.skypack.dev/silver-display';
</script>

README

silver-display

silver-display是TV端展示型组件的基础类,继承该类可生成TV端展示型组件。

该类继承silver-base,在silver-base基础上扩展了方法,如通过传递一个类似于less的对象{".title":{"width":"100px","height":"200px"}}就可以创建一个style样式,通过传递data来进行组件中数据的传递。

Installation

  • npm install silver-display

Usage

  • script 标签引入
    • <script src="https://g.alicdn.com/silvermine/silver-display/{version}/index.min.js"></script>
  • import or require
    • 首先 npm install silver-display
    • import SilverDisplay from 'silver-display 或者
      const Display = require('silver-display')

jsdoc 接口页面

API

  • constructor(opt)

     /**
      * constructor 构造函数
      * @memberOf SilverDisplay.prototype
      * @param opt {Object} 配置参数
      *   @param target   {String} 元素容器  默认为body
      *   @param data     {Object} 组件数据   
      *   @param className     {String} 组件className   
      */
    
  • makeStyle(opt)生成样式对象

  返回一个Object对象,该对象用于创建css样式[用户需重写方法]
  opt:创建实例时传入的对象
  • initView(style, data)初始化视图
  返回一个dom element,该元素作为整个组件的最外层容器[用户需重写方法]
  该方法只在初始化时执行一次
  style:makeStyle时创建的style对象
  data: opt.data
  • renderView(node, style, data)重新渲染视图
  当调用setViewData会触发该方法[用户需重写方法]
  node:initView时创建的dom元素
  style:makeStyle时创建的style对象
  data:opt.data
  • renderByOption(opt)重新渲染页面
  opt修改后重新渲染页面内容
  fire出renderByOption事件
  • removeCss()清除样式
  将style对象创建的css样式销毁掉
  • getTarget()获取目标对象
  opt中传入的target对象,如果没有默认为document.body
  • getDOMNode()获取组件的容器
  initView时创建的dom元素
  • getViewStyle()获取组件的样式对象
  返回一个Object对象,该对象来自于makeStyle时创建
  • getViewData()获取组件的数据对象
  返回一个数据对象,该对象来自于opt.data
  • getCssNode()获取组件的数据对象
  返回一个样式对象创建的TextNode	
  • getClassName()获取组件的样式名称
  返回组件容器的className,如果opt.className为空,那么系统自行创建一个name根据组件名称+组件id。[this.getName() + '-' + this.getId()]
  • getName()获取组件名称
  返回组件名称[用户需重写方法]		
  • destroy()销毁全部