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

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

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

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

這里我們直接使用scrollIntoView方法

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

語法

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

組件

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

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

字母列表很簡單。

第一種方法

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

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

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

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

第二種方法

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

當然，我給出的數(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個英文字母大寫
    // for (var i = 0; i < 26; i++) {
    //   this.letter.push(String.fromCharCode(65 + i))
    // }

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

    //因為有導(dǎo)航欄的原因，默認距離頂部一個導(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)航后，上邊距默認清零

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

      if (this.navBar) this.$refs.box.style.marginTop = this.navBarHeight; //因為有導(dǎo)航欄的原因，所以上邊距應(yīng)該為導(dǎo)航欄的高度
    },
    // 點擊通訊錄
    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: "打飛機",
            },
          ],
        },
        {
          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: "趙一曼",
            },
          ],
        },
      ],