Vue实现输入框回车发送和粘贴文本与图片功能

下面是Vue实现输入框回车发送和粘贴文本与图片功能的完整攻略。

步骤一：引入依赖

在Vue项目中引入vue-clipboard2和vue-filepond这两个库。

npm install vue-clipboard2 vue-filepond

步骤二：注册组件和事件

<template>
  <div>
    <input type="text" v-model="textInput" @keyup.enter.exact="sendText">
    <file-pond
      name="file"
      v-model="file"
      label-idle="拖放图片或点击上传"
      accepted-file-types="image/*"
      @addfile="sendImage"
    ></file-pond>
  </div>
</template>

<script>
import { VueClipboard } from "vue-clipboard2";
import FilePond from "vue-filepond";
import "filepond/dist/filepond.min.css";

export default {
  components: {
    FilePond
  },
  data() {
    return {
      textInput: "",
      file: null
    };
  },
  methods: {
    sendText() {
      this.$emit("send", { type: "text", data: this.textInput });
      this.textInput = "";
    },
    sendImage() {
      const formData = new FormData();
      formData.append("file", this.file.file);
      this.$axios.post("/upload", formData).then(res => {
        this.$emit("send", { type: "image", data: res.data });
        this.file = null;
      });
    }
  },
  computed: {
    $axios() {
      return this.$http.create({
        baseURL: "/api"
      });
    }
  },
  directives: {
    clipboard: VueClipboard.directive
  }
};
</script>

<style scoped></style>

在上述代码中，我们定义了一个聊天输入框组件，包含一个文本输入框和一个文件上传组件。当我们输入文本并按下回车时，会触发sendText方法发送文本消息。当我们选择了一个图片文件并点击上传时，会触发sendImage方法发送图片消息。其中，发送图片时需要先上传图片到服务器，然后将服务器返回的图片地址作为image类型的消息发送给聊天室。

步骤三：使用组件

使用上述定义的聊天输入框组件时，只需要在父组件中引用并监听send事件即可实现消息的发送功能。

<template>
  <div>
    <chat-input @send="addMessage"></chat-input>
    <chat-messages :messages="messages" />
  </div>
</template>

<script>
import ChatInput from "./ChatInput.vue";
import ChatMessages from "./ChatMessages.vue";

export default {
  components: {
    ChatInput,
    ChatMessages
  },
  data() {
    return {
      messages: []
    };
  },
  methods: {
    addMessage(message) {
      this.messages.push(message);
    }
  }
};
</script>

<style scoped></style>

示例一: 发送文本消息

在父组件中，我们监听send事件并将消息添加到messages数组中。示例代码如下：

<template>
  <div>
    <chat-input @send="addMessage"></chat-input>
    <chat-messages :messages="messages" />
  </div>
</template>

<script>
import ChatInput from "./ChatInput.vue";
import ChatMessages from "./ChatMessages.vue";

export default {
  components: {
    ChatInput,
    ChatMessages
  },
  data() {
    return {
      messages: []
    };
  },
  methods: {
    addMessage(message) {
      this.messages.push(message);
    }
  }
};
</script>

<style scoped></style>

示例二：发送图片消息

在父组件中，我们监听send事件并将消息添加到messages数组中。发送图片消息时，我们先上传图片到服务器，然后将服务器返回的图片地址作为image类型的消息发送给聊天室。示例代码如下：

<template>
  <div>
    <chat-input @send="addMessage"></chat-input>
    <chat-messages :messages="messages" />
  </div>
</template>

<script>
import ChatInput from "./ChatInput.vue";
import ChatMessages from "./ChatMessages.vue";

export default {
  components: {
    ChatInput,
    ChatMessages
  },
  data() {
    return {
      messages: []
    };
  },
  methods: {
    addMessage(message) {
      this.messages.push(message);
    }
  }
};
</script>

<style scoped></style>