Diverses méthodes de mise en œuvre du contenu de la boîte de discussion vue

Vue est un framework JavaScript populaire pour créer des applications Web modernes. Les boîtes de discussion sont un composant courant dans de nombreuses applications Web. Cet article explique comment utiliser Vue pour implémenter plusieurs types de contenu de boîtes de discussion.

1. Messages texte

Les messages texte sont le type de contenu de chat le plus courant. Pour implémenter une boîte de discussion par message texte à l'aide de Vue, créez d'abord un composant de salle de discussion. Vous pouvez ensuite autoriser l'utilisateur à saisir un message en ajoutant une zone de saisie de texte, comme ceci :

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      {{ message.text }}
    </div>
    <input type="text" v-model="newMessage" @keyup.enter="sendMessage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      this.messages.push({
        text: this.newMessage,
        type: 'text'
      })
      this.newMessage = ''
    }
  }
}
</script>

Dans le code ci-dessus, nous incluons du texte et du type pour chaque objet de message. Lorsque l'utilisateur appuie sur la touche Entrée, nous ajoutons le nouveau message au tableau de messages et effaçons le contenu de la zone de saisie.

2. Message photo

Pour implémenter la boîte de discussion de message photo, vous devez ajouter un bouton de téléchargement d'image et une fonction d'aperçu d'image à la zone de saisie de texte.

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      <template v-if="message.type === 'text'">
        {{ message.text }}
      </template>
      <template v-else-if="message.type === 'image'">
        <img :src="message.url">
      </template>
    </div>
    <input type="text" v-model="newMessage.text" @keyup.enter="sendMessage">
    <input type="file" ref="fileInput" @change="previewImage">
    <button @click="sendImage">发送图片</button>
    <img v-if="imageUrl" :src="imageUrl">
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: {
        type: 'text',
        text: ''
      },
      imageUrl: ''
    }
  },
  methods: {
    previewImage() {
      const file = this.$refs.fileInput.files[0]
      const reader = new FileReader()
      reader.onload = event => {
        this.imageUrl = event.target.result
      }
      reader.readAsDataURL(file)
    },
    sendImage() {
      this.messages.push({
        type: 'image',
        url: this.imageUrl
      })
      this.imageUrl = ''
    }
  }
}
</script>

Dans le code ci-dessus, nous activons la fonction de téléchargement d'image via l'élément <input type="file"> et utilisons l'objet FileReader pour afficher la vignette. de l'image téléchargée. <input type="file">元素启用图片上传功能，并使用FileReader对象渲染上传图片的缩略图。

3. 音频消息

要实现音频消息聊天框，需要创建一个播放器组件，可以使用Vue-Audio插件来简化。

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      <template v-if="message.type === 'text'">
        {{ message.text }}
      </template>
      <template v-else-if="message.type === 'image'">
        <img :src="message.url">
      </template>
      <template v-else-if="message.type === 'audio'">
        <vue-audio :src="message.url"/>
      </template>
    </div>
    <input type="text" v-model="newMessage.text" @keyup.enter="sendMessage">
    <input type="file" ref="fileInput" accept="audio/*" @change="previewAudio">
    <button @click="sendAudio">发送音频</button>
  </div>
</template>

<script>
import VueAudio from 'vue-audio'

export default {
  components: {
    VueAudio
  },
  data() {
    return {
      messages: [],
      newMessage: {
        type: 'text',
        text: ''
      },
      audioUrl: ''
    }
  },
  methods: {
    previewAudio() {
      const file = this.$refs.fileInput.files[0]
      const reader = new FileReader()
      reader.onload = event => {
        this.audioUrl = event.target.result
      }
      reader.readAsDataURL(file)
    },
    sendAudio() {
      this.messages.push({
        type: 'audio',
        url: this.audioUrl
      })
      this.audioUrl = ''
    }
  }
}
</script>

在上面的代码中，我们使用Vue-Audio组件播放上传的音频文件。我们在组件内部设置audio类型的消息，以便在消息列表中正确渲染音频消息。上传音频文件时，我们可以通过将<input>元素的accept属性设置为audio/*来限制用户只能上传音频文件。

4. 视频消息

实现视频消息聊天框需要与音频消息类似的方法。同样，我们将创建一个组件来播放视频。

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      <template v-if="message.type === 'text'">
        {{ message.text }}
      </template>
      <template v-else-if="message.type === 'image'">
        <img :src="message.url">
      </template>
      <template v-else-if="message.type === 'audio'">
        <vue-audio :src="message.url"/>
      </template>
      <template v-else-if="message.type === 'video'">
        <video :src="message.url" controls></video>
      </template>
    </div>
    <input type="text" v-model="newMessage.text" @keyup.enter="sendMessage">
    <input type="file" ref="fileInput" accept="video/*" @change="previewVideo">
    <button @click="sendVideo">发送视频</button>
  </div>
</template>

<script>
import VueAudio from 'vue-audio'

export default {
  components: {
    VueAudio
  },
  data() {
    return {
      messages: [],
      newMessage: {
        type: 'text',
        text: ''
      },
      videoUrl: ''
    }
  },
  methods: {
    previewVideo() {
      const file = this.$refs.fileInput.files[0]
      const reader = new FileReader()
      reader.onload = event => {
        this.videoUrl = event.target.result
      }
      reader.readAsDataURL(file)
    },
    sendVideo() {
      this.messages.push({
        type: 'video',
        url: this.videoUrl
      })
      this.videoUrl = ''
    }
  }
}
</script>

在上述代码中，我们使用<video>元素来渲染上传的视频文件。我们也在组件内部设置了video

Message audio

Pour implémenter la boîte de discussion de message audio, vous devez créer un composant lecteur, qui peut être simplifié à l'aide du plug-in Vue-Audio.

rrreee🎜Dans le code ci-dessus, nous utilisons le composant Vue-Audio pour lire le fichier audio téléchargé. Nous définissons le type de message audio à l'intérieur du composant afin que le message audio soit correctement restitué dans la liste des messages. Lors du téléchargement de fichiers audio, nous pouvons restreindre les utilisateurs à télécharger uniquement de l'audio en définissant l'attribut accept de l'élément <input> sur audio/*. document. 🎜
🎜Message vidéo🎜🎜🎜 La mise en œuvre d'une boîte de discussion de messagerie vidéo nécessite une approche similaire à la messagerie audio. De même, nous créerons un composant pour lire la vidéo. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons l'élément <video> pour restituer le fichier vidéo téléchargé. Nous définissons également un message de type video à l'intérieur du composant afin que le message vidéo puisse être restitué correctement. De même, nous limitons également le type de fichier que les utilisateurs peuvent télécharger sur des vidéos. 🎜🎜Conclusion🎜🎜Cet article explique comment utiliser Vue pour implémenter plusieurs types de contenu de discussion. En utilisant les composants Vue et leurs hooks de cycle de vie, leurs propriétés calculées et leurs gestionnaires d'événements, nous pouvons facilement implémenter diverses fonctions de la boîte de discussion. Pendant la pratique, vous pouvez le modifier et le personnaliser en fonction de vos besoins pour répondre aux exigences de votre projet. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!