vue-quill-editor和vue-ueditor-wrap富文本编辑器应用

目录

一、vue-quill-editor

1.1、界面展示

1.2、代码介绍

1.2.1、安装

1.2.2、配置

1.2.3、代码应用

1.2.4、提取内容

二、vue-ueditor-wrap

2.1、界面展示

2.2、代码介绍

2.2.1、安装

2.2.2、配置

2.2.3、代码应用

一、vue-quill-editor

1.1、界面展示

文本输出：

<h1>字体大小测试</h1><ol><li><span class="ql-size-14px">14px测试</span></li><li><span class="ql-size-16px">16px测试</span></li><li><span class="ql-size-18px">18px测试</span></li><li><span class="ql-size-20px">20px测试</span></li><li><span class="ql-size-26px">26px测试</span></li><li><span class="ql-size-28px">28px测试</span></li></ol><p><span class="ql-size-28px"><span class="ql-cursor"> </span></span><img src="http://xxx.com/var/2024/0321/d62a0ccc-c436-4a29-9818-566bd2ce43ac.png"></p>

1.2、代码介绍

1.2.1、安装

cnpm install vue-quill-editor

cnpm install quill

1.2.2、配置

写在vue界面的<script>标签之后，export default{...}之前

import { quillEditor } from "vue-quill-editor";
import Quill from "quill";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import { addQuillTitle } from "../../../utils/qulEditor.js";
import "./quillEditor.css";
// 设置字体
const fontFamily = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
var Font = Quill.import("formats/font");
Font.whitelist = fontFamily;
Quill.register(Font, true);
// 设置字体大小
const fontSize = [
  "14px",
  "16px",
  "18px",
  "20px",
  "22px",
  "26px",
  "28px",
  "30px",
];
var Size = Quill.import("formats/size");
Size.whitelist = fontSize;
Quill.register(Size, true);

quillEditor.css内的样式

其中的 content: "14PX";原本是小写px，如果项目里有px To rem插件，建议手动改为大写字母，防止头部出现rem的字号下拉栏。

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体";
    font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑";
    font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体";
    font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋";
    font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial";
    font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}

.ql-font-SimSun {
    font-family: "SimSun";
}

.ql-font-SimHei {
    font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
    font-family: "KaiTi";
}

.ql-font-FangSong {
    font-family: "FangSong";
}

.ql-font-Arial {
    font-family: "Arial";
}

.ql-font-Times-New-Roman {
    font-family: "Times New Roman";
}

.ql-font-sans-serif {
    font-family: "sans-serif";
}

/* 字号设置 */
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14PX";
    font-size: 14px;
}

.ql-size-14px {
    font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16PX";
    font-size: 16px;
}

.ql-size-16px {
    font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18PX";
    font-size: 18px;
}

.ql-size-18px {
    font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20PX";
    font-size: 20px;
}

.ql-size-20px {
    font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
    content: "22PX";
    font-size: 22px;
}

.ql-size-22px {
    font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
    content: "26PX";
    font-size: 26px;
}

.ql-size-26px {
    font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28PX";
    font-size: 28px;
}

.ql-size-28px {
    font-size: 28px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30PX";
    font-size: 30px;
}

.ql-size-30px {
    font-size: 30px;
}

qulEditor.js内的代码

// 给控件加名字
const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '字体颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
};
export function addQuillTitle() {
    const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect = oToolBar.querySelectorAll('select'),
        aSpan = oToolBar.querySelectorAll('span');
    aButton.forEach((item) => {
        if (item.className === 'ql-script') {
            item.value === 'sub' ? item.title = '下标' : item.title = '上标';
        } else if (item.className === 'ql-indent') {
            item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
        } else if (item.className === 'ql-list') {
            item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表'
        } else if (item.className === 'ql-header') {
            item.value === '1' ? item.title = '标题H1' : item.title = '标题H2';
        } else {
            item.title = titleConfig[item.classList[0]];
        }
    });
    aSelect.forEach((item) => {
        if (item.className != 'ql-color' && item.className != 'ql-background') {
            item.parentNode.title = titleConfig[item.classList[0]];
        }
    });
    aSpan.forEach((item) => {
        if (item.classList[0] === 'ql-color') {
            item.title = titleConfig[item.classList[0]];
        } else if (item.classList[0] === 'ql-background') {
            item.title = titleConfig[item.classList[0]];
        }
    });
}

1.2.3、代码应用

<template></template>内部

    <div class="edit_center">
      <!-- npm install vue-quill-editor -->
      <el-upload
        class="imgUpload"
        :action="'/api/upload/common'"
        :file-list="fileList"
        :on-success="uploadSuccessEdit"
        :show-file-list="false"
        :auto-upload="true"
        :headers="headers"
        :data="{ retainOriginalFileName: false }"
      >
      </el-upload>
      <quillEditor
        ref="quillEditor"
        v-model="defaultMsg"
        class="editor"
        :options="editorOptions"
        @change="onEditorChange($event)"
      />
    </div>

export default{...}内部

  components: {quillEditor},
  data() {
    return {
      fileList: [],
      headers: { "X-Access-Token": sessionStorage.getItem("edb-token") },
      content: "",
      defaultMsg: "",
      editorOptions: {
        theme: "snow",
        placeholder: "请输入正文（标题请用<H1>进行标记）",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], // 引用，代码块
              [{ header: 1 }, { header: 2 }], // 几级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
              [{ script: "sub" }, { script: "super" }], // 下角标，上角标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文字输入方向
              [{ size: fontSize }], // 修改这里为 fontSize 变量，确保正确显示字体大小选项
              [{ font: fontFamily }], // 字体
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 颜色选择
              [{ align: [] }], // 居中
              ["clean"], // 清除样式,
              ["image"], // 上传图片、上传视频
            ],
            // 自定义处理插入图片 转为elementui的upload组件点击上传事件
            handlers: {
              image: function (val) {
                if (val) {
                  document.querySelector(".imgUpload input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  mounted() {
    addQuillTitle(); //鼠标划过添加提示
    // 获取编辑器的工具栏元素
    const toolbar = document.querySelector(".ql-toolbar");
    // 监听滚动事件
    window.addEventListener("scroll", function () {
      if (window.scrollY > 100) {
        // 当滚动超过一定距离时
        toolbar.style.position = "fixed"; // 固定工具栏
        toolbar.style.top = "0";
      } else {
        toolbar.style.position = "static"; // 恢复工具栏原始位置
      }
    });
  },
  methods: {
    //上传图片成功事件
    uploadSuccessEdit(res, file) {
      const quill = this.$refs.quillEditor.quill;
      if (res.code == 200) {
        const length = quill.getSelection().index;
        let prefix = sessionStorage.getItem("img_prefix");
        quill.insertEmbed(length, "image", `${prefix}${res.data.path}`);
        quill.setSelection(length + 1);
      } else {
        this.$message.error("插入图片失败");
      }
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("html", html,"字数统计",text.length);
      this.defaultMsg = html; // 更新内容
    },
}

<style></style>内容

.edit_box {
  height: 90vh;
  background: white;
  padding: 0 20px;
  border-radius: 10px;
  .edit_center {
    padding-top: 10px;
    height: 630px;
    overflow: auto;
    /deep/ .quill-editor {
      height: 100% !important;
      overflow: auto !important;
    }
  }
}

1.2.4、提取内容

     // 创建一个新的div元素
      let div = document.createElement("div");
      div.innerHTML = this.defaultMsg;
      // 提取标题和内容（必须有一级标题才可以发布)
      let noticeTitle = div.querySelector("h1").textContent;
      // let h1Element = div.querySelector("h1");
      // h1Element.remove(); // 移除 h1 元素
      let noticeContent = div.innerHTML; // 获取移除 h1 后的 HTML 内容
      let params = {
        noticeTitle: noticeTitle,
        noticeContent: noticeContent,
      };

二、vue-ueditor-wrap

2.1、界面展示

2.2、代码介绍

2.2.1、安装

cnpm install vue-ueditor-wrap

2.2.2、配置

去git上下载文件夹或者网上搜索相关下载地址，下载好之后文件夹里面大概就是这些文件！

2.2.3、代码应用

<template></template>标签内

  <vue-ueditor-wrap
    ref="ueditorWrap"
    v-model="msg"
    :config="myConfig"
  ></vue-ueditor-wrap>

<script></script>标签后，export default {...}之前

import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
import "../../../static/ueditor/ueditor.config.js";
import "../../../static/ueditor/ueditor.all.js";
import "../../../static/ueditor/kityformula-plugin/addKityFormulaDialog.js";
import "../../../static/ueditor/kityformula-plugin/getKfContent.js";
import "../../../static/ueditor/kityformula-plugin/defaultFilterFix.js";

export default {...}内部

  components: {
    VueUeditorWrap,
  },
  props: {
    defaultMsg: String, //默认值
    selfToolbars: Array, //传入工具栏
  },
  data() {
    return {
      msg: this.defaultMsg,
      myConfig: {
        // 编辑器不自动被内容撑高
        // autoHeightEnabled: true,
        // 初始容器宽度
        initialFrameWidth: "100%",
        focus: true,
        // allowDivTransToP: false,
        // retainOnlyLabelPasted: true,//粘贴只保留标签，去除标签所有属性
        // pasteplain: true,//是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        // 上传文件接口
        serverUrl: "/api/upload/common", //外网
        // serverUrl: "//192.168.142.251:8000/web/ueditor/server", //线上
        // serverUrl: "//192.168.1.27:8000/web/ueditor/server",
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "/static/ueditor/",
        initialFrameHeight: 500, // 设置编辑器的初始高度，单位为像素
        toolbars: [
          [
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            "simpleupload",
            // "insertcode",//代码语言
            "pagebreak",
            "|",
            "horizontal",
            "date",
            "time",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
          ],
        ],
        textarea: "请输入内容...", // 设置默认提示语
        editorInstance: null,
      },
    };
  },
  methods: {
    clearEvent() {
      document.removeEventListener("click", function (e) {
        flag = false;
      });
    },
  },
  watch: {
    msg(newVal, val) {
      this.$emit("ueditorChange", newVal);
    },
  },

上面是组件，用的时候进行引用

 你    <ueditor
        ref="ueditor"
        :defaultMsg="defaultMsg"
        @ueditorBlur="ueditorBlur"
        @ueditorChange="ueditorChange"
      ></ueditor>

el-dialog出现时vue-ueditor-wrap覆盖了el-dialog

    <el-dialog :visible="dialogVisible" @close="handleCloseDialog" :z-index="1000">
      <!-- el-dialog 内容 -->
    </el-dialog>

    <div class="ueditor-wrap" style="z-index: 999;">
      <!-- ueditor 富文本编辑器 -->
    </div>

备注：

  上传的图片一般都会上传到项目的服务器端，使用返回的http地址，否则在直接获取的html内容中src的值会出现很长的base64，不利于内容的保存！上传就看自己项目有没有封装好的组件直接使用就可以，上传地址自己找后端要就可以了！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/490591.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[BT]BUUCTF刷题第8天（3.26）

[BT]BUUCTF刷题第8天（3.26）

第8天 Web [CISCN2019 华北赛区 Day2 Web1]Hack World 题目明确提示flag在flag表里的flag列&#xff0c;这里先尝试1 返回&#xff1a;你好&#xff0c;glzjin想要一个女朋友。 再尝试1&#xff0c;返回bool(false) 到这里就感觉是布尔盲注的题目类型了&#xff08;虽然我没…
阅读更多...
RocketMQ学习笔记：消息存储模型，持久化文件，过期文件删除

RocketMQ学习笔记：消息存储模型，持久化文件，过期文件删除

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、消息存储结构1.1、CommitLog详解1.1.1、CommitLog存储的优点 1.2、ConsumeQueue详解1.3、Index详解 2、持久化文件3、过期文件删除机制3.1、判断过期文件3.2、删除的时机 1、消息存储结构…
阅读更多...
大模型时代的向量数据库：原理解析和应用案例

大模型时代的向量数据库：原理解析和应用案例

大家好&#xff0c;在人工智能领域&#xff0c;数据处理和加工的需求愈发增加。随着人们深入探索AI高级的应用&#xff0c;如图像识别、语音搜索和推荐引擎等&#xff0c;数据的复杂性也在不断地增加。此时传统的数据库存储方式已不能完全满足需求&#xff0c;向量数据库应运而…
阅读更多...
《出海和跨境：明道云HAP支撑全球化业务的能力白皮书》正式发布

《出海和跨境：明道云HAP支撑全球化业务的能力白皮书》正式发布

随着全球化进程的加速&#xff0c;越来越多的企业开始寻求海外市场的拓展机会。然而在出海道路上&#xff0c;企业面临着诸多挑战&#xff0c;比如跨时区的协作困难、文化差异、信息异步、技术障碍等。 明道云HAP作为一款前沿的企业软件产品&#xff0c;致力于赋能企业跨境经营…
阅读更多...
Jwt 报错 ： Cannot resolve method ‘parseClaimsJws‘ in ‘JwtParserBuilder‘

Jwt 报错 ： Cannot resolve method ‘parseClaimsJws‘ in ‘JwtParserBuilder‘

Java 环境 Java 版本&#xff1a; jkd11 jwt依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.12.5</version></dependency>报错如下图所示 解决方法 在pom.xml中把 jjwt 的依…
阅读更多...
2024年【安全员-C证】考试及安全员-C证考试题

2024年【安全员-C证】考试及安全员-C证考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-C证考试根据新安全员-C证考试大纲要求&#xff0c;安全生产模拟考试一点通将安全员-C证模拟考试试题进行汇编&#xff0c;组成一套安全员-C证全真模拟考试试题&#xff0c;学员可通过安全员-C证考试题全真模拟…
阅读更多...
【MySQL】数据库--基础

【MySQL】数据库--基础

目录 一、概念&#xff1a; 二、连接数据库[Dos命令] 三、SQL 语句分类 一、概念&#xff1a; MySQL 是一种开源的关系数据库管理系统 (RDBMS)数据库-表的本质仍然是文件 二、连接数据库[Dos命令] mysql -h&#xff1a;mysql服务的主机&#xff08;默认连接到本机服务器&…
阅读更多...
2024.3.26学习笔记

2024.3.26学习笔记

今日学习韩顺平java0200_韩顺平Java_对象机制练习_哔哩哔哩_bilibili 今日学习p273-p285 包 包的本质实际上就是创建不同的文件夹/目录来保存类文件 包的三大作用 区分相同名字的类 当类很多时&#xff0c;可以很好的管理类 控制访问范围 包的基本语法 package com.xx…
阅读更多...
第九届蓝桥杯大赛个人赛省赛（软件类）真题C 语言 A 组-分数

第九届蓝桥杯大赛个人赛省赛（软件类）真题C 语言 A 组-分数

solution1 直观上的分数处理 #include <iostream> using namespace std; int main() {printf("1048575/524288");return 0; }#include<stdio.h> #include<math.h> typedef long long ll; struct fraction{ll up, down; }; ll gcd(ll a, ll b){if…
阅读更多...
UE5、CesiumForUnreal实现海量POI撒点显示与聚合功能

UE5、CesiumForUnreal实现海量POI撒点显示与聚合功能

1.实现目标 POI是UE+GIS三维场景中经常需要展示的要素，在UE中常用的表示POI方法有两种。一种是Mesh，即空间的方式；另一种是Widget，即屏幕上的方式，本文这里使用的是Widget屏幕展示的形式来表示POI。 本文这里使用的POI点位数量共3.3w+，采用直接网格聚合算法，并进行性能优…
阅读更多...
Excel学习笔记（持续更新-20240326）

Excel学习笔记（持续更新-20240326）

写在前面 Excel的学习心得分享&#xff0c;佛系更新。2024/03/26 目录 Excel每次都是以只读模式打开 给Excel设置“开机密码” 保护你的excel不让别人篡改 1.1Excel每次都是以只读模式打开 背景&#xff1a;如果有个工具&#xff0c;每天都有很多人使用&#xff0c;如果是…
阅读更多...
Spring设计模式-实战篇之单例模式

Spring设计模式-实战篇之单例模式

实现案例&#xff0c;饿汉式 Double-Check机制 synchronized锁 /*** 以饿汉式为例* 使用Double-Check保证线程安全*/ public class Singleton {// 使用volatile保证多线程同一属性的可见性和指令重排序private static volatile Singleton instance;public static Singleton …
阅读更多...
算法系列--动态规划--⼦数组、⼦串系列（数组中连续的⼀段）(1)

算法系列--动态规划--⼦数组、⼦串系列（数组中连续的⼀段）(1)

&#x1f495;"我们好像在池塘的水底&#xff0c;从一个月亮走向另一个月亮。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;算法系列–动态规划–⼦数组、⼦串系列&#xff08;数组中连续的⼀段&#xff09;(1) 大家好,今天为大家带来的是算法系…
阅读更多...
插槽和自定义命令

插槽和自定义命令

自定义指令 自定义的指令,定义好之后,在标签内使用,当执行new Vue去模板的时候,看到自定义指令,会将下面的函数,等到特定执行Vue实例阶段触发.模板渲染之后.当触发时的传参的参数的第一个是所写的对象的DOM对象,第二个是是包含指令的对象,对象value是指令赋值.当把指令写到标签…
阅读更多...
qt生成word文档（wps），代码如下

qt生成word文档（wps），代码如下

这是我自己写的&#xff0c;建议往下滑&#xff0c;大佬写的很清楚&#xff0c;我的代码只是人家的一个摘抄部分 链接&#xff1a;https://pan.baidu.com/s/1MgG_dO8hCUi7ErQnOncNOg?pwd1234 提取码&#xff1a;1234使用方法&#xff1a; #include "ExportReport.h&qu…
阅读更多...
6个步骤轻松实现 postman 接口压力测试（建议收藏）

6个步骤轻松实现 postman 接口压力测试（建议收藏）

这里讲是postman做接口并发测试&#xff0c;基础用法不做赘述 1、第一步接口可以通的情况下点击右上角save 2、将相应信息填入 3、如果是同一个接口修改不同的值如下图 4、点击左上角Runner 5、选择刚才所建接口集合、填入要执行次数 6、查看运行结果 总结&#xff1a; 感谢每…
阅读更多...
24计算机考研调剂 | 【官方】湘潭大学

24计算机考研调剂 | 【官方】湘潭大学

湘潭大学 考研调剂要求 招生专业&#xff1a; 调剂基本要求&#xff1a; &#xff08;1&#xff09;基本要求同《湘潭大学2024年硕士研究生复试录取工作方案》。 &#xff08;2&#xff09;初试成绩要求&#xff1a; 初试成绩各单科均须达到A类考生进入复试的初试成绩基本要…
阅读更多...
代码随想录算法训练营第四十六天|139.单词拆分、56. 携带矿石资源（第八期模拟笔试）

代码随想录算法训练营第四十六天|139.单词拆分、56. 携带矿石资源（第八期模拟笔试）

139.单词拆分 刷题https://leetcode.cn/problems/word-break/description/文章讲解https://programmercarl.com/0139.%E5%8D%95%E8%AF%8D%E6%8B%86%E5%88%86.html视频讲解https://www.bilibili.com/video/BV1pd4y147Rh/?vd_sourceaf4853e80f89e28094a5fe1e220d9062 题解&…
阅读更多...
微服务（基础篇-005-Gateway）

微服务（基础篇-005-Gateway）

目录 Gateway介绍&#xff1a; 为什么需要网关&#xff08;1&#xff09; gateway快速入门&#xff08;2&#xff09; 断言工厂&#xff08;3&#xff09; 过滤器工厂&#xff08;4&#xff09; 过滤器工厂介绍及案例&#xff08;4.1&#xff09; 默认过滤器&#xff08…
阅读更多...
公众号超牛鼻的爆文仿写机器人，原创三篇只需6分钟，篇篇是爆文基因

公众号超牛鼻的爆文仿写机器人，原创三篇只需6分钟，篇篇是爆文基因

大家好&#xff0c;我是大胡子&#xff0c;专注于RPA提效​&#xff0c;今天就介绍一款公众号超牛鼻的爆文仿写机器人​。 和以前的公众号爆文机器人不太一样&#xff0c;以前的爆文机器人需要手动插入图片、添加封面、插入话题&#xff0c;然后今天这个机器人就完全解决这几个…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站