vue
姥姥家的饭
学海无涯苦作舟
展开
-
uniapp上传图片、视频 包括预览、压缩、手动上传等功能
插件地址:https://ext.dcloud.net.cn/plugin?id=8941#detail原创 2022-10-24 10:44:30 · 871 阅读 · 0 评论 -
vue3+ts+vite项目基础模板
vue3+Ts+vite项目基础模板原创 2022-09-30 16:25:37 · 254 阅读 · 1 评论 -
Element 上传单张多张图片组件
<template> <div class='app-content'> <el-upload action="#" list-type="picture-card" :file-list="fileList" :on-preview="handlePictureCardPreview" :http-request="request"原创 2021-05-13 13:40:58 · 233 阅读 · 0 评论 -
vue-cli脚手架构建vue3项目
安装node.js 版本在8v+ (可以去官网下载)安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org(淘宝镜像会快一点,不安装也没关系)开始创建项目 vue create '项目名称'4. 运行项目cd 项目名称 (进入项目根目录)cnpm run serve (启动项目)...原创 2021-03-16 11:47:44 · 515 阅读 · 0 评论 -
vue3和vue2有哪些区别?
vue3.0的设计目标更小更快加强TypeScript支持加强API设计一致性提高自身可维护性开放更多底层功能压缩包体当前最小化并被压缩的 Vue 运行时大小约为 20kB(2.6.10 版为 22.8kB)。Vue 3.0捆绑包的大小大约会减少一半,即只有10kB!编译时优化Slot 默认编译为函数:父子之间不存在强耦合,提升性能Monomorphic vnode factory:参数一致化,给它children信息,建立数据 data这里就是Vue2与Vue3 最大的区转载 2021-03-02 18:07:45 · 2669 阅读 · 0 评论 -
Vue3的构建工具Vite使用
Vue3项目环境搭建安装Node.js官网下载安装:https://nodejs.org/en/ 对应系统、版本下载安装mac HomeBrew安装nodenode -v #版本查看npm -v #版本查看安装Vuenpm install -g @vue/cli #终端执行安装 Vue-CLI'vue -V #查看版本创建项目vue create <Project Name> #创原创 2021-03-02 18:05:38 · 349 阅读 · 0 评论 -
vue项目常用插件
SortableJS 功能强大的JavaScript 拖拽库Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。vue-countTo 简单好用的一个数字滚动插件vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easin原创 2020-12-28 11:33:27 · 234 阅读 · 0 评论 -
vue 节流函数防抖函数封装
封装assets/js/public.js/** * 函数防抖 * @param fn * @param delay * @returns {Function} * @constructor */export const Debounce = (fn, t) => { let delay = t || 500; let timer; return function() { let args = arguments; i..转载 2020-09-23 11:25:02 · 2980 阅读 · 0 评论 -
vue 全局弹窗内容自定义
最近项目中要用到二次确认组件,因为考虑到多出使用多次回调所以普通的公共组件满足不了。我需要的是this.massage();这种,所以就自己封装了一个,全局都可以使用在 src/components 下创建公共组件 visible.vuevisible.vue<!-- 二次确认组件 --><template> <section class='visible'> <el-dialog :visible.sync="visible" top="35v.原创 2020-09-11 15:36:08 · 2489 阅读 · 0 评论 -
axios下载Excel
在vue文件中import axios from "axios";methods: { // 获取excel文件流 getExcel(){ axios({ headers: { "Content-disposition": "attachment; filename=rzjl.xls", "Content-Type": "application / msexcel", }, responseType: "blob" method: "get", u原创 2020-07-01 11:42:14 · 376 阅读 · 1 评论 -
vue使用ECHarts并封装
npm安装echarts npm install echarts -S , 也可以 选择需要的模块,在线定制下载在 assets 中创建echarts文件夹放echarts-plug.js在echarts-plug.js 中引入echarts:import echarts from "echarts";开始封装—————————————————————————————————————————————import echarts from "echarts";let echarts = .原创 2020-06-23 11:08:33 · 386 阅读 · 0 评论 -
vue插件封装
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:1 添加全局方法或者 property。如:vue-custom-element2 添加全局资源:指令/过滤器/过渡等。如 vue-touch3 通过全局混入来添加一些组件选项。如 vue-router4 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。5 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router使用插件———————————————原创 2020-06-23 10:47:01 · 178 阅读 · 0 评论 -
js进阶 请求优化,渲染优化,JS优化
1.请求优化节流函数:一般用于,类似按钮请求这些,防止你一秒点击多次按钮产生重复请求,防抖函数:一般用于,类似实时监听input的请求,防止请求过多合理的应用缓存减少CPU计算、减少网络请求2.渲染优化静态资源的压缩合并(webpack 构建工具),不是根高级但是很有用。合并css,利用css继承CSS放前面,JS放后面懒加载(图片懒加载、下拉加载更多)避免css@import使用SASS/LESS, 无必要深层次的规则,这可能会导致复杂避免逐条改变样式,使用类名去合原创 2020-06-11 11:37:27 · 581 阅读 · 0 评论 -
纯css瀑布流布局
虽然这些新出的布局方式可以让我们解决很多以前的布局难题,但是像瀑布流布局这种,就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致,但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。其实最好实现瀑布流布局的办法就是用CSS的列属性套件,这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流,就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置,所以现在有了列属性就可以使用纯CSS实现了。HTNL<d.原创 2020-06-02 13:48:26 · 3295 阅读 · 0 评论 -
前端一键切换深色模式
切换主题色传统方式是切换css包获取用less,sass定义变量控制主题色,复杂而且不易维护;推荐一个插件 Darkmode.Js,一键切换深色模式使用方法引入Darkmode.Js,有两种方式:通过script标签直接引入;<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script><script> new Darkm.原创 2020-06-02 11:04:32 · 4887 阅读 · 0 评论 -
vue使用websocket及封装
创建websocket.jsconst WSS_URL = `wss://wss.xxxx.com/ws?appid=xxx`let Socket = ''let setIntervalWesocketPush = null/**建立连接 */export function createSocket() { if (!Socket) { console.log('建立w...原创 2020-04-26 14:26:43 · 11088 阅读 · 0 评论 -
vue实战干货,轻松应对市面上常见需求(建议收藏)
今天只聊业务实战,不聊代码原理(原理很重要…)一个完整的vue项目是要有自己所需要用到的基础东西vue-cli3(搭建一个vue工程,可在里面选less,vuex基础配置等等,感兴趣的童鞋可以自己百度一下)axios(从浏览器中创建XMLHttpRequests,node.js创建http请求。和ajax用法大同小异)外部组件框架(移动端推荐vant-ui,web端推荐element...原创 2020-04-14 11:40:26 · 7915 阅读 · 0 评论 -
vue下载表格到本地
下载文件我们常用的方式有之间跳转页面下载,二进制文件流下载,今天总结一下使用“xlsx”插件下载(快捷方便,操作简单,不需要请求后台)安装相关依赖 npm install --save xlsx file-saver组件里头引入import FileSaver from 'file-saver'import XLSX from 'xlsx'组件methods里写一个方法e...原创 2020-03-18 15:17:24 · 779 阅读 · 0 评论 -
axios请求拦截和响应拦截封装+自动切换打包地址
在src下创建axios文件夹在axios文件夹中添加api,js和config.jsconfig.js中// 引入需要用到的资源,qs和element可以百度搜索怎么下载import axios from "axios";import qs from "qs";import { Message, Loading } from 'element-ui'; // 主要用于提示,可...原创 2020-01-13 10:49:08 · 8263 阅读 · 0 评论 -
vue根据环境自动更换打包地址
在vue项目中测试环境和线上环境打包的时候每次都需要手动更换打包地址导致有时候忘记需要重写打包;自动更换打包地址:原理很简单判断访问域名更换地址;//1.定义所有环境服务器地址const server={ pro:"https://pro.xxx.com/api/",//生产环境 dev:"http://dev.xxx.com/api/",//测试环境 util:...原创 2019-12-16 15:01:43 · 739 阅读 · 0 评论 -
vue监听页面是否以到底部
项目中经常用到上拉加载数据列表,平时使用组件库可以快速的实现,今天整理一下原生写法思路:距离顶部的距离+ 可视区域高度 == 滚动条高度 如果成立说明已经到页面底部获取距离顶部的距离:var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;获取可视区域高度:var windowHeight =...原创 2019-10-15 18:32:59 · 2340 阅读 · 0 评论 -
vue中图片转换为base64上传、预览、删除
&lt;template&gt; &lt;div class="com-upload-img"&gt; &lt;div class="img_group"&gt; &lt;div class="img_box" v-if="a转载 2019-02-19 18:28:54 · 1698 阅读 · 0 评论 -
vue 页面缓存和不缓存方法
利用 &lt;router-view&gt;&lt;/router-view&gt; 标签页面缓存在App.vue来判断各个组件是否缓存&lt;div id="app"&gt; &lt;!--缓存想要缓存的页面,实现后退不刷新--&gt; &lt;!--加上v-if的判断,可以自定义想要缓存的组件,自定原创 2019-02-19 17:32:14 · 1554 阅读 · 0 评论 -
vue监听滚动事件
首先,在mounted钩子中给window添加一个滚动滚动监听事件window.addEventListener("scroll", this.handleScroll);然后在方法中,添加这个handleScroll方法handleScroll() { var scrollTop =window.pageYOffset ||document.documentEleme...原创 2019-01-11 16:04:58 · 1162 阅读 · 0 评论 -
vue项目中使用echarts
安装echarts依赖npm install echarts -S或者使用国内的淘宝镜像安装:npm install -g cnpm --registry=https://registry.npm.taobao.org使用 全局引入 min.jsimport echarts from ‘echarts’Vue.prototype.$echarts = echart...转载 2018-12-28 16:25:04 · 123 阅读 · 0 评论 -
vue项目使用QRCode生成二维码
导入第三方插件 npm install –save qrcode在页面上引入import QRCode from 'qrcodejs2' &lt;div id="qrcode"&gt;二维码位置&lt;/div&gt; methods: { qrcode () { let qrcode = new QRCode('qrcode', { ...原创 2018-12-28 16:12:04 · 473 阅读 · 0 评论 -
vue 未加载完出现一瞬间无样式的网页问题
解决方法把css等样式加载文件放在html的头部在css中添加以下代码 [v-cloak] {display: none;} // 这个指令保持在元素上直到关联实例结束编译。原创 2019-02-26 09:42:12 · 1806 阅读 · 0 评论 -
vue-router组件动态设置title页面标题
页面标签由<title></title> 标签来控制,但是在不同的页面要显示必须通过JavaScript来修改<title></title>。window。document。title ="首页" // 纯js修改有一种思路是在每个页面的vue的mounted钩子函数中,通过javascript来修改title中的内容。这种方法是可行的,但是如...原创 2019-04-08 15:31:28 · 12925 阅读 · 0 评论 -
vue中对cookie的操作,赋值,取值,删除值
主要分为三个方法,思路就是利用js对cookie的操作进行简单封装的方法存储cookie setCookie(c_name, c_pwd, exdays) { var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)...原创 2019-04-15 18:47:40 · 4778 阅读 · 0 评论 -
vue创建多个公共过滤器
1.创建一个js文件。2.在js文件编辑过滤代码export function format(date) { var timestamp4 = new Date(Number(date)); return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString...原创 2019-07-02 17:50:18 · 430 阅读 · 1 评论 -
vue判断用户是否登录,没有登录跳转登录页面
在 main.js 中判断是否需要登录router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { //这里判断用户是否登录,验证本地存储是否有token if (!localStorage.token) { // 判...原创 2019-07-03 13:57:42 · 30130 阅读 · 0 评论 -
vue 微信公众号支付功能
微信公众号支付功能1 引用微信的SDKnpm install weixin-js-sdk --saveimport wx from 'weixin-js-sdk'2 调用微信支付recharge() { // 点击充值调用方法 this.http("/wx/orders", { // 向后台大佬请求appid的接口 // name:'lisi' // ...原创 2019-08-13 14:30:00 · 196 阅读 · 0 评论 -
vue微信公众号扫码功能
微信公众号扫码功能1 引用微信的SDKnpm install weixin-js-sdk --saveimport wx from 'weixin-js-sdk'2 开始调用getcode() { // 点击扫码开始执行函数 this.http("/wx/sign", { // 向后台请求appid url: window.location.href.split...原创 2019-08-13 14:45:11 · 4736 阅读 · 0 评论 -
压缩base64图片大小
项目中上传头像base64图片太大导致上传时间过长,或者后台奔溃问题,所以前端压缩base64大小解决这个问题原理使用canvas进行图片压缩参数说明:base64String:需要压缩的base64图片w: 图片的原始图片大小quality: 0.7 // 值越小,所绘制出的图像越模糊示例:let base64Img = compressImgBase64 = this...原创 2019-08-23 16:52:39 · 5203 阅读 · 0 评论 -
vue联想输入
主要用watch监控input输入值的变化,如果数据是请后端请求可以,先请求数据。&lt;template&gt; &lt;div class="binding" v-title data-title="绑定账号"&gt; &lt;div class="bindingbtn"&gt;转载 2018-12-28 16:04:06 · 9141 阅读 · 0 评论