![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 54
李剑一
三年成大牛
展开
-
[问题记录] vue-router中导航守卫默认跳转login失败
在没启动服务的情况下,后台在 router 中并未读取到配置的情况下,应该默认跳转 login 页面。但是页面始终不跳转,并且伴随多个执行错误弹窗。原创 2024-01-10 10:15:09 · 487 阅读 · 0 评论 -
高版本ant-design动态引用icon
高版本ant-design-vue不再支持a-icon组件,个人封装icon组件,通过 type 动态获取图标。原创 2024-01-06 10:11:26 · 772 阅读 · 0 评论 -
loading动效实现
一个非常有趣的loading原创 2023-11-10 10:15:26 · 122 阅读 · 0 评论 -
ant-design-vue中默认展开树节点参数失效
使用ant-design-vue框架,展开下拉树组件中全部树节点。原创 2023-05-19 16:34:36 · 1417 阅读 · 1 评论 -
前端Vue后端Express开发学习01
初始化学习node后端开发,与前端vue联动。解决 axios 访问 express 接口跨域问题。原创 2022-10-21 11:53:08 · 1274 阅读 · 0 评论 -
vue-router中$router和$route的区别
$router 是全局路由对象实例,用于操作路由。$route 是当前路由对象,用于获取当前路由操作信息。原创 2022-10-12 11:07:56 · 301 阅读 · 0 评论 -
vue-router3
Vue.js 官方的路由管理器原创 2022-10-11 21:36:21 · 1001 阅读 · 0 评论 -
vuex3
vuex 是专门为 vue 开发的状态管理模式,它采用集中存储管理应用中所有组件的状态,并根据特定规则响应数据变化。原创 2022-10-11 21:35:34 · 732 阅读 · 0 评论 -
vue水波纹指令
vue2实现一下水波纹指令。在div或者button中,触发点击时,出现水波纹效果。原创 2022-09-29 17:33:08 · 5013 阅读 · 0 评论 -
vue异步组件
vue允许以工厂函数的方式定义组件,这个工厂函数会异步定义组件,在组件需要渲染时才进行加载。原创 2022-08-30 15:10:26 · 3947 阅读 · 0 评论 -
Vue自定义指令
Vue中除框架默认自带的 v-model v-show 等指令外,也允许自定义指令。需要注意的是代码的抽象和复用主要形式是"组件",确实需要对DOM元素底层进行操作时,才推荐使用指令。原创 2022-08-30 15:09:34 · 552 阅读 · 0 评论 -
vue响应式原理
Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。原创 2022-08-30 15:07:29 · 247 阅读 · 0 评论 -
ant-design form表单校验upload组件(附个人封装的上传组件)
ant-design中form表单校验upload组件原创 2022-07-24 21:00:30 · 2845 阅读 · 0 评论 -
vue + less 自定义换肤
效果展示基本原理目前常见的换肤方案无非几种:通过class选择器/id选择器选中需要更换的DOM,直接修改颜色书写多套css,通过js进行css的切换使用modifyVars()方法,修改less.js中相应的less变量更换颜色在这里提供一种新知晓的换肤开发方案方案分享一下:使用less,将其中的颜色提升到全局,各自组件/页面引用‘顶级’颜色,通过js修改顶级颜色达到各模块换肤的目的。开发过程安装及配置npm install style-resources-loader -Dn原创 2022-04-18 20:54:39 · 2122 阅读 · 0 评论 -
vue-quill-editor中绑定enter快捷键失灵
问题发现使用vue-quill-editor 作为聊天工具中输入框使用,有个需求是实现动态配置 enter / ctrl + enter 实现快捷发送消息。但是在实操的过程中发现通过 addBinding 事件绑定不生效。quill.keyboard.addBinding({ key: 'enter'}, function(range, context) { console.log('发送消息');});问题解决vue-quill-editor 中因为enter和ctrl这种特殊的键盘原创 2022-04-07 22:03:20 · 1168 阅读 · 0 评论 -
vue中的可拖拽宽度div
vue中可拖拽宽度的div,横向拖动&纵向拖动原创 2022-04-06 23:23:34 · 2608 阅读 · 5 评论 -
vue中props数据变化的问题
发现问题在vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,发现存在问题,一直监听不到数据的变化,详细排查后发现是因为props在传递数据的时候子组件接收到数据后没有及时发生变化导致的。这里使用的是 iview 框架// 子组件<template> <Modal v-model="isShowModel" title="测试弹窗"> <p>Conte原创 2022-02-22 21:14:47 · 8644 阅读 · 5 评论 -
增强粘贴quill-editor
有功夫的兄弟可以看一下我的博客 www.maple.ink粘贴图片到富文本直接拖拽图片到富文本,或者从系统中复制图片文件,在富文本中粘贴,都无法将图片放入富文本。前者会直接在浏览器中打开新窗口,后者直接无任何反应。通过安装 quill-image-extend-module 增强模块使富文本编辑器具备对图片拖拽放入富文本框的能力,但不具备复制粘贴进入富文本的功能。这里可以配合 quill-image-resize-module 模块设置图片的大小。// 引入图片增强模块import {conta原创 2022-02-19 21:39:54 · 1054 阅读 · 0 评论 -
扩展quill-editor的工具栏
有功夫的兄弟可以看看我的博客 www.maple.ink扩展自定义工具栏增加自定义的 toolbar ,在 mounted 方法中监听DOM节点创建,向内插入图标/文字,即可展示出来。在 handler 对象中增加对上方自定义 toolbar 的监听,触发方法。// 首先在 toolbar 中增加相应的参数,这时在页面中相应的 DOM 结构其实已经创建完成了editorOptions: { modules: { toolbar: { contain原创 2022-02-19 21:37:36 · 1069 阅读 · 0 评论 -
使用vue-qill-editor
有功夫的兄弟可以看看我的博客 www.maple.ink安装&挂载在非Vue项目中可以通过 CDN 的方式引入,但是在Vue项目中更推荐使用 npm 安装的方式进行使用。不甚清楚的地方大家可以查阅翻译的官方文档。npm i vue-quill-editor安装成功后可以选择全局挂载富文本编辑器/组件内挂载两种方式// main.js --- 全局挂载富文本编辑器import VueQuillEditor from 'vue-quill-editor';// 引入相应的css样式原创 2022-02-19 21:35:06 · 539 阅读 · 0 评论 -
百度UEditor编辑器设置工具栏初始值
UEditor编辑器设置工具栏默认值原创 2021-12-10 13:35:29 · 593 阅读 · 0 评论 -
使用ant-design中v-mode和v-decorator冲突问题
项目场景:使用ant-design的form组件:在a-form组件中使用输入框组件时,v-model无法双向绑定数据问题描述:启用v-decorator进行输入框数据校验时,v-model绑定数据无法绑定<a-form :form="form"> <a-form-item label="name"> <a-input v-model="name" v-decorator="['name', { rules: [{原创 2021-11-19 15:14:30 · 1734 阅读 · 0 评论 -
安装less报错TypeError: this.getOptions is not a function
项目场景:使用less开发文件问题描述:less安装报错 Failed to compile with 1 error Syntax Error: TypeError: this.getOptions is not a function 原因分析:当前版本less和less-loader版本不匹配,需要更换less-loader版本解决方案:安装less版本为 4.1.1安装less-loader版本为 7.3.0<style scoped lang="le原创 2021-09-03 18:10:31 · 473 阅读 · 0 评论 -
electron-store存储数据
存储数据我并没有采用数据库方案,仅仅存储数量不多的简单数据也不至于动用数据库。这里选择的是electron-store作为主要存储工具,这个工具即使不作为主要存储工具仅存储用户启动项也是极好的。安装electron-store,如果使用npm安装不成功则使用cnpm安装,总有一款适合你。使用方法:const Store = require('electron-store'); const store = new Store();//如果需要加密存储 就用下面的//const store = n原创 2021-03-10 14:57:16 · 2403 阅读 · 2 评论 -
electron-vue新建窗口
新建窗口依赖于electron中的 BrowserWindow 类,new一个对象后,将该对象用loadURL方法注入页面,即可生成新窗口。当页面需要出现新窗口时,只需要使用ipcRenderer对象的send方法调用即可。function openAddNewWindow() { addNewWindow = new BrowserWindow({ width: 400, height: 550, parent: vipWin, // win是主窗口 frame: f原创 2021-03-10 14:52:45 · 1368 阅读 · 0 评论 -
electron-vue自定义菜单
延续之前承诺的定时喝水的小demo,使用electron-vue搭建的“定时闹钟1.0”版本已经上传到gitee了,有兴趣的同学们可以看看,现在只是1.0版本,很多地方都不完善,也有很多的功能比较粗糙,后续会写一个关于这个小demo的说明简单叙述一下。ok,说回技术本身。首先是electron自定义菜单部分,我是把菜单单独抽出来做的组件,然后插入到页面中去的。找到 项目 > src > main > index.js 中创建窗口的地方,添加 frame:false 属性去除electr原创 2021-03-10 14:43:35 · 931 阅读 · 0 评论 -
element-ui小撸背单词页
最近打算学学英语,想考研究生试试,另外也真是想增长一下见识。ok,废话不多说,上“码”。创建项目,安装element-ui,在main.js文件中引入import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionT原创 2021-02-22 09:28:47 · 380 阅读 · 1 评论 -
Vue-router在cdn和vue-cli两种状态下的用法
在cdn的状态下,可以直接导入vue.js和vue-router.js两个主js模块实现直接使用<head> <meta charset="utf-8"> <title>vueDemo--非cli</title> <!-- vue源文件 --> <script src="https://cdn.jsdelivr.n...原创 2020-02-12 22:23:44 · 2797 阅读 · 3 评论 -
Vue拼图小游戏
创建两个文件,一个是App.vue,另一个是Puzzle.vue,App.vue是主文件,Puzzle.vue是子组件<template> <div> <d-puzzle v-bind="puzzleConfig[leval]" @next="handleNext"/> <button @click="handle...原创 2019-09-20 16:25:09 · 674 阅读 · 0 评论 -
Vue基础知识完成的小dome
使用前面的Vue基础知识完成的小dome非常基础,练手使用Dome简述:通过点击下面的“使劲敲”按钮,将下面的进度条减少,减少到最后,去掉该按钮,同时将上面的图片进行一个变化。点击下面的“重来”按钮将下面的进度条返回原始状态。<div id="main"> <!-- 图片 --> <div id="img_div" v-bind:class="{bur...原创 2019-09-05 10:13:04 · 515 阅读 · 0 评论