随笔分类 -  VUE

1 2 下一页
音乐盒组件Aplayer+Metingjs
摘要：Aplayer 🍭 Wow, such a beautiful HTML5 music player(哇，好漂亮的HTML5音乐播放器) Aplayer是一个功能强大的HTML5音乐播放器 Aplayer官网文档：https://aplayer.js.org/#/ Metingjs Metingj 阅读全文
posted @ 2024-04-19 02:07 李云蹊 阅读(540) 评论(0) 推荐(0)
vue中使用aplayer插件做一个网页音乐播放器
摘要：我们在浏览网页的时候，时常会看到一些网页音乐播放器，本文以vue为例，使用aplayer插件，做一个简单的网页播放器。我们先看一下效果图 效果图 正常模式 吸底模式 当然还有迷你模式，就是能隐藏的都隐藏，这里不赘述，做相应配置就会出现对应效果。 注意，吸底模式会出现上一曲下一曲按钮，以及歌词按钮。正 阅读全文
posted @ 2024-04-19 00:08 李云蹊 阅读(982) 评论(0) 推荐(1)
Vue的class类面向对象
摘要：一. 准备工作 JavaScript 语言中，生成实例对象的传统方法是通过构造函数 function Animal(name,age){ this.name = name; this.age = age; } Animal.prototype.showName = function(){ conso 阅读全文
posted @ 2024-04-18 17:42 李云蹊 阅读(461) 评论(0) 推荐(0)
vue中websocket的使用---详解
摘要：一、什么是webscoket WebSockets 是一种先进的技术，它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API，可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。 WebSockets 这种技术中有一个接口名为WebSocket，它是一个用于连 阅读全文
posted @ 2024-04-17 16:24 李云蹊 阅读(7419) 评论(1) 推荐(1)
vue3使用v-viewer图片预览工具
摘要：v-viewer中文文档 安装 npm install v-viewer@next 全局注册 main.js文件中 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' const app = createApp(App) / 阅读全文
posted @ 2024-04-11 17:20 李云蹊 阅读(5094) 评论(0) 推荐(0)
vue项目实现PC端各分辨率适配
摘要：最近做项目刚好用到pc端分辨率适配, 在这里分享一下我的做法。 1.先下载需要的插件包 px2rem-loader、postcss-pxtorem npm install px2rem-loader npm install postcss-pxtorem@5.1.1 2. 配置rem.js文件（名称 阅读全文
posted @ 2024-03-11 09:56 李云蹊 阅读(1456) 评论(1) 推荐(0)
cnpm配置
摘要：npm是外国的服务器，访问下载有时会出现问题，可以连接中国本地的镜像服务器 命令行中输入安装镜像服务器 npm install -g cnpm --registry=https://registry.npmmirror.com 用法和指令就是把npm 变成 cnpm cnpm i math --sa 阅读全文
posted @ 2024-03-06 15:29 李云蹊 阅读(177) 评论(0) 推荐(0)
uniapp和vue有什么区别
摘要：uni-app可以编译到（头条，支付宝，微信，QQ，百度）小程序，安卓版，ios版，h5版。通过打包实现一套代码多端运行；vue在web上是为单页应用而生的，在app上，单页应用会卡死。uni-app还有自动的框架预载，加载页面的速度更快。关于uniapp和vue区别的具体内容我们将在文章中展开。 阅读全文
posted @ 2024-02-27 16:00 李云蹊 阅读(654) 评论(0) 推荐(0)
vue2中使用富文本编辑器tinyMCE全过程
摘要：TinyMCE中文文档地址: http://tinymce.ax-z.cn/ 1.安装TinyMCE $npm install tinymce@5.2.0 -S $npm install @tinymce/tinymce-vue@3.0.1 -S 2.将node_modules/tinymce 文件 阅读全文
posted @ 2024-02-04 17:38 李云蹊 阅读(4279) 评论(1) 推荐(0)
Vue项目迁移小程序，实操干货分享
摘要：今天就给大家分享“Vue 项目转小程序”的实操干货。 首先明确需求：开发者是想将已有的 Vue 项目转为小程序，在集成了 FinClip SDK 的 App 中运行小程序，那这里我们就需要关注以下两个注意事项： Web 项目是适合在手机等移动设备中运行的，屏幕已经兼容； H5 项目的代码是前后端分离 阅读全文
posted @ 2024-01-23 11:04 李云蹊 阅读(3107) 评论(0) 推荐(0)
Vue 重置data的数据为初始状态操作
摘要：在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？ 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' 阅读全文
posted @ 2023-08-23 11:46 李云蹊 阅读(1500) 评论(0) 推荐(0)
看看Vue中如何封装一个自动化注册全局组件
摘要：在项目的开发过程中，我们常常会去封装一些比较常用的全局组件,但是每添加一个组件就需要手动在main.js引入注册，不仅麻烦还代码量多，着实让人心烦。所以干脆封装一个自动化注册全局组件。 1、自定义全局组件文件夹 在src下新建一个globalComponents，用于存放全局组件，并新建一个组件，例 阅读全文
posted @ 2023-07-28 10:50 李云蹊 阅读(205) 评论(0) 推荐(0)
vue实现简单的鼠标拖拽横向滚动 和 鼠标滚轮横向滚动
摘要：一.鼠标拖拽滚动 以下代码项目中直接使用即可，此种方法是通过鼠标拖拽进行滚动，滑动滚轮无效果。当然快捷键，shift+鼠标滚轮可以控制横向滚动，对用户来说体验不友好。 <div class="tab-list id="nav"> <div class="tab-item" v-for="(item, 阅读全文
posted @ 2023-06-12 16:01 李云蹊 阅读(2764) 评论(0) 推荐(0)
富文本编辑器 VUE-QUILL-EDITOR 使用教程 （最全）
摘要：VUE-QUILL-EDITOR 基于 QUILL、适用于 VUE 的富文本编辑器，支持服务端渲染和单页应用，非常高效简洁。 一.基础用法 1、NPM 导入 VUE-QUILL-EDITOR npm install vue-quill-editor --save 2、引入 VUE-QUILL-EDI 阅读全文
posted @ 2023-05-12 18:10 李云蹊 阅读(9783) 评论(1) 推荐(1)
vue+vant项目中 rem适配配置
摘要：vant rem适配，需要安装两个插件 postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 postcss-pxtorem： npm install postcss-pxtorem --save-dev lib- 阅读全文
posted @ 2023-03-02 18:37 李云蹊 阅读(474) 评论(0) 推荐(0)
vue项目使用rem布局刷新页面瞬间元素尺寸由小变大，页面闪现错乱样式
摘要：vue项目使用px2remLoader插件，在index.html自定义设置font-size的大小，尤其是在首屏加载的时候，会出现页面各个元素尺寸由小变大的一个过程，很难看 刚开始一直在想是不是因为css文件过大，加载的时候先渲染了页面，然后css文件加载完之后样式才恢复正常，后来使用gzip压缩 阅读全文
posted @ 2023-02-20 18:26 李云蹊 阅读(546) 评论(0) 推荐(0)
vue【解决方案】页面/路由跳转后，滚动条消失，页面无法滚动
摘要：原因解析: vue项目中，页面/路由跳转后，body 的内联样式变成 overflow:hidden 解决方案: 使用路由守卫，在页面/路由跳转后，将body 的overflow设置为auto src/main.js: // 解决bug：页面/路由跳转后，滚动条消失，页面无法滚动 router.af 阅读全文
posted @ 2023-02-16 16:08 李云蹊 阅读(615) 评论(0) 推荐(0)
vue下载附件按钮功能
摘要：一.tools文件夹下tools文件中封装下载方法: function iframeEle(imgsrc, fileName) { let image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anony 阅读全文
posted @ 2023-02-13 15:18 李云蹊 阅读(236) 评论(0) 推荐(0)
「Vue系列」之Vue2实现当前组件重新加载
摘要：遇到问题的场景：需要把当前组件完全还原成初始化状态，不要页面全部刷新例如：重置按钮，只刷新当前加载组件其他办法：使用vue-router重新定向到当前页面，页面不刷新使用window-reload（） 页面全部刷新，用户体验太差 解决方法：使用v-if provide inject和this.$ne 阅读全文
posted @ 2022-12-12 14:45 李云蹊 阅读(1004) 评论(0) 推荐(0)
Vue中使用原生js实现轮播图滑动效果
摘要：1.在视图层模板里面绑定touchstart和touchend事件 <div class="tuWap" @touchstart="touchStart" @touchend="touchEnd"> <div class="zuoCaidan"> <img src="./images/biaoti. 阅读全文
posted @ 2022-07-28 14:30 李云蹊 阅读(607) 评论(0) 推荐(0)

1 2 下一页