随笔分类 - vue
摘要：前言 最新项目里使用到了拖拽的功能，查阅资料后，看到一篇关于拖拽的详细文章：https://www.cnblogs.com/xiaohuochai/p/5886618.html 基于此，记录下 vue 实现拖拽的过程，以下是编写的示例demo效果图： 设置拖拽时，需要拖拽的元素要设置 draggab
阅读全文
摘要：前言 项目里有时候使用到类似于收缩展开的功能，不设置动画会显得过程很生硬，记录下项目里有使用过的收缩展开的动画实现方式。 方式一：element UI 的折叠动画 如果项目使用到 element UI 可以引入如下组件，实现动画效果： 1、引入组件 import 'element-ui/lib/th
阅读全文
摘要：实现效果 实现步骤 新建一个 drag.js 注册拖拽指令 import Vue from 'vue'; //使用Vue.directive()定义一个全局指令 //1.参数一：指令的名称，定义时指令前面不需要写v- //2.参数二：是一个对象，该对象中有相关的操作函数 //3.在调用的时候必须写v
阅读全文
摘要：前言 很多项目中都有侧边栏，记录下实现侧边栏伸缩和展开的实现过程以及一些优化细节。 最终实现效果如图所示： 整体布局 layout.vue <template> <el-container> <!-- 头部 --> <el-header> <f-header></f-header> </el-hea
阅读全文
摘要：前言 全屏效果： 实现 安装依赖包 npm i @vueuse/core 调用 import {useFullscreen} from '@vueuse/core' useFullscreen 的使用文档：https://vueuse.org/core/useFullscreen/#usefulls
阅读全文
摘要：前言 使用了 vue-elementUI-admin 框架的时候，遇到了一个问题，这个问题有时候会出现有时候不会出现，很迷，在此记录一下解决的方法。具体报错截图如下： 原因及解决方法 解决方法： 其实就是把写法改变一下就没有这个报错了。 // Message.error(error || 'Has
阅读全文
摘要：前言 项目使用到 swiper 插件实现轮播图的功能，引入插件放上数据后，设置自动播放，但是发现没起效果，手动拖动可以 解决方法 安装指定版本 可以安装以下版本的，设置自动播放没有问题正常滚动 "swiper": "^6.2.0" 引入: <template> <div class="swiper-
阅读全文
摘要：前言 开发项目中，使用到 Eruda 打印控制台信息显示 文档：https://github.com/liriliri/eruda 安装 Eruda npm install eruda --save 引入 import eruda from "eruda"; 常使用方法 显示 eruda.show(
阅读全文
摘要：前言 将 markdown 字符串转成 html 显示出来，同时把目录也提取出来一起显示。可以使用 marked 来读取 markdown 字符串解析成 html marked官网：https://marked.js.org/ marked 安装 使用 marked 前需要对其进行安装 npm in
阅读全文
摘要：前言 项目里使用到 monaco-editor 编辑器，实现源码编辑器，看了很多网上教程，记录一下实现过程。在此之前引用很多博主的方法安装但是引入的时候，运行项目总是各种各样的错误，找不到头绪。终于在搜索文章的时候，看到里面的运行错误我也遇到过：来源 看到下面的评论，我也尝试着安装，版本号对应上就可
阅读全文
