- 博客(108)
- 收藏
- 关注
原创 WEB前端资源项目整合
vue.js高仿饿了么(1-13章全)链接:https://pan.baidu.com/s/1qYSiYXluA1AlEV0EskxWZw提取码:25z9Vue.js 2.5 + cube-ui 重构饿了么 App链接:https://pan.baidu.com/s/1UZyLkzYMvhUhhX3GH5ITvA提取码:bx53Vue2.0 + Node.js + MongoDB全栈打造商城系统链接:https://pan.baidu.com/s/10Jm22uzp4p2NMMRlNac7Rg
2020-07-30 19:11:20 7358
原创 vue3中keep-alive的使用及结合transition使用
# 正确用法1. 在组件中使用(这里结合了 transition 内置动画组件 )```javascript
2023-08-29 15:29:16 1275 1
原创 Vue导出当前页面为PDF文件
Vue导出当前页面为PDF文件。# 下载插件```javascriptnpm install html2canvas --savenpm install jspdf --save```# 创建导出函数文件htmlToPdf.js```javascript// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default {}
2023-01-06 15:30:39 528 1
原创 vue中实现导出、下载文件
Api// 导出/下载import request from './request';export default { exportData(params) { return request.post('/export', params, { responseType: 'blob' }); },}注意:responseType: ‘blob’下载/导出函数export function downLoad(res, filename) { // res
2022-04-13 18:42:32 6338 4
原创 element-ui的Upload上传图片、文件封装
上传文件<template> <el-upload action="#" list-type="picture-card" :file-list="fileList" accept=".jpg,.jpeg,.bmp,.png,.pdf,.doc,.docx,.xls,.xlsx" : before-upload="beforeUpload" :http-request="uploadFile"> </el-upload></temp
2022-04-13 18:17:07 883
原创 ECharts之横向柱状图一
效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy
2021-11-18 08:54:36 5612
原创 ECharts之横向柱状图二
效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy
2021-11-17 09:05:35 3431 2
原创 ECharts之3D立体柱状图一
效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy
2021-11-16 08:54:40 2630
原创 ECharts之3D立体柱状图二
效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy
2021-11-15 17:10:22 1657
原创 常用的正则表达式
# 特殊校验- **手机号码:**`/^(\+86)?1[3-9][0-9]{9}$/ (支持+86)`- **固话(电话):**`/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/`- **Email(邮箱):**`/^(\w-*\.*){6,}@(\w-?)+(\.\w{2,})+$/`- **身份证(18位):**`/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-
2021-08-23 17:49:07 2100
原创 JS中slice和splice的区别
# slice()**1、String中**- 语法 `string.slice(start, end)` 抽取一个子字符串- 描述 `slice()`将返回一个含有字符串`string`的片段的字符串或返回它的一个子串。 但是该方法不修改`string`- 参数 `start:`要抽取的片段的起始下标。如果是负数,那么该参数声明了从字符串的尾部开始算
2021-08-16 15:08:12 1036 1
原创 es6中Set、Map、WeakSet和WeakMap的区别
Set Set 类似于数组,本身是一个构造函数,用来生成 Set 数据结构,成员值是唯一且无序的,常用于数组去重 Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化 Set 数据结构允许存储任何数据,无论是基本数据类型值或者是对象引用 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(=
2021-08-13 15:33:07 904
原创 vue中使用mockjs模拟接口
效果图安装npm install mockjs --save // 三选一就可以了cnpm install mockjs --saveyarn add mockjs新建mock目录 mock目录下新建index.js和json文件 mock下的index文件,注意每改接口后都要重启才能生效// 引入外部资源const fs = require('fs')const path = require('path')const Mock = require('mockjs')
2021-07-22 19:54:28 1659 8
原创 vue中添加水印效果
效果图创建warterMark.js文件 在src 目录下创建utils文件,在utils里新建warterMark.js文件let watermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let ca
2021-07-21 16:22:08 1138
原创 vue格式化时间
效果图简单实用,不需要下载插件,在项目中也可以这样用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>格式化时间</title> <style>
2021-07-17 13:50:20 1113
原创 element-ui表格多级表头、表头换行
效果图安装Element-uinpm i element-ui -S引入 Element-ui 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import 'element-ui/lib/theme-chalk/index.css'import
2021-06-01 17:36:21 1859 2
原创 微信小程序实现新闻轮播、禁止手动竖向滑动
效果图片WXML 在 swiper-item 上加入 catchtouchmove 方法,截获竖向滑动<view class="container"> <view class="news"> <image class="icon-news" src="/images/news.png"></image> <swiper class="swiper" autoplay circu
2020-12-29 16:04:06 1664 2
原创 微信小程序base64转为二维码、条形码图片
亲测可以显示Page({ data: { qrCodeUrl: null }, onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发 }, onShow: function () { this.getQrCode() }, // 获取二维码 getQrCode() { wx.request({ url: '', data: {}, header: { 'c
2020-12-15 15:48:13 2093 1
原创 element-ui自定义非必填字段的格式校验
场景 element 表单里非必填的字段需要校验格式时使用注意 rules 里面非必填字段不要加上 required 属性<template> <div class="container"> <el-form ref="elForm" :inline="true" :model="form" :rules="rules" size="small"> <el-form-item label="姓名" prop="name"&
2020-12-14 10:56:40 2912 2
原创 vue中两种history和hash模式的使用
vue2.0中的history和hash模式 1. history模式import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: 'history', routes: [ { path: '/', name: '', component: '' } ]}) 2. hash模式import Vue f
2020-11-26 19:37:36 5534
原创 微信小程序中使用Echarts统计图
效果图下载github:https://github.com/ecomfe/echarts-for-weixin解压之后把 ec-canvas 文件拷贝到小程序项目中WXML<view class="container"> <view class="echarts"> <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas> </view>
2020-11-05 10:43:57 5816 17
原创 vue3.0常用eslint配置详解 .eslintrc.js
规则值" off " 或者 0,关闭" warn " 或者 1,警告" error " 或者 2,报错.eslintrc.js配置module.exports = { root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找 env: { // 预定义的全局变量,这里是浏览器环境 amd: true, es6: true, commonjs: true, node: true, jquery: true, br
2020-10-28 16:02:56 6708 1
原创 vue3.0常用配置详解 vue.config.js
在项目文件下的根目录创建 vue.config.jsmodule.exports = { baseUrl: '', // 从 Vue CLI 3.3 起已弃用,请使用 publicPath publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', // 输出文件目录 outputDir: 'dist', // 静态资源目录 (js, css, img, fonts) assetsDir: 'assets', /
2020-10-28 15:24:02 2202
原创 微信小程序table表格自定义组件实现
效果属性属性类型默认值必填说明tabDataArray[ ]否数据源columnsArray[ ]是数据列settingObject{ }否自定义样式配置项columns属性类型默认值必填说明labelString是表格标题propArray是表格中需要展示的数据列onclickBooleanfalse否为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效
2020-10-22 17:16:22 10383 36
原创 微信小程序map自定义组件实现
效果 实际手机效果不会点击时突然闪一下,气泡弹窗也不会被其他坐标点挡住图片 鼠标放在图片上可以看到使用的图片名称子组件WXML<map id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;"><
2020-10-16 11:24:59 3596 2
原创 微信小程序实现tabs标签栏自定义组件
效果子组件WXML<view class="tabs"> <view class="tab-item" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" data-value="{{item}}" bindtap="changeTab"> <text class="tab-text {{currentIndex == index ? 'active'
2020-10-12 21:09:38 2912 4
原创 微信小程序中observer的详解
概述 observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段效果
2020-09-29 20:55:21 12379
原创 微信小程序实现星级评价和效果展示
效果图片WXML<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"
2020-09-26 16:10:28 2830 1
原创 JS中浅拷贝和深拷贝的几种实现方式
概念 深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。它们最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。简单来说,假设B复制了A,当修改B时,看A是否会发生变化,如果A变了,说明是浅拷贝;如果A没变,那就是深拷贝浅拷贝1. 用 = 号赋值引用地址let obj = { name: '李四', age: 20, sex: '男', tel: /^1[345789]\d{9}$/, address: undefined
2020-09-22 21:07:29 4987 21
原创 ajax的深入理解及封装
概念 AJAX: Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) AJAX 不是新的编程语言,而是一种使用现有标准的新方法,一种用于创建快速动态网页的技术 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个
2020-09-22 14:57:04 1345
原创 微信小程序实现列表项左滑删除效果
效果图图片WXML<view class="container"> <!-- 收货地址 --> <view class="address"> <view class="left"> <view class="icon"> <image src="../../images/address.png"></image> </view>
2020-09-12 11:29:06 2002
原创 微信小程序实现上传图片功能
效果图WXML<view class="img-wrap"> <view class="txt">上传截图</view> <view class="imglist"> <view class="item" wx:for="{{imgs}}" wx:key="item"> <image src="{{item}}" alt=""></image> <view class='d
2020-09-10 11:51:12 14860 40
原创 微信小程序禁止转发和长按转发
禁止当前页面转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发}禁止当前页面长按转发 分享到个人时可以长按转发,分享到群聊里不能长按转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.showShareMenu({ withShareTicket: true })},/** *
2020-09-05 18:29:30 9855 6
原创 微信小程序动态设置页面标题
JOSN文件里设置页面标题{ "navigationBarTitleText": "首页"}JS文件里动态设置页面标题 这里设置的标题会覆盖 JOSN 文件里的标题,最好去除 JOSN 文件里的标题/** * 生命周期函数--监听页面加载*/onLoad: function (options) { wx.setNavigationBarTitle({ title: '电影' })},...
2020-09-05 17:09:37 1851
原创 微信小程序发送短信验证码倒计时
效果图WXML文件<view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image> <text class="userinfo-nickname">什么</text> </view> <view
2020-08-27 15:49:10 1411
原创 微信小程序列表项数据详情折叠效果
效果图WXML文件<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"> &l
2020-08-15 15:56:06 2233
原创 微信小程序实现图片放大预览保存和滑动功能
效果图 右边是手机展示效果![在这里插入图片描述](https://img-blog.csdnimg.cn/20200814193808538.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4,size_16,color_FFFFFF,t_70 width=400x #pic_center)WXML文件&l
2020-08-14 19:44:39 2043 6
原创 微信小程序格式化日期的几种方式
效果图方式一wxml 文件<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"></i
2020-08-14 16:18:16 13367 7
原创 微信小程序之生命周期的深度解析
效果图应用的生命周期// app.jsApp({ /** * 小程序首次被打开触发 */ onLaunch: function () { console.log('应用 - onLaunch,全局只触发一次') }, /** * 小程序初始化完成 / 从后台进入前台触发 */ onShow (options) { console.log('应用 - onShow,监听小程序显示,小程序从后台进入前台显示也会触发') }, /*
2020-08-13 19:22:58 1225
原创 element-ui的table表格实现跨页多选及回显效果
效果图安装 Element-ui 和 egrid 基于 Element-UI Table 组件封装的高阶表格组件,可无缝支持 element 的 table 组件npm i element-ui -Snpm i egrid -S引入 Element-ui 和 Egrid 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from
2020-07-20 16:43:45 4890 4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人