github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 00:02:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

处理开始拖拽时的数据

Browse Source
This commit is contained in:
MTrun 2022-01-19 09:19:17 +08:00
parent 7262c4af22
commit ec5fccb945
1 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/chart/components/ContentCharts/components/ItemBox/index.vue
View File

@ -1,18 +1,26 @@
<template> <template>
<!-- 每一项组件的渲染 --> <div class="go-content-charts-item-box">
<div class="item-box" v-for="(item, index) in menuOptions" :key="index"> <!-- 每一项组件的渲染 -->
<div class="list-header"> <div
<AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn> class="item-box"
<n-text class="list-header-text" depth="3">{{ item.title }}</n-text> v-for="(item, index) in menuOptions"
</div> :key="index"
<div class="list-center go-flex-center"> draggable
<n-image @dragstart="handleDragStart($event, item)"
class="list-img" >
object-fit="contain" <div class="list-header">
preview-disabled <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
:src="item.image" <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
:fallback-src="requireFallbackImg()" </div>
/> <div class="list-center go-flex-center">
<n-image
class="list-img"
object-fit="contain"
preview-disabled
:src="item.image"
:fallback-src="requireFallbackImg()"
/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -26,6 +34,14 @@ defineProps({
default: () => [] default: () => []
} }
}) })
// 拖拽处理
const handleDragStart = (e: DragEvent, item: any) => {
if (e.dataTransfer instanceof Object && e.target instanceof Object) {
e.dataTransfer.setData('chartName', item.key)
e.dataTransfer.setData('chartNode', item.node)
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -33,41 +49,43 @@ defineProps({
$itemWidth: 86%; $itemWidth: 86%;
/* 内容高度 */ /* 内容高度 */
$centerHeight: 100px; $centerHeight: 100px;
.item-box { @include go('content-charts-item-box') {
margin: 0 7%; .item-box {
margin-bottom: 15px; margin: 0 7%;
width: $itemWidth; margin-bottom: 15px;
overflow: hidden; width: $itemWidth;
border-radius: 6px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0);
@include filter-bg-color('background-color2');
@extend .go-transition;
&:hover {
@include hover-border-color('background-color4');
.list-img {
transform: scale(1.1);
}
}
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 15px;
@include filter-bg-color('background-color3');
&-text {
font-size: 12px;
margin-left: 8px;
}
}
.list-center {
padding: 6px 0;
height: $centerHeight;
overflow: hidden; overflow: hidden;
.list-img { border-radius: 6px;
height: 100%; cursor: pointer;
border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0);
@extend .go-transition; @include filter-bg-color('background-color2');
@extend .go-transition;
&:hover {
@include hover-border-color('background-color4');
.list-img {
transform: scale(1.1);
}
}
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 15px;
@include filter-bg-color('background-color3');
&-text {
font-size: 12px;
margin-left: 8px;
}
}
.list-center {
padding: 6px 0;
height: $centerHeight;
overflow: hidden;
.list-img {
height: 100%;
border-radius: 6px;
@extend .go-transition;
}
} }
} }
} }