mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-28 04:10:31 +08:00
feat: convert GraphListWrap component to composition API
This commit is contained in:
IchliebedichZhu
parent
2edc820364
commit
b1a485d521
@ -7,7 +7,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<search-header v-model="searchKeyword" type="none" @change="searchChange" />
|
||||
<search-header v-model="state.searchKeyword" type="none" @change="searchChange" />
|
||||
<div style="height: 0.5rem" />
|
||||
<!-- <div class="types">
|
||||
<div v-for="(t, ti) in types" :key="ti + 't'" :style="{ backgroundColor: colors[ti] }" :class="['types__item', { 'types--select': currentType === t.id }]" @click="selectType(t)"></div>
|
||||
@ -15,184 +15,187 @@
|
||||
<!-- <div class="tags">
|
||||
<el-check-tag v-for="(t2, t2i) in sub" :key="t2i + 't2'" :checked="t2.id === currentCheck" class="tags__item" @click="tagsChange(t2.id)">{{ t2.name }}</el-check-tag>
|
||||
</div> -->
|
||||
<classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
|
||||
<classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
|
||||
<template v-slot="{ index }">
|
||||
<div class="list-wrap">
|
||||
<div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<div v-for="(item, i) in state.showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</classHeader>
|
||||
|
||||
<ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
|
||||
<classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
|
||||
<ul v-if="state.currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
|
||||
<classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
|
||||
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
|
||||
<div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<div v-for="(item, i) in state.list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
|
||||
<el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
|
||||
</div>
|
||||
</el-space>
|
||||
<div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
|
||||
<div v-show="loadDone" :style="list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
|
||||
<div v-show="state.loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
|
||||
<div v-show="state.loadDone" :style="state.list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
|
||||
<script lang="ts" setup>
|
||||
import { reactive, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
// import wImage from '../../widgets/wImage/wImage.vue'
|
||||
import wImageSetting from '../../widgets/wImage/wImageSetting'
|
||||
// import wSvg from '../../widgets/wSvg/wSvg.vue'
|
||||
import { wSvgSetting } from '../../widgets/wSvg/wSvgSetting'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { useStore } from 'vuex'
|
||||
import setImageData from '@/common/methods/DesignFeatures/setImage'
|
||||
import DragHelper from '@/common/hooks/dragHelper'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
|
||||
type TProps = {
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
let isDrag = false
|
||||
let startPoint = { x: 99999, y: 99999 }
|
||||
const dragHelper = new DragHelper()
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
props: ['active'],
|
||||
setup(props) {
|
||||
const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
|
||||
const state: any = reactive({
|
||||
loading: false,
|
||||
loadDone: false,
|
||||
sub: [],
|
||||
list: [],
|
||||
currentType: 2, // 2
|
||||
currentCheck: 0,
|
||||
colors,
|
||||
currentCategory: null,
|
||||
types: [],
|
||||
showList: [],
|
||||
searchKeyword: '',
|
||||
})
|
||||
const pageOptions = { page: 0, pageSize: 20 }
|
||||
|
||||
onMounted(async () => {
|
||||
if (state.types.length <= 0) {
|
||||
const types = await api.material.getKinds({ type: 2 })
|
||||
state.types = types
|
||||
for (const iterator of types) {
|
||||
const { list } = await api.material.getList({
|
||||
cate: iterator.id,
|
||||
pageSize: 3,
|
||||
})
|
||||
state.showList.push(list)
|
||||
}
|
||||
}
|
||||
})
|
||||
// const dragHelper = new DragHelper()
|
||||
// let isDrag = false
|
||||
// let startPoint = { x: 99999, y: 99999 }
|
||||
const mouseup = (e: any) => {
|
||||
e.preventDefault()
|
||||
setTimeout(() => {
|
||||
isDrag = false
|
||||
startPoint = { x: 99999, y: 99999 }
|
||||
}, 10)
|
||||
}
|
||||
const mousemove = (e: any) => {
|
||||
e.preventDefault()
|
||||
if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
|
||||
isDrag = true
|
||||
}
|
||||
}
|
||||
|
||||
const load = async (init: boolean = false) => {
|
||||
if (init) {
|
||||
state.list = []
|
||||
pageOptions.page = 0
|
||||
state.loadDone = false
|
||||
}
|
||||
if (state.loadDone || state.loading) {
|
||||
return
|
||||
}
|
||||
state.loading = true
|
||||
pageOptions.page += 1
|
||||
const list = await api.material.getList({
|
||||
...{ cate: state.currentCategory?.id, search: state.searchKeyword, ...pageOptions },
|
||||
})
|
||||
if (init) {
|
||||
state.list = list?.list
|
||||
} else {
|
||||
state.list = state.list.concat(list?.list)
|
||||
}
|
||||
list?.list.length <= 0 && (state.loadDone = true)
|
||||
setTimeout(() => {
|
||||
state.loading = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const searchChange = (e: any) => {
|
||||
state.currentCategory = { name: '搜索结果' }
|
||||
load(true)
|
||||
}
|
||||
|
||||
const selectTypes = (item: any) => {
|
||||
state.currentCategory = item
|
||||
load(true)
|
||||
}
|
||||
const back = () => {
|
||||
state.currentCategory = null
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
load,
|
||||
searchChange,
|
||||
selectTypes,
|
||||
back,
|
||||
mouseup,
|
||||
mousemove,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dPage']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['addWidget']),
|
||||
async selectItem(item: any) {
|
||||
if (isDrag) {
|
||||
return
|
||||
}
|
||||
this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
|
||||
const img: any = await setImageData(item)
|
||||
|
||||
setting.width = img.width
|
||||
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
|
||||
const { width: pW, height: pH } = this.dPage
|
||||
setting.left = pW / 2 - img.width / 2
|
||||
setting.top = pH / 2 - img.height / 2
|
||||
setting.imgUrl = item.url
|
||||
if (item.type === 'svg') {
|
||||
setting.svgUrl = item.url
|
||||
const models = JSON.parse(item.model)
|
||||
for (const key in models) {
|
||||
if (Object.hasOwnProperty.call(models, key)) {
|
||||
setting[key] = models[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.type === 'mask') {
|
||||
setting.mask = item.url
|
||||
}
|
||||
this.addWidget(setting)
|
||||
},
|
||||
async dragStart(e: any, item: any) {
|
||||
startPoint = { x: e.x, y: e.y }
|
||||
const { width, height, thumb, url } = item
|
||||
const img = await setImageData({ width, height, url: thumb || url })
|
||||
dragHelper.start(e, img.canvasWidth)
|
||||
this.$store.commit('selectItem', { data: { value: item }, type: item.type })
|
||||
},
|
||||
},
|
||||
const prpos = defineProps<TProps>()
|
||||
const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
|
||||
const state: any = reactive({
|
||||
loading: false,
|
||||
loadDone: false,
|
||||
sub: [],
|
||||
list: [],
|
||||
currentType: 2, // 2
|
||||
currentCheck: 0,
|
||||
colors,
|
||||
currentCategory: null,
|
||||
types: [],
|
||||
showList: [],
|
||||
searchKeyword: '',
|
||||
})
|
||||
const pageOptions = { page: 0, pageSize: 20 }
|
||||
const store = useStore()
|
||||
const {
|
||||
dPage
|
||||
} = useSetupMapGetters(['dPage'])
|
||||
|
||||
onMounted(async () => {
|
||||
if (state.types.length <= 0) {
|
||||
const types = await api.material.getKinds({ type: 2 })
|
||||
state.types = types
|
||||
for (const iterator of types) {
|
||||
const { list } = await api.material.getList({
|
||||
cate: iterator.id,
|
||||
pageSize: 3,
|
||||
})
|
||||
state.showList.push(list)
|
||||
}
|
||||
}
|
||||
})
|
||||
// const dragHelper = new DragHelper()
|
||||
// let isDrag = false
|
||||
// let startPoint = { x: 99999, y: 99999 }
|
||||
const mouseup = (e: any) => {
|
||||
e.preventDefault()
|
||||
setTimeout(() => {
|
||||
isDrag = false
|
||||
startPoint = { x: 99999, y: 99999 }
|
||||
}, 10)
|
||||
}
|
||||
const mousemove = (e: any) => {
|
||||
e.preventDefault()
|
||||
if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
|
||||
isDrag = true
|
||||
}
|
||||
}
|
||||
|
||||
const load = async (init: boolean = false) => {
|
||||
if (init) {
|
||||
state.list = []
|
||||
pageOptions.page = 0
|
||||
state.loadDone = false
|
||||
}
|
||||
if (state.loadDone || state.loading) {
|
||||
return
|
||||
}
|
||||
state.loading = true
|
||||
pageOptions.page += 1
|
||||
const list = await api.material.getList({
|
||||
...{ cate: state.currentCategory?.id, search: state.searchKeyword, ...pageOptions },
|
||||
})
|
||||
if (init) {
|
||||
state.list = list?.list
|
||||
} else {
|
||||
state.list = state.list.concat(list?.list)
|
||||
}
|
||||
list?.list.length <= 0 && (state.loadDone = true)
|
||||
setTimeout(() => {
|
||||
state.loading = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const searchChange = (e: any) => {
|
||||
state.currentCategory = { name: '搜索结果' }
|
||||
load(true)
|
||||
}
|
||||
|
||||
const selectTypes = (item: any) => {
|
||||
state.currentCategory = item
|
||||
load(true)
|
||||
}
|
||||
const back = () => {
|
||||
state.currentCategory = null
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
load,
|
||||
searchChange,
|
||||
selectTypes,
|
||||
back,
|
||||
mouseup,
|
||||
mousemove,
|
||||
})
|
||||
|
||||
// ...mapGetters(['dPage'])
|
||||
|
||||
// ...mapActions(['addWidget'])
|
||||
|
||||
async function selectItem(item: any) {
|
||||
if (isDrag) {
|
||||
return
|
||||
}
|
||||
store.commit('setShowMoveable', false) // 清理掉上一次的选择
|
||||
let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
|
||||
const img: any = await setImageData(item)
|
||||
|
||||
setting.width = img.width
|
||||
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
|
||||
const { width: pW, height: pH } = dPage.value
|
||||
setting.left = pW / 2 - img.width / 2
|
||||
setting.top = pH / 2 - img.height / 2
|
||||
setting.imgUrl = item.url
|
||||
if (item.type === 'svg') {
|
||||
setting.svgUrl = item.url
|
||||
const models = JSON.parse(item.model)
|
||||
for (const key in models) {
|
||||
if (Object.hasOwnProperty.call(models, key)) {
|
||||
setting[key] = models[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.type === 'mask') {
|
||||
setting.mask = item.url
|
||||
}
|
||||
store.dispatch("addWidget", setting)
|
||||
// addWidget(setting)
|
||||
}
|
||||
async function dragStart(e: any, item: any) {
|
||||
startPoint = { x: e.x, y: e.y }
|
||||
const { width, height, thumb, url } = item
|
||||
const img = await setImageData({ width, height, url: thumb || url })
|
||||
dragHelper.start(e, img.canvasWidth)
|
||||
store.commit('selectItem', { data: { value: item }, type: item.type })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user