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

插件

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

// 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”
    在这里插入图片描述

框架

©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值