- 博客(48)
- 收藏
- 关注
RSS订阅原创 React项目动态设置index.html中的＜title＞标签内容
【代码】React项目动态设置index.html中的＜title＞标签内容。
2024-07-31 14:11:19
451
原创 React使用 lodash-es 中的throttle方法失效
下面代码用了throttle方法，但是并没有实现1500内执行一次的效果，主要原因是useState的setValue()方法。该方法更新了state，导致了组件重新渲染，并且重新生成了函数，所以1500毫秒又被重置了。
2024-05-02 13:58:35
1178
2
原创 Vue3开发时实用的几个库
一、API 自动导入setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。// 安装命令npm i unplugin-auto-import -D --save// 配置vite.config.jsimp.
2022-04-06 16:42:16
1637
原创 好玩、有趣、高效的库
1.figletfiglet.js 效果如下// vueimport figlet from "figlet";import standard from "figlet/importable-fonts/Isometric1.js"; // 必须要引入 node_modules/figlet/fontsexport function initFiglet(items, index) { figlet.parseFont("Isometric1", standard); figlet
2022-04-03 16:55:42
272
原创 （小程序BUG）swiper中使用video，video无法被覆盖
（小程序BUG）swiper中使用video，video无法被覆盖图标按钮与video同层，但是无法覆盖video，在swiper切换的时候，图标会消失给video同层标签添加will-change: transform; 样式即可<swiper a:if="{{bannerList.length>0}}" class='swiperBanner' autoplay="{{autoplay}}" interval="{{interval}}" current="{{curren
2022-03-24 15:03:03
1156
5
原创 Module “xxxx“ does not exist in containe
项目中使用了umijs，并且还采用了MFSU找到项目中的.umi文件夹，删除后(相当于清除缓存)，重新启动项目即可
2021-11-23 16:57:34
987
原创 uniapp使用scroll-view，在iphone上，顶部底部上下拉，会产生抖动
造成抖动的原因是因为在scroll-view上，添加了scroll-top属性（用作锚点定位）改用生命周期onPageScroll，来实现滚动加载锚点定位改用 uni.pageScrollTo({ scrollTop: 0, duration: 300 });
2021-09-26 14:27:40
2239
1
原创 纯css实现横向单行公告无缝滚动
需要一个大容器，设置固定宽度，overflow:hidden公告也需要一个容器，设为inline-block动画通过translateX从右往左移动，起点为外层容器的宽度，终点为公告本身的宽度(-100%)<view class="water_tips"> <view class="water_text">公告公告公告公告公告公告公告公告公告公告公告公告</view></view>.water_tips { position: abso.
2021-09-10 16:02:02
1587
原创 纯css实现竖向公告栏无缝滚动
通过translateY来进行滚动，滚动距离为100%，±控制方向如果出现卡顿，大部分原因是边距问题，下面给大盒子添加了padding-top，不要用margin// html<view class="bullet"> <view class="bullet_inner"> <view class="bullet_wrap"> <view class="bullet_item" a:for="{{ list }}">{{ it.
2021-09-10 10:49:03
1469
原创 Linux相关命令
本地与远端之间的文件拷贝scp index.html root@公网ip:服务器上拷贝目标地址// 同时从本地拷贝多个文件至服务器上scp demo.txt demo2.txt root@47.101.174.26:/sites/demo
2021-03-07 15:46:32
120
原创 原生JS通过控制css变量修改dom元素样式
变量一定要设置在:root中(root：设置 HTML 文档的背景色)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
2021-02-24 10:10:48
979
原创 React组件属性类型（propTypes）校验
React组件属性类型（propTypes）校验这是一个评分组件import React from "react";import propTypes from "prop-types";const Rating = ({ value, text, color }) => { return ( <div className="rating"> <span> <i style={{ color }}
2021-02-21 13:47:45
354
原创 JS 实现倒计时功能
JS 定时器setIntervalsetInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。/* 1.uniapp中使用定时器，实现倒计时功能 2.需要在页面销毁的时候，清除定时器 3.每次生成定时器前，必须判断，该定时器是否存在，如果存在，就return（不可重复生成）*/<template> <view>剩余时间
2021-02-08 19:49:57
3090
原创 vue3.0引入sass
vue3.0引入sass在项目根目录打开终端输入以下命令，安装完成后，重新启动项目即可npm install sass-loader -D
2021-01-02 14:41:50
2083
原创 vue3.0引入element-ui（标准版）
vue3.0引入element-ui（标准版）Element-ui兼容3.0官网文档：https://element-plus.gitee.io/#/zh-CN/component/quickstart1.通过vuecli搭建3.0vue项目2.npm i element-plus 一. main.js：import { createApp } from "vue";// ********** 引入elementui 关键两句************** // import Eleme
2021-01-02 14:22:53
1238
原创 Antd 封装Modal
Antd 封装Modal// 子组件// Modal的visible直接设为trueconst { title, onClose } = this.props;<Modal title={title} visible={true} onOk={this.handleOkDraw} onCancel={onClose} maskClosable={false}> <Form> <Steps status="wait" size="small" direc
2020-12-15 19:11:05
1369
原创 bizCharts添加暂无数据
bizCharts添加暂无数据<Chart scale={scale} data={chartData} padding={'auto'} autoFit height={300} placeholder={ <div style={{ width: '100%', display: 'flex', justifyItems: 'center', paddingTop: '50px',
2020-12-08 09:31:22
1202
1
原创 Antd自定义表单验证 判断图片是否存在
Antd自定义表单验证 判断图片是否存在// 触发表单验证 const onCheck = () => { props.form.validateFields() .then((values) => { let cur = { type: props.type, id: props.curData.id, }; props.addSuc(values, cur); })
2020-12-01 19:38:45
501
原创 Antd table问题
Antd table问题// ellipsis：如果是自定义渲染的列，该属性不会生效，内容会直接被截取const columns = [ { title: '商品名称', dataIndex: 'title', render: (text, record) => { return ( <div className={styles.goodsWrapper}> <div clas
2020-11-27 20:02:35
420
原创 Antd中TimePicker获取24小时制
Antd中TimePicker获取24小时制// 格式化为： HH:mm:sslet start = val.rangeTime ? moment(val.rangeTime[0]).format('YYYY-MM-DD HH:mm:ss') : '';let end = val.rangeTime ? moment(val.rangeTime[1]).format('YYYY-MM-DD HH:mm:ss') : '';
2020-11-17 15:12:42
2478
原创 微信小程序支持ES7的async
微信小程序支持ES7的async语法facebook库（编译async语法）打开上面链接，复制runtime.js所有代码在小程序项目根目录中，新建目录 lib/runtime/runtime.js在每一个需要使用async语法的js页面中，都引入（不可全局引入）import regeneratorRuntime from "../../lib/runtime/runtime";...
2020-11-15 14:07:39
288
原创 微信小程序无法访问域名
微信小程序无法访问域名本地勾选微信ide的详情中如下图的选项即可，此方法治标不治本线上如果项目需要发布上线，必须在小程序的后台将域名添加至白名单，如下图所示
2020-11-14 18:43:56
2004
原创 小程序锚点定位
小程序锚点定位// 1.最外层需要用scroll-view包裹，scroll-view必须给固定高度以及scroll-y// 2.scroll-into-view(值应为某子元素 id，则滚动到该元素，元素顶部对齐滚动区域顶部)// 3.给目标容器添加id属性// 4.滚动后，需要通过onScroll方法清除scroll-into-view的值，用来二次锚点定位// index.axml<scroll-view class="index-page" scroll-into-view="{
2020-10-12 17:12:53
1319
原创 React 实现复制功能
React 实现复制功能以下都是Antd4.x的写法//hook写法----------通过useRefimport React, { useRef } from 'react';import styles from './index.less';import { Input, Button } from 'antd';const Export = (props) => { const linkRef = useRef(); //复制链接 const copyLink = ()
2020-09-01 15:15:33
801
2
原创 React Hook中点击事件传参
React Hook中点击事件传参<div key={index} className={styles.act_item} onClick={() => onOperate(index)}></div>
2020-08-31 09:49:09
5700
2
原创 Antd 4.4.3 版本，如何获取form表单的值
//1.const [form] = useForm() 必不可少!!!//2.必须要给组件传递一个props !!!//3.给Form组件，添加form={form} !!!//4.获取表单的值， form.getFieldValue 获取对应字段的值//5.提交表单 onFinish/* <Form.Item name='myInput' > <Input placeholder='请输入' /> </Form.Item> 注：如果要获取到In
2020-07-26 19:29:38
3723
1
原创 小程序大量form表单存值
小程序大量form表单存值//html<input data-name='input1' onChange='handleInputChange' />//js//1.直接往data中存值，并没有包含在一个对象中handleInputChange(e){ const { currentTarget : { dataset : { name } } , detail : { value } } = e this.setData({ [name]:value })} //
2020-07-26 15:44:18
237
原创 类似官网背景图固定
类似官网背景图固定直接上代码 height: 690px; background: url(https://cjwx.oss-cn-zhangjiakou.aliyuncs.com/front/mp/company/com-banner.jpg) no-repeat center top; background-attachment: fixed; //主要是这行 display: flex; justify-content: center; align-
2020-07-21 09:22:15
150
原创 vue在原有的类名上，动态渲染添加新类名
vue在原有的类名上，动态渲染添加新类名<view class="other"> <block v-for="(item, index) in otherData" :key='index'> <view class="item"> //这里的iconfont 属于原来的类名，注意要添加单引号 <text :class="['iconfont',item.icon]"></text> <view class
2020-06-17 10:20:10
1007
原创 详解Vue版本不匹配(Vue packages version mismatch:)
详解Vue版本不匹配(Vue packages version mismatch:)找到这段代码： vue@2.6.10 (/usr/local/lib/node_modules/vue/dist/vue.runtime.common.js)Vue packages version mismatch:- vue@2.6.10 (/usr/local/lib/node_modules/vue/dist/vue.runtime.common.js)- vue-template-compiler@2.6
2020-06-16 23:45:17
1524
原创 vue 自定义格式化配置
vue 自定义格式化配置在项目根目录创建 .prettierrc 文件，添加如下图配置，保存后，在需要格式化的文件中重新格式化即可
2020-06-16 11:44:29
480
原创 vue-cli4取消eslint校验
vue-cli4取消eslint校验在项目根目录创建vue.config.js文件![在项目根目录创建vue.config.js文件](https://img-blog.csdnimg.cn/2020061219485682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Njk4MjQ5,size_16,color_FFFFFF,t_7
2020-06-12 19:51:47
888
原创 vue在原有的类名上，动态添加新类名
vue在原有的类名上，动态添加新类名//通过数组 键值对的方式，添加类名，固定的类名，值直接给true即可（true为添加类名，false则相反）<view :class="[{'flavor-item':true},{'on': item.isChoose}]" @click="handleClickChoose(index)"> {{item.label}}</view>vue爬坑ing...
2020-06-08 09:53:15
1871
原创 Javascript对数据进行分组及根据分组统计
Javascript对数据进行分组及根据分组统计<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JS分组及计数</title>
2020-05-24 20:21:29
4427
原创 React原生 实现公告无限滚动效果
React原生 实现公告无限滚动效果//index.jsimport React, { Component } from 'react'import './index.less'export default class Scroll extends Component { constructor(props) { super(props); this.state = { noticeList: [ {
2020-05-18 15:26:04
4191
原创 React 手写 Tab栏
React 手写 Tab栏废话不多说，直接上代码//index.jsimport React, { Component } from 'react'import './index.less'class Tab extends Component { constructor(props) { super(props); this.state = { tabList: [ {
2020-05-14 19:42:55
942
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人