Vue 指令

打印封装

基础使用方法v-print="#demo"

import type { Directive, DirectiveBinding } from 'vue'
import { nextTick } from 'vue'
import Print from './printarea'

// v-print="{
//   id: '#haoma',
//   endCallback: onPrint,
// }"
export const print: Directive = {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    let id = ''

    el.addEventListener('click', () => {
      nextTick(() => {
        if (typeof binding.value === 'string') {
          id = binding.value
        }
        else if (typeof binding.value === 'object' && !!binding.value.id) {
          id = binding.value.id
          const ids = id.replace(/#/g, '')
          const elsdom = document.getElementById(ids)
          if (!elsdom) {
            console.error('id in Error')
            id = ''
          }
        }
        // 局部打印
        if (id) {
          new Print({
            ids: id, // * 局部打印必传入id
            standard: 'html5', // 文档类型，默认是html5，可选 html5，loose，strict
            extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
            extraCss: binding.value.extraCss, // 额外的css连接，多个逗号分开
            popTitle: binding.value.popTitle, // title的标题
            endCallback() {
              // 调用打印之后的回调事件
              binding.value.endCallback()
            },
          })
        }
        else {
          // 直接全局打印
          window.print()
        }
      })
    })
  },
}

滚动懒加载

针对el-table封装

import type { Directive, DirectiveBinding } from 'vue'

export const loadmore: Directive = {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    const viewRef = el.querySelector('.el-scrollbar__wrap')
    viewRef?.addEventListener('scroll', () => {
      const scrollTop = viewRef.scrollTop
      const clientHeight = viewRef.clientHeight
      const scrollHeight = viewRef.scrollHeight

      if (clientHeight + scrollTop >= scrollHeight)
        binding.value()
    })
  },
}