- 博客(52)
- 收藏
- 关注
RSS订阅
原创 vue实现类似微信按住发送语音包给后端，推荐使用插件js-audio-recorder
一、需求是点击发送按钮说话获取语音文件发送给后台、鼠标移除即发送，限制时长30s。
2024-06-13 13:58:29
637
原创 el-date-picker日期时间插件只允许选择年月日小时并做可选择范围限制（精确到小时的范围）
日期插件只选择年月日时，开始时间结束时间的可选择范围限制包含小时的可选择范围，且不能相应插件本身在项目中其他地方的使用，仅限制当前页面的需求使用
2023-12-20 14:30:55
2740
原创 使用el-select封装支持搜索、多选、滚动分页的下拉框组件
一、相信做管理后台的都会遇到这样需求、因为数据量太大下拉框数据采用滚动分页的方式同时支持搜索、多选/单选，下面是组件内容1、目录放在components/commom-scroll/index<template> <el-select v-model="activeValue" v-loadmore="loadMore" remote filterable :remote-method="remoteMethod" class="sc
2021-08-03 18:22:25
2628
原创 vue3结合ckEditor4富文本编辑器的使用
一、从官网下载我使用的是ck4下载地址 ： https://ckeditor.com/ckeditor-4/download/二、将解压好的自定义文件夹放到vue-cli搭好的public中三、这里需要在index.html引入ck的js代码四、创建ck 公用组件 我这里起名字ckEditor文件下的index.vue<template> <div> <textarea :id="id" name="content"></textarea&g
2020-07-27 10:47:25
2746
原创 常用echart图表(柱状图、折线图、饼图、环形进度条、雷达图等等)基础配置和用法、resize()响应、轮播tooltip
一、最简单的使用方式引入官方echart.js即可<script src="js/echarts.js"></script>二、页面准备一个DOM容器 <div style="width:49%;height:450px;" id=“main”></div>三、主要代码部分 //1、 基于准备好的dom，初始化echarts实例 ...
2019-11-19 10:32:54
1187
原创 总结使用Element-ui用到的小技巧（InfiniteScroll滚动分页、el-tree单选的树状结构选项、表格循环表头表体、el-input远程搜索等等）
一、日期选择<template> <el-date-picker v-model="configDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :picker-options="expireTimeOption" type="date" placeholder="选择日期">...
2019-06-21 14:25:34
2835
1
原创 vue脚手架项目结合adminLTE框架做单页面应用后台管理项目
介绍vue脚手架搭建过程以及如何结合adminLTE框架和一些插件做个单页面后台管理项目
2018-12-15 19:41:33
5902
5
原创 vue下载本地xls模版静态文件
直接在浏览器中访问 http://localhost:9000/template.xlsx 看是否能访问到文件。启动你的开发服务器，通常是 npm run serve或npm run dev。通过以上步骤，应该能够确保静态文件能够正确访问和下载。
2024-06-19 16:39:41
939
原创 vue使用workbox-webpack-plugin完成打包部署提醒用户版本更新刷新获取，再也不用担心缓存问题导致用户体验不好了
vue实现版本控制自动提醒用户版本更新刷新页面
2024-06-19 16:32:46
404
原创 封装el-upload大文件分片上传、断点续传组件
分片上传原理其原理其实就是在客户端将文件分割成多个小的分片，然后再将这些分片一片一片的上传给服务端，服务端拿到所有分片后再将这些分片合并起来还原成原来的文件。那服务端怎么知道我合并出来的文件是否和服务端上传的文件完全一样呢？这就需要用到文件的MD5值了。文件的MD5值就相当于是这个文件的“数字指纹”，只有当两个文件内容完全一样时，他们的MD5值才会一样。所以在上传文件前，客户端需要先计算出文件的MD5值，并且把这MD5值传递给服务端。服务端在合并出文件后，在计算合并出的文件的MD5值，与客户端传递过来
2022-05-11 12:04:53
3301
原创 vue PC端浏览器滚动条滚动分页加载
一、需要用的外部文件统一存放在utils文件夹内throttle.js 节流// 节流export const throttle = function (fn, delay) { let preTime = Date.now() return function () { const context = this const args = arguments const nowTime = Date.now() if (nowTime -
2022-02-28 13:57:30
919
原创 vue封装进度条组件
一、组件封装 components/progress.vue<template> <div class="process-father" :class="{'addGray':addGray}" > <div class="process-child" ref="processChild"> <p class="process-animate" :class="{'addGray':addGray}"></p> &
2021-11-15 15:10:34
1862
原创 vue使用echarts字体自适应
<templete> <div id="echart" style="width:400px;height:400px"></div></templete><script> export default({ data(){ return{ chartCircle:null, circleOption:{}, screenW
2021-11-15 14:38:29
1409
原创 小程序使用原生swiper封装日历组件
先上一个效果图大家就知道布局方式了目录介绍：uni-calendar： （上图绿色框部分，主要逻辑代码实现）主组件展示当前日期、左右的切换（上/下）月份、当月数据展示引入子组件calendar-itemcalendar-item：（上图红色框部分） 子组件 展示中间日期部分的内容用于切换（上/下）月份的时候方便使用、把上月/当月/下个当成三个滚动滑块index ：使用组件的页面 （通过上图黄色图标点击判断展示/隐藏日历）特殊：这个日历功能根据业务需求需要调用后台接口把特殊日期的事件加标注（如上图
2021-07-20 16:01:22
833
原创 总结前端常用的正则表达式
一、常见的个人信息限制的正则表达式（1）姓名只能包含汉子或者英文：/^([\u4E00-\u9FA5]+|[a-zA-Z]+)$/（2）大陆身份证号：/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/（3）手机号：/^1[345678]\d{9}$/二、输入框限制输入（1）只允许输入正整数 <el-input placeholder="请输入" v-model="str" onkeyup="value=value.replace(/^(0+)|[^\d]
2021-01-18 10:33:56
1202
原创 vue开发pc端支付方式（支付宝、微信、银联）
简介：因为公司项目涉及到充值功能所以做了支付宝、微信、银联的支付功能、支付宝和银联都是跳转第三方、微信通过后端返回的url绘制二维码（1）安装 npm install qrcodejs2（2）引入 import QRCode from ‘qrcodejs2’<template> <div> <el-radio-group v-model="payMode"> <el-radio :label="1">支付宝支
2020-12-15 11:24:03
3144
2
原创 pc端使用融云做直播推流和拉流（因Chrome 93 版本开始不再支持 plan-b 协议、改为RCRTCAdapter 桥接版本）
总结web端融云音视频直播推流和拉流的实现方式
2020-10-16 14:13:54
1337
原创 vue如何给循环出来的列表分别做倒计时展示
一、代码如下<templete> <div class="auctionnowlist" v-for="(item) in nowspec" :key="item.specId"> <div class="auctionnowlistleft"> <img :src="item.hfileIds" class="auctionnowlistimg" /> </div> &
2020-09-10 17:37:12
1521
5
原创 vue结合Waterfall做图片瀑布流展示
一、安装Waterfallnpm install vue-waterfall-plugin -s二、在组件中引入并使用<template> <div> <Waterfall ref="waterfall" :list="lotList" :gutter="13" backgroundColor="#ffffff" :breakpoints="{500: { rowPerView: 2,}}"> <temp
2020-07-23 12:27:02
2029
原创 vue自定义过滤器格式化后台的返回的金额
一、在util文件下创建一个currency.js文件const digitsRE = /(\d{3})(?=\d)/g export function currency (value, currency, decimals) {// value = parseFloat(value) if (!isFinite(value) || (!value && value !== 0)) return '' currency = currency != null ? curre
2020-07-23 11:29:35
504
原创 vue+better-scroll做上拉加载下拉刷新效果
一、安装npm install better-scroll --save-dev二、组件引入import BScroll from 'better-scroll'三完整代码如下<templete> <div class="list" ref="wrapper"> <div class="bscroll-container"> <!-- 刷新提示信息 --> <div class="to
2020-07-05 16:07:57
1031
原创 uniapp开发小程序常见问题
一、请仔细浏览uniapp官网，下载HBuilderX创建uni-app亲身体验一下，这里就不多做介绍了。https://uniapp.dcloud.io/二、我在开发小程序过程中遇到的问题和长常用的方法1、封装ajax请求，请前往我的另一篇博客查看https://blog.csdn.net/qq_41149508/article/details/1059454872、用户授权登录on...
2020-05-06 14:53:22
2871
原创 封装uniapp开发相关ajax请求
一、使用uni.request方法和promise进行封装，代码如下：let Promises = Promiseimport config from './config' //这是我存放接口api的文件const host = config.host; //这是获取域名Promises.prototype.finally = function(callback) { let P...
2020-05-06 10:32:55
2706
原创 Vue常见面试题集
一、揭秘Vue中的Virtual Dom1、首先我们来了解一下模板转换成视图的过程如下图：Vue.js通过编译将template模板转换成渲染函数（Render),执行渲染函数就可以得到一个虚拟节点树在对Model进行操作的时候，会触发对应Dep中的Watcher对象。Watcher对象会调用对应的update来修改视图。这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比结果进行DO...
2020-03-16 16:15:46
463
原创 总结前端常见面试题集
概要：因为疫情的缘故导致目前工作不太好找，但是我们也不要放弃在这个时间可以不断充实自己，下面是我整理的一些常见面试题，希望对大家有一定的帮助。一、CSS篇（1）什么是flex,常用属性有哪些，分别什么作用？ 答案：请移步另一篇文章有详细介绍（2）BFC是什么？如何产生？特点是？答案：1、简介BFC的全称是Block Format Content,直译为“块级格式化上下文”，它是一个独立...
2020-03-10 11:48:05
541
原创 vue结合vue-quill-editor 富文本编译器的用法
一、安装依赖npm install vue-quill-editor --savenpm install quill --save二、两种引用方法，全局引用和局部引用(1)全局引用，项目入口文件中（main.js）注册import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'// require styles...
2019-12-13 16:23:14
282
原创 Vue+Typescript+Axios+Less+Vuex项目环境的起步搭建
一、搭建vue-cli脚手架这个过程就不详细说明了不清楚的可以翻阅我以前的有关vue脚手架的文章二、安装Typescript相关依赖npm i vue-class-component vue-property-decorator --savenpm i ts-loader typescript tslint tslint-loader tslint-config-standard --sa...
2019-10-31 15:33:50
707
原创 详述vue中computed和watch和methods的区别
一、computed和watchcomputed计算属性顾名思义就是通过其他变量计算得来的另一个属性,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要它们的响应式数据没有发生改变，多次访问 这个数据 计算属性会立即返回之前的计算结果，而不必再次执行函数。watch侦听器是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以...
2019-10-18 11:28:17
596
原创 指定展示文字的行数超出隐藏显示省略号（-webkit-line-clamp）
一、简单介绍一下用到的css属性-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其它的WebKit属性。常见结合属性：display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient:vertical 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。二、通过...
2019-10-14 17:53:20
739
2
转载 Vue必备知识点
https://segmentfault.com/a/1190000016344599?utm_source=tag-newest
2019-09-03 11:31:15
182
原创 纯css绘制气泡样式并做倒计时展示
一、代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin:0...
2019-08-19 16:22:18
423
原创 结合element-ui+ajax拦截+loading封装请求方法
一.https.js文件import Axios from 'axios' import api from './api'import Vue from 'vue'import router from '../router'import cookle from '../store/cookle.js'var qs = require('qs');import { Message,L...
2019-07-26 13:54:00
1398
原创 常用数据处理方式：数组或对象去重、把对象数组根据不同的id分组、递归遍历、对象数组取某个属性的最大值或最小值等
一、循环对象数组根据标识不同分组（我这里的标识是ParentAttributesID）<script> export default({ data(){ selected[ {"AttributesTitle":"大陆国行","AttributesID":42,"Price":0,"ParentAttributes...
2019-07-25 15:02:54
1380
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人