Vue를 사용하여 WeChat 주소록과 같은 특수 효과를 구현하는 방법

Vue를 사용하여 WeChat 주소록과 같은 특수 효과를 얻는 방법

소개:
오늘날 소셜 미디어가 대중화되는 시대에 WeChat은 많은 사람들의 일상 생활에서 없어서는 안될 소셜 도구가 되었습니다. 위챗의 주소록은 자주 사용하는 기능 중 하나입니다. 주소록을 통해 우리는 언제든지 연락하고 싶은 사람을 찾아 즉시 소통할 수 있습니다. 이 기사에서는 Vue 프레임워크를 사용하여 WeChat 주소록과 같은 특수 효과를 구현하여 사용자에게 더 나은 사용자 경험을 제공하겠습니다.

1. 준비
시작하기 전에 Vue와 해당 개발 환경이 설치되어 있는지 확인해야 합니다. 아직 설치되지 않은 경우 Vue 공식 문서를 참조하여 설치할 수 있습니다.
Vue CLI를 사용하여 생성할 수 있는 새 Vue 프로젝트를 생성합니다. 명령은 다음과 같습니다.

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>

App.vue에 Contacts 구성 요소를 도입합니다.

<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. 대화형 효과 구현
이제 두 가지 대화형 효과를 구현해야 합니다. 연락처를 클릭하면 연락처가 채팅 세션에 추가되고, 연락처 목록은 동적으로 업데이트됩니다.

1. 연락처를 클릭하여 채팅 세션에 추가하세요
   Contacts.vue에 클릭 이벤트를 추가하세요:

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

   chatContacts 배열을 데이터에 추가하여 채팅 세션에 추가된 연락처를 저장하세요:

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

   Add in 메소드 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>

2. 연락처의 동적 업데이트 검색
   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 중국어 웹사이트의 기타 관련 기사를 참조하세요!