github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: convert widget panel component to composition API

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-06 20:32:24 +00:00
parent 18f05812ad
commit 4f26e1652f
2 changed files with 57 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/data/WidgetClassifyList.ts
View File

@ -6,11 +6,14 @@
* @LastEditTime: 2024-03-01 20:55:51
*/
import { StyleValue } from "vue"
export type TWidgetClassifyData = {
name: string
icon: string
show: boolean
component: string
style?: StyleValue
}
export default [

115
src/components/modules/panel/widgetPanel.vue
View File

@ -2,87 +2,80 @@
<div id="widget-panel">
<div class="widget-classify">
<ul class="classify-wrap">
<li v-for="(item, index) in widgetClassifyList" :key="index" :class="['classify-item', { 'active-classify-item': activeWidgetClassify === index }]" @click="clickClassify(index)">
<li v-for="(item, index) in state.widgetClassifyList" :key="index" :class="['classify-item', { 'active-classify-item': state.activeWidgetClassify === index }]" @click="clickClassify(index)">
<div class="icon-box"><i :class="['iconfont', 'icon', item.icon]" :style="item.style" /></div>
<p>{{ item.name }}</p>
</li>
</ul>
<a href="https://github.com/palxiao/poster-design" target="_blank" class="github"><img src="https://fe-doc.palxp.cn/images/github.svg" alt="Github" title="Github" /> 源码</a>
</div>
<div v-show="active" class="widget-wrap">
<div v-show="state.active" class="widget-wrap">
<keep-alive>
<component :is="widgetClassifyList[activeWidgetClassify].component" />
<component :is="state.widgetClassifyList[state.activeWidgetClassify].component" />
</keep-alive>
</div>
<!-- <div v-show="active" class="side-wrap"><div class="pack__up" @click="active = false">&lt;</div></div> -->
<div v-show="active" class="side-wrap">
<div v-show="state.active" class="side-wrap">
<!-- <el-tooltip effect="dark" content="收起侧边栏" placement="right"> -->
<div class="pack__up" @click="active = false"></div>
<div class="pack__up" @click="state.active = false"></div>
<!-- </el-tooltip> -->
</div>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
// 组件面板
const NAME = 'widget-panel'
import widgetClassifyListData from '@/assets/data/WidgetClassifyList.ts'
import { reactive, toRefs, onMounted, watch, nextTick, getCurrentInstance, ComponentInternalInstance } from 'vue'
import { mapActions } from 'vuex'
// const NAME = 'widget-panel'
import widgetClassifyListData from '@/assets/data/WidgetClassifyList'
import { reactive, onMounted, watch, nextTick, } from 'vue'
// import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
export default {
name: NAME,
setup() {
// const store = useStore()
const route = useRoute()
const state = reactive({
widgetClassifyList: widgetClassifyListData,
activeWidgetClassify: 0,
active: true,
})
const clickClassify = (index: number) => {
state.activeWidgetClassify = index
state.active = true
}
onMounted(async () => {
await nextTick()
const { koutu } = route.query
koutu && (state.activeWidgetClassify = 4)
})
watch(
() => state.activeWidgetClassify,
(index) => {
if (index >= 0 && index < state.widgetClassifyList.length) {
state.widgetClassifyList[index].show = true
}
},
)
// const { proxy } = getCurrentInstance() as ComponentInternalInstance
// watch(
// () => state.active,
// () => {
// let screen = document.getElementById('page-design')
// nextTick(() => {
// proxy?.updateScreen({
// width: screen.offsetWidth,
// height: screen.offsetHeight,
// })
// })
// },
// )
return {
clickClassify,
...toRefs(state),
}
},
methods: {
...mapActions(['updateScreen']),
},
// const store = useStore()
const route = useRoute()
const state = reactive({
widgetClassifyList: widgetClassifyListData,
activeWidgetClassify: 0,
active: true,
})
const clickClassify = (index: number) => {
state.activeWidgetClassify = index
state.active = true
}
onMounted(async () => {
await nextTick()
const { koutu } = route.query
koutu && (state.activeWidgetClassify = 4)
})
watch(
() => state.activeWidgetClassify,
(index) => {
if (index >= 0 && index < state.widgetClassifyList.length) {
state.widgetClassifyList[index].show = true
}
},
)
// const { proxy } = getCurrentInstance() as ComponentInternalInstance
// watch(
// () => state.active,
// () => {
// let screen = document.getElementById('page-design')
// nextTick(() => {
// proxy?.updateScreen({
// width: screen.offsetWidth,
// height: screen.offsetHeight,
// })
// })
// },
// )
defineExpose({
clickClassify
})
// ...mapActions(['updateScreen']),
</script>
<style lang="less" scoped>