vue 常用工具大集合，自己总结

插件

• 数字翻牌器 地址

vue-video-player点击播放按钮全屏播放

• 
• 浏览器全屏功能小结
• Fullscreen API
• fscreen
• video.js一进去全屏报错
• vue无线滚动列表插件(vue-seamless-scroll)
  • 问题: 垂直从上往下轮播，渲染多行数据，绑定在第一条数据的@click事件，为什么不生效？
    • github iss地址
    • 事件委托方式解决
• 高德地图Url api打开地图

// DOM
  <vue-seamless  @click.native="parentClick"> // 这里必须用 click.native 
    <ul>
      <li v-for='(item,index) in arr'
          :key="item.id">
        <a :data-id="item.id">  //  这里可以定义data-* 属性
        {{item.info}}
        </a>
      </li>
    </ul>
  </vue-seamless>

// methods
methods: {
    parentClick (e) {
    // 注册事件委托
      if (e.target.tagName == 'A') {      // 判断事件源是否是A标签
        console.log(e.target.dataset.id)  // 这里获取点击节点的 data-id
      }
    }
  }

element-ui table实现滚动加载

• 在main.js里注册

 Vue.directive('loadmore', {
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function() {
          let sign = 0
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    })

• 在组件中，使用自定义的事件：v-loadmore=“loadMore”
  

框架

• vue3源码解读