kbdmy的博客

原创 vue之富文本插件 tinymce-vue

先安装下载npm install --save @tinymce/tinymce-vuenpm install --save tinymce并且在public下创建tinymce文件夹在这里我们使用中文语言包语言包下载然后把压缩包解压到tinymce文件夹下，然后在node_modules 中找到 tinymce/skins目录，将其复制到static\tinymce目录下面初始化tinymce-vueimport tinymce from 'tinymce/tinymce'impor

原创 Vue动态多级表头+行列合计+可编辑表格

【代码】Vue动态多级表头+行列合计+可编辑表格。

原创 scss实现简单换肤

scss换肤

原创 5.react之生命周期(旧)

react生命周期(旧)

原创 4.react入门之三大核心属性之一ref

react之ref

原创 3.react入门之三大核心属性之一props

props

原创 2.react入门之三大核心属性之一state

在学习state之前我们先了解一下class的constructor 方法有疑惑点这里在这里我们就简单说一下(只代表个人观点) /* constructor 一个类必须有constructor 构造方法,如果没有显式定义，一个空的constructor 构造方法会被默认添加 constructor 构造方法返回实例对象(既当前this) */ /* react中的constructor 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实

原创 1.react入门之Hello,React

1.在网页中添加react<div id="app"></div><!-- React核心库 --><script src="https://unpkg.com/react@16/umd/react.development.js"></script><!-- React扩展库 操作Dom --><script src="https://unpkg.com/react-dom@16/umd/react-dom.devel

转载 教你通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据

svg画地图描边数据获取

原创 关于element ui 时间选择器尾部icon图标问题

关于使用element ui 时间选择器 尾部icon问题

原创 3.TS之webpack简单配置打包ts代码-尚硅谷

1.安装webpack 和webpack-cli2.初始化package.json3.创建webpack-config.js文件const path = require('path')// 引入html页面插件const HtmlWebpackPlugin = require('html-webpack-plugin')// clean-webpack-plugin帮我们清除打包之后dist目录下的其他多余无用代码const { CleanWebpackPlugin } = require(

原创 2.TS编译配置选项-尚硅谷

1.直接tsc --init 初始化tsconfig.json文件直接上配置(最基础的)

原创 1.TS初探之类型声明初探

ts线上编辑器，刚接触胸弟可以用用，挺方便1.类型声明/* ts 类型声明 boolean,number,string,symbol,array */let booleans: boolean;booleans = true;console.log(booleans)let numbers: number;numbers = 1;numbers = 123;console.log(numbers)let strings: string;strings = '12

原创 深拷贝(比较完整的拷贝方法)

let obj = { name: '1张三丰', age: 22, messige: { sex: '男', score: 16 }, color: ['red', 'purple', 'qing'], fig: true, fn: function (x) { .

原创 使用require.context实现vue项目自动化

记录一些刚学到了东西，如有错误请指出错误在百度上搜索到的一篇文章。把我想说的基本都已经涵盖了。在这里我也是借鉴这篇文章。并且自己也敲了敲。确实挺好用的。点击链接直接看就完事了下面是我根据公司项目，并且在工作中用到的内容简单叙说一下：当我们在vue项目中使用到vuex时，我们相应的都会创建modules文件夹来进行模块化。背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。mo

原创 微信小程序知识点(仅供自己参考)

1.当微信小程序页面标题需要自定义时需保证标题在每个设备上位置一样 const topHeight=wx.getSystemInfoSync() console.log(topHeight['statusBarHeight']+6)获取胶囊顶部到手机导航栏的距离单位为pc2.getCurrentPages()文档解释到：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。通常返回的值[length-1]为当前页面。可

原创 微信小程序购物车之全选全不选

拿到购物车所有选择按钮的index 并且通过样式让他改变状态在data中定义变量初始值为false选择某个选择框时改变状态值，重新赋值就OKevery时js数组中的一个方法，它主要作用与判断所有值是否满足自定义的条件，如全部满足则返回true否则为false;在这里这个方法主要作用于当商品状态全为true时全选状态也为true。全选的话就好做了;点击全选时让数据中所有的状态值为true,当然也别忘记让全选按钮状态也为true...

原创 微信小程序之利用微信api触摸滑动事件制作购物车滑动删除功能

微信开发文档事件讲解-触摸事件点击这里先上效果图：向左滑动显示删除按钮》在这里唯一不好理解的是如何向左滑动让他显示删除按钮并且做到删除功能。首先我们看微信开发文档其中：我们要用到的三种事件如下图所示：一个是手指触摸开始，一个是触摸移动，一个是触摸结束。因此我们能拿到二个值即：开始的位置的值->移动的值。当我们触摸结束不就是向左向右滑动结束的动作嘛。看如下代码：我们在data中定义二个初始值：startX为滑动开始的位置,endX为滑动的距离，那么此时有小伙伴会迷惑，那我们滑动结束的值呢，在

原创 Js之继承方式

1.原型链继承 function Person(name, age) { this.name = name; this.age = age; } function Student(study) { this.study = study; } // 现在想让学生也拥有姓名和年龄 // 第一种方法 原型链继承 Student.protot

原创 better-scroll（二）做左侧列表滚动

这里可能有你想要的好东西如果想做此图中的效果 即点击首页五的时候左侧列表首页五滚动到top头部下那请看一下如下代码:在这里写代码前我们先做一些思考，为什么点首页五的话就会滚动到之前首页一的位置。它又是怎么滚动的呢。在这里我们使用offsetTop和scrollTop：ps(我也是第一次用还是查的资料 大佬们轻喷)offsetTop:当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值.scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值.我们想要点击的li滚动到top下，.

原创 better-scroll简单使用

我们需要做竖向滚动,大家可以看一下滚动原理为了更直观 我们看下一张图竖向滚动时 滚动部分始终要高于父容器部分(即绿色区域)，这样才会有滚动条。better-scroll常用解构:我们需要设置需要滚动的父元素即 “wrapper” ,它会有固定的高度且需要设置样式overflow:hidden。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这.

原创 动态匹配路由

配置路由配置路径

原创 常用cookie封装

//获取cookie、export function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return (arr[2]); else return null; } //设置cookie,增加到vue实例方便全局调用 export function setCookie (c_n

原创 js作用域与作用域链自己的理解

作用域：使用范围全局变量 :即用var定义的除了在函数中不可使用，在其他地方都可使用的变量局部变量:只能在函数内使用，在函数外部便访问不到 function fn(){ var num=1; console.log(num) } fn() console.log(num) //报错未定义块级作用域:一个大括号就能看做一块，在这里面定义的变量外部不可访问,但是在js中在这块级作用域中定义的变量外部也能访

原创 moment.js在vue中使用

项目中用

原创 vue分页简单封装

创建一个vue文件作为子组件封装分页功能:再看父组件传的值有哪些:总页数 当前页与总条数 当然在请求数据的时候别忘了还有pageSize 请求一页多少数据

原创 element ui+vue制作导航栏菜单（完整）

首先看路由 (我的vue文件是随便创建的不标准 注意了,这里只是为了让大家看一下路由)因为内容部分以及头部部分都是基于主页面的,所以所有可用左侧导航的页面router配置我都放在了Home下面注册(也可能自己理解的不对 希望大家指正)Home主要使用饿了么页面布局的第四个如下图: 大家有需要的可以自己选择这里都不过多解释了 以下就是Home页面 也是主页面以下是左侧导航配置最后呈现一下最终页面当你点击二级菜单之后进行刷新 页面加载之后所选二级菜单依旧会高亮 这就是第一幅图中 :de

原创 element ui+vue 导航菜单开启router刷新不高亮问题解决

刷新页面后选中导航高亮不显示最大原因:所选中的路径与当前激活路径不一致 如图可以打印当前选中路径解决办法：使用饿了么 default-active属性 把值换成 $route.path 如下图:不了解的同学可以点饿了么中文官网链接自行查询因为我接收的二级导航后台数据path中不带’/'所以我自己拼接一个 当然也要注意第一个红色区域绑定的index值为字符串形式切是唯一的值本人小白 如有错误请指正 谢谢大家...

原创 element ui+vue实现侧边栏(有不足得地方请指正)

1. 路由配置2.页面配置最重要的是要开启router【官网解释】 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

转载 git操作

请点击这里

转载 微信小程序传值方法

原文地址>

转载 vue生命周期

vue生命周期就是从开始创建，初始化数据，编译模板，挂载DOM，渲染->更新->渲染，销毁等一系列过程总共分为8个阶段：阶段 作用beforeCreate----创建前 组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。created----创建后 组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，el未存在这个时候html还没有渲染出来beforeMount−−−挂载前vue实例的el未存在这个时候html还没有渲染出来

原创 vue+token

原创 判断现在时间是否在某个时间段

1 var time_range = function (beginTime, endTime) {2 var strb = beginTime.split ("????;3 if (strb.length != 2) {4 return false;5 }67 var stre = endTime.split ("????;8 if (s...

转载 better-scroll

better-scroll基本使用转载

转载 js 面向对象与原型链

转载添加链接描述

原创 对象的深拷贝

第一种递归function deepClone(source){ const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象 for(let keys in source){ // 遍历目标 if(source.hasOwnProperty(keys)){ if(source[...

转载 vue用使用element-ui制作导航栏菜单

在main.js中引入import ElementUI from 'element-ui';Vue.use(ElementUI);组件内代码为:<template> <el-col :span="12"> <el-menu default-active class="el-menu-vert...

原创 微信小程序百度地图逆地址解析

1.申请百度地图key值，地址：http://lbs.baidu.com/apiconsole/key 自行查看，上面说明清晰2.登录微信公众平台－> “<<>>” －> “开发设置” －> “request 合法域名” －>添加 api.map.baidu.com －> 点击"保存并提交"3.下载百度地图微信小程序JavaScript A...

原创 axios代理服务器

1.先安装axiosnpm install vue-axios --save2 安装成功后，在main.js页面引用3配置config.js4.进行请求