前端分享
菜鸡前端,在线分享
南梓哶
随缘分享,佛系更新
展开
-
基于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 · 3899 阅读 · 12 评论 -
elementplus中el-table监听滚动
【代码】elementplus中el-table监听滚动。原创 2024-09-18 10:04:37 · 291 阅读 · 1 评论 -
页面如何监听打开的第三方页面是否关闭
页面如何监听打开的第三方页面是否关闭原创 2022-10-26 17:07:24 · 810 阅读 · 1 评论 -
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 · 1332 阅读 · 0 评论 -
前端数据流文件下载三种方式
前端数据流文件下载三种方式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 · 2117 阅读 · 0 评论 -
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 · 1259 阅读 · 0 评论 -
使用 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 · 232 阅读 · 0 评论 -
vue3中watch和watchEffect的区别
watch:既要指明监视的属性,也要指明监视的回调watchEffect:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像commputed:1.computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值2.watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值 // watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调 watchEffect(()=>{原创 2021-08-31 15:18:36 · 904 阅读 · 0 评论 -
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 · 1261 阅读 · 0 评论 -
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 · 1618 阅读 · 0 评论 -
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 · 4974 阅读 · 2 评论 -
前端纯导入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 · 239 阅读 · 0 评论 -
前端纯导出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 · 196 阅读 · 0 评论 -
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 · 2248 阅读 · 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 · 1755 阅读 · 0 评论