- 博客(72)
- 收藏
- 关注
原创 vue音频播放器组件
因为原生audio 播放器太丑了 重新整理 百度综合完成了播放器,基于element ui 组件书写的 需要的自取<template> <div class="audio-player"> <!-- :src="require(`${list[index].url}`) closeIcon --> <audio controls ref="audio-player"></audio> <div clas.
2022-02-14 22:29:35
8012
3
原创 vue-quill-editor的使用以及自定义tabar菜单
上一篇因为contenteditable IE的insertText 有兼容问题 ,所以重新用vue-quill-editor插件
2022-02-13 21:48:15
1269
原创 contenteditable富文本编辑器支持emoji插入表情
首先看下实现效果主要功能是插入表情emoji 点击顶部员工名称 可以插入员工名称到tetxarea中 ,点击face小图标可以展开表情选择注 IE有兼容性问题 不支持IE 主要是ie不持支insertText兼容问题字数限制我没有做完 方法已经提供实现<template> <div class="test"> <!-- caidan --> <div class="rich-text-area"> <
2022-02-13 14:04:29
2522
3
原创 实际开发中遇到的IIE浏览器兼容性问题
实际开发中遇到的IE浏览器兼容性问题样式问题开发中发现样式与chrome不一致 F12 检查 查看样式出入 检查webkit 前缀样式没有生效开发中一直报错 找了很久 才发现是运用表格时 属性重复书写问题 导致页面打不开–这个问题查了一天3.导出功能 下载Excel时 常用方法IE异常 处理 - baidu 可以找到解决方法4 调用接口时 get请求方式 请求数据后再次请求 数据一直是上次请求到的结果,找了很久才再无意中发现接口请求处显示来自缓存 。 解决: 再请求的地址后加时间
2022-01-21 20:44:34
696
原创 仿elementui Cascader级联器组件编写
因公司开发需要自己类似element UI 级联器类似得组件 刚好没有封装过 只能自己动手啦
2021-10-15 20:54:47
815
转载 关于循环里怎么正确使用await进行异步操作 资料
关于循环里怎么正确使用await进行异步操作 资料 如何在 JS 循环中正确使用 async 与 await 背景 在日常的项目开发中,常常遇到批量删除的应用场景,比如批量删除人员信息、设备信息、时间计划等。但是协议常常只给了单个删除的接口,而且设备那边同时只能处理一个相同的接口,所以使用异步+循环处理势在必行。本文就在...
2021-09-14 09:31:02
1039
转载 项目中的.env.development和.env.production文件是啥
项目中的.env.development和.env.production文件是啥vue项目使用.env文件配置全局环境变量关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件========================================================================
2021-09-06 20:02:13
1471
转载 ES模块化的导入和导出
ES模块化的导入和导出 本文章向大家介绍ES模块化的导入和导出,主要包括ES模块化的导入和导出使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 目录环境准备模块化export、importexportimportimport * asexport defaultimport 和 require 的区别参考环境准备三个...
2021-06-22 22:39:26
1071
原创 如何实现一个拖拽
如何实现一个拖拽 // 拖拽功能 <div class="box" style="width: 100px;height: 100px;background: red;position: absolute;"> </div> let box = document.querySelector('.box'); let boxX = null; let boxY = null; let startX = null; let
2021-06-21 13:54:42
705
转载 link与@import引入css文件区别
页面导入外部css文件的方法通常有两种,一种在网页中直接link标签加入,另一种在页面中@import引入css文件。两种引入形式如下:引入形式:两者差别:1 适用范围不同@import可以在网页页面中使用,也可以在css文件中使用,用来将多个css文件引入到一个css文件中;而link只能将css文件引入到网页页面中。2 功能范围不同link属于XHTML标签,而@import是CSS提供的一种方式,link标签除了可以加载CSS外,还可以定义rel连接属性,定义RSS等,@import就只
2021-06-19 15:01:47
968
1
原创 微信小程序基础学习四(echart的使用)
微信小程序基础学习四(echart的使用)先看下最终实现的效果–自己做的小demo首先到ECharts官网下载官网地址根据上面的网址下载代码把ec-canvas文件拷贝下来放到你自己的项目中,我放的是tool文件夹下面,你们随意引入的时候注意路径就行2.使用然后在你需要用的页面引入,在json中加入,这里要注意路径echart.json"usingComponents": { "tab":"../../component/tabs/tab", "ec-canvas":"..
2021-05-29 23:12:41
452
9
原创 微信小程序基础学习三
微信小程序基础学习三微信小程序云开发见大佬博文云开发小案例 支出收入tab切换使用组件使用时要在主页面json引入{ "usingComponents": { "tab":"../../component/tabs/tab", "iconList":"../../component/iconList/iconList" }, "navigationBarTitleText":"记一笔", "navigationBarTextStyle": "black"}
2021-05-22 21:40:22
145
3
原创 微信小程序基础学习二
微信小程序基础学习二小程序导航<navigator url="/pages/about/about">跳转到 about 页面</navigator>- url 属性设置需要跳转的路径- 页面路径应该以 / 开头,- 路径必须提前在 app.json 的 pages 节点下声明导航到 tabBar 页面<navigator url="/pages/person/person" open-type="switchTab">跳转到 tabBar 页面<
2021-05-21 20:59:29
188
原创 微信小程序基础学习一
微信小程序基础学习一1.小程序自学前的准备(技术就不多说啦)看下官网地址小程序官方文档里面有起步带你快速入门 。2 个人感觉小程序和VUE是非常相似的。如果你会VUE基本很快可以上手3 按照官网下载小程序开发工具可以很快生成一个小程序模板。小程序页面结构├── pages ······································ 【目录】存放所有的小程序页面│ │── index ···································· 【目录】ind
2021-05-20 23:03:00
196
3
原创 vue中使用iconfont字体图标
去iconfont官网选择想要的图标下载到本地添加链接描述2.解压下载后的文件 放入到项目中3.修改iconfont.css 中路径为相对路径4.在main.js在中引用5.打开demo.html 在项目中选择想要的样式类名6.效果...
2021-01-09 17:46:21
142
转载 vue组件中使用<transition></transition>标签过渡动画
vue组件中使用标签过渡动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--2. 自定义两组样式,来控制transition
2021-01-09 17:34:39
763
原创 vue--简易轮播图组件的实现
vue–简易轮播图组件的实现轮播图在实际开发中非常常见,这边基于vue简易写了一个swiper组件这边样式由于时间问题就随意了<template> <!-- 轮播图 --> <div class="swiper" @mouseleave="mouseleave" @mouseenter='mouseenter'> <div class="img" > <img @click="linkTo(item.linkU
2020-11-01 15:20:17
3052
原创 vue动态组件使用---tab选项卡
vue动态组件使用—tab选项卡tab选项卡在项目中经常使用动态组件的使用请看vue官网实例 <!-- tab --> <ul class="tab"> <li @click='tabTaggle("recommend")'>推荐</li> <li @click='tabTaggle("hh")'>人气</li> <li @click='tabTaggle("singer")'>
2020-10-31 22:22:43
637
转载 Vue.extend动态组件
Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的。Vue.extend( options )参数:{Object} options用法:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例,需要注意 - 在 Vue.extend() 中它必
2020-09-05 16:50:46
1316
原创 node基础
node中文网http://nodejs.cn/api/buffer.html#buffer_class_method_buffer_allocunsafe_sizenode学习第一天md hello 新建文件夹hellord hello 删除文件夹cd …dir1.环境变量系统中的变量系统中的变量当在命令窗口中打开文件时 现在当前文件中找文件 然后再去环境变量 path的路径中寻找 可以将经常用的文件路径放到环境变量中 这样可以在cmd中一下就能访问2.进程和线程进程:为程序
2020-08-02 17:55:35
136
转载 CSS波浪号选择器
波浪选择器用来选择所有匹配到的兄弟元素<ul><li class="something-important">Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>.something-important { color: red;}.something-important ~ li { fo
2020-06-03 22:04:26
1427
转载 vue 自定义步骤条组件
<template> <div> <ul class="steps"> <li v-for="(item,index) in SetData" :key="item+index" :class="{'active':Steps===index}" >{{item+Steps}}</li> </ul> </div></tem
2020-06-03 21:57:43
2557
转载 Content-type的几种常见类型
Content-type的几种常见类型程序媛提高审美.png一、是什么?是Http的实体首部字段,用于说明请求或返回的消息主体是用何种方式编码,在request header和response header里都存在。二、几个常用类型:1、application/x-www-form-urlencoded1)浏览器的原生form表单2) 提交的数据按照 key1=val1&key2=val2 的方式进行编码,key和val都进行了URL转码POST [http://www.e
2020-05-31 21:25:56
982
转载 input原生上传文件的使用
input原生上传文件的使用1.在项目中经常会用到需要上传头像,附件的地方,那么我们如何进行上传呢,今天跟大家分享一下,来自项目中的一些上传文件的个人总结2.首先我们需要在页面中使用一个 input 按钮,并将它的type属性设置为’file’,关于上传按钮美化的操作,我已经在上一篇博客中详细的讲解了.下面直接贴出代码截图若项目中需要支持上传多文件,只需要在input标签上加上 multiple属性就可以了.要想实现上传操作,还需要在变迁上定义一个change事件,用于触发上传文件发生变动时的函
2020-05-27 22:28:03
2690
原创 Object.keys方法之详解
一、语法Object.keys(obj)参数:要返回其枚举自身属性的对象返回值:一个表示给定对象的所有可枚举属性的字符串数组二、处理对象,返回可枚举的属性数组let person = {name:“张三”,age:25,address:“深圳”,getName:function(){}}Object.keys(person) // [“name”, “age”, “address”,“...
2020-04-28 22:45:10
206
原创 JS获取时间戳的方法
1.Date.parse()var timestape=Date.parse(new Date());2.valueOf()var timestape=(new Date()).valueOf();3.getTime()var timestape=new Date().getTime();4.Date.now()var timestape=Date.now();注:Date.pa...
2020-04-28 22:40:55
490
原创 easymock的使用
easymock官网:https://www.easy-mock.com 官网总是卡顿好处:可以随意创建出你想要的数据类型 基本满足你的需求 使用很简单 网上教程很多参考下就okeasy-mock 常用的几个命令"cname": "@cname",//中文人名 "id": "@id",//生成20 位数字 "title": "@ctitle",//中文title "city"...
2020-03-29 14:37:55
169
转载 ES6中Array.find()和findIndex()函数的用法详解
ES6--数组实例的find()和findIndex()用法对比 数组实例的find() 用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有的数组元素一次遍历该回调函数,直到找出第一个返回值为true 的元素,然后返回该元素,否则返回 undefined[1, 5, 10...
2020-02-24 21:35:33
414
原创 for in 和for of 的区别
最近在学习es6的知识,看到了for of 这新的循环方法,所以就测试一下和以前for in有什么不同,一下是一些不同地方,当然还有其他不同的,暂时还没有发现:for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:...
2019-12-15 22:57:53
374
转载 Object.assign()用法讲解
Object.assign()用法讲解语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTar...
2019-12-14 14:19:06
141
转载 JS库——Lodash的常见语法
据类型的处理函数。首先要明白的是 Lodash 的所有函数都不会在原有的数据上进行操作,而是复制出一个新的数据,不会改变原有数据。_.是Lodash 中的顶层对象,所有的方法和属性都在_.中使用。
2019-12-14 13:53:33
395
原创 includes.filter.map的用法
includes.filter.map的用法includes 用法includes()返回布尔值,表示是否找到了参数字符串 同样适用于数组1.判断字符串var str = 'hello word' console.log(str.includes('he')) // 返回的结果是true只要str存在的值,就会返回结果true,否则返回false2.判断数组 var arr...
2019-12-14 13:12:24
298
转载 flex布局介绍
写在前边网页布局,是前端入门的时候必学、必须熟练的一门技术,学到什么程度算是入门了呢?随便给你一个网站,你就可能快速的分析出网页的结构,然后搭建出模型,这是前端网页布局入门的最基本要求。作为一个前端初学者,在学习的时候可能会用到一些盒模型传统的布局方式(display + position + float),很多小伙伴用着用着就觉得这种传统布局写一些样式比...
2019-11-30 14:56:01
509
原创 export ,export default 和 import 区别 以及用法
export ,export default 和 import 区别 以及用法接上篇文章内容 ,刚开始使用组件之后一直报错, did you register the component correctly? For recursive components, make sure to provide the “name” option.我以为是需要什么name属性 加了之后也没效果,后来好久...
2019-11-23 21:31:39
176
原创 封装简易的进度条组件
一 简易的进度条封装(极简版的)最近做项目时需要一个简易的进度条 ,自己动手丰衣足食 ,话不多说上代码这里是自己偷懒 使用了element UI的对话框组件子组件 progress.vue<template><div class="com"><el-dialog title="简易的进度条组件" :visible.sync="dialogVis...
2019-11-23 21:12:43
592
原创 echartsECharts--自定义tooltip属性
最近在做项目中用到了雷达图,需要用到自定义tooltip 查了相关资料。一般的tooltip提供的简单的功能往往无法满足我们实际开发需要 ,那就动起手来 baidu吧提示框浮层内容格式器,支持字符串模板和回调函数两种形式。字符串模板,就是把相对应的模板变量进行拼串formatter: ‘{b0}: {c0}{b1}: {c1}’2.回调函数// 回调函数格式(params: Obj...
2019-11-11 21:50:27
2988
原创 使用TS做简易版的todolist
简易版的todolisthtml页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
2019-09-07 17:17:03
750
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人