- 博客(54)
- 收藏
- 关注
RSS订阅原创 JS-文件下载
同源const link = document.createElement('a');link.setAttribute('download', file.name);link.href = file.url;link.click();不同源//方法一：const xhr = new XMLHttpRequest(); xhr.open('GET', file.href, true); xhr.responseType = 'blob'; xhr.onload = () =
2021-06-08 18:41:31
344
原创 css效果(2)-文本溢出显示省略号，文本两端对齐，格子背景
文本溢出显示省略号单行文本width:150px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;多行文本width:150px;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;代码演示<!DOCTYPE html>&
2021-02-24 14:51:09
395
原创 css效果(1)-背景模糊，倒影，文字凸起，文字凹陷
背景模糊backdrop-filter: saturate(180%) blur(1em);-webkit-backdrop-filter: saturate(180%) blur(1em);倒影-webkit-box-reflect: below -60px -webkit-gradient(linear,right 60%,right bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.3)));文字凸起text-shadow: 1px 1
2021-02-23 17:40:18
560
1
原创 JS-正则验证
验证URL/^((https|http|ftp|rtsp|mms)?:\/\/)?(([0-9a-z_!~*'().&=+$%-]+:)?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-z_!~*'().;?:@&=+$,%#
2021-02-23 16:35:08
214
原创 element中一些小问题总结
一、标题el-input 添加回车事件@keyup.enter.native二、标题el-input同时添加blur和keyup.enter.native会触发两次@blur='changeData' @keyup.enter.native='$event.target.blur'三、el-table表格在苹果浏览器上间隔线错位body .el-table th.gutter { display: table-cell !important;}body .el-table colgro
2021-02-23 16:14:35
444
1
原创 axios-文件下载
@/services/API.js/* 获取远程协助状态 */export function downLoadFiles(url, config) { return get(url, config);}import { downLoadFiles } from '@/services/API.js';export const downLoad = { methods: { downLoad(url) { downLoadFiles(url, { responseTy
2021-01-15 15:26:24
741
原创 Echarts-柱状图、折线图
options={ title: { text: title, left: '5%', top: '5', textStyle: { fontSize: 14, color: 'black' }, padding: 10 }, grid: { top: '25%',
2021-01-11 15:37:57
289
原创 element-dialog实现拖拽
@/el-drag-dialog/drag.jsimport drag from './drag'const install = function(Vue) { Vue.directive('el-drag-dialog', drag)}if (window.Vue) { window['el-drag-dialog'] = drag Vue.use(install); // eslint-disable-line}drag.install = installexport d
2021-01-11 15:37:24
162
原创 实现图片加载先模糊后清晰的效果
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中IMG有个lowsrc属性，把图片的缩略图放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！==src ==里填写原图片！这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完后会显示原图，这样有个时间差，就
2021-01-11 15:36:39
2123
原创 Element为el-tree添加指示虚线
<div class='tree-container'> <el-tree class="tree" :indent='0' ></el-tree></div>.tree-container { overflow: hidden;}.tree /deep/ .el-tree-node { position: relative; padding-left: 0 ;}.tree /deep/ .el-tree-node__child
2020-12-28 15:03:55
1813
1
原创 禁止windows10自动更新（汇总）
最好将下面操作全部都设置一遍一、此电脑右键管理打开计算机管理系统工具/任务计划程序库/Microsoft/windows/Windows Update 禁用服务和应用程序/服务 Windows Update 双击 （启用类型 选择禁用）（恢复全部选择无操作） 最后点击确定就好了二、WIN+R在运行框中输入：gpedit.msc如果打不开 在桌面新建文本文档 将下面内容复制粘贴进去 然后文件后缀名改为.bat 然后右键以管理员身份
2020-12-11 10:37:49
227
原创 vue打包-合并chunk
vue.config.jsconst webpack = require("webpack");module.exports = { configureWebpack: { plugins: [ new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 100000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上 }) ] }
2020-12-10 11:24:59
2501
原创 echarts-中国地图
(function($) { //echarts地图 var geoCoordMap = [ {"name":'黑龙江', "value":[127.9688, 45.368], "symbolSize":8}, {"name":'内蒙古', "value":[110.3467, 41.4899], "symbolSize":8}, {"name":"吉林", "value":[125.8154, 44.2584], "symbolSize":8}, {"name":'北京市',
2020-10-30 14:37:36
487
原创 解决双重请求数据时，获取到数据，但页面不显示的问题
data(){ return {data:[],FinalData:[]}},async created(){ await getOneData().then(res=>{ this.data=res.data.data; this.getData(); })},methods:{ async getData(){ var data=[]; for(let i=0;i<this.data.length;i++){ await getTwoData().the
2020-10-29 17:34:24
760
原创 element-实现表格内修改
一、<el-table-column prop="serial" label="序号" ><template slot-scope="scope"> <span @click.stop="scope.row.showInput = true" style="display: inline-block;width: 100%;" v-if="!scope.row.showInput" >{{ scope.
2020-10-29 17:22:45
509
原创 JS实现打印功能
<el-button @click="print" >打印</el-button>tabData:[{log:'123468461354685'}]print(){ //打印 打开新的标签页 点击取消关闭新页面返回当前页面 var openWin=window.open() var str="<table style='color:#333;font-size:12px;' cellspacing='0' cellpadding='5'><
2020-10-15 18:44:44
322
原创 vue-实现路由权限(路由动态渲染)
一、layout/components/Sidebar/index.vuecomputed:{ routes() { return this.$store.state.routes;//原本是：this.$router.options.routes; }}二、store/index.jsconst store = new Vuex.Store({ state: { roles: ['admin'], //角色 routes: [] //路由
2020-09-22 18:39:01
1634
原创 获取当前浏览器的默认语言
let lan = navigator.systemLanguage || navigator.language;if(lan.toLowerCase().indexOf('zh')!==-1){ console.log('当前浏览器默认语言为中文')}else if(lan.toLowerCase().indexOf('en')!==-1){ console.log('当前浏览器默认语言为英文')}...
2020-09-15 09:19:17
1308
原创 Vue-高德地图的使用
一、实现根据地图选择位置template<span>{{location}}</span><iframe id="mapContainer" src="https://m.amap.com/picker/?center=116.3972,39.9696&key=608d75903d29ad471362f8c58c550daf"></iframe>scriptdata(){ return{ location:'' }}m
2020-09-11 18:41:50
771
原创 Vue—实现文件上传（多文件），图片上传
一、图片上传//template <input type="file" accept="image/*" @change="changeImage()" ref="avatarInput" style="display:none" /> <div
2020-07-20 17:55:15
3704
原创 Vue—选择时间区间显示时长
一、template <el-date-picker placeholder="开始时间" v-model="value[0]" type="datetime" > </el-date-picker ><span>至</span>
2020-07-20 17:40:44
1079
原创 Vue—将数字转换为大写金额
一、template <el-input type="number" v-enter-number="" v-model="value" placeholder="请输入金额" ></el-input> <p>
2020-07-20 17:35:32
4282
3
原创 针对IE单独设置样式
IE9以及低于IE9版本 :<!--[if IE]> <link rel="stylesheet" type="text/css" href="index.css" /><![endif]-->IE10或IE11:@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */}...
2020-06-10 17:03:10
718
原创 Vue—SEO优化
参考：https://blog.csdn.net/qq_40816649/article/details/92799569一、<meta name="keywords" content="设置关键字" /><meta name="description" content="网站描述信息" /><title>网站标题</title>二、<h1><img alt="网站logo" src="img/logo.png" />&l
2020-06-10 16:22:00
417
原创 Vue—实现中英切换
一、src/store/index.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({ state: { index: 0 }, mutations: { changeIndex(state, payload) { state.index = payload; } }, actions: {}, mod
2020-05-26 14:17:51
567
原创 Vue——实现文件上传(单文件)和文件下载
一、文件上传 <el-input v-model="fileName"></el-input> <el-button @click="choseFile" plain ><span class="upLoad iconfont icon-shangchuan"></span >点击上传</el-button > <input
2020-05-14 15:31:07
835
原创 Vue——在IE浏览器中白屏的问题
一、template<el-input v-model="fileName"></el-input> <el-button @click="choseFile" plain ><span class="upLoad iconfont icon-shangchuan"></span >点击上传</el-button > <input
2020-05-12 19:04:22
409
原创 vue-admin-template中实现点击侧边栏刷新页面
一、@/layout/components/Sidebar/Link.vue<template> <!-- eslint-disable vue/require-component-is --> <component v-bind="linkProps(to)"> <slot /> </component></template><script>import { isExternal } from
2020-05-11 14:01:23
1614
3
原创 Vue——实现组件可拖拽
一、template<div class="item" v-for="(item, index) in items" :key="index" draggable="true" @dragstart="handleDragStart($event, item)" @dragover.preven...
2020-04-30 13:45:05
1835
原创 在vue中使用阿里图标库
一、查找需要的图标，加入购物车二、添加至我的项目三、点击生成代码四、下载代码，保存至public/css五、在main.js中引入import "../public/css/font_1739265_wnnyllj4ine.css";六、直接在组件中进行调用<span class="iconfont icon-bfgq-fenjifengxuan"></s...
2020-04-07 16:04:20
780
1
原创 Vue——导出pdf
一、安装依赖项npm i html2canvasnpm i jspdf二、utils/exportPdf.jsimport html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default{ install (Vue, options) { Vue.prototype.getPdf = funct...
2020-03-31 16:14:36
204
原创 Vue——使用媒体查询
在vue中是不能直接使用@media的，我们必须结合less或者sass来使用它一、安装依赖项npm install sass-loader node-sass --save-dev二、public/scss/index.scssbody{ background-color:red; @media only screen and (max-width: 800px) { ...
2020-03-30 11:19:44
11848
3
原创 Vue——导出word文档
一、安装依赖项npm i docxtemplaternpm i jszip-utilsnpm i jszipnpm i file-saver二、public/word.docx三、在组件中进行调用<template> <el-form ref="form" :model="form" label-width="80px"> <el-fo...
2020-03-30 10:15:44
2337
4
原创 Vue——实现导出、导入Excel表格的功能
一、安装依赖项npm install xlsx file-saver -Snpm install script-loader -S -D二、utils/Blob.js(function(view) { "use strict"; view.URL = view.URL || view.webkitURL; if (view.Blob && view.URL...
2020-03-30 09:49:54
661
原创 Vue——封装echarts
components/echarts<template> <div :id="id" :style="width:100%;height:400px;"></div></template><script>export default { props: ["id", "option"], data() { ret...
2020-03-25 09:59:21
255
原创 Vue——封装axios请求，请求头携带token、cookie，当请求超时再次发送请求
utils/request.jsimport axios from "axios";const instance = axios.create({ timeout: 8000,//设置网络请求超时时间 baseURL: "http://0.0.0.0:0000" ,//接口的baseUrl headers: { "Content-Type": "application/x-...
2020-03-25 09:48:29
2244
原创 echarts实现屏幕自适应以及鼠标滚轮缩放的功能
实现屏幕自适应html<div id="myEcharts" :style="width:50%;height:400px;"></div>scriptexport default { data() { return { myChart: {}, option:{…} }; }, created() { ...
2020-03-24 18:05:48
4402
原创 Vue中使用CDN的方式引入echarts、axios、Element UI、swiper
原本我所有的插件都是npm安装，然后使用的时候使用import引入的，，，但是在我打包时发现总共没有几个页面可能由于有大量的图表，打包之后20M左右这样肯定是不行的，我就使用按需引入，但还是有17M左右最后我就想起来使用CDN引入了，，果然最终文件大小就27kbhtml.js<link rel="stylesheet" href="https://unpkg.com/elemen...
2020-03-24 17:55:24
7483
原创 Vue开发跨域问题
问题1：在开发时由于前后端服务器不一致，涉及到了跨域解决方式：碰到这种事情第一反应是使用chrome上的解决跨域的扩展程序，，，但是仍旧未能获取到数据，，，，然后我以为是扩展程序出错了，就让服务器端将我的IP地址设置为允许获取数据问题2：仍旧未曾获取到数据（但是不会报跨域错误），通过跟服务器端交流得知，需要在请求头携带cookie才能获取到数据，，，于是我便设置了axios.def...
2020-03-24 17:29:23
104
原创 echarts 各个配置项详细说明总结
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d...
2020-03-20 16:54:53
607
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人