![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
圆圆爱喝可乐
这个作者很懒,什么都没留下…
展开
-
js 获取富文本的文本
js获取富文本中的文本原创 2022-07-19 11:55:33 · 1552 阅读 · 1 评论 -
vite + vue3统一导出svg名 使用svg
原创 2022-04-11 21:16:32 · 461 阅读 · 0 评论 -
vr全景krpano + vue3
krpano + vue31. 引入 1.1 index.html中引入 tour.js //static 存放krpano生成的vtour文件<script src="./static/vtour/tour.js"></script> 1.2 页面中创建pano 输出节点<div id="pano"></div> 1.3 在mounted中初始化节点onMounted(() => { embedpano({ sw原创 2022-03-24 16:47:34 · 1721 阅读 · 0 评论 -
js 树结构根据当前选中节点 获取对应整条链结构数组列表
js 树结构根据当前选中节点 获取对应整条链结构数组列表function treeFindPath(tree, func, path = []) { if (!tree) return [] for (const data of tree) { path.push(data) if (func(data)) return path if (data.children) {原创 2022-03-24 16:44:28 · 423 阅读 · 0 评论 -
图片超宽高 等比例缩小函数
图片超宽高 等比例缩小 calcImageShowSize(width, height) { let showMaxWidth = 800 let showMaxHeight = 1000 let showWidth = Math.min(width, showMaxWidth) let showHeight = (height / width) * showWidth if (showHeight > showMaxH原创 2021-11-17 10:40:56 · 123 阅读 · 0 评论 -
vue3 通过ref 获取v-for循环出来的dom节点
//template :ref="(el) => (img[index] = el)"//setupconstr img = ref([])return {img}原创 2021-10-13 19:06:05 · 1166 阅读 · 0 评论 -
vue 实现拖拽市 列表
vue 实现拖拽市 列表js原生拖动事件:在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发的事件:ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件ondrop - 在一个拖动过程中,原创 2021-08-19 14:44:54 · 271 阅读 · 0 评论 -
VUE3使用echarts 生产环境跳转路由后不显示
VUE3使用echarts 生产环境跳转路由后不显示1.vue3使用echarts 写法 : 使用动态id 防止跳转路由后不显示 <div :id="ChartLeft"></div>const Chart = ref("Chart" + Date.now() + Math.random()) //记得return Chartlet myChart = echarts.init(document.getElementById(Chart.value)) Chart.s原创 2021-08-17 11:25:42 · 966 阅读 · 2 评论 -
vite 使用import.meta.glob动态添加vue页面
使用vite的 GlobImport 动态导入多个vue页面在使用vite实现后台管理系统的时候,有个需求是动态导入views文件夹下面的所有页面,在vite1.0版本的时候只能手动写映射关系,升级到vite2.0之后,在本地使用没有问题,打包上生产直接裂开~~,vite提供了一个Glob Import方法。如果直接使用import.meta.glob,vscode会报类型ImportMeta上不存在属性“glob”的错误,需要在tsconfig文件下添加类型定义vite/client{ "com原创 2021-08-11 10:59:33 · 21978 阅读 · 7 评论 -
vue3+vue-router4.0 动态路由 add-Route
vue3+vue-router4.0 动态路由 add-Route用Vue3就必须用Router4.x版本,由于4.0去掉了addRoutes 所以只能用addRoute现在是只能添加一个function routerPackag(routers:any) { if (routers) { routers.filter((itemRouter:any) => { if (itemRouter.component != "Layout") { router.原创 2021-08-09 14:55:35 · 4451 阅读 · 2 评论 -
vue3浏览器后退前进不刷新页面 keep-alive中使用问题
一、业务场景示例页面A: 数据列表,有一些查询条件,如查询条件区域,查询结果为区域信息列表页面B: 数据详情,点击列表任意一条记录,跳转到对应的区域详情期望:在页面B,点击浏览器返回按钮,显示上一次页面A查询结果与查询条件(最好不重新请求)二、实现利用vue的keep-alive,使用keep-alive可以是组件在第一次创建时被缓存下来,离开页面时不销毁使用了keep-alive生命周期1.activated:页面第一次进入的时候,钩子触发的顺序是created->mounted-&原创 2021-07-27 15:35:42 · 1897 阅读 · 1 评论 -
组件通信笔记
1.组件通信组件之间相互传递数据1.1 父传子(如果在A组件中使用了B组件,那么A组件就是父组件,B组件就是子组件)父组件传数据给子组件通过属性来传递<template> <div> <子组件 属性名1="属性值1" 属性名2="属性值2"></子组件> </div> </template>子组件通过props接收父组件传的数据 export default { p原创 2021-07-21 15:59:13 · 52 阅读 · 0 评论 -
vue+element 按钮Loading统一处理
vue 按钮Loading处理1.按钮的loading效果可以处理后台响应时间有点长场景,这里使用store封装了下处理方式// loading.jsimport Vue from 'vue';const loading = { state: {}, mutations: { SET_LOADING: (state, data) => { const isObject = Object.prototype.toString.call(data)原创 2021-07-21 15:55:41 · 2769 阅读 · 1 评论 -
前端适配解决方案
1.px 换成 -> rem2.将media.js 引入html (你可以修改1200 -> 1920)3.不建议字体弹性字体出现精度有可能会无效。浏览器只支持到12px。展示层面会异常,盒模型变化时,字体被限缩放到14px无法被继续缩小。// media.js ; (function (doc, win) { var docEl = doc.documentElement var resizeEvt = 'orientationchange' in window ? '原创 2021-07-21 10:00:28 · 176 阅读 · 1 评论 -
js时间戳转年月日
js 时间戳转日期格式// 转日期 getLocalTime(time) { var date = new Date(parseInt(time)) var year = date.getFullYear() var mon = date.getMonth() + 1 var day = date.getDate() return year + "/" + mon + "/" + day },...原创 2021-05-22 10:05:13 · 240 阅读 · 0 评论 -
vue3 element-table自定义表头和内容
使用vue3 element plus中el-table表头数据与内容数据分开表头数据表格数据关键代码//根据列id对应表头id 显示数据<el-table :data="pagination" style="width: 100%"> <template v-for="(col, index) in hearder" :key="index"> <el-table-column :label="col.colTitle" align原创 2021-07-17 16:12:19 · 1485 阅读 · 0 评论 -
js删除数组中指定项
js删除数组中指定项let arr = [1,2,3]let s= 2arr.splice(arr.findIndex(v=>v===s),1)原创 2021-04-10 12:03:48 · 143 阅读 · 0 评论 -
vue按钮级权限控制
vue按钮级别权限控制设置权限信息1.在登陆后查询当前用户的权限集合const getInfo = await api.getInfo(); //roles:['admin‘,'edit']2.然后保存到localStorage里const setRoles = function(name, data) { localStorage.setItem(name, JSON.stringify(data));}; setRoles("permission", getIn原创 2021-03-31 17:09:31 · 326 阅读 · 0 评论 -
d2-admin-路由菜单
d2-admin 路由菜单记录路由格式如下expore const frameIn =[ { path: "index", name: "index", title: "首页", icon: "home", component: _import("system/index"), children:[ { path: "role", name: "role", title: "角色管理", icon原创 2021-03-31 17:07:24 · 2826 阅读 · 1 评论 -
vue之 -- 分页器封装
vue之 – 分页器封装使用组件<template> <pagination :total="listQuery.total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" /></template>import Pagination from "@/compo原创 2021-03-22 17:25:24 · 244 阅读 · 0 评论 -
Vue3.x开发文档
Vue3.x开发文档1 特点Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合易用已经知道HTML/CSS/JavaScript即可使用。灵活可以在一个库和一个完整框架之间自由使用。高效运行大小20KB,超快虚拟DOM,最省心的优化2 Vue3.x VS Vue2.x 主要改进2.1 提升运行时性能:原创 2021-03-22 10:06:14 · 608 阅读 · 0 评论