![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
加油yai
不定期发表自己开发过程中遇到的问题,谢谢支持,多多关照。
展开
-
发送验证码倒计时 防刷新重置!!!
大于1则将存储的时间数字赋值给时间变量继续执行倒计时;2.页面加载时(刷新页面时)先获取存储的时间。1.记录倒计时的时间。3.判断存储的时间,不存在则正常初始化;原创 2023-09-20 16:51:35 · 250 阅读 · 0 评论 -
防抖节流函数封装 自定义指令 vue
防抖节流函数封装自定义指令原创 2022-06-22 17:06:36 · 435 阅读 · 1 评论 -
vue页面添加自定义水印
vue页面添加自定义水印原创 2022-06-16 16:32:31 · 536 阅读 · 3 评论 -
H5实现附件预览功能(doc/docx、xls/xlsx、ppt/pptx、pdf)
一、H5用以下方式即可实现:(钉钉小程序官方目前没有预览附件的API,也可用这种方法实现)doc/docx、xls/xlsx、ppt/pptx可直接用以下链接打开:注意:使用此方法,附件链接必须是域名。https://view.officeapps.live.com/op/view.aspx?src= + 文档urllet url = "https://view.officeapps.live.com/op/view.aspx?src=" + 文档url;//两种方式window.open(u原创 2022-01-21 16:55:58 · 9316 阅读 · 6 评论 -
用vue-pdf包实现pdf文件预览,支持分页
vue项目实现pdf文件预览功能下载vue-pdf包npm install --save vue-pdftemplate模板内容://pdf组件<pdf :src="pdfFile" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdf"></pdf>//分页<div class="pageBut原创 2021-09-17 18:55:42 · 5437 阅读 · 7 评论 -
sort实现日期排序
日期排序,支持升序或降序// 日期排序function dateSort(arr){ arr.sort(function(a,b){ return a > b?1:-1; //升序排列 //return a > b?-1:1; //降序排列 }) return arr;}let arr = ["2020-08-09","2020-11-22","2021-07-18","2022-12-22","2018-01-01"];原创 2021-08-23 17:45:21 · 2481 阅读 · 0 评论 -
自定义字体(艺术字)压缩 font-spider
font-spider官方文档叫字蛛。用font-spider压缩字体原理就是,将项目中用到的字体单独压缩,没有用到的字体不放入压缩文件中,使字体文件变小,所以此种方法就有一个弊端就是无法压缩动态生成的文字。准备:node环境(可能是废话…)具体过程如下:一、全局下载font-spidernpm install font-spider -g二、新建一个文件夹,文件夹下新建index.html、index.css,并且将原字体文件放到文件夹下在index.css声明该字体@font-face原创 2021-02-02 16:45:08 · 336 阅读 · 1 评论 -
watch监听路由 vue
用vue的侦听器–watch监听路由。注意:watch与methods同级别。 watch:{ //to是将要进入的路由相关信息,from是当前页面的路由信息 '$route' (to, from) { //to.path即为将要进入的路由 if(to.path == "/xxx"){ //操作 } } },...原创 2021-02-01 18:04:07 · 868 阅读 · 0 评论 -
vue项目axios封装,请求、响应拦截,统一处理
在src目录下新建文件夹request,request下新建文件axios.js。引入axios,如果有需要可再引入UI框架,做一些提示或弹窗。我的项目用的vant。import axios from 'axios'import { Toast } from 'vant'设置请求时间:超时后会在error的response抛出异常axios.defaults.timeout = 5000;请求拦截axios.interceptors.request.use(config => {/原创 2021-01-18 14:42:41 · 1004 阅读 · 0 评论 -
使用vite构建vue3.0项目
全局安装vitenpm install -g create-vite-app进入想要新建项目的路径下新建create-vite-app yourProjectName进入到新建的项目路径下安装依赖并运行cd yourProjectNamenpm installnpm run dev到此新项目就搭建完成了,你会发现和脚手架搭建区别还是有的,vite默认端口是3000,vite默认不会让你选择路由、语法检测以及单元测试等,需要后期手动安装引入,而且我特意又用脚手架搭了一个vue2.0的项目原创 2020-10-28 11:32:24 · 1765 阅读 · 0 评论 -
vue实现多语言(国际化)实例 -- vue-i18n
Vue项目用vue-i18n实现多语言!一看就会哦,超简单一 :npm下载vue-i18n插件:npm i vue-i18n -S二 :新建lang文件夹,在lang文件架下面新建需要支持的语言包文件以及配置文件index.js我的lang文件夹是放在根目录下的哦!三 :写多语言配置文件第一步,index.js配置文件如下import Vue from "vue";import VueI18n from "vue-i18n";Vue.use(VueI18n);const messa原创 2020-05-22 17:04:27 · 750 阅读 · 0 评论 -
vue实现点击箭头的旋转动画(收起展开)效果
实现方法:用vue动态绑定class的方法,实现用不同的class渲染箭头,达到箭头点击的旋转效果模板的内容:<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">data的变量定义:data(){...原创 2020-05-06 14:11:14 · 4487 阅读 · 1 评论 -
vue动态引入(按需引入)组件并传值
需求 就是有一个组件库,需要根据接口所传的组件类型按需引入生成页面//模板<template> <div class="hello"> <component v-for="(item,index) in componentArr" :key="index" :is="item.type" :data=item.data /> </di...原创 2020-04-20 11:12:37 · 3242 阅读 · 0 评论