是什么

• TV端button组件

如何使用

• 通过tnpm引入模块

  npm install silver-button --save
    
  const SilverButton = require('silver-button')

• 全局提供对象window.tvcnpt.SilverButton

• 组件内部HTML展示

  initView(style, data) {
    let node = document.createElement('div')
    node.className = 'silver-button'
    node.setAttribute('fe-role', 'Widget')
    return node
  }
  renderView(node, style, data) {
    node.innerHTML = '<div class="button-block">' +
        '<p class="button-text">' + '&nbsp;&nbsp;&nbsp;&nbsp;'+(data.text || '')+'&nbsp;&nbsp;&nbsp;&nbsp;' + '</p>' +
        (data.HTML || '')
      '</div>'
  }

• 使用实例

  var btn = new SilverButton({
    target: DOM,      // 必传，目标节点
    data: {           // data参数上面可以自定义一些自己需要的数据，this.getViewData()中可以获取data参数
      text: '',       // 选传，btn文案
      HTML: ''        // 选传，自定义btn内部html
    },
    width: 291,       // 选传，宽度，不传文字去撑
    height: 134,      // 选传，高度，不传文字去撑
    top: 200,         // 选传，定位top
    left: 0,          // 选传，定位left
    zIndex: 1,        // 选传，定位z-index
    outlineColor: 'transparent',  // 选传，外边框颜色
    inlineColor: 'transparent',   // 选传，内边框颜色
    outlineColorFocus: '#fff',    // 选传，外边框focus颜色
    inlineColorFocus: 'blue',     // 选传，内边框focus颜色
    outlineWidth: 4,              // 选传，外边框宽度
    inlineWidth: 1,               // 选传，内边框宽度
    radius: 30,                   // 选传，圆角
    fontSize: 50,                 // 选传，btn文案font-size
    fontColor: 'blue',            // 选传，btn文案颜色
    bgImg: '',                    // 选传，btn背景图
    bgImgFocus: '',               // 选传，btn focus背景图
    showText: true                // 选传，是否显示文案，默认true
  })
    

• api接口

  • destroy() 删除组件

      btn.destroy()
          
      // return undefined