fix(components): 修复拖拽表格和截图组件的问题

This commit is contained in:
2026-02-06 15:48:32 +08:00
parent 8b02dc7260
commit 2e2e2a0819
5 changed files with 106 additions and 13 deletions
@@ -127,7 +127,7 @@ export default {
},
methods: {
refresh() {
this.crud.orderBy = ''
// this.crud.orderBy = null
this.crud.selection = []
this.initData()
this.initDragTable()
@@ -134,7 +134,7 @@ export default {
},
methods: {
refresh() {
this.crud.orderBy = ''
// this.crud.orderBy = null
this.crud.selection = []
this.initData()
},
@@ -17,7 +17,7 @@
截屏
</el-button>
</div>
<div :id="key" style="padding: 15px">
<div id="CuteScreenShot" style="padding: 15px">
<slot />
</div>
</div>
@@ -28,16 +28,8 @@
import KitMessage from '@/utils/elementui/KitMessage'
import { FormatDateTimeShortStr } from '@/utils/KitUtil'
import html2canvas from 'html2canvas'
export default {
name: 'CuteScreenShot',
props: {
key: {
type: String,
required: true,
default: 'elementIdSelector'
}
},
data() {
return {
capturing: false
@@ -46,7 +38,7 @@ export default {
methods: {
async capture() {
this.capturing = true
const element = document.querySelector('#elementIdSelector')
const element = document.querySelector('#CuteScreenShot')
if (!element) {
KitMessage.Error('未找到匹配的元素,请检查选择器是否正确')
this.capturing = false
@@ -7,7 +7,7 @@
<li>在使用过程中有任何问题,咨询 @Odboy(前端)</li>
</ul>
<h4>基础用法</h4>
<cute-screen-shot key="test">
<cute-screen-shot>
<cute-page>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</cute-page>
@@ -0,0 +1,101 @@
<template>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="按钮 CuteButton" name="CuteButton">
<CuteButtonDemo />
</el-tab-pane>
<el-tab-pane label="文字链接 CuteLink" name="CuteLink">
<CuteLinkDemo />
</el-tab-pane>
<el-tab-pane label="页面 CutePage" name="CutePage">
<CutePageDemo />
</el-tab-pane>
<el-tab-pane label="空状态 CuteNoData" name="CuteNoData">
<CuteNoDataDemo />
</el-tab-pane>
<el-tab-pane label="多行输入文本 CuteTextAreaInput" name="CuteTextAreaInput">
<CuteTextAreaInputDemo />
</el-tab-pane>
<el-tab-pane label="段落标题 CuteSectionTitle" name="CuteSectionTitle">
<CuteSectionTitleDemo />
</el-tab-pane>
<el-tab-pane label="横向滚动区域 CuteHorizontalScrollBar" name="CuteHorizontalScrollBar">
<CuteHorizontalScrollBarDemo />
</el-tab-pane>
<el-tab-pane label="纵向滚动区域 CuteVerticalScrollBar" name="CuteVerticalScrollBar">
<CuteVerticalScrollBarDemo />
</el-tab-pane>
<el-tab-pane label="一键复制 CuteOneKeyCopy" name="CuteOneKeyCopy">
<CuteOneKeyCopyDemo />
</el-tab-pane>
<el-tab-pane label="Markdown编辑框 CuteMarkdown" name="CuteMarkdown">
<CuteMarkdownDemo />
</el-tab-pane>
<el-tab-pane label="代码编辑框 CuteCodeEditor" name="CuteCodeEditor">
<CuteCodeEditorDemo />
</el-tab-pane>
<el-tab-pane label="富文本框 CuteRichTextEditor" name="CuteRichTextEditor">
<CuteRichTextEditorDemo />
</el-tab-pane>
<el-tab-pane label="截图工具 CuteScreenShot" name="CuteScreenShot">
<CuteScreenShotDemo />
</el-tab-pane>
<el-tab-pane label="预览抽屉 CutePreviewDrawer" name="CutePreviewDrawer">
<CutePreviewDrawerDemo />
</el-tab-pane>
<el-tab-pane label="穿梭框 CuteTransfer" name="CuteTransfer">
<CuteTransferDemo />
</el-tab-pane>
</el-tabs>
</template>
<script>
import CuteButtonDemo from '@/views/componentsDemo/dev/CuteButtonDemo.vue'
import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue'
import CuteScreenShotDemo from '@/views/componentsDemo/dev/CuteScreenShotDemo.vue'
import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue'
import CuteTransferDemo from '@/views/componentsDemo/dev/CuteTransferDemo.vue'
import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue'
import CutePageDemo from '@/views/componentsDemo/dev/CutePageDemo.vue'
import CuteNoDataDemo from '@/views/componentsDemo/dev/CuteNoDataDemo.vue'
import CutePreviewDrawerDemo from '@/views/componentsDemo/dev/CutePreviewDrawerDemo.vue'
import CuteTextAreaInputDemo from '@/views/componentsDemo/dev/CuteTextAreaInputDemo.vue'
import CuteSectionTitleDemo from '@/views/componentsDemo/dev/CuteSectionTitleDemo.vue'
import CuteVerticalScrollBarDemo from '@/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue'
import CuteHorizontalScrollBarDemo from '@/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue'
import CuteLinkDemo from '@/views/componentsDemo/dev/CuteLinkDemo.vue'
import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vue'
export default {
name: 'ComponentsDemoDev',
components: {
CuteCodeEditorDemo,
CuteLinkDemo,
CuteHorizontalScrollBarDemo,
CuteVerticalScrollBarDemo,
CuteSectionTitleDemo,
CuteTextAreaInputDemo,
CutePreviewDrawerDemo,
CuteNoDataDemo,
CutePageDemo,
CuteMarkdownDemo,
CuteTransferDemo,
CuteRichTextEditorDemo,
CuteScreenShotDemo,
CuteOneKeyCopyDemo,
CuteButtonDemo
},
data() {
return {
activeName: 'CuteButton'
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding-left: 20px;
}
.description > li{
font-size: 12px;
}
</style>