feat(frontend): 新增拖拽表格组件并优化数据表格相关功能

- 新增 CuteDragTable组件,支持行拖拽排序功能
- 重构 CuteTable 组件,改为 CuteSimpleTable,简化功能
- 更新 README.md,添加新组件说明
- 优化 OneKeyCopy 组件,改名为 CuteOneKeyCopy
- 删除示例页面 cuteTableDemo.vue
This commit is contained in:
2025-07-16 21:13:57 +08:00
parent 48e8c14463
commit 61e0a12c6a
7 changed files with 208 additions and 243 deletions
@@ -1,61 +0,0 @@
<template>
<div>
<el-divider>clipboard版</el-divider>
<span>{{ msg }}</span>
<div id="btn" @click="copy">复制</div>
<el-divider>OneKeyCopy组件版</el-divider>
<one-key-copy style="margin-left: 10pt" :content.sync="msg" />
</div>
</template>
<script>
import Clipboard from 'clipboard'
import { Message } from 'element-ui'
import OneKeyCopy from '@/views/components/base/OneKeyCopy.vue'
export default {
components: { OneKeyCopy },
data() {
return {
msg: '来复制我吧'
}
},
methods: {
// 复制方法
copy() {
const that = this
const clipboard = new Clipboard('#btn', {
text(trigger) {
console.log(trigger)
// 返回字符串
return that.msg
}
})
// 复制成功
clipboard.on('success', (e) => {
Message.success('复制成功')
console.log(e, '复制成功')
clipboard.destroy()
})
// //复制失败
clipboard.on('error', (e) => {
Message.error('复制失败')
console.log(e, '复制失败')
clipboard.destroy()
})
}
}
}
</script>
<style scoped>
#btn {
display: inline-block;
padding: 3px 12px;
border-radius: 6px;
background-color: #eee;
color: #333;
cursor: pointer;
}
#btn:active {
background-color: #ddd;
color: #666;
}
</style>
@@ -1,44 +0,0 @@
<!-- 一键复制组件 -->
<!-- 使用方式: <one-key-copy style="margin-left: 10pt" :content.sync="data" /> -->
<template>
<!-- <el-tooltip class="item" effect="dark" content="复制" placement="right-end">-->
<el-button
v-clipboard:copy="content"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
size="mini"
icon="el-icon-document-copy"
/>
<!-- </el-tooltip>-->
</template>
<script>
export default {
props: {
content: {
type: String,
default: ''
}
},
methods: {
onCopy(row) {
const h = this.$createElement
this.$notify({
title: row.text + ' 复制成功',
message: h('i', { style: 'color: teal' }, '已复制到剪贴板,请直接去 Ctrl+V 粘贴吧!')
})
},
// 复制失败
onError(row) {
const h = this.$createElement
this.$notify({
title: row.text + ' 复制失败',
message: h('i', { style: 'color: teal' }, '联系技术吧!')
})
}
}
}
</script>
<style scoped>
</style>