如何封裝一個(gè)類似微信通訊錄帶有字母檢索功能的vue組件

更新時(shí)間：2024年08月28日 09:11:08 作者：江一銘

這篇文章主要介紹了如何封裝一個(gè)類似微信通訊錄帶有字母檢索功能的vue組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

封裝一個(gè)類似微信通訊錄帶有字母檢索功能的vue組件

這里我們直接使用scrollIntoView方法

該方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域

語法

element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布爾參數(shù)
element.scrollIntoView（scrollIntoViewOptions）; //對(duì)象參數(shù)

組件

分析一下功能就知道很簡單了。

首先需要一個(gè)通訊錄列表，其次是字母列表。

字母列表很簡單。

第一種方法

直接用fromCharCode，for循環(huán)遍歷拿到26個(gè)英文字母。

// 獲取26個(gè)英文字母大寫
    for (var i = 0; i < 26; i++) {
      this.letter.push(String.fromCharCode(65 + i))
    }

但是這樣的做法，有一個(gè)壞處就是，如果通訊錄沒有這么多呢？

換句話說，如果通訊錄只有ABCDEFG這幾個(gè)首字母的聯(lián)系人，你把26個(gè)都弄上去有點(diǎn)不太合適。

第二種方法

也是相對(duì)簡單的，直接從通訊錄列表拿到字母。當(dāng)然，這種方法需要后端給你對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)。并且得讓他給你按首字母排序好，畢竟能少一事少一事。什么？他不干？打一頓他就聽話了。

當(dāng)然，我給出的數(shù)據(jù)結(jié)構(gòu)你可以參考：

const peoArray = [
        {
          key: "A",
          list: [
            {
              name: "安吉",
            },
            {
              name: "安吉",
            },
          ],
        },
        {
          key: "B",
          list: [
            {
              name: "爸爸",
            },
            {
              name: "芭比",
            },
          ],
        },
        {
          key: "C",
          list: [
            {
              name: "蔡徐坤",
            },
            {
              name: "蔡徐坤",
            },
          ],
        },
 ]

直接上代碼

<template>
  <div id="letterPeo">
    <!-- 導(dǎo)航欄 -->
    <nav class="navBar" v-if="navBar" :style="{ height: navBarHeight }">頭部導(dǎo)航欄</nav>
    <!-- 字母檢索 -->
    <div class="letter">
      <div v-for="(item, index) in letter" :key="index" @click="scrollOn(item, index)">
        {{ item }}
      </div>
    </div>

    <!-- 通訊錄列表 -->
    <div class="peoBox">
      <div class="peo" ref="box">
        <div
          v-for="(item, index) in peoArray"
          :key="index"
          @click="onSelect(item, index)"
        >
          <p class="peoKey" :id="'peo' + item.key">{{ item.key }}</p>
          <p class="peolist" v-for="(ele, e) in item.list" :key="e">{{ ele.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navBar: true, //是否開啟頭部導(dǎo)航
      navBarHeight: "50px", //導(dǎo)航欄高度
      letter: [], //字母檢索列表
      peoArray: [],//通訊錄列表
    };
  },
  computed: {},
  mounted() {
    // 獲取26個(gè)英文字母大寫
    // for (var i = 0; i < 26; i++) {
    //   this.letter.push(String.fromCharCode(65 + i))
    // }

    // 只獲取通訊錄字母
    this.peoArray.forEach((ele) => {
      this.letter.push(ele.key);
    });

    //因?yàn)橛袑?dǎo)航欄的原因，默認(rèn)距離頂部一個(gè)導(dǎo)航欄的高度
    if (this.navBar) this.$refs.box.style.marginTop = this.navBarHeight;
  },
  methods: {
    // 字母檢索
    scrollOn(item) {
      if (this.navBar) this.$refs.box.style.marginTop = 0; // 開啟導(dǎo)航后，上邊距默認(rèn)清零

      let target = document.getElementById("peo" + item); //獲取每個(gè)字母通訊錄對(duì)象
      if (target)
        target.scrollIntoView({
          behavior: "smooth", // 定義動(dòng)畫過渡效果， "auto"或 "smooth" 之一。默認(rèn)為 "auto"
        });

      if (this.navBar) this.$refs.box.style.marginTop = this.navBarHeight; //因?yàn)橛袑?dǎo)航欄的原因，所以上邊距應(yīng)該為導(dǎo)航欄的高度
    },
    // 點(diǎn)擊通訊錄
    onSelect(item, index) {
      console.log(item, index);
    },
  },
};
</script>

<style scoped>
#letterPeo {
  width: 100%;
}
/* 導(dǎo)航欄 */
.navBar {
  width: 100%;
  position: fixed;
  text-align: center;
  line-height: 50px;
  background: #abf0ff;
  z-index: 3;
}
/* 字母 */
.letter {
  position: fixed;
  right: 10px;
  top: 15%;
  z-index: 2;
}
/* 通訊錄 */
.peoBox {
  position: relative;
}

.peo {
  width: 100%;
  overflow-y: scroll;
  position: absolute;
}
.peo p{
    padding: 0 10px;
}
.peo .peoKey {
  margin: 10px 0;
  font-size: 12px;
  background-color: #f3efef;
}
.peolist {
  margin: 20px 0;
}
</style>

完整數(shù)據(jù)

[
        {
          key: "A",
          list: [
            {
              name: "安吉",
            },
            {
              name: "安吉",
            },
          ],
        },
        {
          key: "B",
          list: [
            {
              name: "爸爸",
            },
            {
              name: "芭比",
            },
          ],
        },
        {
          key: "C",
          list: [
            {
              name: "蔡徐坤",
            },
            {
              name: "蔡徐坤",
            },
          ],
        },
        {
          key: "D",
          list: [
            {
              name: "打飛機(jī)",
            },
          ],
        },
        {
          key: "E",
          list: [
            {
              name: "餓了么",
            },
          ],
        },
        {
          key: "F",
          list: [
            {
              name: "方慧",
            },
          ],
        },
        {
          key: "G",
          list: [
            {
              name: "哥哥",
            },
          ],
        },
        {
          key: "H",
          list: [
            {
              name: "黃老頭",
            },
          ],
        },
        {
          key: "I",
          list: [
            {
              name: "ikun",
            },
          ],
        },
        {
          key: "J",
          list: [
            {
              name: "接化發(fā)",
            },
          ],
        },
        {
          key: "K",
          list: [
            {
              name: "KFC",
            },
          ],
        },
        {
          key: "L",
          list: [
            {
              name: "劉老根",
            },
          ],
        },
        {
          key: "M",
          list: [
            {
              name: "沒讀書",
            },
          ],
        },
        {
          key: "N",
          list: [
            {
              name: "牛頭人",
            },
          ],
        },
        {
          key: "O",
          list: [
            {
              name: "O泡果奶",
            },
          ],
        },
        {
          key: "P",
          list: [
            {
              name: "嫖老頭",
            },
          ],
        },
        {
          key: "Q",
          list: [
            {
              name: "秦三兒",
            },
          ],
        },
        {
          key: "R",
          list: [
            {
              name: "日",
            },
          ],
        },
        {
          key: "S",
          list: [
            {
              name: "塞班",
            },
          ],
        },
        {
          key: "T",
          list: [
            {
              name: "糖糖",
            },
          ],
        },
        {
          key: "U",
          list: [
            {
              name: "U哈哈哈哈",
            },
          ],
        },
        {
          key: "V",
          list: [
            {
              name: "V ME 50",
            },
          ],
        },
        {
          key: "W",
          list: [
            {
              name: "王富貴",
            },
          ],
        },
        {
          key: "X",
          list: [
            {
              name: "喜羊羊",
            },
          ],
        },
        {
          key: "Y",
          list: [
            {
              name: "陽頂天",
            },
          ],
        },
        {
          key: "Z",
          list: [
            {
              name: "趙一曼",
            },
          ],
        },
      ],