- 博客(38)
- 收藏
- 关注
RSS订阅原创 Vue自定义组件之穿梭框 --可适应较多数据
穿梭框该组件是个穿梭框，因为使用了 滚动加载，所以支持数据量较大的情况。基于 Vue 、element-ui 的 【Checkbox 多选框】& 【Input 输入框】& 【InfiniteScroll 无限滚动】代码分析<template> <div class="transfer-wrapper"> <div class="flex-dir-column padd-all-15"> <el
2022-05-24 18:17:07
2711
原创 页面超时退出
页面超时退出页面长时间未操作主动退出，可以说是个很平常的需求。代码展示/*** domId 绑定元素* cb 超时回调* timeout 超时时间*/const timeoutExit= (function() { let timer = null // 定义变量，用于存储 timer return function(domId, cb, timeout) { /** clear 方法 用于清除 timer**/ const clear
2022-03-21 18:39:07
428
原创 Vue自定义组件之对话框的开启和关闭 computed set get
对话框的开启和关闭基于 element-ui 的 Dialog 对话框Vue允许注册组件，把一个复杂的页面分成多个组件，会使代码逻辑更加清晰。这里假设一个列表页面中，点击一个按钮，可以打开一个添加功能的对话框。代码分析父组件<template> <div> <my-son-dialog v-model="visible"></my-son-dialog> <button @click="openDialog">点我
2022-03-02 11:12:52
1905
原创 消除魔法字符串
reduce消除魔法字符串魔法字符串魔法字符串举例definedVarable 方法 （消除魔法字符串）函数输入函数返回definedVarable 方法 使用举例消除魔法字符串魔法字符串魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。魔法字符串举例多用于下拉菜单选择// 首先定义一个列表const obj = [ {value:"小猫", key: "cat"}, {value: "小狗", key: "dog"}, {value:"小猪",key:
2022-02-28 18:19:53
690
1
原创 Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器。基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器点击选框，下拉列表中有四个选项，点击自定义时间，后边会出现 日期时间范围选择代码分析<template> <div class="flex"> <my-select v-model="space" :dataList="dataList" themeColor width="124px" @change="spaceHandle"
2022-02-15 18:19:33
1116
原创 vue项目在docker容器中开发的尝试
vue项目在docker容器中开发的尝试docker的安装及node镜像拉取容器运行项目创建一个vue项目到本地目录启动一个容器使用node镜像,并将本地项目映射到容器内目录在容器中 下载依赖并运行项目遇到的问题总结首先，这里先给个结论，本地不安装任何环境，通过跑一个docker container，image 使用 node。可以用于开发vue项目，可能由于本人电脑配置问题，运行起来会比较卡。docker的安装及node镜像拉取这里建议去官网下载安装包，简单方便。缺点是可能下载会比较慢。docke
2021-08-12 11:43:27
541
原创 Vue自定义组件之多选框选择器
多选框选择器该组件是个多选框选择器。基于 Vue 、element-ui 的 【Popover 弹出框】& 【Checkbox 多选框】& 【Button 按钮】代码分析<template> <el-popover placement="bottom" width="230" trigger="click" center v-model="visible"> <template slot="reference">
2021-04-27 17:22:24
1156
原创 小记：读axios代码
小记：读axios代码代码结构request总结代码结构// xhr.js/*** axios既可以用在浏览器上，也可以用在服务器上，这里以 浏览器端为例* 该文件就是简单对 XMLHttpRequest 函数的封装* 这里贴一个简易版本*/function xhr(method, url) { return new Promise((resolve, reject) => { var xmlhttp = new XMLHttpRequest()
2021-04-22 17:42:21
118
原创 forEach for Object
forEach for Object对象遍历的几种方式for inObject.keys自定义 forEach 方法对象遍历的几种方式for inconst obj = {name: 'wsf', age: 12, sex: '男'}for(const key in obj) { console.log(obj[key], key, obj)}Object.keysconst obj = {name: 'wsf', age: 12, sex: '男'}Object.keys(obj).f
2021-04-16 17:52:13
327
原创 axios封装
axios封装import axios from 'axios'class Request { _axios: any _errmsg: any constructor() { this._axios = axios.create({ baseURL: 'http://123.456.789.123', timeout: 10000 * 5, headers: {} })
2021-04-08 16:43:38
106
原创 Array reduce方法分享
reducereduce语法reduce 返回 数值reduce 返回 字符串reduce 返回 对象reduce 返回 数组最后，比较下 reduce 和 forEachreduce语法这里粘下 reduce 的基本语法/*** total 必需。初始值, 或者计算结束后的返回值* currentValue 必需。当前元素* currentIndex 可选。当前元素的索引* arr 可选。当前元素所属的数组对象* initialValue 可选。传递给函数的初始值**/array.re
2021-04-08 16:23:57
439
原创 Vue3.x-beta 之 v-model
v-modelVue3.0 之 v-modelv-model 用于custom inputsv-model 用于 组件v-model & .sync 可查看这里今天看了下Vue3.0的文档，发现了一些较 Vue2.0 不同的部分，这里简单总结下Vue3.0 之 v-modelv-model 用于custom inputs该用法较vue2.0没有变化<input v-model="myName" />//上面使用等同于<input :value="myName" @in
2020-11-03 15:42:37
225
原创 Symbol es6简单学习
Symboljs的第六种基础数据类型Symbol 用于消除魔术字符串今天学习了下es6的Symbol这里简单记录下js的第六种基础数据类型Symbol 是javascript继String、Number、Boolean、undefined、null之后又一种基础数据类型Symbol 用于消除魔术字符串 switch (name) { case 'name1': ... break case 'name2': ... break default: ...
2020-09-21 17:20:35
150
原创 web audio 之 多轨语音播放
web audio 之 多轨语音播放web audio可以实现的功能实例分享流程分析流程图流程总结注意事项最近学习了下 web audio 觉得很有意思，这里和大家分享下web audio可以实现的功能web audio 可以对语音文件的音轨进行分割，区分出左右声道，从而单独播放 两个音轨的语音实例分享这里将web audio和audio标签进行结合使用，从 audio标签中获取 mediaSource,进行声音的处理。<!DOCTYPE html><html lang="e
2020-08-26 15:26:04
1529
2
原创 前端组件化之tablePage
前端组件化之tablePagetablePage代码分析组件使用属性方法slot说明该组件大量使用 slot，理想情况下，只需定义列表的对应关系，就可以展示页面tablePage代码分析tablePage.vue<template> <title-page :title="title"> <template slot="header-right"> <slot name="header-right">
2020-06-24 17:12:34
1543
原创 前端组件化之tabPage
前端组件化之tabPagetabPage代码分析组件使用属性该组件主要是简化多tab页面切换时的冗余代码，写成组件后，开发者不需要关系页面切换的逻辑，只需要书写Page1,Page2等页面即可tabPage代码分析<template> <section class="page-container"> <el-col :span=" 24" class="bg-fff padd-all-20 dis-flex flex-dir-column h-
2020-06-24 14:55:47
950
原创 前端组件化之titlePage
前端组件化之titlePagetitlePage代码分析titlePage组件pageBase组件组件使用属性这里写一个简单的页面组件，该组件旨在统一页面格式，多人开发时减少 样式部分的书写titlePage代码分析titlePage组件<template> <div style="height: 100%;"> <my-pageBase> <template slot="header">
2020-06-23 18:29:42
961
原创 Vue自定义组件之日期时间范围选择器
日期时间范围选择器该组件 时间选择到分钟，时分的选择支持输入和上下加减调整代码分析<template> <div class="date-times-picker"> <el-popover placement="bottom" width="460" trigger="click" v-model="visible" @after-leave="hideHandle"> <div class="date-ti
2020-06-03 17:27:08
7094
1
原创 es6 之 数组去重
数组去重reduce之数组去重set 之数组去重reduce之数组去重忽然发现reduce这个方法用于数组去重非常方便let arr1 = [1,2,3,4,5,6,2,1,4,1,2,1,4,5,8,5,4,12,6,4]let arr2 = arr1.reduce((a,b) => { if(!a.includes(b)) { return [...a, b] } else { return a }},[])set 之数组去重
2020-06-01 17:55:44
105
原创 Promise简单使用
同步触发和排队触发同步触发和排队触发同步触发之Promise异步触发之 await同步触发和排队触发项目中很多时候需要优先获取某些数据，这个时候Promise的作用就显现出来了。例：对于一个table页面，获取列表之前需要优先获取配置项，以及列表展示的cloumn等同步触发之Promise当获取的多个数据之间 没有依赖关系时，可以使用Prmose//getConfig1(),getConfig2()是两个异步函数let [result1,result2]=Promise.all([getCon
2020-06-01 10:33:11
372
原创 Array es6简单学习
类数组对象什么是类数组对象呢Array.from 将 类数组对象 转化为真正的数组什么是类数组对象呢本人理解的类数组对象就是：有 length 属性的对象。const ArrayLike = {length: 10}const ArrayLike1 = {name:'wsf',age: 12, length: 10}const ArrayLike2 = {0: 'aaa',8: 'bbb',length: 10}// 以上定义的三个变量都是 类数组对象；区别是 第二个变量中 键名 是数字Ar
2020-05-27 12:05:02
148
原创 拷贝到剪贴板
拷贝到剪贴板依赖包下载引入组件三级目录最近写了一个拷贝到剪切板的小组件，觉得很有意思，这里分享下依赖包这里使用了clipboard.js 的依赖包下载npm install clipboard --save引入import clipboard from 'clipboard'Vue.prototype.clipboard = clipboard组件该组件应用在table中，每个 row 都提供一个 copy 按钮，这里可以自定义 copy内容，并且复制在 txt 文件中<temp
2020-05-26 17:01:49
192
原创 Vue语法糖之v-model and .sync修饰符
Vue语法糖之v-model指令 and .sync修饰符v-model指令v-model 指令的 一般用法这里对v-model 指令进行分解自定义组件中 v-model 的使用v-model之自定义.sync修饰符.sync使用实例.sync 分解总结这里介绍下我的理解v-model指令v-mode一般用在<input>和 <textarea>等表单元素中，通过v-model，可以实现双向数据绑定，其实v-model 是一个语法糖，相当于 v-bind 和 v-on:inpu
2020-05-11 18:28:16
1007
原创 关于Vue中变量的理解
关于Vue中变量的理解Vue中变量可以通过哪些方式定义在data中定义通过Props传入computed中Vue中变量可以通过哪些方式定义vue中的变量使用前，都需要进行定义，这里列举下能想到的途径在data中定义<script>export default { data() { return { var1: '' //在这里定义变量时最常用的方式 } }...
2020-04-30 18:25:09
517
原创 Element --Button
Element 代码研读之 ButtonElement --Button以下是源码感悟Element --Button工作之余，忽然想好好读下Element代码，这里把自己的理解写下以下是源码<template> <button class="el-button" @click="handleClick" :disabled="buttonDi...
2020-04-30 17:52:47
420
1
原创 vue自定义组件之选择器
选择器组件代码分析<template> <div class="dis-i-b ver-ali-mid"> <el-popover placement="bottom-start" trigger="click" v-model="show_dropdown" width="230"> <templat...
2020-04-22 18:40:09
1205
原创 vue el-form表单验证
多表单组件 同步校验Element中对表单的校验：submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { ...
2020-04-22 17:42:55
485
原创 Vue中自定义组件
Vue自定义组件使用使用步骤：v-model绑定示例(以封装对话框组件为例)使用使用步骤：引入注册使用<template> <div> <'my-defineCom></'my-defineCom> //使用 </div></template><script>...
2020-04-22 16:55:51
179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人