前端大杂烩
前端
yueF_L
这个作者很懒,什么都没留下…
展开
-
Element UI 日期组件自定义可选范围
这样子就可以定义可以选择的开始时间-结束时间段。在data()函数中定义。原创 2024-06-13 10:34:36 · 333 阅读 · 0 评论 -
html2canvas 将DOM节点转成图片
可以新建一个txt文件,然后丢进去修改后缀名称即可。这是我准备画的DOM节点。将js文件保存到本地。原创 2024-03-01 17:18:39 · 456 阅读 · 0 评论 -
模仿奈雪Banner组件
【代码】模仿奈雪Banner组件。原创 2024-01-31 14:50:13 · 566 阅读 · 0 评论 -
Vue中嵌入原生HTML页面
但是vue目前暂时没找到有类似功能相关文档,所以我采用iframe嵌套的方式。在mounted生命周期中去绑定具体Iframe的页面。在mounted中加监听事件,并配上处理监听对象的方法。在data中定义一个iframe绑定的页面的对象。在method中定义方法,用于处理监听的事件。在html中接收vue端传过来的值。发送信息到iframe页面。html页面中的代码。原创 2024-01-30 17:31:26 · 3073 阅读 · 0 评论 -
解决Vue3 中Echarts数据更新渲染不上问题
请求数据前dom节点不渲染,获取完数据重新渲染。解决办法就是让Dom节点重新渲染。原创 2024-01-04 13:53:03 · 1205 阅读 · 0 评论 -
element-plus 私有化部署
安装 npm -g install static-server 包,然后使用 static-server -p 8888 -o 来启动。原创 2024-01-03 09:42:40 · 562 阅读 · 0 评论 -
探索 Vue3 (四) keep-alive缓存组件
keep-alive为抽象组件,主要用于缓存内部组件数据状态。可以将组件缓存起来并在需要时重新使用,而不是每次重新创建。这可以提高应用的性能和用户体验,特别是在需要频繁切换组件时。:如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。当一个组件实例作为缓存树的一部分插入到 DOM 中时,它将重新。默认会缓存内部的所有组件实例,但我们可以通过。缓存的根组件,也适用于缓存树中的后代组件。缓存而仍作为组件树的一部分时,它将变为。一个持续存在的组件可以通过。原创 2023-12-21 11:48:00 · 660 阅读 · 0 评论 -
探索 Vue3 ( 三 ) Teleport传送组件
Teleport Vue 3.0新特性之一。Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;Teleport中的内容允许我们控制在任意的 DOM 中,完全不受父级style样式影响。原创 2023-12-21 10:55:34 · 496 阅读 · 0 评论 -
Uniapp + Vue3 + Pinia + Vant3 框架搭建
现在越来越多项目都偏向于Vue3开发,想着uniapp搭配Vue3试试效果怎么样,接下来就是详细操作步骤。App.vue setup语法。原创 2023-12-20 15:13:06 · 2725 阅读 · 0 评论 -
探索 Vue3 (二) 插槽slot
表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的原创 2023-12-19 11:47:06 · 396 阅读 · 0 评论 -
探索 Vue3 (一) 父子组件传参
父组件通过v-bind绑定一个数据,然后子组件通过defineProps接受传过来的值,可以看到标题从父组件传值给子组件,data里面是用了子组件默认值。是通过defineEmits派发一个事件。这里直接通过编译工具可以点出来属性。父组件获取子组件实例通过ref。通过defineExpose。子组件暴露给父组件内部属性。原创 2023-12-19 11:07:55 · 1019 阅读 · 0 评论 -
解决微信网页授权域名限制问题
业务需求:合作方获取我方微信公众号openId,我方需要回调合作方的前端地址,但是域名只有两个,自己都不够用。这是$arg_是全局参数,获取我们链接后面的参数信息,譬如localhost:8088?这里其实就是我们申请的二级域名拼接参数,我们请求到二级域名,nginx帮我们做代理。解决方案:申请一个二级域名作为代理,然后使用nginx服务器转发到其他地址。那么$arg_evn 就等于prod,其实就是一个取值。原创 2023-03-16 16:41:43 · 2978 阅读 · 0 评论 -
最新uniapp 微信小程序获取头像操作指南
微信小程序获取头像最新方法指南原创 2023-02-01 13:49:04 · 11408 阅读 · 1 评论 -
解决element-ui中el-upload组件自定义上传失败还可以显示问题
解决element-ui中el-upload组件自定义上传失败还可以显示问题原创 2022-09-21 16:23:10 · 1257 阅读 · 0 评论 -
uniapp image 二次封装,新增loading和淡入效果
在使用uniapp image 组件的时候会发现图片组件没有loading的效果,并且加载进来的图片没有过度效果,给人的根据比较生硬,针对这个问题对image组件做了二次封装。原创 2022-08-23 13:57:48 · 1846 阅读 · 0 评论 -
uniapp uni.getLocation:fail 频繁调用会增加电量损耗
uni.getLocation(),调用多次之后它直接给我返回报错信息,高频率调用会导致耗电,如有需要可使用持续定位接口。原创 2022-07-20 17:23:23 · 1927 阅读 · 1 评论 -
前端超级好用网站整理
CSS 参考书https://cssreference.io/animations/CSS 灵感https://chokcoco.github.io/CSS-Inspiration/#/UI 设计师的灵感源泉https://www.awwwards.com/sites/zero-impact学习 CSS 布局https://zh.learnlayout.com/box-sizing.htmlCSS 小花招UI 设计师的灵感源泉https://www.awwwards.com/sites/zero-i原创 2022-06-22 10:06:34 · 356 阅读 · 0 评论 -
css 取消伪类最后一个样式
利用伪类画出来的border,去掉最后一个。原创 2022-06-07 14:13:37 · 1468 阅读 · 2 评论 -
uniapp 引入第三方包发起网络数据请求
前言:由于平台的限制,小程序项目中不支持 axios,而且原生的wx.request()API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用@escook/request-miniprogram第三方包发起网络数据请求。安装:npminstall@escook/request-miniprogram在项目的main.js入口文件中,通过如下的方式进行配置:import { $http } from '@escook/re...原创 2021-12-15 14:11:10 · 1429 阅读 · 5 评论 -
uniapp 引入阿里矢量图标库正确姿势
阿里图标库地址:iconfont-阿里巴巴矢量图标库1.首先选择我们喜欢的图标加入购物车2.点击购物车,将图标加入到项目中3.下载到本地解压出来4.将这四个文件拷贝到我们的项目中去5.在App.vue中配置iconfont.css/* 阿里矢量图库 */ @import 'static/css/iconfont.css';6.编辑iconfont.css文件,修改其他三个文件的位置 src: url('@/stat...原创 2021-10-21 16:28:14 · 559 阅读 · 0 评论 -
uniapp 引入uview的正确姿势
1、官方下载地址安装 | uView - 多平台快速开发的UI框架 - uni-app UI框架可以直接下载zip压缩或者用工具导入因为我用的是hbuilder,为直接导入打工具中2、直接将 uview-ui 整个文件夹拷贝到我们的项目中来3、接下来就是配置1. 引入uView主JS库在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。// main.jsimport uView from "uvi...原创 2021-10-21 16:11:36 · 4941 阅读 · 1 评论 -
uniapp 中使用jssdk正确姿势
这是基于企业项目实战分享pm方式使用下方进行安装npminstalljweixin-module--save安装在项目中的效果如图:接下自己定义个js, 引入我们用npm引入的模块:jwx 代码:let jweixin = require('jweixin-module');import { jsdkSignature} from '../request/api.js'export default { //判断是否在微信中 isW......原创 2021-08-25 17:42:29 · 9790 阅读 · 3 评论 -
uniapp中使用高德地图
/* * 异步创建script标签 */export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else { var script = document.createElement('script') script.type = 'text/jav.原创 2021-07-08 10:23:56 · 4334 阅读 · 3 评论 -
ES6 学习总结
1.块级作用域的引入在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域。{var a = 5;let b = 6;}console.log(a); //5console.log(b); //b is undefined在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域。2.暂时性死...原创 2020-01-16 17:16:26 · 272 阅读 · 0 评论