codezha-CSDN博客

原创 console调试

输出log、info、warn、error占位符%d、%s、%i、%f、%o、%c占位符作用%d数字%s字符串%i整数%f浮点数%o对象%c输出样式调试console.debug()清空console.clear()表格var thisObj = [　　　　{ name: ‘quber’, email: ‘[email protected]’, qq: 757200834 },　　　　{ name.

2021-07-08 23:54:27 234

原创 vue中子组件的created、mounted钩子中获取不到props的问题

问题描述：父组件向子组件传递了一个参数，参数有效值通过接口请求动态获取，子组件可能在获取到数据之前就执行created 、 mounted 生命周期，而且只执行一次，所以只能拿到默认值，我们期望的正常效果是子组件可以正常获取到父组件传递过来的参数解决方案：子组件中为传递的参数添加watch监听，来接收参数watch: { propDataKey: { handler:(newVal, oldVal) { this.xx = newVal }, //监听对象是数组

2021-06-24 15:02:31 1186

原创 vue-treeselect组件使用

官网传送门安装依赖npm install --save @riophae/vue-treeselect引入组件<template></template><script> // 引入组件 import Treeselect from '@riophae/vue-treeselect' // 引入样式 import '@riophae/vue-treeselect/dist/vue-treeselect.css' export d

2021-06-24 10:35:57 1394

原创 Javascript按照字符数截取字符串

function substrByByte (str, maxLength) => { if (!str || !maxLength) { return '' } let result = '' let temp = str.replace(/[^\x00-\xff]/g, "**") let temp1 = temp.substring(0, maxLength) let x_length = temp1.aplit("\*").length - 1 let

2021-06-16 18:07:34 175

原创 webAPP遇到的iOS兼容性问题小结（持续更新中）

时间格式化Safari浏览器中不支持‘-’格式时间，格式化时间会出现异常，例如’2021-04-08’需要转换成’2021/04/08’格式，字符串转换方法如下date= date.replace(/-/g,'/')table布局音频播放

2021-04-08 09:30:59 252

原创弹性布局

概述弹性布局理解为在一个容器中，所有子元素按照规则排列展示，所有的子元素称为“项目”，容器本身存在主轴（水平方向）和交叉轴（垂直方向）容器属性flex-direction 主轴项目排列方向flex-wrap &nbsp..

2021-02-05 11:03:53 133

原创 input输入框按照字符数限制输入

实现效果：按照字符数限制用户输入长度，汉字为两个字符，数字和字母为一个字符，超出字符长度限制时，自动去掉多余部分来限制用户输入。通过自定义指令实现上述功能vue文件<template> <div> <textarea v-limitTextLen="titleMaxLength" v-model="textareaValue"/> </div></template><script>export defaul

2022-02-07 15:03:19 3656

原创 css实现操作当前元素，改变子元素或父元素的样式

悬浮父元素，改变子元素样式.parent:hover .children1 { //修改子元素样式 color: red;}点击子元素，改变父元素样式focus-within伪类选择器，它表示一个元素获得焦点或该元素的后代元素获得焦点.parent:focus-within { //修改父元素样式 color: red;}...

2021-06-24 09:37:01 9317 1

原创 van-picker 动态设置当前选中项

使用vant-field和van-picker、van-popup组合实现单选类型表单时，通常我们需要pick每次显示时，默认选中的是当前有效值，但往往会出现这样的情况我们可以在没法显示picker的时候，动态设置当前选中项，代码示例如下//pick中指定ref属性为myPicker//currentIndex为当前有效值对应的索引值this.$refs.myPicker.setColumnIndex(0, currentIndex)setColumnIndex有两个参数，第一个参数colum

2021-05-27 16:16:05 5447 5

原创 vue项目中eventBus总线机制

使用场景vue项目中，某些特殊情况下，我们需要不想关的组件之间通信，这种情况我们可以通过eventBus来解决问题，通过事件的监听和触发来实现通信和参数传递封装新建eventBus.js文件let events = {}export default { //事件监听 on(eventName,handler){ if (typeof handler === 'function') { if (!events[eventName]) { events[.

2021-02-24 10:08:54 447

原创 Chrome谷歌浏览器离线安装vue-devtool

开发vue项目过程中vue-devtool可以帮助我们只管看到对应的数据，方便调试，安装方法有以下两种1、在Chrome商店，搜索vue-devtool，安装后启用（网络可能不通）2、GitHub下载插件，完成安装并启用下面我们来介绍下方法二的详细操作步骤下载插件下载链接下载后解压安装依赖vue-devtools-master文件夹下先后执行以下命令npm installnpm run build命令执行完成后，会在shell->chrome目录下生成相应文件浏览器安

2021-01-28 10:04:35 1211 2

原创 JavaScript数据数据类型判断

数据类型基本数据类型：string、number、boolean、null、undefined、symbol引用数据类型：object、array、functiontypeoftypeof操作符返回一个字符串，表示未经计算的操作数的类型console.log(typeof 42);// expected output: "number"console.log(typeof 'blubber');// expected output: "string"console.log(type.

2021-01-08 11:08:45 164 1

原创 Vue项目全局和局部组件

Vue项目开发过程中，通常我们会把一些常用或者通用的功能抽取出来作为全局或者局部组件，代码复用率和项目扩展性相对会好一点，下面我们详细看下具体的定义和使用吧定义组件内容新建TestComponent.vue文件，并添加组件内容<template> <div> {{ name }} </div></template><style lang="stylus" scoped>//样式...</style>&lt

2020-12-07 21:17:44 262

原创 Vue项目中render函数的使用

Vue项目中，大多数情况我们都可以通过模板来创建HTML，有些场景需要使用JavaScript来动态创建HTML，这种情况我们可以使用render函数来实现，下面我们来看下详细使用方法。函数调用简写render: function (createElement) { return createElement(App)}按照ES6语法简写函数render (createElement) { return createElement(App)}再简写render (createEl

2020-12-07 20:56:33 1800

原创 vue-router路由实现原理

通常我们使用Vue来开发单页面应用（SPA）时，通常都会使用vue-router来实现页面路由跳转。单页面应用采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。Vue-router提供了以下几种路由跳转方法方法作用router.push添加新路由router.replace替换当前路由router.go跳转到指定索引路由router.back返回上一个路由router.forward跳转下一个路由下面我们通过vue-ro

2020-12-03 23:53:50 2343

原创 Vue.use()源码解读

基本使用方法官方文档传送门使用Vue.use()方法注册插件的时候，可以传入函数或带有install方法的对象，install方法和函数的第一个参数总是VueVue.use()方法需要在new Vue()之前调用原理源码如下：/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function |

2020-12-02 22:16:04 341

原创 Vue项目多环境访问地址配置

添加环境变量和多环境地址src目录下新建const.js文件,并添加类似下面的配置const env = { development: { API_BASE_ORIGIN: '/base', API_TEST_ORIGIN: '/test' }, test: { API_BASE_ORIGIN: 'https://xx.xx.xx1', API_TEST_ORIGIN: 'https://xx.xx.xxx1' } production: {..

2020-12-02 09:50:50 1714

原创 Vue-amap 实现获取定位功能

注册账号并申请key高德开发平台引入public目录下index.html中通过src引入插件<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxx"></script>使用let AMap = window.AMapAMap.plugin('AMap.Geolocation', function() { var geolocati.

2020-11-15 22:20:25 2902

原创 webApp中H5和原生交互

开发webAPP的过程中，通常因为业务逻辑或兼容性问题，需要H5和原生APP之间互相调用，以下为具体的代码操作系统判断通过浏览器提供的navigator.userAgent判断当前操作系统function paltform() { var ua = navigator.userAgent.toLowerCase() //微信 if (ua.indexOf('micromessenger') !== -1) return 'wechat' //ios (ipad/iphone)

2020-11-15 21:36:50 338

原创 fiddler抓取APP数据包

电脑安装fiddler，安装完成后打开fiddler电脑开热点共享，手机连接热点，在WiFi设置中添加手动代理，IP配置为电脑IP，端口号配置为8888fiddler中设置connectiontools -> options ->connections 配置如下手机浏览器中输入ip:port（类似于192.xxx.xx.xx:8888），l点击安装证书（iOS需要信任证书：设置-通用-关于本机-证书信任设置，找到对应证书，启用）手机上操作我们就可以看到抓包信息了...

2020-09-07 19:23:57 310

原创常见时间格式 UTC/GMT/CST 格式化处理

前后端我们通常都会遇到时间格式化处理的问题，通常我们都会采用时间处理插件moment.js或day.js来快速处理，如果只是简单的处理，也会采取自定义简单时间处理的方法。day.js使用传送门首先简单介绍下常见的几种时间：CST北京时间，China Standard Time,又名中国标准时间中部标准时间（北美洲），Central Standard Time (USA) UT-6:00澳州中部时间，Central Standard Time (Australia) UT+9:30中国时间，Ch

2020-08-30 23:31:17 9655

原创 Vue路由传参,刷新页面，参数变成[Object object]

通常我们需要通过路由携带需要传递的参数，有以下三种写法：1、地址后面直接带查询参如果我们只需要传递一个简单的参数，可以采取这种写法，在路由配置中配置查询参，路由跳转时添加查询参配置如下：{ path: '/test/:id', name: 'test', component: Test}跳转如下：this.$router.push({ path: `/test/${id}`})接收参数：this.$route.params.id2、params传参this.$r

2020-07-22 21:52:08 10415 2

原创 van-uploader踩坑，render渲染函数中指定multiple属性不生效

van-uploader文件上传组件，如果需要支持多选，按照官方文档指定multiple属性为true可支持多选例如以下代码，我们直接在组件中指定multiple<van-uploader multiple/>但是如果是通过Render函数来实现van-uploader渲染的，我们直接在props中指定multiple属性是不生效的,自己阅读源码我们会发现，需要在attrs中指定多选属性//无效写法h('van-uploader',{ props: { multiple

2020-07-19 16:16:16 3986 1

原创 Vue页面监听数据变化

最近开发遇到这样一种情景，某个页面需要根据路由query查询参变化执行对应的操作，放在生命周期钩子函数里面都不太合适，因为生命周期钩子函数是针对组件的不是针对页面的，所以需要通过watch监听路由query查询参的变化，代码如下：watch: { '$route.query': { if (this.$route.query.xx) { //根据xx参数值的情况，执行对应的操作.... } }, deep: true}...

2020-07-19 15:49:43 2699

原创 JavaScript字符串截取方法

JavaScript常见的字符串截取方法包含substring、substr、slice三种，下面我们来分析下基本使用和区别substringsubstring()方法用来截取字符串中介于两个指定下标之间的字符入参：start 必填，非负整数，截取起始位置stop 可选，非负整数，截取结束位置，默认字符串结尾该方法会返回一个新的字符串，不影响原字符串let str = 'abcdefg'console.log(str.substring(0,2)) //abconsole.log

2020-07-12 09:20:06 399

原创快速复制浏览器控制台的返回参或者打印信息

鼠标悬浮在需要复制的信息上，右键选择store as global variableconsole中hi出现temp1或temp2console中执行copy(temp1)或copy(temp2)就可以粘贴信息到其他位置了

2020-07-03 14:48:58 1044

原创 Day.js使用小记

什么是Day.js？Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果你曾经用过 Moment.js, 那么您已经知道如何使用 Day.js从API上来看，Moment.js和Day.js的常用API基本一致，Moment.js里面包含的API较全，但常用API如果基本可以满足我们的开发需要，Day.js如需要其他API，可安装插件来实现。从体积大小来看，Moment.js的体积大概200多KB，Day.js的体积只有..

2020-07-01 17:11:24 1632

React Developer Tools 3.6.0

空空如也