vant 组件 vue3配套的最新vant4 ;使用轻提示 Toast没有 反应,全局引入和组件中引入使用了,但是没有反应。
解决:加了一句样式: import 'vant/lib/index.css' 才能使用;
![](https://i-blog.csdnimg.cn/blog_migrate/df527745ba261377ae1c71a3e6a114f0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f1abca986ef8e877ab53a694c42a99fe.png)
拷贝组件: (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分情况,上次用就失败 )
![](https://i-blog.csdnimg.cn/blog_migrate/d54c49367dfa5ac5694dff71f32963ce.png)
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 解决了之前拖拽排序错乱和排序字段序号不更新的问题;