imkaifan的博客

原创 el-date-picker, DatePicker 日期选择器

element月和年的选择器更改 :结果:/* 年月样式 */.el-date-picker__header--bordered { border-bottom: 2px solid #293f6f !important;}.el-picker-panel { background-color: #040d28 !important;}.el-date-picker__header-label { color: #b1e8fd !important;}.el-year-tab

原创 el-date-picker, DateTimePicker 日期时间选择器样式更改

效果如下： <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"> </el-date-picker>element 的时间范围筛选器组件样式更改/* 日历样式 */.el-picker-panel

原创 随机取数组中的一个元素

随机获取数组一个元素var items = [‘1’,‘2’,‘4’,‘5’,‘6’,‘7’,‘8’,‘9’,‘10’];var item = items[Math.floor(Math.random()*items.length)Math.floor方法返回小于参数值的最大整数（地板值）

原创 git怎么改刚刚push的commit message

一句话总结：先git rebase把指针放到提交前，接着git commit --amend改commit message，最后再push回去 git rebase -i HEAD~5 #显示近5次提交，可以改成别的数字如果没push的话可以用git commit --amend这行代码会打开你最新的一次commit，然后你可以编辑你的注释内容。但我已经提交了，怎么办？重点先回到提交前git rebase -i HEAD~1 #显示上次提交，可以改成别的数字来显示近n次提交然后

原创 git push后出现错误 ![rejected] master -＞ master(non-fast-forward) error:failed to push some refs to XXX

错误截图：本地创建了一个project并在码云上创建了一个仓库，想要将本地的仓库链接到远程仓库我用的是如下方法：git init    初始化本地仓库git remote add origin XXX     添加远程仓库地址如果你在这之后就执行git add -A，git commit -m " "git push origin master,那么就会出现这个问题(被拒绝)，所以在remote add后不要着急git add，一定要git pull origin master，出现这个

原创 Vue显示和隐藏如何用动画形式显示

过渡效果类似于推拉门：<template> <div id="app"> <button class="btn" @click="show = !show">click</button> <transition name='fade'> <div class="box1" v-if="show"> <div class="box2"></div>

原创 react中constructor( )和super( )的具体含义以及如何使用

1.constructor( )-----super( )的基本含义constructor( )——构造方法这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。super( ) ——继承在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。报错的原因是：子类是没有自己的 this

原创 vue控制台报错Duplicate keys detected: ‘xxxx‘. This may cause an update error.解决方案

报错：Duplicate keys detected: ‘苏EKM699’. This may cause an update error代码截图：原因：v-for绑定的key值没有区分度。

原创 css height属性中的calc方法

css height属性中的calc方法：例如父盒子是100%的高度盒子里面的head部分固定位140px内容部分始终为剩余的全部高度height: calc(100% - 140px);切结"+或-"两边要有空格 不然不生效

原创 滚动条样式

滚动条样式<div class="table-list"></div>.table-list::-webkit-scrollbar { width: 10px; height: 1px; } .table-list::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(189, 191,

原创 Error in v-on handler: “Invalid Object: LngLat(NaN, NaN)“

报错信息：Error in v-on handler: “Invalid Object: LngLat(NaN, NaN)”原因：有的撒点经纬度，没有值，导致标记不上点。

原创 Uncaught Invalid Object: Pixel(NaN, NaN)

报错： Uncaught Invalid Object: Pixel(NaN, NaN)let lnglats = this.checked.video.locationGPS; console.log("点击了视频撒点", lnglats); let _this = this; // 创建一个 Icon let startIcon = new AMap.Icon({ // 图标的取图地址 image:

原创 $nextTick调用多个函数

this.$nextTick( ()=> { this.initPlugin(); setTimeout(()=>{ _video() },1000) } );

原创 vue中使用webVideoCtrl播放海康插件

<template> <div class="video-player"> <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin"> </div> <!-- <div class="down" v-else> <a href="http://jbfsys.oss-cn-bei..

原创 git提交/拉取的顺序

先说结论。先拉取，pull拉取完之后再commi提交。如果先提交，再拉取的话，git会提示项目冲突，此时需要先解决冲突，而某些时候，我们不一定会处理好所有的冲突，而导致仓库出现大面积的报错。（尤其的对git理解不深的，处理起来很麻烦）最好的方法就是。每天来了先拉取一遍，项目提交前拉取一遍，解决冲突后再提交，最后才能推送。...

原创 css转角rotate

interactions.clickTotalVideo = function() { if(this.totalvideorotate%2 === 1) { this.$refs.totalvideoleftarrow.style.transform = 'rotate(90deg)'; this.videoTreeData.show = true; } if(this.totalvideorotate%2 === 0) { this.$

原创 git克隆没有输对密码，后期无法克隆原因

原创 react—使用类创建组件

类组件：使用ES6的class创建组件约定1：类名称必须以大写字母开头约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性约定3：类组件必须提供render()方法约定4：render()方法必须有返回值，表示改组件的结构如果什么都不想渲染，那么就返回null。let root = document.getElementById('root')；class Hello extends React.Component { render() {

原创 react使用函数创建组件--函数组件

使用js中函数函数创建组件： 函数组件守则一：函数名称必须以大写字母开头 （react据此区分组件和普通的react元素）守则二：函数组件必须有返回值，表示改组件的结构如果返回null，表示不渲染任何内容守则三：使用函数名作为组件标签名function Hello() { return ( <div style={ { color: 'green'}}>第一个组件</div> )}//还可以简写const Hello = () => <d

原创 jsx中添加样式

1、行内样式：style后第一大括号表示这是一个表达式，表达式内部是一个对象，以键值对样式书写样式。2、类名: className直接在css中写css就行，对应jsx添加className属性// style后第一大括号表示这是一个表达式，表达式内部是一个对象const h11 = (<h1 className='title' style={{color:'red',backgroundColor:'pink'}}>jsx处理样式</h1>);ReactDom.re

原创 jsx列表渲染

1、 如果需要渲染数据，应该使用数组的map()方法。map()的意思是映射。2、渲染列表的时应该添加key属性，key属性的值要保证唯一。3、map()遍历谁，就给谁添加key属性。4、添加key值的时候，尽量避免索引号作为key，(以为还有可能删除和插入，如果使用索引号就凉凉了)// 循环渲染const songs = [ {id: 1, name: '痴心绝对'}, {id: 2, name: '像我这样的人'}, {id: 3, name: '南山南'}]const ul

原创 jsx的条件渲染

根据条件渲染特定的jsx结构1、if/elseconst isLoading = false;// 函数const loadData = () => { if (isLoading) { return (<div>数据加载中，请稍后.........</div>) }else { return (<div>数据加载完成</div>) }}// jsxconst divvvvv = (<div>{loa

原创 jsx表达式

语法： { }嵌入js表达式注意点：1、在大括号里可以是任意合法的js表达式（数字，字符串，布尔都是合法的js表达式，变量）；2、还可以是函数(有返回值)。3、jsx本身也是表达式4、表达式中不能使用对象，但是style中是可以使用的5、不能在表达式中出现语句（if/for等）// 导入react// 1、导入import React from "react"import ReactDom from "react-dom"// 2、创建元素const name = (<h1

原创 react使用jsx注意点

1、React元素的属性名使用驼峰命名法。2、特殊属性名： class要更改为className for更改为htmlFor】tabindex更改为tabIndex3、没有子节点的React元素可以用==/>== 结束4、推荐使用小括号包裹jsx，避免js中的自动插入分号陷阱。const name = (<h1 className="name">凡夫俗子 <span /></h1>) ReactDom.render(name,document.getE

原创 为什么脚手架中可以使用jsx语法

1、jsx 不是标准的ECMAScript语法，它是ECMAScript的语法扩展。2、需要使用babel编译处理后，才能在浏览器环境中使用。3、create-react-app脚手架中已经默认有改配置，无需手动配置。4、编译jsx的语法的包是：@babel/preset-react...

原创 git 规范

Git规范Git推送与合作规范一、规范简述为了更好的完成代码版本管理以及多人合作，必须统一Git的推送规范以及一些代码合作上的规范二、Git代码提交规范除了项目初始化的时候，禁止使用[git add .]进行修改提交。代码提交尽量按照单次编写的功能模块进行整体提交。例如A和B两个文件都是改的登录相关的内容，C文件改的为用户中心相关的内容，那么应分两次进行[git add]以及[git commit]。若是使用编辑器，则可以用编辑器自带的Git模块进行单文件的提交。 git add

原创 CSS选择器

1、标签选择器所有的html标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。无论这个标签藏的多深，一定能够被选择上。选择的所有，而不是一个。标签选择器针对的是页面上的一类标签。2、ID选择器#mytitle{ border:3px dashed green;}<h2 id="mytitle">你好</h2>只能有字母、数字、下划线。必须以字母开头。不能和标签同名。比如id不能叫做body、img、a。大小写严