![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
朱@
这个作者很懒,什么都没留下…
展开
-
前端常用网址总结
17.ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表,跳转。中文网站:https://www.tslang.cn/docs/handbook/declaration-files/by-example.html#global-variables。原创 2023-10-24 10:07:33 · 784 阅读 · 0 评论 -
vue3+vite在线预览pdf
【代码】vue3+vite在线预览pdf。原创 2023-10-24 09:38:00 · 1032 阅读 · 1 评论 -
vue3移动端嵌入pdf的两种办法
分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数,这个函数是一个异步函数,之后会返回pdf的信息(别的信息基本没用,只有numPages比较有用。分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数,这个函数是一个异步函数,之后会返回pdf的信息(别的信息基本没用,只有numPages比较有用。使用vue-pdf-embed插件展示预览pdf(这里只能展示一页,或者不分页全部展示,就会是一长条,所以我们自己做分页。原创 2023-10-24 09:33:56 · 1010 阅读 · 0 评论 -
h5判断小程序环境是手机端还是pc端
【代码】h5判断小程序环境是手机端还是pc端。原创 2023-02-07 10:27:06 · 988 阅读 · 0 评论 -
浙政钉(专有钉钉)扫码登录对接
浙政钉扫码登录对接原创 2022-06-17 10:49:33 · 12675 阅读 · 9 评论 -
海康视频展示(web前端)
视频需要在客户那边才能展示,<template> <div class="dailog" v-if="visible"> <div class="box"> <div class="close"><a-icon type="close" @click="handleCancel" /></div> <div id="videoPlayerBox" ref="v.原创 2021-12-01 10:36:50 · 1211 阅读 · 1 评论 -
按需加载子组件
<div> <div> <div class="content"> <div style="z-index: 999"> <div :class="['left', inAnimation ? 'Animationleft' : '']" ref="left"> <component :is="currentLeft"></component&g...原创 2021-12-01 10:22:48 · 589 阅读 · 0 评论 -
如何使用手机访问本地项目
第一种:通过局域网的ip地址进行调试首先电脑要打开网络热点//查看本地ipipconfig在手机端浏览器通过ip地址替换localhost就可以啦!第二种:通过使用防火墙将端口设置为不屏蔽即可具体操作参考:允许外部访问Windows本机的指定端口...原创 2021-03-30 10:29:40 · 1727 阅读 · 0 评论 -
移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解
viewport的概念viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。content属性值<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">viewport标记,用于指定用户是否可以缩放Web页面,并对相关的选项进行设定。width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像原创 2020-11-16 10:28:05 · 2000 阅读 · 0 评论 -
移动端 rem自适应布局 (750的设计稿)
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) retu原创 2020-11-16 10:05:06 · 2021 阅读 · 0 评论 -
ECharts 图表Y轴数值仅整数显示设置
需求效果图如下,需求是仅需要y轴中数值显示整数。属性使用的属性:minInterval设置成1保证坐标轴分割刻度显示成整数。{ minInterval: 1} 示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2020-10-14 15:54:12 · 3187 阅读 · 0 评论 -
Vue | Vue-ls插件
Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage一个vue封装的本地储存的方法安装Npmnpm install vue-ls --saveYarnyarn add vue-lsBowerbower install vue-ls --save使用Vue-ls Storage APIimport Storage from 'vue-ls'; options = { namespace: 'vuejs__', // key键前缀.原创 2020-10-13 10:27:45 · 674 阅读 · 0 评论 -
vue 组件的 scrollBehavior
浏览器对用户访问网页的记录在聊如何管理vue组件滚动行为之前,先简单说说(毕竟深入了我也很模糊o(╯□╰)o)浏览器是如何对用户访问过的页面的保持,浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存,以上是MDN对浏览器就如何跟踪用户访问过网页的解释性说明。通常我们很少会对页面回退或前进进行操作,在浏览器用户界面上提供有前进、回退按钮,页面跳转到离开页面之前的位置,而不是重新刷新页面,这个功能是由浏览器引擎(与渲染引擎、解析引擎概念不同)来完成的。当用户进入一个页面的时候,会往 history原创 2020-10-13 10:23:30 · 3091 阅读 · 0 评论 -
vue监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值,比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 ,但从“/aaa?id=1”到“ /aaa?id=2”是不会触发vue的生命周期的,id变了,但页面数据不会更新,想要更新只能重新加载页面(手动刷新),但是这多么low、孬呀,作为一名追求极致用户体验的开发,怎么能容忍这种情况发生;然后就想办法监听路由参数的变化呀,在watch里监听$route和路由参数,代码如下:复制代码wa原创 2020-09-25 15:14:19 · 332 阅读 · 0 评论 -
Vant 实现 上拉加载更多
<template> <div> <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad" :offset="10" > //itemList换成你自己的数据 <van-cell v-for原创 2020-09-25 15:12:31 · 1995 阅读 · 0 评论 -
vue前端面试整理
1. 说一下Vue的双向绑定数据的原理vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。2. 解释单向数据流和双向数据绑定单向数据流: 顾名思义,数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state双向数据绑定原创 2020-07-23 14:56:16 · 235 阅读 · 0 评论 -
vue 路由及按钮权限控制
路由权限控制有两种方式:第一种后台返路由,第二种后台返权限相同点1、都可以实现需求,2、前端都要维护一份路由与模块文件地址的映射3、后端返回的数据一般都要遍历做第二次处理4、关于页面内的按钮元素都要重新处理5、技术点都会涉及到路由守卫和鉴权不同点1、默认路由列表:方法一:只维护home、login等无权限需求路由,其他路由需要后续通过接口和路由api:addRoutes动态添加;方法二:需要维护一个全量的路由列表,不需要额外添加路由,通过配置每个路由的access数组来做鉴权。原创 2020-07-14 17:45:47 · 2088 阅读 · 0 评论 -
nginx部署web项目
第一步你需要使用xtfp链接上你们的服务器找到nginx相对应的位置第二步,把你把包好的文件放到服务器上第三步修改nginx/nginx.conf,修改server 部份这样我们就可以通过访问本地的项目了,如果想通过域名或者ip访问到页面,是需要在阿里服务器上做些设置,域名的话好像需要备案,备案通过,就可以使用域名访问了...原创 2020-07-01 16:23:54 · 1249 阅读 · 0 评论 -
在vue中使用svg矢量图
第一步需要下载插件cnpm i svg-sprite-loader --save第二步需要写一个Svglcon的组件 (components/Svglcon)<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg></template><script>/** * 使用栗子 *原创 2020-06-17 10:15:18 · 1139 阅读 · 0 评论 -
Ant Design of Vue中table的列表中显示图片
<template> <a-card :bordered="false"> <s-table ref="table" size="default" bordered rowKey="examId" :columns="columns" :data="loadData" ...原创 2020-05-06 14:36:54 · 14221 阅读 · 8 评论 -
在vue项目中使用富文本框vue-quill-editor可以上传文件和视频
下载Vue-Quill-Editornpm install vue-quill-editor --save下载quill(Vue-Quill-Editor需要依赖)npm install quill --save代码redact.vue编辑页<template> <div :class="prefixCls"> <quill-e...原创 2020-05-06 14:27:36 · 3561 阅读 · 8 评论 -
实现百分比圆图
子组件<template> <div class="wrap"> <div class="warp-item"> <p class="name">{{ customerName }}</p> <div class="content" ref="box"> <svg ...原创 2020-04-26 17:51:58 · 519 阅读 · 0 评论 -
vue+echars动态渲染折线图
<template> <div class="tm-card"> <div class="card-body"> <div class="chart-box"> <div id="traffic_line_chart" style="height:300px; width:100%" /> ...原创 2020-04-17 14:58:03 · 1110 阅读 · 1 评论 -
vue+echar动态渲染饼图
后台返的数据不能是百分比<template> <div class="tm-card"> <div class="card-body"> <div class="chart-box"> <div id="res_portocol_pie_chart" style="height:200px; wid...原创 2020-04-17 14:56:18 · 1015 阅读 · 0 评论 -
vue移动端适配
在html的样式里html{font-size:calc(100/375*100vw;}#app{fonts-size:.16rem;}原创 2019-11-01 10:26:00 · 110 阅读 · 0 评论 -
vue-cli3+vant ui组件的配置和移动端适配
首先,我们先下载vant的插件cnpm i --save-dev vant配置vant 自动按需引入组件插件(babel.config.js)【不需要引入样式】下载插件cnpm i babel-plugin-import -Dmodule.exports = { presets: [ '@vue/app' ], plugins: [ ['import', ...原创 2019-09-29 21:11:07 · 1772 阅读 · 0 评论 -
vue-cli3的安装和使用
一、如果已经安装过vue-cli2就先把卸载npm uninstall vue-cli -g 二、全局安装npm install -g @vue/cli三、创建项目vue create my-pro(项目名)1.进入功能配置选择(1. default (babel, eslint) 默认预设配置 babel, eslint (2. Manually selectfeatu...原创 2019-09-29 00:06:05 · 342 阅读 · 0 评论 -
vue项目移动端适配
安装 flexible和 postcss-px2rem(命令行安装)npm install lib-flexible --savenpm install postcss-px2rem --save两个插件的区别flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。postcss-px2re...原创 2019-09-28 23:54:21 · 772 阅读 · 0 评论 -
在vue中如何快速生成二维码
第一步 下载插件cnpm install --save qrcodejs2第二步,在组件中使用<template> <div class="qrcode_box"> <div id="qrcode"></div> </div></template><script>im...原创 2019-09-25 15:28:52 · 367 阅读 · 0 评论