vue
填了个大空
这个人不懒,但是他什么都不想留下
展开
-
前端(Vue、React)导出blob文件(excel、zip等)
导出文件原创 2024-04-15 15:13:23 · 164 阅读 · 0 评论 -
双向绑定原理以及data得注册流程
【代码】双向绑定原理以及data得注册流程。原创 2022-11-03 11:09:22 · 168 阅读 · 0 评论 -
html2canvas插件将一块div转换成图片并下载
若是toDataURL方法报错,是因为图片路径不对,本地图片要转换成base64function dataURLToBlob(dataurl) { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bs原创 2021-07-06 15:56:01 · 376 阅读 · 0 评论 -
VUE中一个修改商品数量的组件
商品数量修改VUE中使用<counting :disabled="" // 是否禁用 :numbers="" // 商品数量 :stockNum="" // 商品库存 :maxNum="" // 最大购买值 :minNum="" // 最小购买值 @changeNumber="changeNumber($event, v1.id)" // 改变数量后的方法/>组件<template> <div :class="{ counting: true,原创 2021-05-25 09:17:10 · 503 阅读 · 0 评论 -
vue页面中使用json格式动态图
如图所示,json格式动态图需要插件 “vue-lottie”下载插件npm i vue-lottie -Smain.js 引入使用import lottie from "vue-lottie";Vue.component("lottie", lottie);代码中使用// 引入文件import gif1 from "@/assets/img/taurus/阿牛动画/json/cow1.json";// 页面中使用,options中的animationData值是图片路径,引入后替原创 2021-01-23 15:52:17 · 3197 阅读 · 1 评论 -
vue 数字滚动增加
下载npm install vue-count-to -S直接使用<template><countTo :startVal='startVal' :endVal='endVal' :duration='2000'></countTo></template><script>import countTo from 'vue-count-to';export default { components: { countTo }, d转载 2020-12-10 15:50:35 · 233 阅读 · 0 评论 -
基于vue的一个红包雨h5活动页面
<template> <div id="redEnvelopeRain"> <div class="box" ref="box"></div> </div></template><script>import { random } from "@/utils/index.js";export default { name: "redEnvelopeRain", data() { return {};原创 2020-12-03 15:06:26 · 1245 阅读 · 0 评论 -
Vue 点击复制到粘贴板
// main.js 中// 点击复制import VueClipboard from "vue-clipboard2";Vue.use(VueClipboard);项目中this.$copyText("阿大撒大撒").then(() => {// 复制成功后操作});原创 2020-11-02 10:49:52 · 297 阅读 · 0 评论 -
js实现复制粘贴(兼容IOS 9.3)以上版本
/* HTML */<!-- 复制按钮 --><div class="copyBtn" onclick="copyContent('adas1165465165');">复制淘口令</div><input id="copy_content" type="text" value="" style="position: fixed;top: -100px;z-index: -10;" /> /*js*/// 点击复制function copyCon原创 2020-09-16 09:45:44 · 335 阅读 · 0 评论 -
css实现瀑布流
一行代码实现瀑布流css 的 column-count 属性,将一个盒子分成 x 列,例如 column-count: 2; ,就是将一个div分成 2 列但是排列不是按照数组顺序排序,因为分成2列后是按照顺序从上往下排列,会自动计算,第一列按照数组顺序渲染完才接着渲染第二列,无关紧要<template> <div id="demoBox"> <div class="pbl_box"> <div class="pbl_box_inf原创 2020-07-01 09:28:38 · 1899 阅读 · 0 评论 -
vue事件传值给Flutter
vue中methods方法methods: { // 发送给flutter的事件 sendData(shopinfo) { // eslint-disable-next-line no-undef clickGoods.postMessage(JSON.stringify(shopinfo)); },}在Flutter接收 JavascriptChannel _toasterJavascriptChannel(BuildContext context)原创 2020-06-17 15:13:50 · 795 阅读 · 3 评论 -
element-ui中el-image组件打开预览功能后,点击当前的图片,预览出来的不是当前,是切换后关闭之前的那一张
el-image组件它是先渲染好浏览图片的div,当点击图片时直接把隐藏的div显示出来。当关闭时就直接隐藏div,下次点击又是直接显示div,并没有处理图片顺序。所以再次打开就是展示关闭前的图片。//如果想每次点击都显示第一张。目前一个方法就是监听图片添加一个点击事件,对this.srcList重新赋值就可以了mounted() { document.addEventListener('click', (e) => { if (e.target.classList.contains('el原创 2020-06-09 10:56:13 · 8252 阅读 · 6 评论 -
js-cookie库方法
封装js-cookie库import Cookies from 'js-cookie'export const setCookie = (name, value, days) => { return Cookies.set(name, value, { domain: domain, expires: days })}export const getCookie (name) => { return Cookies.get(name, { domain: domain })}原创 2020-06-04 15:19:04 · 428 阅读 · 0 评论 -
vue中ios13/安卓10以下浏览器使用axios请求状态码为0
因为有自定义请求头userId和token,所以先会进行options,options后服务端返回了,但是前端浏览器没有进行post,因为后台设置的headers为*,可能ios13/安卓10一下浏览器识别不出来后台允许有自定义请求头的存在所以后台将Access-Control-Allow-Headers: *修改为Access-Control-Allow-Headers: accept, content-type, origin, userid, token将自定义请求头和默认请求头全原创 2020-06-03 10:54:04 · 4701 阅读 · 0 评论 -
常用工具库
表单// 邮箱验证export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}// 手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}// 电话号码export const isPhone = (s) => {原创 2020-06-01 14:06:42 · 524 阅读 · 0 评论 -
Vue常见报错
1.@click=“xxx”,xxx方法没有在methods中定义Cannot read property ‘_wrapper’ of undefined原创 2020-05-06 14:45:24 · 244 阅读 · 0 评论 -
Vue项目接入腾讯滑动验证
首先在html中引入sdk,位于head和body之间<!DOCTYPE html><html lang="en" style="font-size: 20px;"> <head></head> <!-- 验证码 --> <script src="https://ssl.captcha.qq.com/TCaptcha...原创 2020-04-22 16:11:58 · 1199 阅读 · 0 评论 -
upload上传时,唯一文件类型说明符accept说明
唯一文件类型说明符唯一的文件类型说明符是描述类型的文件可以由用户在被选择的字符串类型的元件file。每个唯一文件类型说明符都可以采用以下形式之一:一个有效的不区分大小写的文件名扩展名,以句点(“。”)字符开头。例如:.jpg,.pdf,或.doc。有效的MIME类型字符串,不带扩展名。字符串,audio/*表示“任何音频文件”。字符串,video/*表示“任何视频文件”。字符串,i...原创 2020-04-01 15:01:16 · 4490 阅读 · 0 评论 -
vue.config.js 基础配置
const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { // 部署应用包时的基本 URL publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 生产...原创 2020-03-23 15:20:20 · 228 阅读 · 0 评论 -
vue等框架和传统多页面的区别
单页面和多页面的优缺点比较转载 2020-03-13 17:45:38 · 837 阅读 · 0 评论 -
前端css标签样式重置
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}header,footer,section,article,asid...原创 2020-01-10 11:42:26 · 350 阅读 · 0 评论 -
前端在线预览office文件
使用office官方提供的方法let url = ''window.location.href = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`其中url是要打开的文件,要求必须在公网中可以访问的到,然后直接打开链接就可以在线预览...原创 2019-12-20 17:52:13 · 1005 阅读 · 0 评论 -
Vue内部管理系统项目,接入钉钉扫码登录
无理的新需求。。公司自己内部系统,接入钉钉扫码登录。。。https://ding-doc.dingtalk.com/doc#/serverapi2/etaarr钉钉开发文档注意,上面这一步得联系管理员去操作,因为只有管理员可以登录钉钉开发者平台这里使用方式有 两种第一种是跳转连接到一个页面,扫码登录之后返回第二种是直接在页面上显示扫码这里我用的第二种方式,代码如下首先引入需...原创 2019-12-16 13:04:23 · 4495 阅读 · 2 评论 -
element-ui 对form表单中upload上传组件的验证
将上传组件放入form表单中,可能会遇到,触发了必传验证之后,再次上传图片,必传验证提示信息未消失,如图代码如下// 表单组件中嵌入upload组件<el-form :model="form" :rules="rules" ref="form"> <el-form-item label="上传头像" prop="imgurl"> <e...原创 2019-12-11 16:12:59 · 3843 阅读 · 8 评论 -
用 .sync 方法实现 Vue 父子组件传值双向绑定
父子组件传值,在父组件中传入,子组件中 props 接收举个例子:// 父组件中引用子组件,并将 addUserInfo 传入子组件<add-user :addUserInfo="addUserInfo" />// 子组件中接收 addUserInfo props: { addUserInfo: { type: Boolean, de...原创 2019-12-09 14:10:33 · 611 阅读 · 0 评论 -
Vue.$nextTick()的使用
记录一下 Vue.$nextTick 的使用经历首先看一下官方文档介绍官方介绍似乎有点模糊,通俗点来说,Vue.$nextTick() Api中,参数是一个回调函数,可以在它的回调函数中进行一些操作。Api的作用是等到所有的DOM更新完毕之后,在进行Api中回调函数里面的操作通常使用的地方是渲染数据到DOM,在数据渲染到页面完成前,如果直接修改DOM中的例如样式等属性,数据渲染完成后...原创 2019-12-06 11:57:53 · 337 阅读 · 0 评论 -
Vue.use() 的使用和基本原理
Vue.use() 在 vue 中使用很多,比如 ElementUI,Router,Vuex 等组件在引用后都会使用 Vue.use 将他们传入作为参数使用,今天记录一下 Vue.use 的用法先看一下官方给的文档说明安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作...原创 2019-12-04 13:05:01 · 9426 阅读 · 3 评论 -
element-ui日期时间选择框picker-options如何禁用时间范围
如何在日期时间选框中禁止选择一定的时间范围首先看一下官方文档中 picker-options 相关的介绍红圈中 disabledDate 方法就是禁用规定日期的配置项,该方法参数为当前所有的日期,方法使用如下/* 日期时间组件 */<el-date-picker value-format="yyyy-MM-dd" :picker-options="pickeroptions...原创 2019-12-03 20:03:35 · 14915 阅读 · 1 评论 -
echarts 从入门到精通(2) --- 封装一个Echarts可复用组件
上篇记录了如何使用Echarts在一个vue项目中,只是针对了单个的vue文件,要想复用,查阅资料后,有了如下写法直接贴代码吧<template> <div id="line_echarts"> <div ref="echarts"></div> </div></template>&l...原创 2019-12-02 09:45:56 · 915 阅读 · 0 评论 -
echarts 从入门到精通(1) --- 在vue中使用echarts
项目中各类统计和逼格展示或多或少都用到了echarts这种炫酷的第三方组件图标库,为了记录自己使用的过程,开一个记录贴ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可...原创 2019-11-29 15:40:12 · 180 阅读 · 0 评论 -
vue修改element默认样式
在vue常用组件库element-ui中,遇到由于项目需求去修改部分组件的样式而无法修改的问题比如当我们使用这个tabs标签页在项目中时,按照文档复制粘贴放入vue组件各种配置好之后,发现下面多出来的底部边框需求上ui不需要,影响整体美观于是我们检查该组件的类名,并尝试修改他的样式找到原因,底部边框是因为::after的样式,将height取消之后发现tabs没有了边框于是在...原创 2019-11-27 16:36:46 · 1727 阅读 · 0 评论