李仕臣

李仕臣的博客

183
文章
87
分类
136
标签

面向对象-手写手风琴特效

VUE
  |  
 阅读次数

TS + ES6 + VUE 实现手风琴特效

第一步 定义 数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
public list: any = [
  {
    card: '走进四海',
    item: [
      {
        url: './into',
        name: '四海简介'
      },
      {
        url: './into',
        name: '荣誉证书'
      }
    ]
  },
  {
    card: '服务项目',
    item: [
      {
        url: './server',
        name: '服务项目'
      }
    ]
  },
  {
    card: '施工案例',
    item: [
      {
        url: './case',
        name: '成品保护'
      },
      {
        url: './case',
        name: '保洁'
      },
      {
        url: './case',
        name: '外墙清洗'
      },
      {
        url: './case',
        name: '石材翻新'
      },
      {
        url: './case',
        name: '家政服务'
      },
      {
        url: './case',
        name: '电梯司机'
      },
      {
        url: './case',
        name: '停车管理'
      },
      {
        url: './case',
        name: '消防工程'
      },
      {
        url: './case',
        name: '拆迁工程'
      },
    ]
  },
  {
    card: '团队风采',
    item: [
      {
        url: './into',
        name: '风采展示'
      }
    ]
  },
  {
    card: '新闻中心',
    item: [
      {
        url: './into',
        name: '新闻中心'
      }
    ]
  },
  {
    card: '人才招聘',
    item: [
      {
        url: './into',
        name: '招聘详情'
      }
    ]
  },
  {
    card: '联系我们',
    item: [
      {
        url: './into',
        name: '联系方式'
      }
    ]
  }
]

数据结构 决定 业务逻辑 与 实现思路

第二步 根据数据实现虚拟DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public listFor(h: CreateElement) {
  let res = [];
  for (let i = 0; i < this.list.length; i++) {
    let dd = [];
    for (let n = 0; n < this.list[i].item.length; n++) {
        dd.push(
          <span>
            <router-link to={this.list[i].item[n].url}>{this.list[i].item[n].name}</router-link>
          </span>
        )
    }

    res.push(
      <dl>
        <dt onClick={() => { this.cardList(i + 1) }}>
          <span class={this.listNum === i + 1 ? 'show' : ''}>{this.list[i].card}</span>
        </dt>
        <dd class={(this.listNum === i + 1 ? `showdd${i}` : '') + " " + "show"}>
          {dd}
        </dd>
      </dl >
    )
  }
  return res
}

第三步 两个生命周期

1
2
3
4
5
6
7
8
9
// vue生命周期 挂载时执行
public mounted() {
  this.showdd()
}

// vue生命周期 页面数据更新时执行
public updated() {
  this.showdd()
}

第四步 业务逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public showdd() {
  let sideMenu = document.getElementsByClassName('sideMenu')[0];
  
  // 此循环为了每次点击前所有列表高度清零
  for (let i = 0; i < sideMenu.children.length; i++) {
    let evedd = sideMenu.children[i].getElementsByTagName('dd')[0]
    evedd.setAttribute('style', `height: 0px`)
  }

  for (let i = 0; i < this.list.length; i++) {
    /** 取得每个`dd`的Dom元素 */
    let dd = sideMenu.getElementsByClassName(`showdd${i}`)[0]; 
    
    let itemLen = this.list[i].item.length; // 此为数据结构长度，也就是每个子菜单高度的根据
    if (dd !== undefined) {
      dd.setAttribute('style', `height:${itemLen * 36}px`)
      console.log('get H', dd.clientHeight);
    }
    console.log(itemLen);
  }
}

第五步 CSS样式

此步骤为样式的实现，根据 class 或 id 实现

1
2
3
4
5
6
7
8
9
10
ele{
    overflow: hidden;
    opacity: 0; // 不太需要
    height: 0;
    transition: all .5s;
}

ele.show {
    opacity: 1; // 可以省略
}

具体实现详见 shrs 四海日盛官网项目 list.tsx