- 博客(18)
- 收藏
- 关注
原创 vue 配置全局样式(style-resources-loader)
vue 配置全局样式(style-resources-loader)style-resources-loader的两种方式方式一方式二style-resources-loader的两种方式这里以 less 举例,新建一个 reset.less (文件名随意),路径为 @/assets/reset.less方式一安装 style-resources-loadernpm i style-resources-loader安装 vue-cli-plugin-style-resources-loader
2021-12-28 17:42:07
1443
原创 前端数据流文件下载三种方式
前端数据流文件下载三种方式1.直接使用get请求方式进行下载window.open(url);2.axios(ajax)前端根据返回数据流生成文件下载axios.post(url, param, { responseType: 'blob'}).then((res) => { console.log('res', res); const blob = res.data; const reader = new FileReader(); reader.readAsData
2021-12-08 15:06:22
2307
原创 vue-router中scrollBehavior方法滚动行为的使用
注意: 这个功能只在支持 history.pushState 的浏览器中可用。当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 }})参数说明:to, from都是路由对象;savedPosition 当且仅当 popsta
2021-09-15 16:22:40
1424
原创 使用 iframe + postMessage 实现跨域通信
创建两个html页面1.创建父页面parent.html代码如下:<body> <h1>parent</h1> <iframe id="child" name="child" src="http://127.0.0.1:5500/child.html" frameborder="0"></iframe> <script> window.onload = function () {
2021-09-14 17:21:26
310
原创 vue3中watch和watchEffect的区别
watch:既要指明监视的属性,也要指明监视的回调watchEffect:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像commputed:1.computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值2.watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值 // watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调 watchEffect(()=>{
2021-08-31 15:18:36
959
原创 vue3.0+vite+vuex+vue-router的搭建
一、搭建vite+vue3# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线:npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vuecd my-vue-app 进入并npm i 安装依赖 之后npm run dev 启动二、vue-router安装4.
2021-08-25 09:41:17
1398
原创 egg中如何模板渲染页面
egg模板渲染官方给的是使用 egg-view-nunjucks来实现模板渲染egg-view-nunjucksconfig/plugin.js中的配置exports.nunjucks = { enable: true, package: 'egg-view-nunjucks',};config/config.default.js中的配置module.exports = { view: { mapping: { '.nj': 'nunjucks',
2021-08-24 10:50:41
459
原创 Vuex数据状态持久化-vuex-persistedstate
Vuex数据状态持久化—vuex-persistedstate1.安装vuex-persistedstatenpm install vuex-persistedstate --save注意:使用vuex-persistedstate默认存储到localStorage2.引入及配置:在store下的index.js中import createPersistedState from "vuex-persistedstate"const store =newVuex.Store({ state:
2021-08-18 15:27:21
1700
原创 egg+egg-jwt实现鉴权登录
这里写目录标题1、安装egg2、安装egg-jwt3、配置plugin.js4、配置config.default.js5、路由代码app/router.js:6、控制器代码app/controller/login.js :7、测试:通过接口获取token:通过接口验证token:1、安装eggmkdir egg-example && cd egg-examplenpm init egg --type=simplenpm i2、安装egg-jwtnpm i egg-jwt --s
2021-08-12 15:14:05
494
原创 ant-design-vue中 a-tree 修改show-line自带的图标
基于ant-design-vue中a-tree 修改show-line自带的图标官方给的这版 也可以修改 不过他的树 不是json数据的树 而是通过a-tree-node渲染的然后使用插槽控制switcherIcon修改了图标<a-tree-node key="0-0-2-1" title="leaf"> <a-icon slot="switcherIcon" type="form" /></a-tree-node>json数据下渲染的tree如何修改
2021-07-16 11:55:37
5889
2
原创 基于ant-design-vue中a-tree的搜索功能
基于ant-design-vue中a-tree的搜索功能搜索自动展开并高亮关键字代码:<template> <div> <a-input-search v-model="searchStr" placeholder="输入搜选项" style="width:200px;" @search="onSearch"></a-input-search> <!-- selectedKeys是选中项key的集合,expandedKeys是展
2021-03-15 17:11:46
4265
12
原创 前端纯导入EXCEL表格
前端纯导入EXCEL表格1.安装依赖xlsx npm i xlsx --save<template> <div> <input type="file" name="" id="ipt" multiple @change="importf" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.
2021-03-15 17:06:26
296
原创 前端纯导出EXCEL表格
前端纯导出EXCEL表格1.安装依赖npm install -S file-saver xlsxnpm install -D script-loader2.在目录里新建excel文件夹在excel文件夹里新建三个js文件(Blob.js、Export2Excel.js和util.js)Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://
2021-03-15 17:01:43
264
原创 Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题
问题描述:自定义菜单图标时,收起菜单时,会发现文字没有隐藏<a-menu-item v-for="item in memberMenu" :key="item.path"> <i :class="['iconfont', item.icon]" style="marginRight: 10px;fontSize:20px;"></i> <span class="">{{ item.title }}</span></a-menu-
2021-01-29 17:01:56
2454
6
原创 截取视频某一帧作为封面图片
截取视频某一帧作为封面图片如何截取视频某一帧作为封面图片如何截取视频某一帧作为封面图片// html代码<video id="video" width="300px" controls="controls"> <source src="xxxx.mp4" /></video><div id="output" style="width:100px;height:100px;border:1px solid #dedede"></div&g
2021-01-29 16:29:21
1854
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅