VUE3 +HandSontable+TDesign（日期类）自定义编辑器中使用vue组件

lindinghou

于 2024-03-26 15:54:45 发布

阅读量295

点赞数 2

文章标签： vue.js tdesign 编辑器

本文链接：https://blog.csdn.net/qq_43060914/article/details/137048922

版权

在这里插入图片描述

import Handsontable from 'handsontable'
import { createApp } from 'vue'
import { DatePicker } from 'tdesign-vue-next'

let _this = null
let _value = null
let _element = null
let _app = null

// TODO 1，需校验是否为日期类 2，点击空白地方需关闭编辑器
export class TDatePicker extends Handsontable.editors.BaseEditor {
  init() {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    _this = this
    _element = this.hot.rootDocument.createElement('div')
    _element.style.display = 'none'
    this.hot.rootElement.appendChild(_element)
  }

  prepare(row, col, prop, td, originalValue, cellProperties) {
    super.prepare(row, col, prop, td, originalValue, cellProperties)
    _value = originalValue || ''
    this.open()
  }

  getValue() {
  }

  setValue(val) {
    _value = val
  }

  open() {
    const {
      top,
      start,
      width,
      height,
    } = this.getEditedCellRect()

    _app = createApp(DatePicker, { mode: 'date', onChange: this._change, value: _value })
    _app.mount(_element)
    this.addHook('beforeKeyDown', (event) => this.onBeforeKeyDown(event))
    const selectStyle = _element.style
    this._opened = true
    selectStyle.height = `${height}px`
    selectStyle.minWidth = `${width}px`
    selectStyle.top = `${top - 1}px`
    selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`
    selectStyle.margin = '0px'
    selectStyle.position = 'absolute'
    selectStyle.display = ''

    const { style } = _element.firstChild
    style.width = `${width - 18}px`
    style.height = `${height}px`
    style.position = 'absolute'

    const style1 = _element.getElementsByClassName('t-input--prefix')[0].style
    style1.height = `${height}px`
  }

  focus() {
    _element.focus()
  }

  close() {
    this._opened = false
    _app.unmount()
  }

  finishEditing() {
  }

  onBeforeKeyDown(event) {
    switch (event.keyCode) {
    case 38: // Arrow Up
      event.stopImmediatePropagation()
      event.preventDefault()
      break

    case 40: // Arrow Down
      event.stopImmediatePropagation()
      event.preventDefault()
      break

    default:
      break
    }
  }

  _change(val) {
    _value = val
    _this.saveValue([[val]], false)
    _this.discardEditor(true)
  }
}