feat(frontend): 新增拖拽表格组件并优化数据表格相关功能
- 新增 CuteDragTable组件,支持行拖拽排序功能 - 重构 CuteTable 组件,改为 CuteSimpleTable,简化功能 - 更新 README.md,添加新组件说明 - 优化 OneKeyCopy 组件,改名为 CuteOneKeyCopy - 删除示例页面 cuteTableDemo.vue
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user