Vue を使用して WeChat アドレス帳のような特殊効果を実装する方法-Vue.js-php.cn

Vue を使用して WeChat アドレス帳のような特殊効果を実装する方法

王林

リリース： 2023-09-22 09:01:43

オリジナル

1137 人が閲覧しました

Vue を使用して WeChat アドレス帳のような特殊効果を実装する方法

はじめに:
今日のソーシャルメディアの普及時代において、WeChat は多くの場面で不可欠なものとなっています。人々の日常生活ソーシャルツールがほとんどない。 WeChat のアドレス帳はよく使われる機能の 1 つで、アドレス帳を介していつでも連絡したい人を見つけて即座にコミュニケーションをとることができます。この記事では、Vue フレームワークを使用して WeChat アドレス帳のような特殊効果を実装し、ユーザーにより良いユーザーエクスペリエンスを提供します。

1. 準備
開始する前に、Vue と対応する開発環境がインストールされていることを確認する必要があります。まだインストールされていない場合は、Vue 公式ドキュメントを参照してインストールできます。
新しい Vue プロジェクトを作成します。Vue CLI を使用して作成できます。コマンドは次のとおりです:

vue create wechat-contacts

ログイン後にコピー

プロジェクトディレクトリを入力します:

cd wechat-contacts

ログイン後にコピー

プロジェクトを実行します:

npm run serve

ログイン後にコピー

現時点では、ブラウザで http://localhost:8080 にアクセスすると、空白のページが表示されます。

2. インターフェイスを構築します
src ディレクトリに新しいコンポーネント Contacts.vue を作成し、次のコードを編集します:

<template>
  <div>
    <div class="header">
      <input type="text" v-model="keyword" placeholder="搜索联系人">
    </div>
    <div class="contacts-list">
      <ul>
        <li v-for="contact in filteredContacts" :key="contact.id">
          <div class="avatar">{{ contact.name[0] }}</div>
          <div class="info">
            <div class="name">{{ contact.name }}</div>
            <div class="message">{{ contact.message }}</div>
          </div>
          <div class="time">{{ contact.time }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      contacts: [
        { id: 1, name: '张三', message: '你好', time: '12:30' },
        { id: 2, name: '李四', message: '在吗', time: '13:45' },
        { id: 3, name: '王五', message: '有新的消息', time: '15:20' },
        { id: 4, name: '赵六', message: '明天见', time: '17:10' }
      ]
    }
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact => {
        return contact.name.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
}
</script>

<style scoped>
.header {
  padding: 10px;
  background-color: #f5f5f5;
}

.header input {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contacts-list {
  margin-top: 20px;
}

.contacts-list ul {
  list-style-type: none;
  padding: 0;
}

.contacts-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
  font-size: 20px;
  color: #fff;
}

.info {
  flex-grow: 1;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.message {
  font-size: 14px;
  color: #999;
}

.time {
  font-size: 14px;
  color: #999;
}
</style>

ログイン後にコピー

Contacts コンポーネントを App.vue に導入します:

<template>
  <div id="app">
    <Contacts/>
  </div>
</template>

<script>
import Contacts from './components/Contacts.vue';

export default {
  name: 'App',
  components: {
    Contacts
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

ログイン後にコピー

プロジェクトを実行すると、検索ボックスや連絡先リストを含むシンプルなアドレス帳インターフェイスが表示されます。

3. インタラクティブ効果の実装
次に、2 つのインタラクティブ効果を実装する必要があります: 連絡先をクリックすると、連絡先がチャットセッションに追加され、連絡先を検索すると、連絡先リストが追加されます。動的に更新されます。

連絡先をクリックしてチャットセッションに追加します
Contacts.vue にクリックイベントを追加します:

<li v-for="contact in filteredContacts" :key="contact.id" @click="addToChat(contact)">

ログイン後にコピー

chatContacts 配列をデータに追加して、追加された内容を保存しますチャットセッションの連絡先に:

data() {
  return {
 ...
 chatContacts: []
  }
}

ログイン後にコピー

メソッドに addToChat メソッドを追加します:

methods: {
  addToChat(contact) {
 if (!this.chatContacts.includes(contact)) {
   this.chatContacts.push(contact);
 }
  }
}

ログイン後にコピー

テンプレートを変更し、チャットセッションの一部を追加します:

<div class="header">
  <input type="text" v-model="keyword" placeholder="搜索联系人">
</div>
...
<div class="chat">
  <ul>
 <li v-for="contact in chatContacts" :key="contact.id">
   <div class="avatar">{{ contact.name[0] }}</div>
   <div class="name">{{ contact.name }}</div>
 </li>
  </ul>
</div>

ログイン後にコピー

検索連絡先の動的更新
filteredChatContacts 計算属性を計算に追加して、キーワードに基づいてチャットセッションの連絡先をフィルターします:
```
computed: {
  filteredChatContacts() {
 return this.chatContacts.filter(contact => {
   return contact.name.toLowerCase().includes(this.keyword.toLowerCase());
 });
  }
}
```
ログイン後にコピー

テンプレートを変更し、検索結果パートを追加します:

<div class="header">
  <input type="text" v-model="keyword" placeholder="搜索联系人">
</div>
...
<div class="search-results">
  <ul>
    <li v-for="contact in filteredChatContacts" :key="contact.id">
      <div class="avatar">{{ contact.name[0] }}</div>
      <div class="name">{{ contact.name }}</div>
    </li>
  </ul>
</div>

ログイン後にコピー

この時点で、WeChat アドレス帳のような特殊効果の実装が完了し、関連するインタラクティブな効果が実現されました。

結論:
Vue フレームワークを使用すると、さまざまな複雑なインタラクティブな効果を簡単に実現できます。この記事では、Vue を使用して WeChat アドレス帳のような特殊効果を実装する方法を示し、関連するコード例を示します。この記事が Vue 開発の学習に役立つことを願っています。皆さんもぜひ練習して探索してみてください。

以上がVue を使用して WeChat アドレス帳のような特殊効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。