- 博客(57)
- 收藏
- 关注
RSS订阅原创 el-date-picker日期选择器奇怪的问题解决
点击日期选择器，出现日历下拉框，选择了日期后绑定的value值不变；绑定 @change 事件，监听不到。：添加input事件，$forceUpdate()
2023-10-25 17:59:29
881
原创 小程序 web-view h5页面背景音乐自动播放
/** * 年度账单-登录首页 */import React,{useEffect} from 'react'import 'swiper/swiper-bundle.min.css'import styles from './styles.less'import bgm from './bgm2.mp3'// 主体const annualAccountLoginIndex = (props) => { const goAnnualAccount =()=>{ c..
2023-07-05 14:31:59
2421
1
原创 地图 json 数据
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
2022-02-20 22:06:36
820
原创 css3 漂浮效果（科幻）
效果图html<div class="float" style="background: url(./bg.png) no-repeat left bottom;background-size: cover;height: 80%;width: 100%;margin-top: 10%;"> <p style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;
2022-01-04 10:42:39
1039
原创 react 16 生命周期
constructor：初化生命周期函数1.在这个生命周期函数里面，可以定义当前组件需要的一些状态，通过this.state = { }来定义状态2.当前生命周期必须使用super这个方法，否则会报错；当前组件的状态必须定义在this.state里面3.super( )：用来实现继承getDerivedStateFromProps1.替代原有的componentWillReceiveProps2.将传入的 props映射到state上3.每次re-rendering之前被调用4.即使你的p.
2021-11-05 11:20:57
343
原创 react 15 生命周期
constructor：初化生命周期函数1.在这个生命周期函数里面，可以定义当前组件需要的一些状态，通过this.state = { }来定义状态2.当前生命周期必须使用super这个方法，否则会报错；当前组件的状态必须定义在this.state里面3.super( )：用来实现继承componentWillMount：挂载前1.当constructor执行完毕以后当前的生命周期就会执行，在这个生命周期函数里面我们可以通过this.props访问到外部属性。2.在这个生命周期函数里面我们可以将.
2021-11-04 15:11:29
408
2
原创 redux
redux（npm install --save redux）javascript提供的一个可预测性的状态容器，在vue中可以使用，但是在react中会比较多，可以集中管理多个组件的状态。需求场景1. 多个组件的状态需要共享的时候2. 一个组件需要改变另一个组建的状态的时候3. 组建的状态需要在任何时候都可以拿到三个原则1. 单一数据源，整个react中的状态都会被统一管理到store2. state是只读的，不能直接改变state,而是通过出发redux中的特定方法来进行修改3. 使用.
2021-10-08 10:11:42
160
原创 路由进阶与高阶组件
查看无状态组件的propsimport React, {Component} from 'react'import Home from "./components/Home"import User from "./components/User"import Phone from "./components/Phone"import {Route,Link,NavLink,Switch,Redirect} from 'react-router-dom'function App(props){
2021-09-30 08:46:43
150
原创 react-router-dom 路由基础
什么是路由根据不同的url地址展示不同的页面或者数据路由分为前端路由和后端路由 前端路由：1. 前端路由多用于单页面开发（SPA）2. 前端路由切换不涉及到服务器，是前端利用hash或者HTML5的historyApi来实现的，一般用于不同内容展示及切换 路由模式 hash：HashRouter（带#号，刷新的时候页面不会丢失） browser: Browser-Router（没有#号，通过历史记录api进行路由切换，刷新会丢失，本地模式刷新不会丢失）v5版本 下
2021-09-29 14:09:19
226
原创 前端 跨域 理解
什么是跨域浏览器对于ajax的限制，即同源策略，即同协议，同端口，同域名数据才能共通解决跨域的方法a)正向代理——开发环境（一个位于客户端和目标服务器之间的代理服务器，为了获取目标服务器的内容，客户端向代理服务器发送一个请求，然后代理服务器去向目标服务器里获取数据并返回给我们）b)反向代理——正式环境（可以通过代理服务器来接收网络上的请求连接，然后将这个请求转发给内部的网络服务器上并把从这个服务器上得到的数据返回给网络请求的客户端，这个时候代理服务器对外的表现就是一个反向代理）...
2021-09-28 14:31:44
176
原创 react props与state 组件传值
1.父传子和子传父（类似vue）：在子组件标签中用自定义属性进行传递，接收的时候通过 this.props 进行接收；在子组件标签内部用自定义属性定义一个方法传递给子组件 子组件调用这个方法【这个方法可以再this.props中访问到】传递参数子组件import React, {Component} from 'react'export default class News extends Component { constructor(props){ super(props
2021-09-28 13:54:16
615
原创 react 基本介绍
基本概念react是facebook开发出的一块js库，facebook认为MVC无法满足需求扩展。特点不适用模板不是MVC框架响应式是一个轻量级的js库原理虚拟DOMreact把DOM抽象成为一个js对象diff算法虚拟DOM确保最对界面上整整发生变化的部分进行实际的DOM操作；逐层次的来进行节点的比较jsx执行的效率更快；它是类型安装的，编译的过程中就能及时的发现错误率更快；使用时编写模板会更加简单和快速...
2021-09-27 15:48:16
139
原创 天地图插件使用——添加标注点
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>HELLO WORLD</title> <style> .list-ul { position: fixed; top: 20px; left: 20px; wid.
2021-06-28 10:53:00
2116
原创 el-table文字换行问题
.el-table .cell{ white-space: pre-line; }数据格式contractNumber: "测试换行\n测试换行\n测试黄行"
2021-06-18 09:19:02
1365
3
原创 手机端 picker 正则模糊搜索
<van-cell title="处理人" wx:if="{{showContent}}" value="{{ userText }}" is-link bind:click="onUserShow" /> <van-popup show="{{ userShow }}" position="bottom" bind:close="onClose"> <van-search bind:search="onSearch" bind...
2021-06-17 17:14:41
608
原创 代码改错了git分支应该怎么办
> git stash> git checkout ... //切换分支> git stash pop> ... 再执行add\commit等stash命令可用于临时保存和回复修改，可跨分支。注：在未add之前才能执行stash！！！！git stash [save message]保存，save为可选项，message为本次保存的注释git stash list所有保存的记录列表git stash pop stash@{num}恢复，num是可选项，通过gi
2021-06-03 16:47:22
730
原创 echarts 地图3d+地图下钻
效果图// 地图数据 （用来标记地图名称的散点图及弹窗数据） let dataset = [ { name: '阿拉善盟', wheat: 128, corn: 100, potato: 28, soybeans: 234, number: 152900,
2021-06-02 10:30:16
3368
原创 vscode 的常用vue及react插件及配置
{ "[json]": { "editor.quickSuggestions": { "strings": true }, "editor.suggest.insertMode": "replace", "editor.fontSize": 16 }, "workbench.iconTheme": "material-icon-theme", "git.ignoreMissingG...
2021-04-14 11:25:49
309
原创 小程序 教育平台视频学习打卡
功能课程学习详情页，点击课程列表自动播放课程视频视频播放过程中每5分钟弹窗确认进度弹窗时暂停播放弹窗时间10秒钟，超时自动退出课程点击确认进度后自动播放视频禁止快进视频播放完停止进度却让人弹窗代码wxmlvideo// enable-progress-gesture 关闭控制进度的手势// show-progress 展示播放进度// initial-time 指定视频初始播放位置，单位为秒<video id="videoCon" enable-progress-ges
2021-02-27 13:25:11
994
原创 vue 防止表单重复提交
在plugins文件夹新建directives.js文件import Vue from 'vue'const preventReClick = Vue.directive('preventReClick', { inserted: function(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTim
2021-01-07 13:48:15
743
原创 three.js几何体及参数
立方体（CubeGeometry）THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)这里，width是x方向上的长度；height是y方向上的长度；depth是z方向上的长度；后三个参数分别是在三个方向上的分段数，如widthSegments为3的话，代表x方向上水平分为三份。一般情况下不需要分段的话，可以不设置后三个参数，后三个参数的缺省值为1。其他几何形状中的分段也是类似的，下
2020-12-08 17:17:07
762
原创 小程序 使用rich-text处理富文本
const formatRichText = html => { let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){ match = match.replace(/style=\"(.*)\"/gi, '').replace(/style=\'(.*)\'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').re
2020-12-02 14:30:40
632
原创 小程序 ios识别日期为null问题
时间格式："2017-5-5"这种格式的日期在开发者工具上测试可以获取时间戳没有问题 在ios上返回null"2017-05-05"这种格式的日期在ios和开发者工具上都可以正常跑根据时间戳计算天数”2017-05-05“这种格式苹果手机获取时间戳，真机调试显示，预览和体验版是null需要转换一下replace(/-/g, ‘/’)function time(time) { if (time) { time = time.replace(/-/g, '/')
2020-12-02 14:21:26
694
原创 小程序扫码功能
takePhoto: function() { var that = this; wx.scanCode({ onlyFromCamera: true,// 只允许从相机扫码 success(res){ // 扫码成功后 在此处理接下来的逻辑 ... } }) },属性 类型 默认值 必填 说明 最低版本 onlyFromCamera boolean false 否 是否只能从相机扫码，不允许从相册选择图片..
2020-11-26 17:03:54
478
原创 小程序 跑马灯抽奖
参考技术分享：https://www.cnblogs.com/mrzll/p/10283272.html先上效果图逻辑就是点击抽奖后，需要做一个跑马灯的效果，并且一开始加速然后减速到出中奖结果，这边会用到定时器，每切换一下调用定时器，直到出来结果后清除定时器wxml<veiw class="lottery-list weui-flex"> <block wx:for="{{lotteryList}}" wx:key="index"> <view cl
2020-11-26 16:32:20
815
1
原创 代码改错分支（未add），重新调整分支
git stash // 将修改的代码暂存到stashgit checkout targetbranch // 切换到正确的分支git stash pop // 从stash中取出暂存的代码修改
2020-11-10 08:45:59
345
原创 echarts 的文字换行
formatter:function(value){ var ret = "";//拼接加\n返回的类目项 var maxLength = 1;//每项显示文字个数 var valLength = value.length;//X轴类目项的文字个数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 if (rowN > 1)//如果类目项的文字大于5, {
2020-11-09 16:53:44
1550
原创 webgl three.js第三课 点、线、面（一）
3D世界的组成在计算机世界里，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体，如下图：我们通常把这种网格模型叫做Mesh模型。给物体贴上皮肤，或者专业点就叫做纹理，那么这个物体就活灵活现了。最后无数的物体就组成了我们的3D世界定义一个点// THREE.Vector3表示Vector3是定义在THREE下面的一个类。THREE.Vector3被赋值为一个函数。这个函数有3个参数，分别代表x坐标，y坐标和z坐标的分量。函
2020-10-28 13:40:48
293
原创 orgChart的应用
文档地址：https://balkangraph.com/OrgChartJS/Demos/FirstLookhtml:<div id="tree" style="height: 500px;width: 100%;"></div><script src="__TMPL__/public/assets/js/orgchart.js"></script><script> window.onload = function () {
2020-10-19 15:50:12
736
原创 vue + vue-baidu-map + cordova实现获取地理位置、跳转第三方地图软件
<template><div class="map-page"> <head-com title></head-com> <form class="search-con" action="/"> <van-search v-model="addressKeyword" placeholder="请输入搜索关键词" @search="onSearch" /> </form> <
2020-10-19 15:45:09
577
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人