weixin_38547641的博客

原创 vue An import path cannot end with a ‘.ts‘ extensi

引入src/store/index.ts报错import store from 'src/store/index.ts'改成import store from 'src/store'

原创 el-datepicker动态禁用日期

需求：限制只能选择点击的日期前后6个月的数据。比如，我点击了2021年6月1号，只有2020年12月1号到2021年6月1号的区间，以及2021年6月1号到2022年1月1号的日期可以选择第一步：给el-date-picker加上一个属性picker-options,如下<el-date-picker :editable="false" :clearable="false" size="small" type="daterange" :picker-options="pickerOptions

原创 blender06乐高进阶版02

shift+r是重复上一步的操作。1、shift+a添加一个平面，然后选中一条边，按e, x, 2挤出一个新的面，再选中一条边，按shift+r进行再次挤出一个新的面。2、通过环切，挤压e，形成下面的图3、然后有个奇怪的现象，我们放大或者缩小三个圆环，变成如下，是因为它的原点在中间的圆环上的原点。4、缩放的时候，改成各自的原点缩放就不会了5、剩余的步骤和上节课一样，不同的是由边创建面，改为面下面的栅格填充，然后倒角都用ctrl+b， 再平滑着色，再表面细分...

原创 blender05乐高中级版

1、新建一个2*4的平面2、点击环切，将平面切割为两个平面3、选中两个面，按下I内部挤压，变成下面的样子，但其实这样不对，x和y的距离不一样长。所以要回到物体模式，点击应用，点击缩放，将x,y,z的缩放比例都设置为14、继续环切，成下面的样子5、左边使用挤压的方式形成圆环，右边使用倒角的方式形成圆环。按J把顶点连接起来。6、选中8个面，按E，向上挤压出圆柱体。7、选中平面的12条边，然后按E，Z，向下挤压。形成下图8、选中底部的12条边，右键，选择从边创建面，然后把底部的顶

原创 blender04乐高进阶版2（不使用修改器建模）

不使用修改器，这是一种更加纯粹的建模方式，因为修改器建模是blender比较特有的。1、进入物体模式i、shift+a 新建立方体ii、进入编辑模式，选择移动工具，我们可以移动面2、选中所有的面，右键，选择细分。细分和修改器中的细分曲面是不一样的。3、向内挤压，i4新知识点，用ctrl+b可以进行倒角，而不用修改器。可以在点选，线选，面选的方式下进行倒角5、去掉上面的倒角，上面只是演示而已。进入点选模式，选择最中间的那个点，然后ctrl+shift+b(点的倒角)，鼠标滚轮滚动到如下状态

原创 blender03乐高进阶版1（使用修改器建模）

1、ctrl+n新建，选常规2、放太大了看不到物体的样子，按住shift+c，自动缩放3、点击添加立方体，拖动鼠标，再按下shift建，就可以形成长，宽的正方形，高度可以随意4、选择编辑模式，选中不同的点，按下G,就可以随意的拖动，形成不同的形状5编辑模式下的三种模式6 A是全选，按住A可以选中所有的面7 右键，点击细分，只有编辑模式才有细分。每个面可以被细分成很多个面8挤压的概念 点线面都可以挤压9 E是挤压的快捷键，I是挤压内部,形成下面的图形是按下I两次或者一次10 选择一

原创 element ui el-table 动态表格 合计行放在第一行 设置第一行的样式

这篇文章主要讲element ui中动态表格的渲染，合计行放在表格第一行，以及设置第一行样式的问题，都是比较简单的问题，但是开发中经常遇到，算是做个记录一、动态表格1动态表格，如下图，红色部分是动态渲染的列2下面是造的数据结构：list 是后台返回的数据，我们要对list进行拆分let list = [ { "id":1,"sku":"123","version":'v20210902001', "itemVOList

原创 echarts x轴数据太多怎么办

chartExtend: { dataZoom: [ { type: 'slider', //表示以滚动条的形式出现 show: true, //显示滚动条 start: 0, end: 50 //表示x轴的数据最多显示50% } ]}添加如上配置，便可以让x轴滚动起来...

原创 blender02材料属性

材料属性设置2颜色，表面的反光就是糙度3选择视图模式4改变糙度就有下图的高亮反光效果5渲染图像：提示没有相机渲染的意思大概就是给场景拍照形成一张照片6 游标+新建相机（shift+a可以新建相机），按住0可以进入相机的视角7我们选好一个角度，然后让相机对齐这个角度的视图就可以形成如下的相机视图当我们移动鼠标，离开了当前的相机视图，怎么回去相机视图呢，点击0就可以再次进入相机视图8此时再次点击渲染，渲染图像渲染出来是这种效果，为什么呢8渲染属性9再次点击渲染，.

原创 blender01简单的乐高

添加立方体选择移动，出现x,y,z轴3勾选线框4按住shift键+鼠标可以移动到任意位置查看5添加倒角，????+添加修改器+改变段数这里的z轴为3m，而z轴缩放为1.5，最好是保持x轴，y轴，z轴的缩放都为1.0，这样看起来倒角不是那么奇怪。怎么做呢？如下图，点击物体，然后点击应用，点击缩放6复制shift+d,沿着y轴拖动，y+鼠标，然后鼠标放在想要放的地方7透视8添加修改器，选择布尔值，可以合并两个物体9交界处的处理10物体的表面毛毛燥燥，不平滑怎么办呢右键

原创 git知识

git checkout -b dev origin/dev//根据远程仓库dev生成本地dev

原创 Error in callback for watcher “options“: “TypeError: Cannot read property ‘level‘ of null“

使用element-ui里面的级联选择器el-cascader报错Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null"解决方法：1 加v-if, options是你的数据源 <el-cascader v-if="options.length" " v-model="problemIds" :options="options" :props="cascaderPros"

原创 v-charts的x轴名称太长显示不全

效果：实际：改变grid的right，这个值意思是容器距离右侧的距离extend1 : {grid: {show: true,left: ‘20’,right: ‘10%’,//x轴的名称太长显示不全},

原创 v-charts基本配置、双y轴配置

1 上图2代码<ve-line :data="testdata" :after-config="afterConfig" :settings="chartSettings1" ></ve-line>//vue中的data加入如下代码： testdata: { columns: ['日期', 'key1', 'key2', 'key3'], rows: [ {'日期': '2021-03-01', 'key1

原创 通过js在ul中插入10000个li，点击li打印出li的序号

第一种 直接ul插入 花费了119ms-164ms window.onload = function () { let now = new Date() let ul = document.querySelector('.ul') for (let i = 0; i < 10000; i++) { let li = document.createElement('li')

原创 box-shadow

平时开发都是敲代码直接看效果，根本没去留意第三第四个值代表什么意思，今天捋一捋，box-shadow可以实现的效果挺多的，只要你敢想象双重阴影实现拍照效果：代码：div { width: 400px; height: 266px; margin: 50px auto 0; box-shadow: 0 0 0 5px rgb(16, 238, 190), 0 0 0 10px #fff, -15px -15

原创 Array.prototype.slice.call(arguments)、Array.prototype.shift.call(arguments)

Array.prototype.slice(begin, end)作用：slice() 方法返回一个新的数组，由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。但今天的主题不是它。而是Array.prototype.slice.call(arguments)Array.prototype.slice.call(arguments)作用： 它的作用是把对象/集合转换成数组例子1 <div></div> &

原创 Object.create和new操作符的区别

只传第一个参数var obj = Object.create({a: 1, b: 2, c: 3})console.log(obj)var obj = Object.create({ a: 1, b: 2, c: 3 }, { d: 4, e: 5 })console.log(obj)传两个参数var obj = Object.create({ a: 1, b: 2, c: 3 }, { d: { value: 4 }, e: { value: 5 } })conso..

原创 Object.prototype.toString.call(obj)

使用typeof bar === "object"检测”bar”是否为对象有什么缺点？如何避免？用 typeof 是否能准确判断一个对象变量，答案是否定的，null 的结果也是 object，数组的结果也是object，有时候我们需要的是 “纯粹” 的 object 对象。如何避免呢？比较好的方式是：console.log(Object.prototype.toString.call(obj) === "[object Object]");使用以上方式可以很好的区分各种类型：console.

原创 关于 JSON.parse(JSON.stringify(obj)) 实现深拷贝的一些坑

这种实现深拷贝的方法有局限性，它只适用于一般数据的拷贝（对象、数组），有以下情况需要注意：1.如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式；let obj = { age: 18, date: new Date()}let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj)console.log('objCopy', objCopy)console.log(typeo

原创 snabbdom展示虚拟dom魅力

snabbdom可以很好的展示出虚拟dom，虚拟dom是个抽象的概念，dom操作对于浏览器性能消耗是非常大的，虽然目前浏览器性能已经可以很大程度上忽略这一损耗，但虚拟dom带来的性能提升却是非常大的。下面的例子很好的展示了虚拟dom的实现过程，以前我们用js或者jquery操作dom元素通常是更新一大块的dom元素，而snabbdom则是有变化则更新dom，没有变化则不更新dom效果图需求: 根据数据data生成如下表格，点击chang按钮，更改张三名字为小王，更改李四的年龄age为9..

原创 hasOwnProperty

JavaScript hasOwnProperty() 方法是 Object 的原型方法（也称实例方法），它定义在 Object.prototype 对象之上，所有 Object 的实例对象都会继承 hasOwnProperty() 方法。hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性，而不是从原型链继承的。如果该属性是自有属性，那么返回 true，否则返回 false。换句话说，hasOwnProperty() 方法不会检测对象的原型链，只会检测当前对象本身，只有当前对象本身

原创 原生js页面滚动动画，使用了requestAnimationFrame(电商网站常见的页面滚动)

需求： 1 页面滚动到对应板块，左侧对应的索引高亮2 点击左侧的索引，滚动到对应的板块代码如下，直接拷贝到html文件就可以使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt.

原创 background-position设置百分比无效

这是MDN官网对background-position属性的解释，而且有它的计算原理，感兴趣的自己去查。解决方案就是容器和图片的大小不要一样大就可以了。

原创 nginx配置跨域

虚拟主机：多个域名指向同一个服务器，服务器根据不同的域名，把请求转发到对应的应用服务器，看上去好像有多个主机，实际上只有一个接下来配置被调用方的虚拟主机(1) 打开电脑中的hosts文件127.0.0.1 b.com //被调用方的域名(2)打开nginx中的config目录，在config目录下新建vhost目录(3)打开nginx.conf文件，在里面配置include vhost/*.conf(4)在vhost目录下新建b.com.config.txt的文件，里..

原创 requestAnimationFrame

需求： 用定时器写个动画，不用css的animation这时候用requestAnimationFrame就很好了，因为它是跟着浏览器的刷新频率的

原创 element ui Error in callback for watcher “options“: “TypeError: Cannot read property ‘level‘ o

这是在使用element ui中的cascader出现的报错原因暂时不清楚，个人理解可能是因为数据源没得到及时更新，而vue是数据驱动的，所以我加了监听器，并且给cascader绑定了一个key，这样只要监听到数据源发生变化，key 就变化，就重新渲染<el-cascader :key="keyValue" //keyValue在data中定义，初始值为0 clearable :props="propsObj" v-model="value" :options=.

原创 重写vue的computed的get和set

比如，有一个checkList数组，在computed中重写它的get和setcomputed() { checkList: { get() { //return 一个值 } set(newVal) { } }}

原创 elementUI中的el-checkbox报错Cannot read property ‘length‘ of undefined

在使用el-checkbox时遇上这样的错误：TypeError: Cannot read property ‘length’ of undefinedat VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6452)at Watcher.get (vue.esm.js?efeb:4482)at Watcher.evaluate (vue.esm.js?efeb:4587)at VueComponent.computedGetter [

原创 element ui级联选择器props的配置

为什么要配置el-cascader的props?如果配置了这个选项，请求回来的数据，根本不用你去递归处理，只需要把响应的数据赋值给数据源cateList代码如下:<el-cascader v-model="cateValue" :options="cateList" :props="cateListProps" ></el-cascader>data中:cateList: [], //数据源cateListProps:

原创 “TypeError: this.$confirm is not a function“以及“TypeError: this.$message is not a function“

TypeError: this.$confirm is not a functionTypeError: this.$message is not a function在使用element ui时候，报错，我都是局部引入的，连个报错原因是一样的，因为没有在vue的实例上挂载$confirm和$message导致的报错解决方法：在你的入口文件main.js中:import { Message, MessageBox } from 'element-ui' //引入Message, MessageB

原创 vue+element 动态面包屑导航

核心代码watch: { $route() { this.getBreadcrumb() }}methods: { getBreadcrumb() { console.log(this.$route.matched) //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组 if (Object.keys(this.$route.matched[0].meta).length > 0) { this.bread.

原创 react路由react-router-dom

使用react-router-dom第一步npm install react-router-dom第二步src下建立App.jsx文件，导入 路由模块import { HashRouter, Route, Link } from 'react-router-dom'// HashRouter 表示一个路由的跟容器，将来，//所有的路由相关的东西，都要包裹在 HashRouter 里面，//而且，一个网站中，只需要使用一次 HashRouter 就好了；// Route 表示一个路由规则，

原创 react中context实现父组件，子组件，孙子组件属性传递

这样可以实现父组件直接传递属性给孙子组件

原创 react可以传递父组件的方法给子组件，让子组件去执行, react小demo

父组件传了一个initList的方法给子组件<ComBox>,然后子组件可以执行父组件的方法，从而达到刷新的效果render() { return <div style={{width: "100%", padding: "20px", border: "1px solid #ccc", boxSizing: "border-box"}}> <h1>评论列表</h1> <ComBox reload={this.i

原创 react的input双向数据绑定

import React from 'react'export default class BindThis extends React.Component { constructor(props) { super(props) this.state = { msg: 'hello' } } render() { return <div> <h1&gt

原创 react绑定this并传参的形式

方式一事件处理函数中直接绑定this并传参export default class BindThis extends React.Component { constructor(props) { super(props) this.state = { msg: 'hello' } } render() { return <div> <h1>reac

原创 Warning: componentWillMount has been renamed, and is not recommended for use

react废弃的生命周期函数才会出现这个问题，具体可以看这篇https://blog.csdn.net/github_34708151/article/details/99670079

原创 react 中的shouldComponentUpdat,componentWillUpdate,componentDidUpdate, render

shouldComponentUpdate(nextProps, nextState) { // nextProps, nextState两者表示当前最新的值 // 而通过state和props获取的值是上一次的值 return nextState.count % 2 === 0}

原创 react生命周期