- 博客(26)
- 收藏
- 关注
RSS订阅
原创 微前端 qiankun webpack打包后静态资源路径404问题解决
首先出现静态资源加载失败的原因是路径问题，子应用的路径被父应用影响，解决方法你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url{ output: { publicPath: `//localhost:${port}`, }}借助 webpack 的 url-loader 将字体文件和图片打包，小文件转 base64 ，大文件注入路径前缀vue cli2写法const publicPath = process.env.NODE_ENV ===
2020-12-07 10:19:36
6478
原创 vue使用环境变量区分环境
创建环境变量文件.env.production // 生产环境.env.development // 本地环境.env.mini // 自定义的环境编写环境变量内容 // .env.developmentVUE_APP_BASE_URL=http://123.123.123/developmentVUE_APP_BASE_NAME=development// .env.productionVUE_APP_BASE_URL=http://123.123.123/productionVU
2021-11-15 16:22:32
1090
原创 vue实现视频自动播放
<button @click="play = !play">播放</button><video src="./video/rpa10.0.mp4" autoplay v-if="play"></video>data() { return { play: false }}首先将video标签隐藏起来，合适的时候将他显示出来，就可以播放了，**注意：video标签一定要设置 autoplay **...
2021-10-26 16:26:10
4392
6
原创 JavaScript寄生组合实现继承
function Person(name, age) { this.name = name this.age = age}Person.prototype.eating = function() { console.log("eating~");}Person.prototype.runing = function() { console.log("runing~");}function Student(name, age, sno, score) { // 实现属性
2021-09-28 10:44:49
120
原创 vue3-composition API 父子通讯
father.vue<template> <son @changeFold="changeFold" /></son></template><script lang="ts">import { defineComponent, ref } from 'vue'import navHeader from '@/components/son.vue'export default defineComponent({ compone
2021-08-05 16:24:51
177
原创 vue axios http请求封装
新建http.jsimport axios from "axios";import iView from "iview";export const URL = "http://11.11.11.11:8080/";const service = axios.create({ baseURL: URL, timeout: 5000 * 60 * 1, //分钟 headers: { "Content-Type": "application/json;charset=UTF-8.
2021-05-24 15:51:37
167
原创 js根据url下载文件并重命名，兼容ie11（其他版本未测试）
html <a @click="download(lixiangUrl, lixiangName)"></a>vue methods内方法 // url是文件下载路径 // filename是下载文件的名称 download(url, filename) { this.getBlob(url).then((blob) => { this.saveAs(blob, filename) }) }, ge
2021-05-21 14:44:04
1322
6
原创 HTML+CSS3实现聚光灯效果
白色部分会一直移动代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1..
2020-09-29 14:06:40
314
原创 vue实现鼠标滚轮滚动缩放图片，对图片进行拖拽
HTML这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动@mousewheel.prevent 阻止默认行为<div span="8" class="left" @mousewheel.prevent="rollImg"> <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move"></div>JavaScript代码// 拖动
2020-08-12 17:07:50
8088
13
原创 vue禁止使用滚轮滚动页面
阻止滚动事件默认行为即可，这样滚轮可以做自己想要的功能，而且页面不会滚动@mousewheel.prevent=“rollImg”
2020-08-12 16:33:54
1357
原创 Vue点击按钮复制其他标签内的内容
用到clipboard.js引入clipboard.jsnpm install clipboard --save在需要使用的vue文件引入import Clipboard from "clipboard";代码<button class="btn" data-clipboard-target="#msg" <!--这里绑定的是要复制的标签的id--> data-clipboard-action="copy" @cli
2020-08-06 15:27:00
682
原创 解决require获取本地图片加载慢的问题
将require获取图片在生命周期内 created内执行，这样当页面加载完毕之前，图片就会被获取过来了
2020-07-16 10:50:48
1456
1
转载 解决element-ui导航菜单开启路由模式路由跳转，但是激活菜单样式不生效的问题
开启路由模式后:router=“true”添加这行代码，完美解决:default-active="$route.path"
2020-07-10 15:26:34
5071
5
原创 vue上传图片及其图片回显
HTML部分<div class="file"> <input type="file" class="updata" accept="image/*" @change="change($event)" ref="updata"> <img :src="imageUrl ? imageUrl : baseImg" alt="" class="img"> </div>这里的 img使用了动态绑定src 如果上传了图片就显示上传
2020-07-06 16:15:09
15568
9
原创 动态绑定阿里图标库图标
如果还不知道怎么在vue中怎么引入阿里图标库的，可以看我原来的文章正文开始首先把阿里图标库的class 添加到data数据中遍历数据的时候动态绑定class效果
2020-07-06 14:40:35
415
原创 在vue项目中使用阿里图标库
打开阿里图标库官网 阿里图标库官网随便里面很多类型的图标，找一个点击进去把鼠标放在想要的图标上面，点击购物车添加入库.选择后后点击自己的购物车，添加的都在这里了点击下载代码下载下来的是一个压缩包，解压把红框的两个文件添加到vue项目中，建议放在assets下面 因为字体图标也是静态文件修改iconfont.css的路径 注意 这里的路径是找寻iconfont.ttf的路径，因为我的在同一路径，根据自己的存放修改@font-face { font-family: .
2020-07-06 14:34:56
772
原创 解决Vue滑动插件Better-Scroll，卡顿，划不动的bug
bug原因：因为Better-Scroll插件需要计算滑动的高度，如果页面图片较多，图片没有加载完成，滑动高度就已经计算出来，这个数据偏小，网速较快不会出现这个bu解决方法：每个图片加载完毕后，都让他重新计算滑动高度，最后算出来的高度就正确了代码使用 @load监听img标签 这样每次图片加载完毕，就会调用这个方法<img :src="goodsItem.show.img" alt="" @load="imageLoad">获取到better-scroll的组件，
2020-06-16 23:35:28
3525
原创 两句代码实现导航条吸顶效果
选择器： { position: sticky; top: 44px; }top指到页面顶部的距离，如果上方没有其他元素，top可以设置为0，如果上方有组件，top就是上方组件的高度，自己控制最终效果
2020-06-15 15:22:50
334
2
原创 vue-router路径上带井号解决
出现这种情况的原因，是因为vue-router为了让url变化，页面不刷新，使用了location.hash()，解决办法：在new vue-router的时候传入一个mode: ‘history’export default new Router({ routes: [{ path: '', redirect: '/home' } ], ## mode: 'history'})这样是就使用H5的histo.
2020-06-06 23:16:33
6253
原创 vue + element ui 清空表单 resetFields未定义解决
使用的时候 this.$refs['表单绑定的数据名称'].resetFields()表单绑定的数据名称，一定要用单引号括起来
2020-04-03 16:35:48
1864
原创 java,springboot自定义注解，获取方法的方法名和参数名和注解中的数据（反射）
一： 首先自定义一个注解这里的default就是他的默认值，如果不赋值，默认值就为default的内容二： 在方法上使用注解三： 写一个service接口，这里
2020-03-25 12:24:23
6394
3
原创 vue + element ui 实现前端导出 适合新手
安装依赖npm install -S file-saver xlsxnpm install -D script-loader如果下载失败 就使用cnpm下载cnpm install -S file-saver xlsxcnpm install -D script-loader下载两个js文件 Blob.js 和 Export2Excel.js 在github能下载到在src目...
2020-01-19 16:07:15
457
原创 电影名最长的3部电影和他们的总销量是多少
自学sqlselect title,length(title) as len, (Domestic_sales+International_sales)as ‘总销量’ from Moviesinner join Boxoffice on Movie_id = id order by len desc limit 0,3
2020-01-02 14:50:33
1317
原创 列出所有的电影ID,名字和销售总额(以百万美元为单位计算)
列出所有的电影ID,名字和销售总额(以百万美元为单位计算) 自学sqlSELECT id,title ,(Domestic_sales+International_sales)/1000000 as ‘总销量/百万’ FROM movies inner join Boxoffice on Movie_id= id...
2020-01-02 14:30:36
2851
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人