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

最新推荐文章于 2024-05-20 15:09:32 发布

第十人i

最新推荐文章于 2024-05-20 15:09:32 发布

阅读量845

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js html5 css3

本文链接：https://blog.csdn.net/qq_37124515/article/details/106696844

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

插件

数字翻牌器 地址

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()
          }
        })
      }
    })