fix
This commit is contained in:
X1627315083@163.com
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import { VueDraggable } from "vue-draggable-plus"
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -8,7 +10,101 @@ import sellerHeader from "../../seller-header.vue"
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const domSize = ref('Small')
|
||||
const domSizeList = ref([
|
||||
{
|
||||
label:'Small',
|
||||
value:'Small',
|
||||
},
|
||||
{
|
||||
label:'Medium',
|
||||
value:'Medium',
|
||||
},
|
||||
{
|
||||
label:'Large',
|
||||
value:'Large',
|
||||
},
|
||||
])
|
||||
const list = ref([
|
||||
{ id: "1" },
|
||||
{ id: "2" },
|
||||
{ id: "3" },
|
||||
{ id: "4" },
|
||||
{ id: "5" },
|
||||
{ id: "6" },
|
||||
{ id: "7" },
|
||||
{ id: "8" },
|
||||
{ id: "9" },
|
||||
{ id: "10" }
|
||||
])
|
||||
const chooseList = ref([])
|
||||
const chooseItem = (item:any)=>{
|
||||
chooseList.value.push(item)
|
||||
}
|
||||
|
||||
const next = ()=>{
|
||||
if(chooseList.value.length == 0)return
|
||||
}
|
||||
|
||||
const config = ref({
|
||||
"data-container-type": "root",
|
||||
"data-parent-id": "null",
|
||||
animation: 250,
|
||||
handle: ".item", // 可拖动的元素
|
||||
"ghost-class": "ghost", // 拖动时的类名
|
||||
"chosen-class": "chosen", // 选中时的类名
|
||||
"drag-class": "drag", // 拖动时的类名
|
||||
"swap-threshold": 0.5,
|
||||
"empty-insert-threshold": 5,
|
||||
"force-fallback": false,
|
||||
"fallback-tolerance": 3,
|
||||
"scroll-sensitivity": 100,
|
||||
"scroll-speed": 10,
|
||||
onEnd: (e) => {}
|
||||
})
|
||||
|
||||
|
||||
let resizeObserver = null as any
|
||||
|
||||
const gap = ref({
|
||||
Small: '16px',
|
||||
Medium: '24px',
|
||||
Large: '30px',
|
||||
})
|
||||
//根据宽度设置列表宽度
|
||||
let upDataDomWidthTime = null as any
|
||||
const listingsBoxRef = ref(null) as any
|
||||
const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
}
|
||||
|
||||
const changeDomSize = ()=>{
|
||||
setTimeout(()=>{
|
||||
setDomSize(listingsBoxRef.value.clientWidth)
|
||||
},350)
|
||||
}
|
||||
onMounted(()=>{
|
||||
// 创建观察器
|
||||
nextTick(()=>{
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
// 获取元素尺寸
|
||||
const width = entry.contentRect.width
|
||||
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
|
||||
upDataDomWidthTime = setTimeout(()=>{
|
||||
setDomSize(width)
|
||||
},200)
|
||||
}
|
||||
})
|
||||
// 开始监听
|
||||
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
@@ -25,9 +121,95 @@ const {} = toRefs(data);
|
||||
{title:'Select Sketch', name: 'myListingsSelectItem' }
|
||||
]"
|
||||
>
|
||||
<template #right>
|
||||
<div class="header-right">
|
||||
<div class="chooseNum">
|
||||
{{ chooseList.length }} sketches selected
|
||||
</div>
|
||||
<div class="button" @click="next">
|
||||
<span>Next</span>
|
||||
<div class="icon">
|
||||
<i class="fi fi-rr-arrow-small-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</seller-header>
|
||||
<div class="content">
|
||||
1231222aaa
|
||||
<div class="content" ref="listingsBoxRef">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Active Listings</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="generalModel_state">
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'border-right':'2px solid rgba(0,0,0,.2)',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Filter') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Size') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list"
|
||||
class="list"
|
||||
:class="domSize"
|
||||
v-bind="config"
|
||||
:style="{gap: gap[domSize] || '1.6rem'}"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
pull: false,
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div v-for="v in list" :key="v.id"
|
||||
:draging="true"
|
||||
class="item"
|
||||
@click="chooseItem(v)"
|
||||
:class="{'active':chooseList.some(item => item.id === v.id)}"
|
||||
>
|
||||
<div class="choose">
|
||||
<i class="fi fi-rr-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,10 +221,125 @@ const {} = toRefs(data);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header-right{
|
||||
display: flex;
|
||||
.chooseNum{
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 140%;
|
||||
margin-right: 2rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
.button {
|
||||
width: 12.3rem;
|
||||
height: 6rem;
|
||||
border-radius: 4rem;
|
||||
display: flex;
|
||||
border: 1.5px solid #000000;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition: all .3s;
|
||||
gap: .8rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
i{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
i{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
margin-top: 2rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 2.4rem 3rem;
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
> .left{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 130%;
|
||||
letter-spacing: 0%;
|
||||
gap: 1.2rem;
|
||||
> i{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.Small{
|
||||
--itemWidth: 17rem;
|
||||
--itemHeight: 26.1rem;
|
||||
}
|
||||
> .item{
|
||||
width: var(--itemWidth);
|
||||
height: var(--itemHeight);
|
||||
border-radius: 2rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
// transition: all .3s;
|
||||
position: relative;
|
||||
> .choose{
|
||||
display: flex;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 1.2rem;
|
||||
right: .9rem;
|
||||
> i{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
border: 1.5px solid #000;
|
||||
> .choose{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user