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 style panel component to composition API

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-06 20:24:09 +00:00
parent 77aba80b8b
commit 18f05812ad
1 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/modules/panel/stylePanel.vue
View File

@ -6,7 +6,7 @@
</div> </div>
<div v-show="activeTab === 0" class="style-wrap"> <div v-show="activeTab === 0" class="style-wrap">
<div v-show="showGroupCombined" style="padding: 2rem 0"> <div v-show="showGroupCombined" style="padding: 2rem 0">
<el-button plain type="primary" class="gounp__btn" @click="realCombined">成组</el-button> <el-button plain type="primary" class="gounp__btn" @click="handleCombine">成组</el-button>
<icon-item-select label="" :data="alignIconList" @finish="alignAction" /> <icon-item-select label="" :data="alignIconList" @finish="alignAction" />
</div> </div>
<component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" /> <component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" />
@ -17,58 +17,64 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
// 样式设置面板 // 样式设置面板
const NAME = 'style-panel' // const NAME = 'style-panel'
import { mapGetters, mapActions } from 'vuex' import { useStore } from 'vuex'
import alignIconList from '@/assets/data/AlignListData' import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
import iconItemSelect from '../settings/iconItemSelect.vue' import iconItemSelect from '../settings/iconItemSelect.vue'
import { ref, watch } from 'vue';
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
export default { const store = useStore();
name: NAME,
components: { iconItemSelect }, const activeTab = ref(0)
data() { const iconList = ref<AlignListData[]>(alignIconList)
return { const showGroupCombined = ref(false)
activeTab: 0,
alignIconList, const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
showGroupCombined: false,
} watch(
}, dSelectWidgets,
computed: { (items) => {
...mapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets']),
},
watch: {
dSelectWidgets: {
handler(items) {
setTimeout(() => { setTimeout(() => {
this.showGroupCombined = items.length > 1 showGroupCombined.value = items.length > 1
}, 100) }, 100)
}, },
deep: true, {
}, deep: true
}, }
methods: { )
...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
alignAction(item) { function handleCombine() {
const sWidgets = JSON.parse(JSON.stringify(this.dSelectWidgets)) store.dispatch('realCombined')
this.getCombined().then((group) => { }
for (let i = 0; i < sWidgets.length; i++) {
const element = sWidgets[i] // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
this.updateAlign({ function alignAction(item: AlignListData) {
const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
store.dispatch('getCombined').then((group) => {
sWidgets.forEach((element: Record<string, any>) => {
store.dispatch('updateAlign', {
align: item.value, align: item.value,
uuid: element.uuid, uuid: element.uuid,
group, group,
}) })
} // updateAlign({
this.pushHistory() // align: item.value,
// uuid: element.uuid,
// group,
// })
});
store.dispatch('pushHistory')
// pushHistory()
}) })
},
layerChange(newLayer) {
this.$store.commit('setDWidgets', newLayer.reverse())
this.$store.commit('setShowMoveable', false)
},
},
} }
function layerChange(newLayer: Record<string, any>[]) {
store.commit('setDWidgets', newLayer.toReversed())
store.commit('setShowMoveable', false)
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>