技术小新Nora-CSDN博客

原创 vue项目里修改vue-quill-editor中插入视频，用video标签替换iframe

项目场景：vue-quill-editor是常用的富文本编辑器插件，内置的video模块是使用iframe标签，但是目前遇到的问题的是竖屏的视频不能正确的展示，要设置iframe内的video宽高为100%才行，所以想要video标签来替换iframe。问题描述：视频控件不能完整展示,video标签的宽高设为100%之后也不能满足需求，查了资料之后决定采用video标签。解决方案：首先在vue工程目录下创建quill文件夹及文件：src/quill/video.jsimport { Quill

2020-11-24 15:04:28 4539 5

转载基于vue-simple-uploader封装文件分片上传组件

基于vue-simple-uploader封装文件分片上传组件

2024-03-06 11:00:57 87

原创 vue-quill-editor富文本编辑器，设置只读/禁止编辑

<quill-editor ref="quillEditor" v-model="formData.content" @focus="focus($event)" //在焦点事件时候处理 :options="options"/>当用户点击富文本框输入框的时候，就会被设置为禁止编辑//获取焦点事件 focus(event){ event.enable(false); //设置富文本编辑器不可编辑 }...

2020-11-26 12:33:42 13601 1

原创 vue中plop-templates自动创建项目文件

前言：现在的项目是用vue-element-admin模板进行二次开发，只保留了基本框架。突然发现目录中有个plop-template文件夹，之前没有注意过，也不清楚是用来做什么的。du娘告诉我原来是自动创建项目文件用的。1.之前创建新文件都是鼠标右键新建一个new文件，然后输入vue，选择生成一个最简单的模板，但是生命周期的钩子函数还是得自己输入。2.添加plop-template的方式①在项目跟目录下创建plopfile.js文件，添加如图代码const viewGenerator =

2020-11-24 12:02:45 2693

原创 vue项目中引用富文本编辑器vue-quill-editor

1.安装依赖npm install vue-quill-editor --save2.使用（1）引入import { quillEditor } from "vue-quill-editor";import { Quill } from "vue-quill-editor";import "quill/dist/quill.core.css"; // import stylesimport "quill/dist/quill.snow.css"; // for snow themeimport

2020-11-24 11:57:47 1082

原创 vue中实现音频播放进度条组件

vue中实现音频进度条前言scss部分逻辑部分前言业务需要，实现一个录音播放功能，可以拖动进度条，快进，快退，播放暂停。最终效果如下：<template> <div class="player">  <div class="progress-wrapper"> <div class="progress-bar-wrapper"> <div class="progr

2020-06-15 16:03:23 5122 5