- 博客(34)
- 收藏
- 关注
RSS订阅
1原创 常用插件库
1、页面滚动动画插件：aos2、华为云obs部署插件：huawei-obs-plugin3、css单位打包时自动转化：postcss-plugin-px2rem4、swiper：vue-awesome-swiper
2022-08-15 15:25:14
619
原创 for 循环里的let 和 var声明差别
1、var声明for (var i = 0; i < 3; ++i) { setTimeout(() => console.log(i), 0)}// 等价于如下代码var i = 0setTimeout(() => console.log(i), 0)var i = 1setTimeout(() => console.log(i), 0)var i = 2setTimeout(() => console.log(i), 0)var i = 3//
2021-10-19 17:11:58
96
原创 重复组件的key值不要用index实例
import React, { useState } from 'react'import { Button } from 'antd'function CompanyInfo() { const [arr, setArr] = useState(['a','b','c']) const change = () => { let a = [ 'd', ...arr ] setArr(a) console.log(arr) } return ( &.
2021-05-21 11:52:37
110
原创 城市级联选择5级（到村）
json数据地址：https://raw.githubusercontent.com/XinZiIng/multi-level-address/master/five-level-address.json
2021-05-10 14:48:18
184
原创 vue中使用vue-awesome-swiper，并且一个页面里有多个swiper
1、在class里面多加一个类名 <div class="swiper-button-prev prev-member"> <img class="img-navigation" src="../../../assets/home/control_left@2x.png"> </div> <div class="swiper-button-next next-member"> <img class="i
2021-05-07 09:39:49
1523
原创 a标签下载已知url文件
1、同域名下<a href="http://asdasd.com/aa.png" download>32131</a>2、不同域名download(url, filename) { fetch(url, { headers: new Headers({ 'Origin': location.origin }), mode: 'cors' }).then(response =.
2021-04-23 14:45:21
909
原创 vue使用a标签锚点跳转不同页面失效
比如a页面跳去b页面的某个id为bbb的区域a页面<a href="bbb">跳转</>b页面<div id="bbb">asdasdasds</div>const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector:
2021-04-20 23:08:28
1223
原创 高德地图聚合自定义样式
1、本文使用vue-amap2、mapEvent: { init: (o) => { o.setMapStyle('amap://styles/whitesmoke') setTimeout(() => { let sts = [{ url: "https://a.amap.com/jsapi_demos/static/images/blue.png", //聚合量在1-10
2021-04-16 09:18:32
729
原创 vue-awesome-swiper的点击事件
swiper的普通点击事件不管用，需要单独重写1、swiperOptionswiperOption: { loop: false, slidesPerView: '3', spaceBetween: 24, centeredSlides: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-bu
2021-04-15 11:37:30
1855
原创 vue点击某个div出现下拉框，点击其他区域下拉框消失
1、场景2、代码 watch:{ show_login_out(newVal, oldVal){ if(newVal === true){ alert('开始监听') // 若显示，则监听失去焦点事件。 document.addEventListener('click',this.click_out_side, true); }else
2021-04-06 16:56:56
1324
原创 Vue使用登录弹框插件
1、创建登录组件<template> <transition @afterLeave="destroy"> <div v-if="show" class="login-dialog-wrapper"> <div class="content-box"> 登录弹窗 <div @click="confirm"> 确定 </div>
2021-03-26 16:20:19
555
原创 链接在移动端与PC端打开，会分别自动跳转到两个不同的详细的链接
<script type="text/javascript"> var os = function () { var ua = navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = /(?:Android)/.test.
2021-03-26 14:45:47
363
原创 实用的各种函数
1、点击缓慢滚动到顶部toTop () { this.timer = setInterval(() => { const top = document.documentElement.scrollTop const speed = top / 10 if (document.documentElement.scrollTop !== 0) { document.documentElement.scrollTop -= speed } else {
2021-03-17 09:51:11
65
原创 vue移动端h5适配设置
1、设置客户端缩放比例为1<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">2、根字体font-size设置（html页面）<script> fnResize() window.onresize = function () { fnResize() ...
2021-03-09 09:57:14
1217
原创 input输入框聚焦时，输入框占位符内容以动画形式移动到左上角作为标题
input输入框占位符变化：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题<div class="input-box"> <input class="input-control input-outline" placeholder="账号"> <label class="input-label">账号</label></div>首先：让浏览器默认的placeholder效果不可见 ...
2021-03-03 09:33:19
1280
原创 Taro使用Taro UI
前言：改方案使用react和typescript，不需要安装sass的loader1、安装alpha版本 "taro-ui": "^3.0.0-alpha"2、在app.ts里面引入全局样式 import'taro-ui/dist/style/index.scss'3、直接使用UI组件 import { AtButton } from 'taro-ui'...
2021-03-02 15:52:57
1639
原创 JS基础、重点和难点
js引入：<script>alert('111')</script>，<script src="myJs.js"></script> 注释：// ，/*注释*/ 字符窜：length属性，常用方法： concat()： indexOf()： match()： replace()： slice()： split()： ...
2020-05-17 20:36:21
1935
原创 CSS基础、重点和难点
1、css基础 样式层叠优先级：内联>内部样式表>外部样式表>默认值 选择器优先级：!important>内联>id选择器>伪类>类选择器>标签选择器>通用选择器* 外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css"> 内部样式表：<style type="text/css"> p {margin-left:20px;}
2020-05-15 17:33:43
709
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人