备案控制台
开发者社区 开发与运维 文章 正文

vue 在线聊天实战范例（含选择发送表情、图片、视频、音频，自定义右键快捷菜单，一键复制，左右聊天气泡）

2024-07-04 15
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue 在线聊天实战范例（含选择发送表情、图片、视频、音频，自定义右键快捷菜单，一键复制，左右聊天气泡）

最终效果

完整代码

index.vue

<template>
  <div class="page">
    <div class="leftBox">
      <h1>访客</h1>
      <div class="chatBox">
        <div class="chatRecordBox">
          <div v-for="(item, index) in chatRecordList" :key="index">
            <RightRole
              v-if="item.role === '访客'"
              :type="item.type"
              :content="item.content"
              :avatarURL="visitorAvatarURL"
              @openMenu="openMenu($event, index, true)"
            />
            <LeftRole
              v-if="item.role === '客服'"
              :type="item.type"
              :content="item.content"
              :avatarURL="serviceAvatarURL"
              @openMenu="openMenu($event, index)"
            />
          </div>
        </div>
        <div class="toolBox">
          <ChooseEmotion @getEmo="chooseEmo($event, 'visitor')" />
          <img
            @click="chooseImg('visitor')"
            class="imgIcon"
            src="@/assets/images/图片.svg"
          />
          <img
            @click="chooseVideo('visitor')"
            class="videoIcon"
            src="@/assets/images/视频.svg"
          />
          <img
            @click="chooseAudio('visitor')"
            class="audioIcon"
            src="@/assets/images/音频.svg"
          />
        </div>
        <div
          ref="visitorSendContentBox_Ref"
          contenteditable="true"
          class="sendContentBox"
        ></div>
        <div class="btnBox">
          <el-button @click="visitorSend" size="small">发送</el-button>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <h1>客服</h1>
      <div class="chatBox">
        <div class="chatRecordBox">
          <div v-for="(item, index) in chatRecordList" :key="index">
            <LeftRole
              v-if="item.role === '访客'"
              :type="item.type"
              :content="item.content"
              :avatarURL="visitorAvatarURL"
              @openMenu="openMenu($event, index)"
            />
            <RightRole
              v-if="item.role === '客服'"
              :type="item.type"
              :content="item.content"
              :avatarURL="serviceAvatarURL"
              @openMenu="openMenu($event, index, true)"
            />
          </div>
        </div>
        <div class="toolBox">
          <ChooseEmotion @getEmo="chooseEmo($event, 'service')" />
          <img
            @click="chooseImg('service')"
            class="imgIcon"
            src="@/assets/images/图片.svg"
          />
          <img
            @click="chooseVideo('service')"
            class="videoIcon"
            src="@/assets/images/视频.svg"
          />
          <img
            @click="chooseAudio('service')"
            class="audioIcon"
            src="@/assets/images/音频.svg"
          />
        </div>
        <div
          ref="serviceSendContentBox_Ref"
          contenteditable="true"
          class="sendContentBox"
        ></div>
        <div class="btnBox">
          <el-button @click="serviceSend" size="small">发送</el-button>
        </div>
      </div>

      <el-dialog
        title="图片预览"
        :visible.sync="showPreviewImgWin"
        style="text-align: center"
      >
        <el-image
          style="height: 400px"
          :preview-src-list="[imgSrc]"
          :src="imgSrc"
          fit="contain"
        />
      </el-dialog>

      <!-- 右键快捷菜单 -->
      <ul
        v-show="quickMenuVisible"
        :style="{ left: quickMenu_left + 'px', top: quickMenu_top + 'px' }"
        class="contextmenu"
      >
        <li v-show="ifCan_rollBack" @click="rollBack">撤回</li>
        <li @click="copy">复制</li>
      </ul>
    </div>
  </div>
</template>

<script>
import LeftRole from "./components/leftRole.vue";
import RightRole from "./components/rightRole.vue";
import ChooseEmotion from "./components/chooseEmotion.vue";
import visitorAvatarURL from "@/assets/images/访客.svg";
import serviceAvatarURL from "@/assets/images/客服.svg";

export default {
  watch: {
    quickMenuVisible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  components: { LeftRole, RightRole, ChooseEmotion },
  mounted() {
    let that = this;

    // 点击图片放大预览
    window.addEventListener("click", function (e) {
      let { target } = e;
      let nodeName = target.nodeName;

      if (nodeName === "IMG") {
        // 获取自定义的属性 preview
        let preview = target.getAttribute("preview");
        // 无 preview 属性的图片，不支持点击放大预览
        if (!preview) {
          return;
        }
        that.imgSrc = target.currentSrc;
        that.showPreviewImgWin = true;
      }
    });
  },
  data() {
    return {
      ifCan_rollBack: false,
      index: null,
      quickMenu_left: 0,
      quickMenu_top: 0,
      quickMenuVisible: false,
      imgSrc: "",
      showPreviewImgWin: false,
      visitorAvatarURL,
      serviceAvatarURL,
      chatRecordList: [],
    };
  },
  methods: {
    // 撤回消息
    rollBack() {
      this.chatRecordList.splice(this.index, 1);
    },
    // js 点击复制到剪贴板函数
    copy() {
      let content = this.chatRecordList[this.index].content;

      if (window.clipboardData) {
        window.clipboardData.setData("text", content);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(content);
        document.execCommand("Copy");
      }
    },
    // 显示右键快捷菜单
    openMenu(e, index, ifCan_rollBack) {
      this.ifCan_rollBack = ifCan_rollBack;
      this.index = index;
      this.quickMenu_top = e.pageY;
      this.quickMenu_left = e.pageX;
      this.quickMenuVisible = true;
    },
    // 隐藏右键快捷菜单
    closeMenu() {
      this.quickMenuVisible = false;
    },
    // 根据角色，确定编辑框
    getSendContentBox_Ref(role) {
      if (role === "visitor") {
        return "visitorSendContentBox_Ref";
      }
      if (role === "service") {
        return "serviceSendContentBox_Ref";
      }
    },
    // 在编辑框中插入内容
    sendContentBox_insert(role, insertContent) {
      let sendContentBox_Ref = this.getSendContentBox_Ref(role);
      let content = JSON.parse(
        JSON.stringify(this.$refs[sendContentBox_Ref].innerHTML)
      );

      let newContent = "";

      // 光标在编辑框内时
      if (window.getSelection().anchorNode) {
        // 获取光标在编辑框中的下标
        let startIndex = window.getSelection().anchorOffset;
        let ednIndex = window.getSelection().focusOffset;

        newContent =
          content.substring(0, startIndex) +
          insertContent +
          content.substring(ednIndex);
      } else {
        // 光标不在编辑框内时
        newContent = content + insertContent;
      }

      this.$refs[sendContentBox_Ref].innerHTML = newContent;
    },
    chooseEmo(emo, role) {
      this.sendContentBox_insert(role, emo);
    },
    // 访客发送消息
    visitorSend() {
      let content = this.$refs.visitorSendContentBox_Ref.innerHTML;
      if (!content) {
        this.$message({
          message: "请输入发送内容！",
          type: "warning",
        });
        return;
      }

      this.chatRecordList.push({
        role: "访客",
        content: content,
        type: "text",
      });

      // 发送后，清空发送框的内容
      this.$refs.visitorSendContentBox_Ref.innerHTML = "";
    },
    // 客服发送消息
    serviceSend() {
      let content = this.$refs.serviceSendContentBox_Ref.innerHTML;
      if (!content) {
        this.$message({
          message: "请输入发送内容！",
          type: "warning",
        });
        return;
      }

      this.chatRecordList.push({
        role: "客服",
        content: content,
        type: "text",
      });

      // 发送后，清空发送框的内容
      this.$refs.serviceSendContentBox_Ref.innerHTML = "";
    },
    // 选择图片
    chooseImg(role) {
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      // 支持多选
      input.setAttribute("multiple", "multiple");
      input.accept = "image/*";
      input.addEventListener("change", (e) => {
        let file = e.path[0].files[0];
        // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
        const windowURL = window.URL || window.webkitURL;
        // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
        let filePath = windowURL.createObjectURL(file);

        let tmp_imgDom = document.createElement("img");
        tmp_imgDom.setAttribute("src", filePath);
        tmp_imgDom.setAttribute("height", 30);
        tmp_imgDom.setAttribute("preview", true);
        tmp_imgDom.style.cursor = "pointer";

        let tmp_divDom = document.createElement("div");
        tmp_divDom.appendChild(tmp_imgDom);

        that.chatRecordList.push({
          role: role === "visitor" ? "访客" : "客服",
          content: tmp_divDom.innerHTML,
          type: "img",
        });
      });
      input.click();
    },
    // 选择视频
    chooseVideo(role) {
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      // 支持多选
      input.setAttribute("multiple", "multiple");
      input.accept = "video/*";
      input.addEventListener("change", (e) => {
        let file = e.path[0].files[0];
        // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
        const windowURL = window.URL || window.webkitURL;
        // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
        let filePath = windowURL.createObjectURL(file);

        let tmp_videoDom = document.createElement("video");

        tmp_videoDom.setAttribute("src", filePath);
        tmp_videoDom.setAttribute("height", 100);
        tmp_videoDom.setAttribute("controls", "controls");
        tmp_videoDom.style.cursor = "pointer";

        let tmp_divDom = document.createElement("div");
        tmp_divDom.appendChild(tmp_videoDom);

        that.chatRecordList.push({
          role: role === "visitor" ? "访客" : "客服",
          content: tmp_divDom.innerHTML,
          type: "video",
        });
      });
      input.click();
    },

    // 选择音频
    chooseAudio(role) {
      let that = this;
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      // 支持多选
      input.setAttribute("multiple", "multiple");
      input.accept = "audio/*";
      input.addEventListener("change", (e) => {
        let file = e.path[0].files[0];
        // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
        const windowURL = window.URL || window.webkitURL;
        // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
        let filePath = windowURL.createObjectURL(file);

        let tmp_audioDom = document.createElement("audio");

        tmp_audioDom.setAttribute("src", filePath);
        tmp_audioDom.setAttribute("height", 30);
        tmp_audioDom.setAttribute("controls", "controls");
        tmp_audioDom.style.cursor = "pointer";
        let tmp_divDom = document.createElement("div");
        tmp_divDom.appendChild(tmp_audioDom);

        that.chatRecordList.push({
          role: role === "visitor" ? "访客" : "客服",
          content: tmp_divDom.innerHTML,
          type: "audio",
        });
      });
      input.click();
    },
  },
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: space-around;
}
.chatBox {
  width: 400px;
  padding: 10px;
  background: #409eff;
  border-radius: 10px;
}
.chatRecordBox {
  padding: 10px;
  height: 400px;
  border-radius: 10px;
  background: white;
  overflow: auto;
}

.sendContentBox {
  height: 100px;
  padding: 10px;
  background: white;
  overflow: auto;
  border: 1px solid rgb(195, 187, 187);
}
.btnBox {
  padding-top: 10px;
  text-align: right;
}

h1 {
  line-height: 40px;
  font-weight: bold;
}
.toolBox {
  padding: 4px;
  background: white;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

img {
  cursor: pointer !important;
  display: inline-block;
}
.imgIcon {
  margin-left: 4px;
  height: 20px;
  cursor: pointer;
}
.videoIcon {
  width: 22px;
  cursor: pointer;
  margin-left: 4px;
}
.audioIcon {
  width: 18px;
  cursor: pointer;
  margin-left: 4px;
  border-radius: 4px;
}
/* 右键快捷菜单的样式 */
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}
</style>

components/leftRole.vue

<template>
  <div class="leftRoleBox">
    <div>
      <img class="avatar" :src="avatarURL" />
    </div>
    <!-- 左侧的聊天气泡尖角 -->
    <div v-if="type === 'text'" class="triangle-top-left">
      <div class="triangle-top-left2"></div>
    </div>
    <!-- 聊天气泡 -->
    <div
      @contextmenu.prevent="openMenu($event)"
      v-html="content"
      :class="type === 'text' ? 'bubble-left' : 'multimediaBox'"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    content: String,
    avatarURL: String,
  },
  methods: {
    openMenu(e) {
      this.$emit("openMenu", e);
    },
  },
};
</script>

<style scoped>
.leftRoleBox {
  display: flex;
  align-items: flex-start;
}

.avatar {
  width: 30px;
}

.triangle-top-left {
  position: relative;
  border-top: 4px solid #409eff;
  border-left: 4px solid transparent;
  margin-top: 20px;
  margin-left: 2px;
}

.triangle-top-left2 {
  top: -2px;
  left: 0px;
  position: absolute;
  border-top: 4px solid #ffffff;
  border-left: 4px solid transparent;
}

.bubble-left {
  text-align: justify;
  border-radius: 4px;
  padding: 4px;
  border: 2px solid #409eff;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px;
}

.multimediaBox {
  padding: 10px;
}
</style>

components/rightRole.vue

<template>
  <div class="rightRoleBox">
    <div>
      <img class="avatar" :src="avatarURL" />
    </div>

    <!-- 左侧的聊天气泡尖角 -->
    <div v-if="type === 'text'" class="triangle-top-right">
      <div class="triangle-top-right2"></div>
    </div>
    <!-- 聊天气泡 -->
    <div
      @contextmenu.prevent="openMenu($event)"
      v-html="content"
      :class="type === 'text' ? 'bubble-right' : 'multimediaBox'"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    content: String,
    avatarURL: String,
  },
  methods: {
    openMenu(e) {
      this.$emit("openMenu", e);
    },
  },
};
</script>

<style scoped>
.rightRoleBox {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
}

.avatar {
  width: 30px;
}

.triangle-top-right {
  position: relative;
  border-top: 4px solid #409eff;
  border-right: 4px solid transparent;
  margin-top: 20px;
  margin-right: 2px;
}

.triangle-top-right2 {
  top: -2px;
  right: 0px;
  position: absolute;
  border-top: 4px solid #ffffff;
  border-right: 4px solid transparent;
}

.bubble-right {
  text-align: justify;
  border-radius: 4px;
  padding: 4px;
  border: 2px solid #409eff;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px;
}
.multimediaBox {
  padding: 10px;
}
</style>

components/chooseEmotion.vue

<template>
  <div class="chatIcon">
    <el-popover placement="top-start" width="400" trigger="hover">
      <div class="emotionList">
        <a
          href="javascript:void(0);"
          @click="getEmo(index)"
          v-for="(item, index) in faceList"
          :key="index"
          class="emotionItem"
          >{{ item }}</a
        >
      </div>
      <img height="20" slot="reference" src="@/assets/images/表情.svg" />
    </el-popover>
  </div>
</template>
<script>
import emojiData from "@/assets/data/emoji.json";
export default {
  mounted() {
    for (let i in emojiData) {
      this.faceList.push(emojiData[i].char);
    }
  },
  data() {
    return {
      faceList: [],
    };
  },
  methods: {
    getEmo(index) {
      this.$emit("getEmo", this.faceList[index]);
    },
  },
};
</script>

  
<style scoped>
.chatIcon {
  font-size: 25px;
}
.emotionList {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.emotionItem {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}
</style>

src\assets\data\emoji.json

[
  {
    "codes": "1F600",
    "char": "😀",
    "name": "grinning face"
  },
  {
    "codes": "1F603",
    "char": "😃",
    "name": "grinning face with big eyes"
  },
  {
    "codes": "1F604",
    "char": "😄",
    "name": "grinning face with smiling eyes"
  },
  {
    "codes": "1F601",
    "char": "😁",
    "name": "beaming face with smiling eyes"
  },
  {
    "codes": "1F606",
    "char": "😆",
    "name": "grinning squinting face"
  },
  {
    "codes": "1F605",
    "char": "😅",
    "name": "grinning face with sweat"
  },
  {
    "codes": "1F923",
    "char": "🤣",
    "name": "rolling on the floor laughing"
  },
  {
    "codes": "1F602",
    "char": "😂",
    "name": "face with tears of joy"
  },
  {
    "codes": "1F642",
    "char": "🙂",
    "name": "slightly smiling face"
  },
  {
    "codes": "1F643",
    "char": "🙃",
    "name": "upside-down face"
  },
  {
    "codes": "1F609",
    "char": "😉",
    "name": "winking face"
  },
  {
    "codes": "1F60A",
    "char": "😊",
    "name": "smiling face with smiling eyes"
  },
  {
    "codes": "1F607",
    "char": "😇",
    "name": "smiling face with halo"
  },
  {
    "codes": "1F970",
    "char": "🥰",
    "name": "smiling face with hearts"
  },
  {
    "codes": "1F60D",
    "char": "😍",
    "name": "smiling face with heart-eyes"
  },
  {
    "codes": "1F929",
    "char": "🤩",
    "name": "star-struck"
  },
  {
    "codes": "1F618",
    "char": "😘",
    "name": "face blowing a kiss"
  },
  {
    "codes": "1F617",
    "char": "😗",
    "name": "kissing face"
  },
  {
    "codes": "1F61A",
    "char": "😚",
    "name": "kissing face with closed eyes"
  },
  {
    "codes": "1F619",
    "char": "😙",
    "name": "kissing face with smiling eyes"
  },
  {
    "codes": "1F44B",
    "char": "👋",
    "name": "waving hand"
  },
  {
    "codes": "1F91A",
    "char": "🤚",
    "name": "raised back of hand"
  },
  {
    "codes": "1F590",
    "char": "🖐",
    "name": "hand with fingers splayed"
  },
  {
    "codes": "270B",
    "char": "✋",
    "name": "raised hand"
  },
  {
    "codes": "1F596",
    "char": "🖖",
    "name": "vulcan salute"
  },
  {
    "codes": "1F44C",
    "char": "👌",
    "name": "OK hand"
  },
  {
    "codes": "1F90F",
    "char": "🤏",
    "name": "pinching hand"
  },
  {
    "codes": "270C",
    "char": "✌",
    "name": "victory hand"
  },
  {
    "codes": "1F91E",
    "char": "🤞",
    "name": "crossed fingers"
  },
  {
    "codes": "1F91F",
    "char": "🤟",
    "name": "love-you gesture"
  },
  {
    "codes": "1F918",
    "char": "🤘",
    "name": "sign of the horns"
  },
  {
    "codes": "1F919",
    "char": "🤙",
    "name": "call me hand"
  },
  {
    "codes": "1F448",
    "char": "👈",
    "name": "backhand index pointing left"
  },
  {
    "codes": "1F449",
    "char": "👉",
    "name": "backhand index pointing right"
  },
  {
    "codes": "1F446",
    "char": "👆",
    "name": "backhand index pointing up"
  },
  {
    "codes": "1F595",
    "char": "🖕",
    "name": "middle finger"
  },
  {
    "codes": "1F447",
    "char": "👇",
    "name": "backhand index pointing down"
  },
  {
    "codes": "261D FE0F",
    "char": "☝️",
    "name": "index pointing up"
  },
  {
    "codes": "1F44D",
    "char": "👍",
    "name": "thumbs up"
  },
  {
    "codes": "1F44E",
    "char": "👎",
    "name": "thumbs down"
  },
  {
    "codes": "270A",
    "char": "✊",
    "name": "raised fist"
  },
  {
    "codes": "1F44A",
    "char": "👊",
    "name": "oncoming fist"
  },
  {
    "codes": "1F91B",
    "char": "🤛",
    "name": "left-facing fist"
  },
  {
    "codes": "1F91C",
    "char": "🤜",
    "name": "right-facing fist"
  }
]

配套图片素材下载

链接：https://pan.baidu.com/s/170pb-MJlMxG2nRj_3Y2VFw?pwd=oknr

提取码：oknr

文章标签：
客服工作台
JavaScript
关键词：
图片VUE.js
实战图片VUE.js
自定义VUE.js
vue自定义VUE.js
vue实战VUE.js
朝阳39
目录
相关文章
朝阳39
|
2天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
朝阳39
8 2
朝阳39
|
2天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
朝阳39
8 2
Star时光
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架：组件化开发利于重用与扩展，响应式数据绑定简化状态管理；学习曲线平缓，生态系统丰富，集成便捷，且具性能优化手段。缺点包括社区规模相对小，类型支持不足（Vue 3.x改善），路由和状态管理需额外配置，SEO支持有限。随着发展，部分缺点正被克服。
Star时光
7 1
爱你三千遍斯塔克
|
2天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
爱你三千遍斯塔克
10 1
爱你三千遍斯塔克
|
2天前
|
JavaScript
青戈大佬安装Vue，无Eslint安装版，vue2安装，vue2无eslint，最简单配置Vue安装资料
青戈大佬安装Vue，无Eslint安装版，vue2安装，vue2无eslint，最简单配置Vue安装资料
爱你三千遍斯塔克
9 1
爱你三千遍斯塔克
|
2天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
爱你三千遍斯塔克
10 0
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
小周sir
|
1天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具（npm, webpack, Git）。 - 从Vue官方文档学习基础，包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex，掌握路由管理和状态管理。 - 学习自定义指令和Mixins，优化性能技巧。 - 实战项目练习，加入Vue社区，阅读相关资源，提升技能。 - 关注Vue生态，持续实践和创新，以适应不断发展的框架。
小周sir
5 0
朝阳39
|
2天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
朝阳39
8 0
朝阳39
|
2天前
vue3【实战】可撤销重做的 input 输入框
vue3【实战】可撤销重做的 input 输入框
朝阳39
7 0
wishCoding
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
wishCoding
10 0

热门文章

最新文章

  • 1
    vue项目中引入字体库（icon）（详细步骤）
  • 2
    Vue3：elementplus输入框去掉边框及缩放
  • 3
    (踩坑篇)vue element-ui resetForm()表单重置失效的问题
  • 4
    VUE的ajax拦截器
  • 5
    vue3学习：:deep()深度选择器的用法
  • 6
    Vue工具和生态系统： Vue.js和TypeScript可以一起使用吗？
  • 7
    vue echarts图表自适应屏幕变化
  • 8
    VUE3（三十三）vue实现上拉加载下一页
  • 9
    Vue 父组件传值子组件无效2
  • 10
    Vue——多页面不共用token进行拦截
  • 1
    使用Vue.js构建交互式前端的技术探索
    41
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    89
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    70
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    59
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    48
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    52
  • 7
    vue3中使用动态组件
    54
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    67
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    36
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    53

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • QQ移动页面框架优化实践

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • 快速实现摄像头视频画面的远程预览
  • ROS模板参数动态展示
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）