核心思路:通過grid佈局,點選切換class。

核心程式碼(如有疑惑地方,下方有完整程式碼連結)

   //宮格轉換
    const changeGrid = (item) => {
      state.posList = [];
      const { id } = item;
      //職責鏈模式進行儲存,避免if else
      let map = new Map([
        [
          "0",
          {
            //對應每格宮格模式的樣式
            class: "grid-two-two",
            
 
//格子數量
            length: 4,
          },
        ],
        [
          "1",
          {
            class: "gird-three-three",
            length: 9,
          },
        ],
        [
          "2",
          {
            class: "gird-four-four",
            length: 16,
          },
        ],
        [
          
 
"3",
          {
            class: "gird-five-five",
            length: 25,
          },
        ],
        [
          "4",
          {
            class: "gird-two",
            length: 2,
          },
        ],
        [
          "5",
          {
            class: "header-foot-foot",
            length: 
 
3,
          },
        ],
        [
          "6",
          {
            class: "left-one-box",
            length: 6,
          },
        ],
        [
          "7",
          {
            class: "header-more",
            length: 9,
          },
        ],
        [
          "8",
          {
            class: "left-four",
            length: 13,
          },
        ],
      ]);
      state.gridList = initList(map.get(`${id}`).length);
      state.gridMode = map.get(`${id}`).class;
      nextTick(() => {
        initPos(domlist);
      });
    };

實現效果:http://www.lintools.top 進入宮格切換模組

程式碼:https://github.com/chongchongLin/vue3-question/blob/main/src/components/Grid.vue

覺得對您有幫助的話,不妨給個star吧～