韶华晨光-CSDN博客

原创 JavaScript 中 call()、apply()、bind() 的用法

先看明白下面：例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2shows() // 盲僧　比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；1，call()、apply()、bind() 都是用来重定义 this 这个对象的！如：obj.myFun.call(db)；　　　　// 德玛年龄 99obj.myFun.appl

2022-02-18 15:13:23 130

原创 react 内置富文本编辑器，图片上传到服务器

1、下载npm install braft-editor --save2、引入引入编辑器组件import BraftEditor from 'braft-editor'引入编辑器样式import 'braft-editor/dist/index.css'import { ContentUtils } from 'braft-utils';3、使用<Form.Item label="正文" name="editorState" trigger="onBlur" v

2021-09-06 16:37:50 450

原创 react兄弟组件之间的传值

react兄弟组件之间的传值一.通过redux1.在redux中找到对应的文件设置a.b.c.d.2.页面存储数据到redux中3.页面提取redux里面的数据二.通过hook中的createContext来实现1.父组件中的写法import React, { memo, useState } from 'react'import { Row, Col } from 'antd';import Department from "@/container/setModule

2021-05-20 18:32:03 3802 1

原创 vue通过七牛云上传视频并获取封面

vue通过七牛云上传视频并获取封面1.引入七牛云a.npm 安装npm install qiniu-jsb.引入const qiniu = require('qiniu-js')// orimport * as qiniu from 'qiniu-js'2.使用<template> <div class="upload"> <div class="uploadbox"> <div class="uploaddetai

2021-04-26 16:57:56 1315

原创 Object.assign()

Object.assign()基本用法Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象，

2021-04-22 18:48:30 496

原创深浅拷贝对比

https://note.youdao.com/ynoteshare1/index.html?id=e584864273854feb3664c32b7ae11079&type=note

2021-04-22 18:08:53 71

原创 forEach，map， filter， find， sort，some等方法的易错点整理

一、常用方法解析说起数组操作，我们肯定第一反应就是想到forEach()、map()、filter()等方法，下面分别阐述一下各方法的优劣。1、forEach1.1 基础点https://blog.csdn.net/m0_37686205/article/details/89108053

2021-04-22 11:10:49 156

原创去除对象中的undefined以及判断他的长度

Ant Design的form表单字段值更新时触发回调事件onValuesChangeconst onValuesChange = (changedValues, allValues) => { for (var key in allValues) { if (allValues[key] === undefined || allValues[key] === null) { delete allValues[key] } } let valuesarr =

2021-04-18 16:36:12 157

原创 vue父组件和子组件之间的传值及方法调用

vue父组件和子组件之间的传值及方法调用1、父组件向子组件传值<my-component :myData='haha'></my-component>2、子组件接受父组件传的值通过props来接受，如下：props: ['myData']3、父组件向子组件传方法<m

2021-04-14 18:42:21 4035

原创 pc端滑动翻页

pc端滑动翻页主要代码<template> <div class="box"> <div class="allheight"></div> <ul class="entries cl myOrderListWrapper"> <li v-for="(item, index) in alldatalist" :key="item.id"> <router-link

2021-04-13 11:35:52 241

原创 vue+element-ui集成随机验证码

vue+element-ui集成随机验证码1.自定义一个生产随机验证码的canvas.vue（子组件），其本质是使用canvas绘制，详细代码如下：<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><s

2021-04-06 17:28:08 455

原创获取随机5位数

获取随机5位数createCode() { var usernamecode = ""; //设置长度，这里看需求，我这里设置了4 var codeLength = 5; //设置随机字符 var random = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s",

2021-04-06 15:20:59 989

原创 vue 使用 facebook 分享

vue 使用 facebook twitter 分享1.html部分<div class="fb-share-button" data-href="http://dev.XXXX.io/" data-layout="button_count" data-size="small" data-mobile-iframe="true" @click="facebook(id)>分享</div>2.js 部分 facebook() { // 初始化 FB

2021-03-27 17:14:06 1956 1

原创 Vue.js中Facebook第三方登录api实现

Vue.js中Facebook第三方登录api实现1.进入开发者https://developers.facebook.com/apps/设置基本信息这里我们只需要里面那个appid 就可以了,也就是应用编号facebook 的比较方便一点,不用设置回调地址,窗口登录成功就直接关掉了.返回结果.2.代码a.在index.html中加入这个 sdk, appid换成你的应用编号:  <script async defer cro

2021-03-27 16:05:41 830

原创 Vue.js中Google第三方登录api实现

Vue.js中Google第三方登录api实现1.进入开发者平台创建Google API控制台项目和客户端IDhttps://console.developers.google.com/projectselector2/apis/library?pli=1&supportedpurview=project（地址）设置重定向地址等相关内容我们需要的是那个客户端 ID!OAuth 同意屏幕画红色框的要与你使用到的网站的一致2.代码<template> <

2021-03-27 15:41:15 1164

原创 vue 中var _this=this作用

vue 中var _this=this作用const _this=thisconsole.log(_this)原来的对象console.log(this)//当前方法对象1._this只是一个变量名，this代表父函数，如果在子函数还用this，this的指向就变成子函数了，_this就是用来存储指向的2.普通函数中的this表示调用此函数时的对象，箭头函数里面的this会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止

2021-03-25 18:04:12 563

原创 vue的video插件vue-video-player

vue的video插件vue-video-player使用方法1.安装插件npm install vue-video-player -S2.配置插件在main.js里import VideoPlayer from 'vue-video-player'require('vue-video-player/node_modules/video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.us

2021-03-25 11:52:08 480

原创 git提交代码合并冲突解决

git提交代码合并冲突解决步骤1.git add2.git commit -m // '提交内容标注'3.git push origin xsh //(分支名称)4.git checkout master //(切换到主分支上)5.git pull origin master // 防止冲突拉取主分支代码6.git merge xsh // 合并xsh上的代码7.git checkout xsh // 切换到xsh分支8.git pull origin master如果代码冲突出现如

2021-01-25 17:04:14 706

原创 react 解决antd之Switch 无法动态修改defaultChecked的属性值的办法

react 解决antd之Switch 无法动态修改defaultChecked的属性值的办法问题描述：有时候Switch是开还是关,是需要由网络请求时,后台返回的数据来控制的，因此Switch的defaultChecked属性值必须是变量。（然而当数据更新之后重新请求接口数据变了，页面没有刷新，Switch的状态没有变）解决办法：为Switch组件新增一个key属性，并且key的属性值和defaultChecked的属性值保持一致，也就是说这两个的属性值是同一个变量即可解决该问题。简单举个例子

2021-01-19 15:48:23 1200

原创 vue跨页面跳转到相应锚点处

vue跨页面跳转到相应锚点处路由{ path: '/product/tutorlals', name: 'Products_tutorlals', component: Products_tutorlals},product页面<router-link :to="{name:'Products_tutorlals',query: {maodian:'tutorials'+item.id}}"> <div class="moretutorials">

2020-12-25 15:10:39 1354

原创 Vue Router 的params和query传参的使用和区别

Vue Router 的params和query传参的使用和区别首先简单来说明一下$router和$route的区别//$router : 是路由操作对象，只写对象//$route : 路由信息对象，只读对象//操作路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读取路由参数接收this.name = this.

2020-12-24 17:06:28 2352

原创 Vue聊天框默认滚动到底部

Vue聊天框默认滚动到底部1.功能场景在开发中，我们总能遇到某些场景需要运用到聊天框，比如客服对话。如果你不是一名开发人员，可能你在使用QQ或者聊天工具的时候并没有注意到，当你发出一条消息的时候，窗体会默认滚动到最底部，让用户可以看到最新的聊天消息。实现原理通过每一次的数据变化，只要数据变化，将滚动的最大高度赋值给滚动条的最大高度。scrollHeight:滚动条高度scrollTop: 距离最顶部高度实现过程在vue中

2020-12-02 15:38:12 1499

原创 vue中使用富文本编辑器上传图片到七牛云（封装成组件）

使用富文本插件 vue-quill-editor1.下载插件npm install vue-quill-editor --save2.全局引入，也可以局部引入import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor' // require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import '

2020-11-23 18:14:28 348

原创 vue中使用富文本编辑器上传图片到七牛云

使用富文本插件 vue-quill-editor 1.下载插件 npm install vue-quill-editor --save 2.全局引入，也可以局部引入import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor' // require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'

2020-11-18 16:20:57 177

原创 vue每隔3秒刷新一次

每隔3秒刷新一次，重新获取接口数据解决：let that=this;window.setInterval(() => {　　setTimeout(()=>{ that.fetchDevice();//我们的获取接口数据函数 },0)}, 30000)注意：setTimeout({},0)可以帮助我们清除setInterval带来的定时问题，相当于每执行一次setInterval就清除一下定时器...

2020-11-09 11:50:58 2898

原创 setInterval和setTimeout的区别

1.setInterval会每隔指定的毫秒数后反复执行指定代码。2.setTimeout只会在指定的毫秒数后执行一次指定代码。setInterval的用法：// 创建（创建后即开始计时）var interval = window.setInterval(function(){ // 要执行的代码},1000)；// 停止window.clearInterval(interval);setTimeout的用法：// 创建（创建后即开始计时）setTimeout(function

2020-11-09 11:49:46 254

xshSun的博客