- 博客(23)
- 收藏
- 关注
原创 vue3 + uniapp + ts 拓展全局类型处理
在uniapp+ts中拓展全局对象uni的typescript类型, 实现用uni对象进行通用工具方法进行挂载...
2023-05-26 11:47:59 2598
原创 vue3 uniapp项目中eventChannel的解决方案
(2)在页面跳转成功后才监听事件,且使用$once,省去手动维护事件周期(监听、卸载),亦可减少事件之间相互影响的概率。携带为主,我需要到某个目标页面,并带一些数据给它,我发起跳转目标页面,成功后发送数据,目标页面监听事件并获取数据。订阅为主,我需要某个目标页面给我一些数据,我发起监听后跳转目标页面,目标页面处理数据后发回数据,并回到订阅页面。(2)使在vue项目中由于this的问题,该方案不是那么好实现,当然也有对应方案,可自行百度,(3)使用订阅通知的模式处理执行顺序的问题(事件在监听之前就已触发)
2023-04-24 11:19:51 2536 3
原创 wangeditor editor.i18next.init is not a function错误处理
在使用wangeditor富文本编辑器时,开发报editor.i18next.init is not a function类型错误通常第一次初始化编辑器正常,第二次初始化就会报之上错误
2022-11-09 16:57:50 859
原创 NaiveUI中menu组件的展开事件、父级点击事件
在使用menu组件,想监听每个节点的点击事件,点击节点触发事件,并得到点击节点的渲染对象数据
2022-10-13 20:14:13 955
原创 uniapp 自定义导航栏
支持搜索(支持假样子和真输入两种模式)、支持返回,拿走不谢!先看效果需要在app.vue中动态获取设备信息function initBounding() { const {windowWidth, windowHeight, statusBarHeight} = uni.getSystemInfoSync() let menuGap = 7 let menuWidth = 0 let menuHeight = 32 let..
2022-05-10 21:35:34 6012
原创 uniapp实现吸顶效果、滚动吸顶(分类、筛选、排序、搜索等滚动到顶部自动固定、吸顶)
最简单的实现思路有两种:1.监听滚动距离,当类目滚动到预期范围内时,设置一个特殊的样式,使其脱离文档流固定定位在顶部。2.不去影响页面中的类目,而是在顶部预先放一个一模一样的类目,预先隐藏,通过监听滚动距离,在适当的时候控制其展示。两种思路实现都可以,本人跟倾向于第二种实现,因为第二种不会影响原来的页面布局,也更好控制布局比较简单,不做赘述,在这里简单分享一下uniapp中如何监听滚动获取目标元素位置及配合控制目标显隐,uni.createSelectorQuery()可以创建一个选择器..
2022-02-25 15:08:11 12210 1
原创 Less 与 Sass 区别
Less 与 Sass 区别1.底层实现less基于javascript(客户端), 文件拓展名.lesssass基于ruby(服务端), 文件拓展名.scss2.变量、作用域、插值less使用@标识符,在字符串中使用@{}插值,能识别 { }作用域@color: red;.pink{ @color: pink;//此处颜色为粉色 color: @color; }.base{ color: @color;//此处颜色为红色}'@{color}'bas
2022-02-25 14:33:30 628
原创 图片压缩、无损压缩,svg,png,jpg等,基于gulp自封装,解压即用的小工具,再也不用冲会员啦
链接:https://pan.baidu.com/s/1rPvBd3yJu7q48wvrKtXioA提取码:zimg--来自百度网盘超级会员V4的分享
2021-12-10 19:23:03 641
原创 uniapp 请求封装 类似axios 拦截器功能 图片上传H5适配 多图上传 像诗一样优雅的代码
提示:基础路径和文件上传部分,请根据实际情况修改 import config from '@/common/config' class Axios { constructor(baseUrl) { this.baseUrl = baseUrl || '' } //get请求 get(url, data) { return this.fetch(url, data, 'GET') } //post请求 post(url, data) { return this.fetch(u
2021-11-26 18:07:35 901
原创 HBuilderX 开发工具,主题自定义, 代码颜色自定义
找到HBuilderX 开发工具安装目录,依次找到代码颜色配置文件(json文件)修改配置字段参考:Scope Naming – Sublime Text Documentation我的配置:"tokenColors": [ { "settings": { "background": "#272822", "foreground": "#F8F8F2" } }, { "scope": [ "meta.embedded", ...
2021-10-12 16:53:24 6624 7
原创 vue 递归组件 递归组件中的插槽
需求:在开发中需要一个公共组件Tree(树),接受的数据是典型的树结构数据,当前项数据是 一个对象,如果有子节点,拥有一个children属性。我并不希望每一项的数据展现形式是定死的,而是通过插槽能够自定义。假设:<template> <ul class="tree-wrapper"> <li v-for="(item, index) in list" :key="index" @click.stop="change(ite...
2021-10-07 23:48:22 1682
原创 uniapp route路由 导航守卫 原生导航栏返回自定义 返回监听
场景: 在开发uniapp项目中,跨微信小程序、Android-app、H5开发,使用原生导航栏,购买商品后进入订单确认,提交订单后进行支付,支付成功则跳转支付成功页面,支付失败则跳转待付款订单页。 跳转后的页面都带有原生导航栏,返回按钮点击可回退页面,即回退到提交订单页,这样回导致用户又可点击提交,再次提交订单,需要在onShow中判断是从哪个页面来,然后重定向。在uniapp中没有类似vue导航守卫的钩子,也没有监听路由变化的钩子,可以通...
2021-09-24 15:16:52 3905
原创 vue echarts 铺不满容器(宽度铺不满容器)
描述: 再vue页面中使用echarts,通过ref标识容器,echatrs.init(ref)的形式初始化,在布局中发现canvas画布铺不满容器,通常容器需要指定宽高,画布会自适应容器,此处使用flex布局,左右两块均自适应,容器宽度通过100%自适应外层容器,外层容器则通过flex-grow:1;自适应剩余空间,通过给父级背景色看出,父级确实有宽高,但画布却没撑满。。。解决: 多重调试后发现,给容器px的绝对宽度就不会出现撑不满的情况,原因是在画布初始...
2021-09-24 14:42:07 3391
原创 elementui table组件 滚动高度自适应一屏大小、高度占满剩余空间
场景: 后台管理系统,数据常用表格处理、配合搜索、分页、增删改查等... 通常最佳视觉为一屏展示,顶部有导航、查询条件等,中间表格最高占满剩余高度。 给table设置高度,超出可滚动,但不好适应不同尺寸的屏幕。 不给table设置高度,则内容多的情况会超出一屏。处理: 1.给table包一层父级元素(table-box) 2.给table-box设置高度,通常顶部内容都是定高的,所以使用...
2021-09-14 16:09:05 7826 2
原创 Vue 实现可拖拽、拖拽组件
描述: 组件仅封装拖拽功能,内容通过#header、#default、#footer插槽自定义<template> <div ref="wrapper" class="drag-bar-wrapper" > <div ref="header" class="drag-bar-header" > <!-- 头部区域 --> <slot n...
2021-09-14 11:16:33 1859
原创 vue 自定义指令,自适应高度的文本域contenteditable/textarea
需求: 想要实现一块可编辑的文本域,默认内容通常通过数据回显,不确定内容的多少,需要在回显内容的基础上进行编辑、修改、提交。textarea: 原生文本域,默认不会自适应高度,内容多的情况会出现滚动条,需要用js手动计算并动态修改高度。contenteditable: html5有一个可编辑属性,设置以后就可以让元素的文本可编辑,配合块盒内容溢出自动换行、高度自适应的特点,即可模拟实现自适应高度的高仿textarea。vue自定义...
2021-09-14 09:52:47 774
原创 elementui popconfirm气泡确认 事件失效(2.15.6版本已解决)
问题:confirm事件无效cancel事件无效解决: 官方文档书写错误 更改确认事件名:onConfirm更改取消事件名:onCancel官方文档:...
2021-09-13 19:34:44 729
原创 javascript event click/dblclick left/right区分左键、右键、双击事件,排除点击事件与拖拽事件冲突,做防抖优化
/** * 事件区分处理(左键、右键、双击) * 解决与相机默认事件(旋转、拖拽)冲突 * @param {*} 支持三项事件 * @returns 清理函数 */ function useEvents(dom, { leftClick, rightClick, dblClick }) { let dblclick = false; let prevPageX = 0; let prevPag...
2021-09-13 09:58:40 594
原创 javascript简化浏览器cookie操作
export default class ManageCookie{ /** * 存储cookie * @param {*} name * @param {*} value * @param {*} time 单位:秒 */ static setCookie (name, value, time) { document && (document.cookie = `${name}=${value}; max-age=${time}`) .
2021-09-12 23:22:04 96
原创 vue tween.js 动画 过渡动画 补间动画
安装:npm install @tweenjs/tween.js -S封装:import TWEEN from '@tweenjs/tween.js';export default { install: function(Vue) { Vue.prototype.$tween = this; Vue.prototype.$tweener = TWEEN; }, pause: function(tw) { tw.pau
2021-09-11 10:37:53 639
原创 elementui date-picker日期组件 日期回显失效、change事件失效
问题: v-model回显失效,使用el-date-picker组件选择日期后,无法在输入框内回显,检查发现绑定的值确实正确、格式也没有问题,但没有回显内容 官方文档说明的change事件就是不触发 有clearable属性控制清空选择内容,但是没有对应的clear事件解决: 使用v-bind:value回显,手写事件改变选择日期后对应的值(需要预先声明日期范围对应的属性为数组,对应位置上的值为空串,在事件中使用$set更改)...
2021-09-10 09:28:58 12738 6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人