gtm h5项目使用vant 轻提示没有反应；el-tabl行拖拽的使用+排序字段同步更新

1. vant 组件 vue3配套的最新vant4 ;使用轻提示 Toast没有 反应，全局引入和组件中引入使用了，但是没有反应。

2. 解决：加了一句样式： import 'vant/lib/index.css' 才能使用；

拷贝组件： （h5 输入框组件，拷贝值到用户剪切板）

Ts版本：
let el: HTMLTextAreaElement

const execCopy = async function (input: string): Promise<boolean | Error> {
  if (!el) {
    el = document.createElement('textarea')

    // Prevent keyboard from showing on mobile
    el.setAttribute('readonly', '')

    el.style.position = 'absolute'
    el.style.left = '-9999px'
    el.style.fontSize = '12pt' // Prevent zooming on iOS
    document.body.appendChild(el)
  }

  el.value = input

  const selection = document.getSelection()
  let originalRange = null
  if (selection && selection.rangeCount > 0) {
    originalRange = selection.getRangeAt(0)
  }

  el.select()

  // Explicit selection workaround for iOS
  el.selectionStart = 0
  el.selectionEnd = input.length

  let result
  try {
    result = document.execCommand('copy')
  } catch (err) {
    result = err
  }

  if (originalRange) {
    selection?.removeAllRanges()
    selection?.addRange(originalRange)
  }

  return result === true ? Promise.resolve(true) : Promise.reject(result)
}

export default execCopy

js版本：
let el

const execCopy = async function (input) {
  if (!el) {
    el = document.createElement('textarea')
    // Prevent keyboard from showing on mobile
    el.setAttribute('readonly', '')
    el.style.position = 'absolute'
    el.style.left = '-9999px'
    el.style.fontSize = '12pt' // Prevent zooming on iOS
    document.body.appendChild(el)
  }

  el.value = input

  const selection = document.getSelection()

  let originalRange
  if (selection && selection.rangeCount > 0) {
    originalRange = selection.getRangeAt(0)
  }

  el.select()

  // Explicit selection workaround for iOS
  el.selectionStart = 0
  el.selectionEnd = input.length

  let result
  try {
    result = document.execCommand('copy')
  } catch (err) {
    result = err
  }

  if (originalRange) {
    selection?.removeAllRanges()
    selection?.addRange(originalRange)
  }

  return result === true ? Promise.resolve(true) : Promise.reject(result)
}

export default execCopy

在组件页面中使用：（注意 import的时候 后边不带 .js分情况，上次用就失败 ）

el-table 后台的行拖拽+排序字段更新 排序（sortablejs实现） vue3 +ts 项目

 import Sortable from 'sortablejs'
const oldIndex = ref(0)
const newIndex = ref(0)
// 表格行拖
onMounted(() => {
  nextTick(() => {
    rowDrop() 
  })
  getTable()
})

function rowDrop() {
  // 此时找到要拖拽元素的父容器
  // 1. 获取拖拽元素的父元素
  // 因为使用的element的table 所以可直接获取tbody
  const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody') // 拖拽的父容器
  // 2. 创建并配置相关参数
  Sortable.create(tbody, {
    // 指定父元素下可被拖拽的子元素
    //  指定父元素下可被拖拽的子元素
    draggable: '.draggable .el-table__row', // 指定拖拽的元素 // 允许拖拽的项目类名
//onmove 是 移动过程中；执行 
    onMove(customEvent) {
      oldIndex.value = customEvent.dragged.rowIndex
      newIndex.value = customEvent.related.rowIndex
      return false
    },
    onEnd() {
      const oldrRow = state.tableData[oldIndex.value] // 拖拽前的数据
      const currRow = state.tableData[newIndex.value] // 拖拽后的数据
      // 此时记得把交换后的数据，发送给后端进行记录
      httpPost('/api/admin/admin/config/country/setting/update/sort', {
        // 调用接口
        list: [
          // 接口参数
          { id: currRow.id, isTop: oldrRow.isTop },
          { id: oldrRow.id, isTop: currRow.isTop },
        ],
      }).then((res) => {
        getTable() //更新接口
        ElNotification.success(res.message) // 提示
      })
      // 拖拽完成，初始位置及目标位置重置
      newIndex.value = null
      oldIndex.value = null
    },
  })
}
//我个人写的时候遇到的问题和解决办法：
1.当时出错是错在我只写了onEnd里边；    
onMove(customEvent) {
      oldIndex.value = customEvent.dragged.rowIndex
      newIndex.value = customEvent.related.rowIndex
      return false
    }, 没有写onMove里边的这个交换逻辑；当在移动的时候，只做这个数据的交换不调接口，
拖拽完成之后再调接口，根据自己的需求去传数据，然后更新列表，还有很重要的一步将拖拽完成的后的
初始位置和目标位置重置。 ok 解决了之前拖拽排序错乱和排序字段序号不更新的问题；