Vue
前端vue记录
宋文轩
这个作者很懒,什么都没留下…
展开
-
vue中如何画饼状图
废话不多说,直接上干货。1.在自己的项目里面安装echartsnpm install echarts --s2.在template中为echarts准备一个容器dom<template> <!--为echarts准备一个容器dom--> <div id="myChart" style="width: 100%;height: 300px;"></div></template>3.在需要用饼状图的界面的script.原创 2022-02-17 16:03:13 · 9849 阅读 · 2 评论 -
vue表格导出到Excel
步骤一:安装依赖npm install --save xlsx file-saver步骤二:在放置需要导出功能的组件中引入相关组件import FileSaver from 'file-saver'import XLSX from 'xlsx'步骤三:给table设置一个idHTML中的设置,简单来说就是给需要导出的table标签el-table上加一个id:如id="exportTable",对应下面的exportExcel方法中的 document.querySelector(原创 2021-10-27 16:51:55 · 17402 阅读 · 9 评论 -
前端vue转盘抽奖
一、 最近有个需求在前端做抽奖的业务,然后查了些资料,实现了一下。效果图如下:二、实现原理:CSS的transitions:rotate属性,传入度数即可旋转;调整中奖概率也写的几乎人人可以看懂的流程,也比较巧妙地实现了对概率的控制,称不上多厉害的算法,但确实达到了想要效果。1.在html中:<template> <div id="bg"> <img @click="go" class="pointer" src="./pointer.png" .原创 2021-10-24 22:25:56 · 10690 阅读 · 4 评论 -
前端iframe标签介绍及使用
一、使用的场景:有重复的板块内容显示的时候后端如果是模板渲染方式(得到页面是通过继承的形式),可以换成iframe来请求直接获取子功能页面iframe标签的作用:iframe标签可以实现html主页面嵌套html子页面,子页面可以是一个功能页面,在某些时候使用iframe非常的方便。所以如果是模板渲染方式的,前端就可以使用iframe标签节省一点网络带宽(传输的内容会少一些,并且主页面不会刷新,只是iframe在请求得到新的资源)。二、模板渲染和iframe的对比:1.子页面通过继承的方式去原创 2021-09-30 19:45:21 · 19301 阅读 · 3 评论 -
npm install --save和npm install --save-dev的区别
npm install 在安装 npm 包时,有两种命令参数可以把包信息写入配置文件 package.json 中--save || -S // 运行依赖(发布时)–save-dev || -D //开发依赖(开发时)区别:不同的配置文件将依赖信息 , 添加到package.json的不同地方save : dependencies 键下,发布后还需要依赖的模块,譬如像jQuery库或者Angular框架等,我们在开发后依旧依赖它们,否则就运行不了。save-dev : devDepen原创 2021-08-05 17:19:18 · 5683 阅读 · 7 评论 -
vue跳转页面常用的几种方法
vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。1:router-link跳转1.不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始;如果不带'/',则从当前路由开始。2.带p原创 2021-07-09 11:46:19 · 96259 阅读 · 20 评论