分类：Vue

2020
09-24

基于vue+echarts 数据可视化大屏展示的方法示例

基于vue+echarts 数据可视化大屏展示的方法示例 获取ECharts的路径有以下几种，请根据您的情况进行选择：1)最直接的方法是在ECharts的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，或者您也可以直接下载完整版本；开发环境建议下载源代码版本，包含了常见的错误提示和警告。2)也可以在ECharts的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录里可以找到最新版本的echarts库。3)或者通过npm获取ec... 继续阅读 >
2020
09-24

在Vue中实现随hash改变响应菜单高亮

情景Vue+Element实现管理页面菜单栏，点击菜单时router改变hash访问不同子组件。但是改变hash时菜单栏展开状态和highlight并不会同步，需要手动实现。TryTrySee第一反应是通过onhashchange监听hash的变化，讲 location.hash.slice(2)推给menu的 default-active即可。此时通过手动输入url或者前进后退时均可正常加载对应状态，但是通过组件中的link访问时，menu的状态没有改变。加入alert验证... 继续阅读 >
2020
09-24

Vue vm.$attrs使用场景详解

1、vm.$attrs简介首先我们来看下vue官方对vm.$attrs的介绍：包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建更高层次的组件时非常有用。猛一看有点看不明白....2、场景介绍vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着... 继续阅读 >
2020
09-24

vue+springboot前后端分离工程跨域问题解决方案解析

假如是在同一台机器上开发，前后端分离的工程中出现跨域问题的原因是，前端工程和后端工程运行在不同的端口上。只要协议、域名、端口有一个不同就会产生跨域问题，所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题。一、解决跨域的原理假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B，A访问C时先访问B，再由B代为请求C并把请求结果返回给A，这样就可以解决跨域问题。其中需要保证的是A访问B和B访问C都... 继续阅读 >
2020
09-24

vue-cli点击实现全屏功能

本文实例为大家分享了vue-cli点击实现全屏功能的具体代码，供大家参考，具体内容如下项目中有点击按钮实现全屏功能方式一：js实现全屏代码如下：<template><div><a-buttontype="primary"@click="screen">全屏</a-button></div></template><script>exportdefault{name:"index",data(){return{fullscreen:false}},methods:{screen(){letelement=document.documentElement;... 继续阅读 >
2020
09-24

vue全屏事件开发详解

vue全屏事件开发详解 本文实例为大家分享了vue全屏事件开发的具体代码，供大家参考，具体内容如下在项目中有需求相应浏览器全屏，写了个案例代码先看看效果吧全屏显示：html代码：<!--el-tooltip文字提示--><divclass="btn-fullscreen"@click="handleFullScreen"><el-tooltipeffect="dark":content="fullscreen?`取消全屏`:`全屏`"placement="bottom"><iclass="el-icon-rank"></i></el-tooltip></div>js代码data(){return{fullscre... 继续阅读 >
2020
09-24

vue实现全屏滚动效果（非fullpage.js）

本文实例为大家分享了vue实现全屏滚动效果（的具体代码，供大家参考，具体内容如下是什么网页的一个页面占据一屏的宽高，多个页面上下或者左右拼接在一起。当滑动鼠标滚轮，或点击导航按钮时，可以平滑到对应的页面。此次只实现鼠标滚动实现原理使用mousewheel,DOMMouseScroll(火狐用)监听鼠标滚动事件，当鼠标上下的滚动的时候，当前的页面transformY(屏高)或者transformX(屏宽)代码实现HTML<template><divclass="fullPage"r... 继续阅读 >
2020
09-24

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验) 1.首先在index.html引入高德地图的秘钥。如图：注意：如果使用关键字搜索功能要加上plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错2.定位功能，代码如下：constmap=newAMap.Map(this.$refs.container,{resizeEnable:true})//创建Map实例constoptions={'showButton':true,//是否显示定位按钮'buttonPosition':'LB',//定位按钮的位置'buttonOffset':newAMap.Pi... 继续阅读 >
2020
09-24

Vue中使用better-scroll实现轮播图组件

Vue中使用better-scroll实现轮播图组件 better-scroll是什么better-scroll是一款重点解决移动端（已支持PC）各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，它的API设计基本兼容iscroll，在iscroll的基础上又扩展了一些feature以及做了一些性能优化。better-scroll是基于原生JS实现的，不依赖任何框架。它编译后的代码大小是63kb，压缩后是35kb，gzip后仅有9kb，是一款非常轻量的JSlib。今天我们利用它实现一个横向滚动——轮播图组件。... 继续阅读 >
2020
09-24

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

本文实例讲述了vue使用插槽分发内容操作。分享给大家供大家参考，具体如下：单个插槽除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的DOM位置，并替换掉插槽标签本身。最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的... 继续阅读 >
2020
09-24

vue 动态组件用法示例小结

本文实例讲述了vue动态组件用法。分享给大家供大家参考，具体如下：通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名"中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例-动态组件</title><sc... 继续阅读 >
2020
09-24

vue 使用 canvas 实现手写电子签名

vue 使用 canvas 实现手写电子签名 功能兼容PC和Mobile；画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；支持裁剪（针对需求：有的签字需要裁剪掉四周空白）。导出图片格式为base64；示例demo安装npminstallvue-esign--save使用main.js中引入importvueEsignfrom'vue-esign'Vue.use(vueEsign)页面中使用必须设置ref，用来调用组件的两个内置... 继续阅读 >
2020
09-24

Vue Router 实现动态路由和常见问题及解决方法

个人理解：动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。常见的动态路由大都是用来实现：多用户权限系统不同用户展示不同导航菜单。如何利用VueRouter实现动态路由Vue项目实现动态路由的方式大体可分为两种：前端将全部路由规定好，登录时根据用户角色权限来动态展示路由；路由存储在数据库中，前端通过接口获取当前用户对应路由列表并进行渲染；第一种方式在很多VueUIAdmin上都实现了，可以... 继续阅读 >
2020
09-24

Vue基于iview实现登录密码的显示与隐藏功能

Vue基于iview实现登录密码的显示与隐藏功能 iview简介iView是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。1.背景近期，在使用abp开发项目过程中，前端vue输入登录密码时默认隐藏，但是如果用户输错密码需要切换显示跟隐藏。故有此文。2.实现最终效果2.1隐藏密码 2.2显示密码 显示密码需要点击密码框左侧眼睛3.实现思路3.1v-if判断当前密码显示状态密码输入框跟密码图标最外层用Div标签包住，并且用vue的v-ifv-else监听其显示还是隐藏... 继续阅读 >
2020
09-24

Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)

Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面) 昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果：左侧 右侧 向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图标跟标题，... 继续阅读 >
2020
09-24

vue中使用vue-print.js实现多页打印

本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。引入安装vue-print.jscnpmivue-printjs--save-dev解决打印多页只出现一页问题由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装下载print.jshttps://github.com/zxc19890923/print/blob/master/print.js在src... 继续阅读 >