Vue,JavaScript框架,前端开发框架,Vue问题集合

vue-quill-editor富文本编辑器工具栏汉化教程

效果：vue-quill-editor默认是英文的工具栏，为了方便用户使用个体验，我们可以对它进行汉化。我们通过css样式来对富文本编辑器进行汉化，具体代码如下：<style> .ql-snow .ql-tooltip[data-mode=link]::before { ;;;content: "请输入链接地址:" !important; ;} ;.ql-snow .ql-tooltip.ql-editing a.ql-action::after { ;;;;;border-right: 0px !important; ;;;;;content: '保存' !important; ;;;;;padding-right: 0px !important; ;} ; ;.ql-snow .ql-tooltip[data-mode=video]::before { ;;;;;content: "请输入视频地址:" !import

解决Vue ui安装less和less-loader版本过高不可以用问题

2021-08-13

259 0

Vue ui可视化界面中直接安装less和less-loader依赖会发现可以安装成功，但是后续使用的时候会提示less-loader版本过高问题解决方法1. 对于less可以直接在可视化界面中安装即可2、less-loader已安装可以卸载，再次安装指定版本cnpm install less-loader@7.1.0 --save-dev 安装好之后就不再报错了，在vue ui面板也可以看到依赖。

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件

2021-08-12

204 0

vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。1、进入node.js的安装目录中查看一级目录下是否存在vue.cmd指令2、安装vue uinpm install -g vue npm install -g @vue/cli 3、安装完成后，通过如下任意指令查看vue的版本：vue --version / vue -V 4、在此运行vue ui，成功运行

Vue+ElementUI表格实现点击图片预览功能

2021-08-06

252 0

功能描述：用户点击表格列表其中一张图片，显示弹窗，并显示图片。实现思路：给图片添加点击事件，点击图片获取图片url，展示图片效果展示：实现代码：1、给表格列图片添加点击事件，传递参数<template> <el-table :data="VipList" border stripe @selection-change="handleSelectionChange" v-loading="loading"> <el-table-column align="center" type="selection" width="55"></el-table-column> <el-table-column label="ID" prop="id" min-width="50"></el-table-column> <el-table-

Vue+ElementUI实现点击按钮刷新页面

2021-08-06

248 0

vue中ElementUI刷新页面代码html按钮代码<template> <div> <a href="javascript:;" title="刷新" class="refresh" @click="refresh()"><i class="el-icon-refresh-left"></i></a> </div> <template> js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()<script> export default { methods: { ; // 刷新 ; refresh(){ ; ;this.$router.go(0) ; ;//或 ; ;window.location.reload() ; } } } </script>

Vue+ElementUI实现点击按钮全屏功能

2021-08-05

284 0

用vue做网站后台的时候，我们有时需要做个点击按钮进入全屏的功能，以下是个案例，共大家参考。按钮模块代码<template> <div> <a href="javascript:;" title="全屏" @click="screen()"><i class="iconfont icon-quanping"></i></a> </div> </template> js部分代码：<script> ;;export default { ;;;;data(){ ;;;;;;return{ ;;;;;;;;//全屏 ;;;;;;;;fullscreen: false, ;;;;;;} ;;;;}, } ;;;;;;screen(){ ;;;;;;;;let element = document.documentElement; ;;;;;;;;;;if (this.fu

vue部署项目实现子目录访问方法

2021-08-04

173 0

前后端分离，使用同个域名，比如首页使用www.example.com，后台使用www.example.com/admin访问。1、修改路由文件下的index.js，加入base:'/admin/',代码const router = new VueRouter({ ;base:'/admin/', ;routes }) 2、vue.config.js增加如下配置：publicPath: '/admin/' 3、配置好之后，打包项目npm run build 4、服务端新增目录admin，将前端文件上传至该目录即可。

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

2021-08-03

236 0

vue-quill-editor有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。所以我们需要自定义图片上传，把图片上传到服务器的形式。1、;安装富文本编辑器npm install vue-quill-editor –save 2、;main.js引入编辑器import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor); import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' 3、;html代码模块<template> ;;;<div> ;;;;;;;;;;;;;<el-upload ;;;;;;;;;;;;;;clas

Vue ElementUI如何使用组件，组件的使用方法实例

2021-07-25

316 0

开发项目过程中，涉及重复的代码，比如模态窗，我们可以封装起来，然后采用组件的形式，引入即可，这样也方便维护。以下我们来封装Dialog 对话框组件1、创建Dialog组件我们在项目目录下创建\src\components\Dialog.vue<template> <el-dialog;title="提示";:visible.sync="DialogVisible";width="30%";@close="DialogClosed";> ;;<span>这是一段信息</span> ;;<span;slot="footer";class="dialog-footer"> ;;;;<el-button;@click=&quo

Vue组件如何赋值给父组件

2021-07-24

280 0

在vue项目开发中，我们遇到重复的代码，就可以封装成组件，这就设计到组件之间的获取值和赋值问题，我们可以通过以下方式传递值给父组件页面。1、子组件赋值：使用this.$emit()this.$emit('tran','Hello;Word')2、父组件页面绑定方法获取值<UploadPhotos;ref="showUpload";@tran="getUser"></UploadPhotos>3、父组件获取到值之后赋值<script> export;default;{ ;;data;();{ ;;;;return;{ ;;;;;;addForm:;{ ;;;;;;;;ad_img:;'', ;;;;;;}, ;; ;;;;} ;;}, ;;compon

vue-quill-editor安装多图上传插件

2021-07-24

235 0

vue-quill-editor的是使用、安装这里不多说，需要的话可以使用参考这篇文章vue-quill-editor默认只能使用单图上传，很不方便，这里教大家如何安装多图上传插件quill-image-drop-module，就可多张拖拽上传1、;安装npm;install;quill-image-drop-module2、页面引入import;{;ImageDrop;};from;'quill-image-drop-module'; Quill.register('modules/imageDrop',;ImageDrop);在editorOption的modules里配置：imageDrop:true,

关于vue echarts二次渲染不渲染问题的解决方法

2021-07-20

333 0

vue中用了echarts数据统计图，发现动态赋值不显示，对于不渲染问题，我们只需在methods方法下重新渲染即可解决该问题前端代码：<template> ;;;;<div> <div;id="main";style="width:;100%;height:545px;"></div> <div> <template>js代码：<script> import;*;as;echarts;from;'echarts'; ;;methods:;{ ;;;;async;getSys;();{ ;;;;;;const;{;data:;res;};=;await;this.$http.get('system') ;;;;;;if;(res.code;!=;200);{ ;;;;;;;;;;;this.$me

vue ElementUI使用时间日期、时间选择器的使用方法

2021-07-20

231 0

效果展示：vue ElementUI提供了三种时间日期1、TimePicker 时间选择器：用于选择或输入日期2、DatePicker 日期选择器：用于选择或输入日期3、DateTimePicker：日期时间选择器，在同一个选择器里选择日期和时间本文主要用到DateTimePicker 日期时间选择器<template> ;;;;<div> <el-form-item;label="时间";prop="addtime"> <el-date-picker;v-model="addForm.addtime";type="datetime";placeholder="选择日期时间";format="yyyy-MM-dd;HH:mm:ss&quo

解决vue-animate-number后端返回数据不渲染问题

2021-07-19

210 0

最近开发中用到了vue-animate-number组件，发现数据不能通过接口返回的值自动渲染。代码如下<animate-number;from="0";:to="countArt";duration="1000"></animate-number>看似没什么问题，后面才发现没加上:key="countArt"的原因，加上之后就能正确渲染了<animate-number;from="0";:to="countArt";:key="countArt";duration="1000"></animate-number>

Vue+elementUI如何使用文件Upload 上传文件

2021-07-18

293 0

vue+elementUI实现上传案例实现对图片进行移除、上传、修改、点击图片对图片进行预览1、html代码部分<template> ;;;;<div> ;;;;;;;;;;;;<el-form;:model="setupForm";ref="setupFormRef";label-width="100px"> <el-form-item;label="登录LOGO";prop="logo"> <el-upload;:action="uploadURL";:on-preview="handlePreview" :on-remove="handleEditRemove2";list-type="picture";:headers=&quo

Vue ElementUI 表格实现loading加载动画效果

2021-07-16

380 0

我们在使用表格的时候，有时由于后端接口或者是网络慢等问题，会出现请求接口数据慢问题，这时我们就可以给表格<el-table>加个loading加载动画，接口请求成功之后再关闭loading动画效果。ElementUI表格动画主要用到v-loading="loading"1、首先在表格中加入属性：v-loading="loading";<template> ;;;;<div> <el-table;:data="UserList";border;stripe;;v-loading="loading"> ;;;;;;;;;;;;;;;;<el-table-column;label="ID";prop="id";min-wid

vue ElementUI Cascader 级联选择器使用方法

2021-07-16

323 0

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。1、前端代码：;<template> ;;;;<div> <el-form-item;label="所属菜单";prop="pid"> <el-cascader;expand-trigger="hover";:options="parentCateList";:props="cascaderProps";v-model="selectedKeys";@change="parentCateChanged";clearable;;change-on-select;placeholder="顶级菜单"></el-cascader> </el-form-item> </div>

vue-table-with-tree-grid参数大全、参数配置

2021-07-15

212 0

vue-table-with-tree-grid参数大全、参数配置，供大家参考使用1、安装：npm:npm;i;vue-table-with-tree-grid;-Syarn:yarn;add;vue-table-with-tree-grid2、引入Vue.use(ZkTable)Orimport;Vue;from;'vue' import;ZkTable;from;'vue-table-with-tree-grid' ; Vue.component(ZkTable.name,;ZkTable)3、API参数：属性说明类型参数默认值data表格各行的数据Array-[]empty-text表格数据为空时显示的文字String-'暂无数据'columns表格各列的配置（具体见下文：Columns Configs）Array-[]show-header是否显示表头Boole

vue-animate-number数字滚动插件的使用

2021-07-13

390 0

vue中加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件，介绍给大家1、安装vue-animate-number插件npm;install;vue-animate-number2、引入插件，在main.js中引入import;VueAnimateNumber;from;'vue-animate-number'; Vue.use(VueAnimateNumber)3、使用方法<animate-number;from="0";:to="20";duration="1000"></animate-number>4、案例<template> ;;;;<div> ;;;;;;;;<el-row;:gutter="20"> ;;;;;;;;;;;;<el-col;:span="

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

2021-07-10

262 0

在vscode中添加.vue文件自动补全插件：1、安装插件：HTML Snippets，搜索我们要安装的插件2、安装成功之后，配置插件：右击右下角的设置按钮-setting3、搜索配置：files.associations，并新增配置4、添加*.vue和html，如下图这样vue文件就能自动补全代码了。

vue安装Vant前端UI框架及使用教程

2021-05-02

471 0

Vant，轻量、可靠的移动端 Vue 组件库，Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。特性：提供 60 多个高质量组件，覆盖移动端各类场景性能极佳，组件平均体积不到 1kb（min+gzip）单元测试覆盖率 90%+，提供稳定性保障完善的中英文文档和示例支持 Vue 2 & Vue 3支持按需引入支持主题定制支持国际化支持 TypeScript支持 SSR如何安装Vant框架呢？接下来我们就来安装这个UI框架在现有项目中使用 Vant 时，可

vue-quill-editor富文本编辑器工具栏汉化教程

解决Vue ui安装less和less-loader版本过高不可以用问题

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件

Vue+ElementUI表格实现点击图片预览功能

Vue+ElementUI实现点击按钮刷新页面

Vue+ElementUI实现点击按钮全屏功能

vue部署项目实现子目录访问方法

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

Vue ElementUI如何使用组件，组件的使用方法实例

Vue组件如何赋值给父组件

vue-quill-editor安装多图上传插件

关于vue echarts二次渲染不渲染问题的解决方法

vue ElementUI使用时间日期、时间选择器的使用方法

解决vue-animate-number后端返回数据不渲染问题

Vue+elementUI如何使用文件Upload 上传文件

Vue ElementUI 表格实现loading加载动画效果

vue ElementUI Cascader 级联选择器使用方法

vue-table-with-tree-grid参数大全、参数配置

vue-animate-number数字滚动插件的使用

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

vue安装Vant前端UI框架及使用教程

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

vue-quill-editor富文本编辑器工具栏汉化教程

解决Vue ui安装less和less-loader版本过高不可以用问题

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件

Vue+ElementUI表格实现点击图片预览功能

Vue+ElementUI实现点击按钮刷新页面

Vue+ElementUI实现点击按钮全屏功能

vue部署项目实现子目录访问方法

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

Vue ElementUI如何使用组件，组件的使用方法实例

Vue组件如何赋值给父组件

vue-quill-editor安装多图上传插件

关于vue echarts二次渲染不渲染问题的解决方法

vue ElementUI使用时间日期、时间选择器的使用方法

解决vue-animate-number后端返回数据不渲染问题

Vue+elementUI如何使用文件Upload 上传文件

Vue ElementUI 表格实现loading加载动画效果

vue ElementUI Cascader 级联选择器使用方法

vue-table-with-tree-grid参数大全、参数配置

vue-animate-number数字滚动插件的使用

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

vue安装Vant前端UI框架及使用教程

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件