Pelbagai kaedah pelaksanaan kandungan kotak sembang vue

Vue ialah rangka kerja JavaScript yang popular untuk mencipta aplikasi web moden. Kotak sembang adalah komponen biasa dalam banyak aplikasi web. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan pelbagai jenis kandungan kotak sembang.

1. Mesej teks

Mesej teks ialah jenis kandungan sembang yang paling biasa. Untuk melaksanakan kotak sembang mesej teks menggunakan Vue, mula-mula buat komponen bilik sembang. Anda kemudiannya boleh membenarkan pengguna memasukkan mesej dengan menambahkan kotak input teks, seperti ini:

<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>

Dalam kod di atas, kami menyertakan teks dan taip untuk setiap objek mesej. Apabila pengguna menekan kekunci Enter, kami menambah mesej baharu pada tatasusunan mesej dan mengosongkan kandungan kotak input.

2. Mesej Gambar

Untuk melaksanakan kotak sembang mesej gambar, anda perlu menambah butang muat naik gambar dan fungsi pratonton gambar pada kotak input teks.

<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>

Dalam kod di atas, kami mendayakan fungsi muat naik imej melalui elemen <input type="file"> dan menggunakan objek FileReader untuk memaparkan lakaran kecil imej yang dimuat naik.

3. Mesej Audio

Untuk melaksanakan kotak sembang mesej audio, anda perlu mencipta komponen pemain, yang boleh dipermudahkan menggunakan pemalam 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>

Dalam kod di atas, kami menggunakan komponen Vue-Audio untuk memainkan fail audio yang dimuat naik. Kami menetapkan mesej jenis audio di dalam komponen supaya mesej audio dipaparkan dengan betul dalam senarai mesej. Apabila memuat naik fail audio, kami boleh mengehadkan pengguna untuk memuat naik fail audio sahaja dengan menetapkan atribut <input> elemen accept kepada audio/*.

4. Mesej Video

Melaksanakan kotak sembang mesej video memerlukan pendekatan yang serupa untuk pemesejan audio. Begitu juga, kami akan mencipta komponen untuk memainkan video.

<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>

Dalam kod di atas, kami menggunakan elemen <video> untuk memaparkan fail video yang dimuat naik. Kami juga menetapkan video mesej jenis di dalam komponen supaya mesej video dipaparkan dengan betul. Begitu juga, kami juga mengehadkan jenis fail yang boleh dimuat naik oleh pengguna ke video.

Kesimpulan

Artikel ini memperkenalkan cara menggunakan Vue untuk melaksanakan berbilang jenis kandungan sembang. Dengan menggunakan komponen Vue dan cangkuk kitaran hayatnya, sifat dikira dan pengendali acara, kami boleh melaksanakan pelbagai fungsi kotak sembang dengan mudah. Semasa latihan, anda boleh mengubah suai dan menyesuaikannya mengikut keperluan anda untuk memenuhi keperluan projek anda.

Atas ialah kandungan terperinci Pelbagai kaedah pelaksanaan kandungan kotak sembang vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!