- 博客(31)
- 收藏
- 关注
RSS订阅原创 React手撸一个Collapse组件
说到折叠展开，应该大部分会想到用display来控制面板内容的显示与否，但是用display的话，transition会失效，所以下面的代码是通过计算面板的高度，折叠展开设置为对应高度或0的形式来实现，保留transition的动画效果。之前写一个官网项目，因为设计稿样式特殊性，没有使用antd组件，就直接手撸了一个Collapse组件，样式可以自己决定。下面是面板的代码CollaspePanel.tsx。有更多更好的实现方式欢迎指教噢～话不多说，直接上代码啦。
2023-04-18 10:20:22
717
原创 一个自定义hook解决modal滚动穿透问题
之前做的一个官网项目，页面上有弹窗，但是在滚动弹窗的时候，弹窗下的页面也会随之滚动，本来认为这个交互也没什么问题，但是产品体验后要求滚动弹窗的时候，下面的页面不要随之滚动，于是乎，有了这个hook。因为也是用了react-photo-view去预览图片，react-photo-view内部也会加上一个overflow:hidden的样式，所以这里做了个hack处理。话不多说，直接上代码。
2023-04-04 10:45:18
601
原创 动态引入百度地图 js
接手一个需求需要接入百度地图， 如果直接在 html 中加上 script 标签引入 js，那么无论是否使用到百度地图组件都会加载该 js，会影响到首屏加载的速度。于是想到可以用 promise 的方式封装一下动态加载。使用如下，就可以在使用组件时再加载百度地图js啦～～
2023-03-17 17:34:15
1214
原创 DUMI 开发组件库踩坑记录和笔记
1、不知道是mfsu 有缓存还是umi项目本身就存在缓存问题，如果发现修改后页面未生效可以删除.umi 再重启试试2、在组件内建example文件夹存放示例代码，在md文件内使用code引入，运行和打包都会报错，提示找不到模块“pro-tea-components”或其相应的类型声明。Cannot find module 'pro-tea-components' or its corresponding type declarations.（不知道咋么解决，可以加@ts-ignore，但是解决方
2021-09-18 10:06:04
5023
原创 Taro 在小程序和H5的踩坑记录
Taro 踩坑记录1、@taro/cli版本必须跟package.json的版本一致，否则使用Taro.xxx会报「 is not a function 」的错误例如：「_tarojs_taro__WEBPACK_IMPORTED_MODULE_2___default.a.navigateTo is not a function」解决方案1：重新按照官网文档初始化项目解决方案2：package.json 文件引入的 Taro 的版本号改成与 Taro cli 工具的版本号保...
2021-05-29 16:58:24
3544
2
原创 Taro h5 图片预览支持放大缩小
使用Taro 开发一个图片列表的页面，需要支持图片预览原先以为是modal+image 即可，但产品说希望像微信预览图片一样，可以放大缩小但Taro 没有支持的组件，w
2021-05-29 16:54:17
2317
4
原创 Taro 小程序的InputNumber组件
在使用taro开发小程序过程中，发现taro-ui 的 InputNumber 组件在小程序设置了最小值后，无法删除最小值，只能输入以最小值为起始的值，遂自己开发一个这样的组件来使用上代码～import { Input, View, Image } from "@tarojs/components";import React from "react";import Taro from "@tarojs/taro";import classnames from "classnames";//
2021-05-26 10:36:12
990
原创 taro 表单校验
有一个需求是基于taro+react hooks 做h5页面，嵌套进微信小程序里涉及到表单校验，查看了taro-ui的Form组件，发现并没有实现表单校验so～安装async-validator 来实现表单校验（是一个表单的异步验证的第三方库，https://github.com/yiminghe/async-validator）贴上代码export const onValidateField = (value: ValidateSource, rules: Rules) =>...
2021-01-28 10:30:10
4346
16
原创 vue+element form的封装【更新】
基于之前表单封装的更改直接上代码了<template> <el-form :ref="refName" :class="[className, inline ? 'inline-form' : '']" :model="data" :inline="inline" :rules="rules" :label-position="labelPosition" :label-width="labelWidth" >
2020-05-10 14:46:46
721
2
原创 [笔记] vue2.0中使用scrollIntoView实现锚点定位
有这么一个需求 就是 页面左侧是树结构的菜单数据 右侧是相关的菜单权限 点击菜单项滚动到对应的菜单权限区域这里最简单的方法就是 在菜单权限区域设置一个唯一的id （这里需要注意id不能全为数字，否则会报错）<div v-for="(item, index) in formatPermission[activeName]" :key="index" :id="...
2020-05-06 18:29:43
772
原创 [笔记] 记录一次关于vue+element 表单验证未执行的问题
目前接手的这个项目 有几次遇到过form表单校验未执行的问题 打印this.$refs['formName'].validate出来是以下的结果validate ƒ validate(callback) { var _this2 = this; if (!this.model) { console.warn('[Element Warn][Form]...
2020-05-06 18:03:39
486
3
原创 记录一次vue项目首页加载时间过长的优化
在用Vue2 框架进行单页面开发时，开发完成后项目打包到线上环境，发现vendor脚本和app.js均有3.0多M，ttf字体文件有10M之多，首次加载时间都超过20s，实在是慢到不行。先贴上我的解决办法简单粗暴的使用gzip压缩1.在index.js/config中将productionGzip设为true，这里要先安装compression-webpack-plugin，执行 np...
2020-04-10 00:09:58
873
原创 vue+element 搜索栏组件的封装
<template> <div class="searchBox"> <div class="searchBoxs"> <el-input placeholder="请输入内容" @keyup.enter.native="searchKeyup" v...
2020-03-12 23:35:46
1718
原创 记一次关于vue-router的bug
之前只知道router的name不能相同 并不知道会有什么问题发生现在做一个项目 发现之前同事写了几个router的name都相同现在测试发现页面刷线路由会跳转到另一个根据排查 应该是name相同的原因修改之后 不会有这种问题发生了✌记录下来...
2019-12-16 17:28:49
281
原创 element el-scrollbar组件的使用和隐藏横向滚动条
关于滚动条的使用1、使用css overflow属性overflow: scroll;2、element的el-scrollbar组件父容器设固定高，el-scrollbar设高为100%，或者给el-scrollbar设固定高<el-scollbar style="height:100%"> <div v-if="files.len...
2019-11-04 10:24:13
9630
原创 记微信小程序 自定义modal组件
<view hidden="{{!isShow}}" class='modal' catchtouchmove="preventTouchMove"> <view data-type="mask" catchtap='_cancelModal' class='modal-mask'></view> <view animation="{{anima...
2019-08-26 15:16:15
545
原创 微信小程序 picker-view 自定义picker
因为微信原生picker组件不能修改样式，就自己用picker-view封装了一个直接上代码<!-- components/picker/picker.wxml --><input placeholder="{{placeholder}}" value="{{value}}" disabled="{{true}}" bindtap="showPicker" />...
2019-08-26 14:18:29
2653
2
原创 记微信小程序 利用canvas压缩图片 并进行base64
最近做一个小程序 上传图片时进行base64 总是报上传图片失败 究其原因是图片过大 需要进行压缩废话不多说 上代码选择图片后利用canvas重新绘制图片大小利用绝对定位 隐藏canvas <image class="uploader_input_icon" src="/images/wy/[email protected]" /> <canvas canva...
2019-08-26 10:49:05
973
原创 记一次vue+element的bug
今天后台突然说项目里某个模块点进去就卡死了我心想不可能啊 不会是后台自己电脑卡死了把运行项目一看我的个天 不仅页面卡死 浏览器也卡死了秉着不懂就google的心态 搜索了一下有说是vue+element tabs引起的一个简单的解决方法是 再tabs外面包一个<el-row> <el-col :span="24"></el-co...
2019-08-05 17:26:45
134
原创 微信小程序侧边页面
微信小程序侧边参数参数类型说明默认值maskBoolean是否有遮罩truefullScreenBoolean是否全屏显示falsetypeString左侧/右侧滑入leftbackgroundString背景色#fffheaderBoolean是否显示头部truenameString头部名称事件...
2019-07-22 17:56:47
821
原创 小程序 日期时间选择器 精确到秒
微信小程序 日期时间选择器 精确到秒提供三种模式 date(yyyy-MM-dd) time(hh:mm:ss) dateTime(yyyy-MM-dd hh:mm:ss)上图参数参数说明类型默认值mode选择器类型Stringdatedisabled是否禁用Booleanfalseplaceholder输入框提示文本String...
2019-07-19 15:16:56
1163
1
原创 小程序日历组件
小程序日历组件闲来没事把之前想做的日历组件给做了 先上图参数 参数 类型 说明 默认值 header Boolean 是否显示头部操作栏 true...
2019-07-18 11:45:14
189
3
原创 vue element table二次封装升级版
之前封装的是简单的table 但是因为项目需要，需要为table加上多选或行展开功能，就进行了修改i-table.vue<template> <el-table ref="table" :data="data" :show-header="showHeader" :border="border" :max-height="m...
2019-07-10 16:07:13
583
2
原创 小程序promise封装request
/** * 封装wx.request */import { config } from './config';const apis = require('./api');//接口白名单let whiteList = [ apis.api.login ];class HTTP { request({ url, data = ...
2019-05-14 10:35:27
194
原创 vue v-chart 线图 文本过长换行问题
之前后台说线图文本过长导致图不完整 希望可以文本换行，于是看了v-chart的官网直接在data中设定charSettingsthis.charSettings = { xAxisType: 'value', xAxis: { axisLabel: { interval: 0, //换行显示 ...
2019-04-04 17:01:59
1960
原创 小程序封装可清空的input组件
小程序学习之input组件封装<view class="v-input v-input-class"> <view class="v-input-label {{required?'v-input-required':''}}">{{label}}</view> <view class="v-input-value_container {{b...
2019-04-04 16:39:16
893
原创 去除对象内多余的空值
今天做一个关于模糊查询的这种形式的 用户在某个input框输入就向后台传某个参数， 但是发现值为""的字段也会被传过去 导致查询失败于是需要过滤掉form表单内的空值以下方法可实现 for (const key in this.searchForm) { // 去除对象内多余的空值key if (this.searchForm...
2019-02-18 14:51:52
714
原创 nuxt+element 侧边菜单栏
项目用的是nuxtjs 需要根据用户类型来显示侧边菜单栏直接上代码了navMenu.vue<template> <div class="navMenu"> <div v-for="(item,index) in navList" v-if="item.userType.indexOf(userType) > -1" :key="
2019-02-01 10:49:14
3773
原创 vue+element form的封装
目前正在做的一个项目 因为页面搜索表单是一样的 所以想要封装一个表单组件直接上代码了<template> <el-form :inline="true" :model="value" label-position="right" :label-width="formConfig.labelWidth" :rules="rul
2019-02-01 10:36:33
6475
8
原创 vue+element pagination分页的二次封装，带首页末页功能
最近重构一个项目，需要实现带有首页，末页的分页功能，但是element的pagination并没有这样子，最完整功能如下网上搜索了好多，发现有slot可以增加自定义项，但是 <el-pagination background @current-change="handleCurrentChange" :current-page=...
2019-01-10 17:27:32
8853
8
原创 vue+element table的二次封装
iTable.vue文件<template> <div> <el-table :data="data" :show-header="showHeader" :border="border" :max-height="maxHeight" :v-loading="loading" ...
2019-01-10 16:54:37
2423
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人