- 博客(59)
- 收藏
- 关注
RSS订阅原创 VUE--使用BroadcastChannel频道实现同源策略不同工程页面通信
VUE--使用BroadcastChannel频道实现同源策略不同工程页面通信
2024-05-23 17:18:57
462
原创 使用element的upload上传文件并导出excel
<template> <div> <el-upload class="upload-demo" ref="upload" action="" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" > <el-but
2022-05-20 17:09:13
841
原创 添加阿里infont图标
1.创建css@font-face { font-family: 'iconfont'; /* project id 3292342 */ src: url(''); src: url('?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_3292342_f529rt08ywt.woff2') format('woff2'), url('//at.alicdn.com/t/font_3292342_f.
2022-03-31 14:12:17
1403
原创 图片懒加载
1.安装npm包npm install vue-lazyload --save2.在main.js中引入全局/*图片懒加载 */import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// 配置项Vue.use(VueLazyload, { preLoad: 1.3, //预加载高度 error: 'dist/error.png', //报错时需要的图片 load
2022-03-23 15:37:58
128
原创 根据数据名称动态更换组件（大屏四合一）
<template><div class="box"> <!-- 热点分析3.0 --> <div class="box_1"> <component v-bind:is="loadertpl1" v-if="loadertpl1"></component> </div> <!-- 京开咨询 --> <div class="box_2">
2022-03-22 11:50:41
134
5原创 http协议自动升级
http协议自动升级1.HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。2.解决办法//页面的head中加入：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">//意思是自动将http的不安全请求升级为https...
2022-03-14 11:55:21
624
原创 父子，兄弟组件传值
一、bus组件传值**1.新建bus.js文件，引入vueimport Vue from 'vue'const bus = new Vue();// 使用 Event Busexport default bus;2.在main.js中引入vue bus (也可以在使用的组件中引入)import Bus from './common/bus'; Vue.prototype.$bus = Bus3.在A页面传递this.$bus.$emit("Page",value); //很像父子之
2022-03-04 11:38:08
335
原创 npm安装scss
1.sass-loader依赖于node-sass,所以要安装node-sassnpm install node-sass --save-dev // 安装node-sassnpm install sass-loader --save-dev // 安装依赖包sass-loadernpm install style-loader --save-dev // 安装style-loader2.在build文件夹下的webpack.base.conf.js的modu
2022-02-21 09:54:01
15484
原创 el-upload上传视频限制(格式和带宽)
<el-upload :before-upload="beforeAvatarUpload"></el-upload>beforeAvatarUpload(file) { // 获取视频时长 var url = URL.createObjectURL(file); var audioElement = new Audio(url); var duration; this.durationNumber = audio
2022-02-16 14:52:27
5212
原创 Vue 全选/取消全选，反选/取消反选 小demo
<template> <div> <div> <input type="checkbox" v-model="isCheckAll" @change="checkedAll" /> 全选/取消全选 <input type="checkbox" v-model="isCheckInverse" @change="checkedInverse" /&g
2022-02-07 17:08:20
610
原创 rem与px配置自适应布局
1.安装npm i lib-flexible -S2.在main.js引入import 'lib-flexible/flexible.js'3.在flexible.js中(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size // 设置 em 默认字体
2022-02-07 11:58:03
617
原创 Element --日期时间的禁用（约束）
<template> <div id="app"> <el-date-picker :picker-options="setDisabled" > </el-date-picker> </div></template><script>export default { data() { return { setDisabled: { d
2022-01-11 17:29:22
1476
原创 计算两个时间戳的差值
1.在utils里创建一个time.jsexport function formatTimes(startTime, endTime) { let diff = endTime - startTime; let str = ''; // 毫秒化天 let d = Math.floor(diff / (24 * 3600 * 1000)); if (d > 0) { str += d + '天' } // 毫秒化小时 let rh = diff % (24 *
2021-12-31 15:52:01
1769
原创 前端使用js-file-download下载文件和下载视频音频
1.安装js-file-downloadnpm install js-file-download --save2.在页面引入import fileDownload from "js-file-download";3.调用导出接口exportTextResult() { exportTextResult({ id: this.aid }).then(res => { fileDownload(res.data, `${this.fileName}.docx`);
2021-12-31 15:34:12
9937
原创 VUE打包详细步骤
一、修改请求静态资源的路径打开config文件夹下的index.js文件，修改assetsPublicPath的值，从"/“改为”./"。即从根路径改为相对路径。二、修改本地图片的路径打开build下的utils.js文件，增加 publicPath:’…/…/’三：运行打包代码npm run build...
2021-12-23 15:33:27
4129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人