李特成的博客

原创 vue级联组件单选，多选组合限制个数

需求：组件搜索：系列（单选）=》成品（多选限制3个）=》物料（多选限制3个）类似于Cascader 级联选择器组件 使用JQ+Vue数据xi_chengpin_wuliao存在vuex里 命名：SeriesProductsMateriel "xi_chengpin_wuliao": [{ "id": '系列id', "title": "系列名称", "children": [{ "title": "成品1", .

原创 elementui el-checkbox-group 自定义全选

<div class="itemTime"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox > <el-checkb...

原创 vue-router编程式的导航

router.push(location, onComplete?, onAbort?)注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。// ...

原创 vue-router动态路由（2）

html页面  &lt;div id="app"&gt; &lt;div class="nav"&gt; &lt;!-- 使用 router-link 组件来导航. --&gt; &lt;!-- 通过传入 `to` 属性指定链接. --&gt; &lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&amp

原创 vue-router动态路由（1）

main.js入口文件import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, component...

原创 vue-cli安装教程(从零搭建vue+webpack项目)

一 安装node1. 从node.js官网下载并安装node，安装过程很简单。 2. npm 版本需要大于 3.0，如果低于此版本需要升级它：二 安装vue-clinpm install -g vue-cli安装成功后可以输入vue查看相关命令的使用，输入vue list可以查看vue可以用的模板:  我们这里选择webpack模板：vue init webpac...

原创 vue 动态组件（tabs切换）keep-alive：主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留 ，主要用于保留组件状态或避免重新渲染 &lt;!--动态组件-component使用--&gt; &lt;div class="app"&gt; &lt;ul&gt; &lt;li @click="currView='home'"&gt;首页&lt;/li&gt; &am

原创 vue 通过prop向子组件通讯

 Prop静态传递数据&lt;!--Prop静态传递数据--&gt; &lt;div class="app"&gt; &lt;my-object message="父组件数据" name="父组件名称" age="父组件年龄"&gt;&lt;/my-object&gt; &lt;/div&gt;//Prop静态传递数据

原创 vue子组件向父组件通讯

&lt;div class="app"&gt; &lt;p&gt;父组件接收：{{total}}&lt;/p&gt; &lt;button-counter v-on:incrementchind="Total"&gt;&lt;/button-counter&gt; &lt;/div&gt;//子组件的数据Vue.component('but

原创 vue表单控件绑定

 文本 {{message}} &lt;input v-model="message" placeholder="编辑"&gt; 多行文本 {{messagetextarea}} &lt;textarea v-model="messagetextarea" placeholder="添加"&gt;&lt;/textarea&gt;  复选框

原创 vue的生命周期

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;生命周期&lt;/title&gt; &lt;/head&gt; &lt;body&

原创 for ...of 跟 for ...in的用法

//对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用,for-of用于数组对象。 //但是，这样情况下，for...in循环依然可以用来遍历键名。 let es6 = { edition: 6, committee: "TC39", standard: "ECMA-262" }; for (let e...

原创 es6中 for…of 循环遍历数组对象

//数组对象 const myArray = [{ id: 1, name: "李特成", age: '20', gender: '男', arr: ['湖南长沙', 'IT技术'] }, { id: 2, name: "范冰冰", age: '15', gender: ...

原创 es6 forEach()遍历数组对象

const myArray=[ {id:1,name:"李特成",age:'20',gender:'男',arr:['湖南长沙','IT技术']}, {id:2,name:"范冰冰",age:'15',gender:'女',arr:[]}, {id:3,name:"范斌",age:'60',gender:'男'...

原创 es6中 Set属性方法，以及遍历

&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; //Set 实例的属性和方法 //add(value)：添加某个值，返回 Set 结构本身。 //delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 //has(value)：返回一个布尔值，表示该值是否为Set的成员。 //clear()：清除所有成员，没有返回值。 le...

原创 es6类的继承

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;类的继承&lt;/title&gt; &lt;/head&gt; &lt;body&

原创 MUI 上拉加载分页

mui('#ds_company_user').pullRefresh({ up: { height: 50, auto: true, contentrefresh: "正在加载...", contentnomore: "没有更多数据了...

原创 数组转字符串逗号隔开

//数组转字符串[1,2,3]=&gt;"1,2" acTiveArrStringFun: function(obj) { var arr = []; if (obj != null &amp;&amp; obj.length != 0) { for (var i =...

原创 集合未分类 针对日期分类成相同的日期二维数组

var list=data.item.result; var destArray=c.commonFun.dateListArr(list); dateListArr: function(list) { var map = {}, destArray = []; for (var v = 0...

原创 ajax提交参数过滤空值

var param = "id="+userid+"&height="+$(".Height").val()+"&bloodl="+$(".dbp").val()+"&bloodh="+$(".sbp").val()+"&weight="+$(".bodyWeight").val()+"&nickName=" + $("#nick_name").val() + "&phone="+$("#phon

原创 js计算两个日期的月份

var startDate="2017/12/1 10:38:43";//开始日期var endDate="2018/1/1 10:38:43";//结束日期function monthDateFun(startDate, endDate) { var sdate = formatDatetime(startDate);//格式化日期 var starDateText = format

原创 nginx https 一个端口代理多个前端项目（案例二）

原创 nginx https 一个端口代理多个前端项目

意思是优先根据浏览器输入的文件路径进行查找，如果找不到重定向到index.html文件。指令用于指定在请求的URL中未指定文件名时要使用的默认文件名。就是定义了一个标识，在有多个vue服务时，可以做区分。针对副项目 vue打包时要加一个。配置url路径匹配关系，这里配置。指定静态文件目录的根路径。

原创 uview 全选购物车

【代码】uview 全选购物车。

原创 vue路由-两个树形结构数据-递归处理方法

【代码】vue路由-两个树形结构数据-递归处理方法。

原创 elementPlus + table 树形懒加载 新增，删除，修改 局部刷新

5，全局添加/子菜单添加/编辑。4.初始化懒加载数据。

原创 vue3 对图片进行压缩

2.针对文件流进行base64进行转换 并且进行大小进行压缩，这里压缩针对 图片类型。1.点击上传按钮进行图片/文件上传，文件流并传入父组件。3.压缩和转换关键得代码 other.js。

原创 腾讯地图绘制-（开始地-结束地）-路线

腾讯地图绘制-（开始地-结束地）-路线

原创 uni- app 腾讯地图发货地和收货地路线规划-includePoints

【代码】uni- app 腾讯地图发货地和收货地路线规划。

原创 uni-app中使用钉钉h5微应用扫码功能

1.2 我们需要安装钉Dev开发版USB在线链接，打开开发者模式，同时需要在浏览器输入edge://inspect/#devices 这样就可以随时随地进行调试。具体测试步骤和安装，我会在后面详细针对钉钉开发者测试步骤进行详解。1.1 首先为了随时随地能在本地测试钉钉情况，我们需要在钉钉开发平台注册一个个人的H5微应用，通过企业内部开发中的应用部署本地项目地址。备注：大家在开发钉钉项目时，花最多的时间会在搭建本地测试工具上，因为钉钉相对其他测试工具来比较麻烦。然后在局部文件中引入，您也全局可以引入。....

原创 cryptojs加密解密

代码】cryptojs加密解密。

翻译 html 二维码：生成、扫描、识别

代码】html二维码生成、扫描、识别。

原创 vue 二维码 生成、渲染

代码】vue二维码生成、渲染。

原创 vue 二维码识别读取/相册

代码】vue二维码识别读取/相册。

原创 H5+ vue+扫描二维码相册

代码】H5+vue+扫描二维码相册。

原创 uni-app 小程序订阅消息

data(){return{ tmplIds: ['9A_xCsCQuW3HuQD-nnZyefs6BWlfZDpdwkGa78', 'bqcMwMnTaPTclRWKN2Qlgl6892-l4XXEwCMsJHQ', 'mZq6tVlajPz8J7NReCoZC_uuUGm-sgzfbjD1Nsc' ], showOpenSettingDialog: false, // 授权询问弹框，uview}}onShow() { this.showOpenSet..

原创 elementui Tree 树形数据回显默认选中父节点时，部分子节点也全部选中的问题。

问题点：当数据返回默认选中，存在父节点key_id时,tree 会全部选中子节点，这样我们部分子节点没有默认被选中的也选中了。解决方案：1. 获取所有的 data 或者 key 拿到 Tree 组件中的 node数据2.如果出现node数据 没有初始化，那么可以等待dom渲染完成后$nextTick再执行，或者使用延时加载setTimeout2.再判断 isLeaf(是否为叶⼦节点 是则true，不是则false)属性，如果为叶⼦节点就选中。这样利⽤tree的API就实现了正确的回显效果

原创 elementui el-upload 上传文件

手动上传文件转Base64<el-form-item label="上传文件"> <el-upload class="upload-demo" drag action multiple :auto-upload="false" :file-list="fileUpList" :on-change=.

原创 Vue+Element中Table树形懒加载，添加，修改，删除后数据动态更新

数据准备结果呈现添加最外层菜单添加子菜单界面直接上代码index.vue<template> <div class="table-container"> <vab-query-form> <vab-query-form-left-panel :span="3"> <el-button icon="el-icon-plus" type="success..

原创 根据日期获取周数的计算

/****根据日期获取周 这里的周不是自然周 有相应的计算逻辑** */import moment from "moment";export const GetDateWeeksFn=function(date){ let obj={ code:0, data:null } let currDate = moment(date); let w=currDate.startOf("year").format('YYYY-MM-DD');//获取本年度的.