随笔分类 -  VUE

摘要: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插件,做一个简单的网页播放器。我们先看一下效果图 效果图 正常模式 吸底模式 当然还有迷你模式,就是能隐藏的都隐藏,这里不赘述,做相应配置就会出现对应效果。 注意,吸底模式会出现上一曲下一曲按钮,以及歌词按钮。正 阅读全文
posted @ 2024-04-19 00:08 李云蹊 阅读(982) 评论(0) 推荐(1)
摘要:一. 准备工作 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)
摘要:一、什么是webscoket WebSockets 是一种先进的技术,它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API,可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。 WebSockets 这种技术中有一个接口名为WebSocket,它是一个用于连 阅读全文
posted @ 2024-04-17 16:24 李云蹊 阅读(7419) 评论(1) 推荐(1)
摘要: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)
摘要:最近做项目刚好用到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)
摘要: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)
摘要:uni-app可以编译到(头条,支付宝,微信,QQ,百度)小程序,安卓版,ios版,h5版。通过打包实现一套代码多端运行;vue在web上是为单页应用而生的,在app上,单页应用会卡死。uni-app还有自动的框架预载,加载页面的速度更快。关于uniapp和vue区别的具体内容我们将在文章中展开。 阅读全文
posted @ 2024-02-27 16:00 李云蹊 阅读(654) 评论(0) 推荐(0)
摘要: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 李云蹊 阅读(4281) 评论(1) 推荐(0)
摘要:今天就给大家分享“Vue 项目转小程序”的实操干货。 首先明确需求:开发者是想将已有的 Vue 项目转为小程序,在集成了 FinClip SDK 的 App 中运行小程序,那这里我们就需要关注以下两个注意事项: Web 项目是适合在手机等移动设备中运行的,屏幕已经兼容; H5 项目的代码是前后端分离 阅读全文
posted @ 2024-01-23 11:04 李云蹊 阅读(3108) 评论(0) 推荐(0)
摘要:在某些情况下,需要重新使用data中的数据,但是data中的数据已经被各种表单、变量等赋值,那么怎么重置data的值呢? 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' 阅读全文
posted @ 2023-08-23 11:46 李云蹊 阅读(1500) 评论(0) 推荐(0)
摘要:在项目的开发过程中,我们常常会去封装一些比较常用的全局组件,但是每添加一个组件就需要手动在main.js引入注册,不仅麻烦还代码量多,着实让人心烦。所以干脆封装一个自动化注册全局组件。 1、自定义全局组件文件夹 在src下新建一个globalComponents,用于存放全局组件,并新建一个组件,例 阅读全文
posted @ 2023-07-28 10:50 李云蹊 阅读(205) 评论(0) 推荐(0)
摘要:一.鼠标拖拽滚动 以下代码项目中直接使用即可,此种方法是通过鼠标拖拽进行滚动,滑动滚轮无效果。当然快捷键,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 基于 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)
摘要: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项目使用px2remLoader插件,在index.html自定义设置font-size的大小,尤其是在首屏加载的时候,会出现页面各个元素尺寸由小变大的一个过程,很难看 刚开始一直在想是不是因为css文件过大,加载的时候先渲染了页面,然后css文件加载完之后样式才恢复正常,后来使用gzip压缩 阅读全文
posted @ 2023-02-20 18:26 李云蹊 阅读(546) 评论(0) 推荐(0)
摘要:原因解析: vue项目中,页面/路由跳转后,body 的内联样式变成 overflow:hidden 解决方案: 使用路由守卫,在页面/路由跳转后,将body 的overflow设置为auto src/main.js: // 解决bug:页面/路由跳转后,滚动条消失,页面无法滚动 router.af 阅读全文
posted @ 2023-02-16 16:08 李云蹊 阅读(615) 评论(0) 推荐(0)
摘要:一.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-router重新定向到当前页面,页面不刷新使用window-reload() 页面全部刷新,用户体验太差 解决方法:使用v-if provide inject和this.$ne 阅读全文
posted @ 2022-12-12 14:45 李云蹊 阅读(1004) 评论(0) 推荐(0)
摘要: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)