- 博客(87)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 setting
{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 ..
2023-01-12 08:35:44
115
原创 el-table表格树形结构和懒加载结合:当父节点渲染的东西和子节点渲染的东西不一样
el-table表格树形结构和懒加载结合:当父节点渲染的东西和子节点渲染的东西不一样树结构展开:事件 @expand-change='handledetail'设置:type="expand"<el-table :data="videoList.content" row-key="id" style="width: 100%;background-color: #000; " :show-header='false' @expand-change='handledetail'>
2021-12-29 10:13:52
1631
原创 小程序实现圆环进度
视图层 <view class="progress_box"> <canvas class="progress_bg" canvas-id="cpbg"></canvas> <canvas class="progress_bar" canvas-id="cpbar"></canvas> <canvas class="progress_line" canvas-id="cpline
2021-12-13 11:07:01
271
原创 H5实现动画css3
// 动画 getKeyframes() { let height = this.records.length * 30; const runkeyframes = `@keyframes rowup{ 0%{ top: 0px; } ...
2021-12-11 14:06:43
301
原创 pc端实现点击保存:
点击事件:<div @click="downLoad" class="downLoad">保存二维码到电脑</div>事件处理: downLoad() { let url = url(地址) this.invitationQrcode=url let link = document.createElement("a"); link.download = res; link
2021-12-10 10:48:24
213
原创 小程序实现长按保存图片
首先是图片展示 <image :src='invitationMainGraph' @longtap="bankImg" mode='widthFix' class='image'></image>长按事件:@longtap="bankImg"事件处理:保存,查看权限,打开权限 // 保存到本地 bankImg() { console.log(123, "==123==="); if (this.canSaveAlb
2021-12-10 10:45:07
311
原创 用正则处理字符串,保留首位,中间用*表示
var reg = /^(.).+(.)$/g; value = value.replace(reg, "$1**$2");
2021-12-07 18:56:21
638
原创 uni-app,H5抽奖
<template> <view class='lottery'> <view class="lotteryTop"> 会员每日幸运抽奖 </view> <view class="roulette"> <view class="surplus"> 剩余抽奖次数：{{surplus}} </view> <view class=".
2021-12-07 17:00:11
3617
原创 小程序圆环进度条
html <view class="progress_box"> <canvas class="progress_bg" canvas-id="cpbg" ></canvas> <canvas class="progress_bar" canvas-id="cpbar" ></canvas>
2021-12-07 08:49:59
189
原创 React中队prop进行类型限制
在类型传递中,我们要对prop中的类型进行限制最新版本有一个PropTypes进行处理安装:npm i prop-types引入:import PropTypes from 'prop-types'使用:Person.propTypes = { //你类的属性规则 ,, static相当于直接给类本身添加了属性 name: PropTypes.string.isRequired, sex: PropTypes.str
2021-11-26 14:57:17
471
原创 Vue中实现全局监听屏幕宽高
1.要全局实现监听屏幕宽高的话需要使用vue,实现宽度在App.vue中编写,通过window.onresize监听初始宽度,保存进state中 mounted() { let _this = this; window.onresize = function () { // 定义窗口大小变更通知事件 // console.log(document.documentElement.clientWidth, "====12="); _this.
2021-11-22 10:29:29
1598
原创 h5禁止缩放
// 禁用缩放function addMeta() { $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');}setTimeout(addMeta, 3000);// 禁用双指放大document.documentElement..
2021-10-06 15:29:16
357
原创 uni点击图片放大图片预览
对取到的数据进行处理:转换为数组reduce是把数组对象转换为纯数组,current是当前图片地址,fileurl+cur.url是对图片地址进行拼接let newArr = this.file.reduce(function (prev, cur) { return prev.concat(fileUrl + cur.url); }, []); uni.previewImage({ urls: newArr, current: [fileUrl +
2021-09-18 16:16:43
97
原创 自动适配苹果x底部留痕
给所在页面添加padding-bottom:calc(-16px+env(safe-area-inset-bottom));
2021-09-18 09:20:56
71
原创 vue项目中键盘点击enter键页面刷新,如何阻止默认事件
通常我们在使用element中的时候,如果在<el-form >中按下enter键的时候,是默认提交表单的,这时候我们就需要取消默认事件@submit.native.prevent当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在<el-form>标签上添加@submit.native.prevent。vue中也是有很多的默认事件:如<input @keyup.enter="function"&...
2021-09-14 19:07:25
2123
原创 vue中三种不同插槽使用:普通插槽,具名插槽,作用域插槽
{ path: '/', component: User, children: [ { path: '/home', // /user/:id component: userIndex }, ] }
2021-09-08 17:34:42
895
1
原创 web页面跳转支付宝网页支付
首先是需要后端配合的:这是在页面中展示的,只有支付宝支付才行<div class="pay-center" style="padding-left:15px" v-if="payMethod == 'ALIPAY'"> <el-link type="primary" :underline="false" @click="payWeb"> 没有手机，使用网页端支付 </el-link><
2021-09-07 11:43:51
2657
原创 react中redux的使用
这是reduce的完整模板(1).去除Count组件自身的状态(2).src下建立: -redux-store.js-count_reducer.jsstore.js(3).store.js：1).引入redux中的createStore函数，创建一个store2).createStore调用时要传入一个为其服务的reducer3)....
2021-09-07 10:14:58
53
原创 react中的withRouter
//withRouter可以加工一般组件，让一般组件具备路由组件所特有的API//withRouter的返回值是一个新组件import{withRouter}from'react-router-dom'exportdefaultwithRouter(Header)import React, { Component } from 'react'import {withRouter} from 'react-router-dom'class Header extends C...
2021-09-06 19:44:44
74
原创 react中的ui组件antd使用
antd的按需引入+自定主题1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json.... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test",
2021-09-06 19:41:28
99
原创 react中的push和replace跳转
<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button><button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>push路由跳转是可以跳转到上一级,可以返回的 pushShow = (id,title)=>{ //pu..
2021-09-02 20:01:43
791
原创 解决图片没有沾满盒子问题,底部出现空白
原因:图片底侧出现空白,原因是行内块元素会和文字基线对齐,解决办法:一:给图片添加:vertical-align:middle|top|bottom;等二:把图片转变为行内块元素:display:block;
2021-08-31 20:20:22
273
原创 移动端布局
一:流式布局:设置宽度为:100%;不固定像素二:Flex布局 display: flex; flex-direction: column;//主轴方向 justify-content: center;//主轴居中 flex-wrap: wrap;//是否换行 align-content: center;//侧轴方向;多行 align-items: center;//侧轴居中三:rem布局rem相对页面主体大小来决定(vsc插件:px to rem)在vs
2021-08-30 19:24:02
59
原创 react组件间通信(pubsub)
安装: npm install pubsub-js --save使用:首先是引入:importPubSubfrom'pubsub-js',触发事件发送数据import React, { Component } from 'react'import PubSub from 'pubsub-js'export default class Search extends Component { search = ()=>{ PubSub.publish('atguigu',{...
2021-08-30 15:37:46
256
原创 HTML5,CSS3
盒子模型:加了border,padding,不会撑开盒子 box-sizing: border-box;图片模糊: filter: blur(5px);计算宽度计算 width: calc(100%-50px);
2021-08-30 08:20:48
57
原创 CSS3(2D转换)
2D转换平移这是移动x,y轴,平移transform: translate(x,y);可以分开写:.box{transform:translateX();transform:translateY();}旋转:旋转45度,顺时针为正.box{transform: rotate(45deg);}缩放:缩放宽高.box{transform: scale(x,y);}缩放倍数.box{transform: scale(1.1);}动画
2021-08-30 08:20:15
57
原创 react中的代理-proxy
2D转换平移这是移动x,y轴,平移transform: translate(x,y);可以分开写:.box{transform:translateX();transform:translateY();}旋转:旋转45度,顺时针为正.box{transform: rotate(45deg);}缩放:缩放宽高.box{transform: scale(x,y);}缩放倍数.box{transform: scale(1.1);}动画首
2021-08-28 14:26:41
122
原创 CSS3过渡效果
移入过渡:宽高,颜色,边距都可以.box:hover{transition: 要过渡的属性 花费时间 运动曲线 何时开始;}通常写为:.box:hover{transition: all 1s;}
2021-08-28 14:03:09
46
原创 vue中高德地图获取锚点信息窗体
直接上代码(描点部分)this.tableData是获取到的锚点数据position是每个锚点的坐标marker.on('click', function (e) {})点击事件 let map = new AMap.Map("container", { zoom: this.zoom, pitch: 50, viewMode: this.viewMode, // 开启3D视图,默认为关闭 });// 构造点标
2021-08-27 20:22:58
386
原创 CSS中的精灵图
主要是在背景添加一个图片background-image:url('bgdesert.jpg')设置精灵图的平铺方向background-repeat:repeat-x;设置定位与不平铺background-repeat:no-repeat;精灵图的偏移量background-position:right top;(可以设置像素)简写:background:#ffffff url('img_tree.png') no-repeat right top;...
2021-08-27 08:41:27
77
原创 react的父子数据传递
父传子:父组件创建数据传递: //初始化状态 state = { todos: [ { id: '001', name: '吃饭', done: true }, { id: '002', name: '睡觉', done: true }, { id: '003', name: '打代码', done: false }, { id: '004', name: '逛街', done: false } ] } render() { const { todos }
2021-08-26 19:00:23
60
原创 常用的react生命周期:
react的生命周期:初始化加载的时候:由ReactDOM.render()触发---初次渲染1.constructor()2.getDerivedStateFromProps3.render()4.componentDidMount()=====>常用一般在这个钩子中做一些初始化的事，例如：开启定时 器、发送网络请求、订阅消息...
2021-08-24 19:25:40
51
原创 高德地图多边形地图编辑
效果:代码:<template> <div> <div class="top">多边形地图</div> <div class="top"> <el-button type="primary" @click="polyEditorEdit.open()">开始编辑</el-button> <el-button .
2021-08-23 19:00:16
1134
原创 高德地图多边形地图的设置
首先是绘制多边形,确定可以获得点坐标首先是获取地图,渲染在页面上: initMap() { setTimeout(() => { this.map = new AMap.Map("mapContainer", { resizeEnable: true, zoom: 13, }); this.polyEditorEdit = new AMap.PolygonEditor(this.m.
2021-08-23 18:48:21
879
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人