Diverses méthodes de mise en œuvre du contenu de la boîte de discussion vue-Questions et réponses frontales-php.cn

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

WBOY

Libérer： 2023-05-11 11:51:37

original

1348 Les gens l'ont consulté

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.

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>

Copier après la connexion

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.

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>

Copier après la connexion

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对象渲染上传图片的缩略图。

音频消息

要实现音频消息聊天框，需要创建一个播放器组件，可以使用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>

Copier après la connexion

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

Copier après la connexion

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

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.

audio

accept

<input>

audio/*

<video>

video

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!