- 博客(37)
- 收藏
- 关注
RSS订阅原创 移动端rem方案
方案一、使用js1rem === 100px(function (doc, win) { const docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { const clientWidth = docEl.clientWidth;
2022-04-24 17:23:57
383
原创 2021.11.11最新更新省市区级联数据json
链接：https://pan.baidu.com/s/1r8pnq9gyK3QaYeMrP0U4ug提取码：vhzy
2021-11-11 17:10:56
518
1
原创 微信小程序使用阿里图库iconfont
1.登录https://www.iconfont.cn2.找到需要的图标，并点击添加入库3.点击右上角的购物车图标4.将选择的图标加入项目，如果没有就新建一个项目5.然后从顶部的菜单进入我的项目6.点此处生成代码7.然后点击链接，注意不要点复制代码8.点了链接后会新打开一个浏览器窗口，然后全选复制里面的代码9.接下来进入到我们代码之中，创建一个icon.wxss文件，文件位置想放哪就放哪，然后将我们上一步复制的代码粘贴进去10.然后全局可以在全局app.wxss中引入，当然
2021-11-11 14:52:01
715
原创 ＜script setup＞中使用provide和inject
父组件<script setup> import { provide } from "vue"; const data = { id: 123 }; provide('data', data)</script>子孙组件<script setup> import { inject } from "vue"; const data = inject("data"); console.log(data.id) // => 123</scrip
2021-10-30 14:21:05
1351
3
原创 vue3＜script setup＞语法糖中父组件调用子组件方法
// 父组件<template> <child ref="childRef"></child></template><script setup>import { ref } from "vue";// 引入子组件import child from "./child.vue";// 获取子组件const childRef = ref(null);const fun = () => { childRef.value.chil
2021-10-27 16:31:28
6449
1
原创 前端代码规范
文档1.京东凹凸实验室前端代码规范，网址是：https://guide.aotu.io/2.腾讯前端代码规范，网址是：http://tgideas.qq.com/doc/index.html3.百度前端代码规范文档，网址是：https://github.com/ecomfe/spec4.JavaScript Standard Style，网址是：https://github.com/standard/standard5.Vue官方特有的代码风格指南。网址是：https://cn.vuejs.org
2021-08-25 15:41:48
169
原创 File转base64
封装函数/** * File转base64 * @param file * @return base64 * */export function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); let fileResult = ""; reader.readAsDataURL(file);
2021-08-13 11:18:24
1611
原创 JS中直接调用一个函数和new一个函数的区别
首先定义一个Test函数：function Test() { console.log(this)}Test()这里先解释下this我们在全局环境下调用了Test函数，然后在函数内部打印了this，众所周知，函数内部的this指向的是调用函数的对象，这里我们在全局调用了Test，所以打印出来的this就是window'use strict' // 开启严格模式// 注意：在严格模式下// 函数的内部不允许this指向window// 所以在严格模式下这里打印的this会是unde
2021-07-02 11:47:49
923
原创 echarts在vue中按需引入
1.安装npm install echarts --save2.myEhcarts.js创建myEhcarts.js文件，当然，文件名称和位置可以自己定，内容如下：// myEhcarts.js// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入图表类型，图表后缀都为 Chartimport { BarChart, LineChart, P
2021-06-01 15:57:46
1463
1
原创 flex布局
1.定义flex布局首先flex布局分为容器(flex_container)和项目(flex_item)，也就是父元素和子元素。任何一个容器（父元素）都可以指定为flex布局：.flex_container{ display: flex; /*行业元素使用display: inline-flex;*/}Webkit 内核的浏览器，必须加上-webkit前缀。.flex_container{ display: -webkit-flex; /* Safari */ display: fl
2021-05-26 16:36:14
147
原创 Math对象的使用总结-JavaScript
ECMAScript 提供了 Math 对象作为保存数学公式、信息和计算的地方。Math 对象提供了一些辅助计算的属性和方法。一、特殊值属性说明Math.E自然对数的基数 e 的值Math.LN1010 为底的自然对数Math.LN22 为底的自然对数Math.LOG2E以 2 为底 e 的对数Math.LOG10E以 10 为底 e 的对数Math.PIπ 的值Math.SQRT1_21/2 的平方根Math.SQRT2.
2021-05-25 14:30:35
162
1
原创 nuxt.js的使用
介绍Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架。主要解决首屏加载时间长和SEO优化创建项目npx create-nuxt-app 项目名创建项目成功后目录如下：执行命令npm run dev启动项目项目创建成功！路由Nuxt.js不需要单独配置路由路由会根据项目根目录下的pages文件夹中的文件和组件名称自动生成路由，首页默认为index.vue，其他页面比如pages下面的about文件夹中有一个about.vue组件，它的路由就为/about/about编
2021-04-09 18:01:09
425
原创 前端小技巧---JS篇
1.两个变量值的交换let a = 1, b = 2;a = [b, b = a][0];console.log(a); //2console.log(b); //12.浮点数快速向下取整let a = 3.11564548;let b = 3.61456484;console.log(a | 0); //3console.log(~~b); //3这种方式要比同类的parseInt()和Math.round()要快，而且更优雅。3.生成随机字符串function get
2021-03-31 10:17:46
85
原创 前端小技巧---CSS篇
1.文字模糊效果为文字设置以下两行代码，就可以达到文字模糊效果color: transparent;text-shadow: #111 0 0 5px;2.毛玻璃效果毛玻璃效果用到了css的滤镜filter的blur属性，只需给元素添加以下代码就可以实现filter: blur(10px);3.多重边框利用box-shadow来实现div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0,
2021-03-31 10:04:36
426
原创 前端小技巧---HTML篇
1.浏览器秒变编辑器在浏览器的控制台执行一下代码，整个页面将变得可编辑document.body.contentEditable = true;2.带有id的属性会创建全局变量所有设置了id属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById显得有些多余了。但是实际项目中不推荐这样做。<div id="test"></div><script> console.log(test)&
2021-03-31 09:53:21
72
原创 vue+ts引入animate.css报错找不到模块
在src文件下找到shims-vue.d.ts文件添加代码declare module 'animate.css'declare module '*.vue' { import Vue from 'vue' export default Vue}declare module 'animate.css'
2021-03-12 10:14:54
773
原创 vue-devtools安装
第一步到guthub上去下载安装包，地址：https://github.com/vuejs/vue-devtools/tree/master注意这里是需要下载master分支的下载成功后里面会有一个shells文件夹，说明是可用版本第二步然后输入npm install命令安装依赖注意第一步时一定下下载master分支的，不然这里会报错安装完成之后执行命令npm run build第三步打开谷歌浏览器，进入更多工具 > 扩展程序点击加载已解压的拓展程序 > 选择vu
2021-03-09 14:49:13
2024
原创 js防抖与节流
什么是防抖和节流防抖：对于频繁的操作，只让最后一次操作生效节流：对于频繁的的操作，限制在特定的时间里只触发一次防抖防抖的原理其实很简单，比如我们频繁点击一个按钮，点击按钮会触发一个事件，比如：<!--html--><button id="but">点我</button>// jsfunction doSomeThing() { console.log('做点什么');}document.querySelector('#but').onclick =
2021-03-05 16:29:13
306
原创 vuex持久化插件vuex-persistedstate
安装起步npm i -S vuex-persistedstate配置使用在vuex初始化时候，作为组件引入。import persistedState from 'vuex-persistedstate'export default new Vuex.Store({ // ... plugins: [persistedState()]})自定义存储方式1.需要使用sessionStorage的情况plugins: [ persistedState({ stora
2021-03-04 11:03:00
241
2
原创 ES6学习笔记
1-新的声明方式1.let：局部声明2.const：声明常量2-变量的解构赋值数组解构： let [a,b,c] = [1,2,3]解构的默认值: let [foo = true] =[];对象的解构赋值:let {foo,bar} = {foo:'yang',bar:'杨'};//如果在解构之前就定义了变量，需要加上圆括号()let yy;({yy} ={yy:'JSPang'});字符串解构:const [a,b,c,d]="yang";3-扩展运算符和rest运算符//当参
2021-02-26 11:17:32
147
原创 纯CSS导航栏下划线跟随效果
<ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li></ul>ul { display: flex;}li { list-style: none;
2021-02-07 15:25:55
196
原创 typescript学习笔记
全局安装npm install -g typescript检查安装状态tsc将ts文件转换为js文件tsc demo.ts这里在vscode中的终端运行tsc demo.js报错‘因为在此系统上禁止运行脚本’，解决办法：1.首先按win键 + X ，打开PowerShell（管理员）2.输入set-ExecutionPolicy RemoteSigned3.输入Y或者A都可以（不区分大小写，大小写都可以）4.输入get-executionpolicy，如果出现 RemoteSign
2021-02-05 16:13:55
261
原创 css3选择器，不包含某个类名
比如给没有active类名的span加上hover效果span:not(.active):hover { color: #ff1464;}
2020-11-11 17:31:07
10242
原创 js将数组对象中按照对象的某一个属性进行排序
1.对象数组我们现在有一组对象，包含“name，value”等属性，实现按照value对这些对象进行排序。series:[ {name:'西安市',value:100}, {name:'威阳市',value:120}, {name:'延安市',value:80}, {name:'南洛市',value:90}, {name:'榆林市',value:130}]2.排序方法实际上在于数组对象的sort方法。Array.sort(fun)fun是一个函数，排序根据这个
2020-09-16 10:42:05
11150
原创 在VUE中使用中国天气网插件
第一步在中国天气网根据自己的需要修改配置并生成代码中国天气网：创建网页标准天气插件第二步html<div id="weather-v2-plugin-standard"></div>jsmounted() { //天气插件配置 window.WIDGET = { CONFIG: { layout: 2, width: "386", height: "356", backgrou
2020-09-15 11:31:15
1827
原创 vue实现循环滚动列表
1、安装npm install vue-seamless-scroll --save2、引入组件<script>import vueSeamlessScroll from "vue-seamless-scroll";export default { components: { vueSeamlessScroll }}</script>3、使用html<div class="list"> <vueSeamlessScroll :data="
2020-09-04 17:08:36
3374
翻译 css动画按钮button hover效果
一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af; borde
2020-08-27 15:20:21
5303
2
原创 vue-cli3打包时根据不同命令修改请求地址
第一步在根目录创建一个.env.test文件test名字可以自定义，在里面写入NODE_ENV='test'第二步在package.json文件中scripts字段中加入"test": “vue-cli-service build --mode test”"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service buil
2020-06-23 17:19:38
1006
原创 wow.js+animate.css+vue实现显示时执行动画
wow.js+animate.css+vue实现显示时执行动画第一步：npm 安装 wow.js，安装后 animate.css 会自动安装npm install wowjs --save-dev第二步：在main.js里引入animate.cssimport animated from 'animate.css'Vue.use(animated)第三步：在需要的组件中引入 ...
2019-12-04 20:28:02
1056
原创 vue中使用websocket
websocket基础<template> <div class="websocket"> <input type="text" placeholder="输入消息" v-model="value"> <button @click="send">发送</button> <div class="message">...
2019-06-25 17:01:03
177
原创 vue移动端左滑删除
效果代码<template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' ...
2019-06-25 16:51:59
723
原创 小程序自定义组件的运用
在小程序的开发中，我们可以使用自定义组件来减少代码的重复性。创建组件我们先在pages下创建一个名为components的文件夹来存放我们的自定义组件；然后我们在components下创建一个名为child的目录，然后在child下面创建一个名为child的component然后我们就可以先把我们组件写好这里我就写了一个text作为演示，这时候我们的自定义组件就创建完成了使用自定...
2019-05-30 14:43:37
237
原创 vue+高德地图写地图选址组件
前言现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以返回到地图界面，但是在地图界面时点返回没有用，试了半天也没搞明白怎么监听到那个返回键的点击事件，所以趁这两天项目基本结束自己写一个把这个功能优化一下，也方便以后使用。开整vue的安装使...
2019-05-17 18:23:16
4798
8
原创 js数字的操作
Number1.parseFloat(Number)，去除小数点后面多余的0，let a = 21.1200a = parseFloat(a)console.log(a) //21.122.Number.toFixed() 方法可把 Number 四舍五入为指定小数位数的数字，当位数不足时以0补足。let a = 21.12345678a = a.toFixed(4...
2019-05-14 17:52:48
717
原创 ES6相关
扩展运算符将一个数组转为用逗号分隔的参数序列console.log(...[a, b, c]) // a b c用于：1 将一个数组，变为参数序列let add = (x, y) => x + y;let numbers = [3, 45];console.log(add(...numbers))//482 使用扩展运算符展开数组代替apply方法，将数组转为函数的参数...
2019-05-13 15:59:09
86
原创 vue中axios的使用相关
前言首先明白axios是干什么的，axios主要是用于向后台发起请求的。安装我是使用的npm安装npm install axios执行get请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(...
2019-05-10 19:07:15
242
原创 JS中将对象转化为数组
前言 这个对于大佬来说应该是个很基础的问题，但是今天我要用到这个的时候却一下没想起来该怎么做，所以打算写下来加深下影响。 举个例子，如何把一个对象{'未完成':5, '已完成':8, '待确认':4, '已取消':6}转化为[{"未完成":5},{"已完成":8},{"待确认":4},{"已取消":6}]。对象的两种取值方式 我们都知道，JS中对象有两种取值方式，通过在.后面直接...
2019-05-09 18:37:49
12243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人