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 * @LastEditTime: 2024-03-01 20:55:51
*/ */
import { StyleValue } from "vue"
export type TWidgetClassifyData = { export type TWidgetClassifyData = {
name: string name: string
icon: string icon: string
show: boolean show: boolean
component: string component: string
style?: StyleValue
} }
export default [ export default [

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

@ -2,38 +2,35 @@
<div id="widget-panel"> <div id="widget-panel">
<div class="widget-classify"> <div class="widget-classify">
<ul class="classify-wrap"> <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> <div class="icon-box"><i :class="['iconfont', 'icon', item.icon]" :style="item.style" /></div>
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
</li> </li>
</ul> </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> <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>
<div v-show="active" class="widget-wrap"> <div v-show="state.active" class="widget-wrap">
<keep-alive> <keep-alive>
<component :is="widgetClassifyList[activeWidgetClassify].component" /> <component :is="state.widgetClassifyList[state.activeWidgetClassify].component" />
</keep-alive> </keep-alive>
</div> </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 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"> --> <!-- <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> --> <!-- </el-tooltip> -->
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
// 组件面板 // 组件面板
const NAME = 'widget-panel' // const NAME = 'widget-panel'
import widgetClassifyListData from '@/assets/data/WidgetClassifyList.ts' import widgetClassifyListData from '@/assets/data/WidgetClassifyList'
import { reactive, toRefs, onMounted, watch, nextTick, getCurrentInstance, ComponentInternalInstance } from 'vue' import { reactive, onMounted, watch, nextTick, } from 'vue'
import { mapActions } from 'vuex' // import { useStore } from 'vuex'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
export default {
name: NAME,
setup() {
// const store = useStore() // const store = useStore()
const route = useRoute() const route = useRoute()
const state = reactive({ const state = reactive({
@ -60,6 +57,7 @@ export default {
} }
}, },
) )
// const { proxy } = getCurrentInstance() as ComponentInternalInstance // const { proxy } = getCurrentInstance() as ComponentInternalInstance
// watch( // watch(
// () => state.active, // () => state.active,
@ -74,15 +72,10 @@ export default {
// }, // },
// ) // )
return { defineExpose({
clickClassify, clickClassify
...toRefs(state), })
} // ...mapActions(['updateScreen']),
},
methods: {
...mapActions(['updateScreen']),
},
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>