feat: convert bgImgListWrap component to composition API

src/api/material.ts

@@ -64,6 +64,7 @@ export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('
 
 type TGetImageListParams = {
   page?: number
+  cate?: number
 }
 
 export type TGetImageListResult = {
@@ -73,6 +74,7 @@ export type TGetImageListResult = {
   url: string
   user_id: number
   id: string
+  thumb: string
 }
 
 // 图库列表

src/components/modules/panel/wrap/BgImgListWrap.vue

@@ -8,42 +8,64 @@
 <template>
   <div class="wrap">
     <div class="color__box" :style="modelStyle.color">
-      <div v-for="c in colors" :key="c" :style="{ background: c }" class="color__item" @click="setBGcolor(c)"></div>
+      <div v-for="c in state.colors" :key="c" :style="{ background: c }" class="color__item" @click="setBGcolor(c)"></div>
     </div>
-    <ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
+    <ul v-if="state.showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
       <div class="list" :style="modelStyle.list">
-        <imageTip v-for="(item, i) in bgList" :key="i + 'i'" :detail="item">
+        <imageTip v-for="(item, i) in state.bgList" :key="i + 'i'" :detail="item">
           <el-image class="list__img" :src="item.thumb" fit="cover" lazy loading="lazy" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
         </imageTip>
       </div>
-      <div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
-      <div v-show="loadDone" class="loading">全部加载完毕</div>
+      <div v-show="state.loadDone" class="loading">全部加载完毕</div>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, toRefs, computed } from 'vue'
+import { reactive, computed, defineProps, defineExpose } from 'vue'
 import api from '@/api'
-import { mapActions, useStore } from 'vuex'
+import { useStore } from 'vuex'
+import { ElImage } from 'element-plus'
+import { TGetImageListResult } from '@/api/material';
 
-export default defineComponent({
+type TCommonPanelData = {
-  props: {
+  color: string
-    model: {
+  list: string
-      default: 'widgetPanel'
 }
-  },
+
-  setup(props) {
+type TTmpModalData = {
+  widgetPanel: TCommonPanelData
+  stylePanel: TCommonPanelData
+}
+
+type TProps = {
+  model: 'widgetPanel'
+}
+
+type TState = {
+  loading: boolean
+  loadDone: boolean
+  bgList: TGetImageListResult[]
+  showList: boolean
+  colors: string[]
+
+}
+
+const { model } = defineProps<TProps>()
+
+
 const store = useStore()
-    const state = reactive({
+const state = reactive<TState>({
   loading: false,
   loadDone: false,
   bgList: [],
   showList: true,
   colors: ['#000000ff', '#999999ff', '#CCCCCCff', '#FFFFFFff', '#E65353ff', '#FFD835ff', '#70BC59ff', '#607AF4ff', '#976BEEff'],
 })
+
 // 临时用于改变样式
-    const models: any = {
+const models: TTmpModalData = {
   widgetPanel: {
     color: 'padding: 1.2rem 1rem',
     list: 'grid-template-columns: auto auto auto;padding: 0 1rem;',
@@ -53,7 +75,8 @@ export default defineComponent({
     list: 'grid-template-columns: repeat(3, 76px);',
   }
 }
-    const modelStyle = computed(() => models[props.model])
+
+const modelStyle = computed(() => models[model])
 
 const pageOptions = { page: 0, pageSize: 20 }
 
@@ -76,7 +99,7 @@ export default defineComponent({
     pageOptions.page = 1
   }
 
-      await api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }: any) => {
+  await api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }) => {
     if (list.length > 0) {
       state.bgList.push(...list)
     } else {
@@ -104,36 +127,47 @@ export default defineComponent({
   })
 }
 
-    return {
+// ...mapActions(['selectWidget', 'updatePageData']),
-      ...toRefs(state),
+async function selectItem(item: TGetImageListResult) {
-      load,
-      setBGcolor,
-      loadData,
-      modelStyle
-    }
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'updatePageData']),
-    async selectItem(item: any) {
   // this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      this.updatePageData({
+  store.dispatch('updatePageData', {
     key: 'backgroundTransform',
     value: {},
   })
-      this.updatePageData({
+  store.dispatch('updatePageData', {
     key: 'backgroundImage',
     value: item.url,
     pushHistory: true,
   })
-      this.selectWidget({
+  store.dispatch('selectWidget', {
     uuid: '-1',
   })
-    },
+  // this.updatePageData({
-    dragStart(e: any, item: any) {
+  //   key: 'backgroundTransform',
-      this.$store.commit('selectItem', { data: {}, type: 'bg' })
+  //   value: {},
-    },
+  // })
-  },
+  // this.updatePageData({
+  //   key: 'backgroundImage',
+  //   value: item.url,
+  //   pushHistory: true,
+  // })
+  // this.selectWidget({
+  //   uuid: '-1',
+  // })
+}
+
+function dragStart(_: MouseEvent, _item: TGetImageListResult) {
+  store.commit('selectItem', { data: {}, type: 'bg' })
+}
+
+
+defineExpose({
+  load,
+  setBGcolor,
+  loadData,
+  modelStyle
 })
+
 </script>
 
 <style lang="less" scoped>