weixin_47180815的博客

[在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b5b83d3733e645158922ee058c9db66b.png size=300x)

/ 2. 转换导入结果为 { 文件名: URL } 的映射表。这里的url一定是相对位置，使用@/assets 不起作用。图片较多时使用 eager: false + 按需加载。1、backgroundImage 路径写法。// 直接导入图片资源（会解析为最终路径）// 1. 使用 glob 批量导入图片。// 提取不带扩展名的文件名。// 直接获取默认导出。

设计初衷：本来想直接使用element的进度条组件的，但是好多属性都没有办法控制。UI设计的图如下，需要控制未完成和已完成的颜色，端点的形状改为普通的butt所以使用svg实现了一个环形进度条组件element组件设计图实现效果可以交互的svg 环形进度条组件</</</importfrom'vue';constdefault48default12default'#D5DDEB'// 灰色背景default'#367AFB'// 蓝色进度default0validator。

这里先说明一下，IntersectionObserver 在我之前的文章中有提到过，之前自己没有在具体的项目中实践过，只是写了一个小demo，所以直接照搬到真实的项目时，出现了一些大大小小的问题。以下是优化版本的无限加载，在测试和产品经理的轮番测试下，算是打磨的比较平稳了。大家可以试一试，有遇到问题的话可以评论区留言。之前的文章链接，大家有兴趣可以看一下，除了无限加载还提交了图片懒加载IntersectionObserver 是一个现代的浏览器 API，用于异步监测目标元素与祖先元素或视口（viewport

colorStops，类似颜色线性梯度，数值范围 0-1；径向渐变：colorStops - radial。type：‘radial’，径向渐变。x,y，代表圆心，数值范围 0-1；r，代表半径，数值范围 0-1；global，默认false。

控制步骤条点亮，当前步骤为。

vite 官网文档 – glob-import。

vue3 学习记录vue3和vue2项目main.js对比常用的composition APIsetupsetup 返回值3. 返回一个对象4. 返回一个函数（渲染函数）setup() { let name = "zpp"; return { name } // return () => h("h1", "zpp"); },......

修改名字

存储图片的数据结构可根据实际需求来创建。

vue中含有iframe的页面如何避免路由切换时keep-alive不起作用

vue页面批量引入文件

vite 中配置@表示访问src下的文件

vue3 devtools安装指南

懒加载 实现数据量较多时的列表展示

软件安装说明：先安装node.js(node-v8.11.3-x64),再安装Git-2.18.0-64-bit，最后安装vscode。安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装…安装全局vu

//限制结束日期不能大于开始日期pickerOptions0: {disabledDate: (time) => {if (this.ruleForm.endDate != “”) {return (time.getTime() < Date.now() - 24 * 60 * 60 * 1000 ||time.getTime() > this.ruleForm.endDate);} else {return time.getTime() < Date.now()

import { createStore, createLogger } from 'vuex'import { user } from './modules/user'import { system } from './modules/system'import createPersistedState from 'vuex-persistedstate';import ls from '@/utils/local-storage';const debug = process.env.NODE

使用攻略参考文档https://printjs.crabbly.com/分页使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面<div style="page-break-after:always">我是封面</div><div style="page-break-after:always">我是目录，你不知道我的内容有多长</div><div>我是正文，我需要从一个新页面开始展示&l

初始配置参考https://blog.youkuaiyun.com/weixin_47180815/article/details/121748486在init配置中添加keydown和keydown事件，给编辑器的内容重新赋值来达到无法输入的效果。这里的props.otherInfo入参可以拷贝一份v-modal的值（注意需要深拷贝）在打开编辑器的时候设置leafDetail.otherInfo = leafDetail.content；有其他比较好的方法可以在评论区讨论哦...

最后一列不设置宽度。因为antd会自己给最后一列分配宽度；设置合适的宽度。推荐用百分比设置宽度。scroll属性中的x选择一个合适的值（或者直接设为 max-content）scroll={undefined{ x: 'max-content', y: tableHeight() }}4.给Table组件设置这个中英文都换行的样式style={{ wordBreak: 'break-all' }}<Table bordered loadi..

解决a-table打印时单元格中的内容不换行的问题绞尽脑汁，尝试了多种方法后终于发现了怎样解决.table .ant-table-tbody > tr > td { padding: 2px !important; white-space: pre-wrap; }最重要的是white-space: pre-wrap;white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wr

下载到本地在assets中新建文件夹iconfont把这些文件放进去在main.ts中引入// iconfont 图标库import './assets/iconfont/iconfont.js'import './assets/iconfont/iconfont.css'demo_index.html中有使用方法可以参考例如<span class="iconfont icon-level1"></span>...

这里提供两种解决方案1、 使用element-resize-detector插件2、使用自定义指令element-resize-detector插件前言： 记录一个好用的包，在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听到由浏览器大小变化引起的元素变化的局限性；安装方法：npm install element-resize-detector或<script src="node_modules/element-resize-dete

详细配置，请参考tinymce中文文档1. 安装相关依赖npm install tinymce -Snpm install @tinymce/tinymce-vue -S2. 汉化编辑器前往此地址下载中文汉化包：https://www.tiny.cloud/get-tiny/language-packages/3. 引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹，将下载的汉化包解压到此文件夹然后在node_modules/tinymce中找到skins文件夹，也

vue中表格或者内容区域高度自适应其实这也算是一个令人头疼的问题吧，我们需要固定某个区域的高度，并且在网页resize的时候变化。例如我们在页面中放入一个table，这种固定表头的table需要我们自己给一个高度，问题1： 这个高度不是也要算出来的吗？问题2： 这个高度不是也要随着页面的大小自己去适应吗？于是乎，就借鉴了我们公司一位大牛的思路，写个组件吧，搞个插槽把表格插在中间，高度自己计算就行。组件名称我就称之为PageWrap重要： PageWrap组件使用高度使用了height:10

多选<template> <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :custom-row="customRow" > <template #name="{ text }"> <a>{{ text }}</a> </template> </a-t

1. Vue3.0六大亮点特性解析Performance性能比Vue 2.x快1.2~2倍Tree shaking support按需编译,体积比Vue2.x更小, Composition API:组合API(类似React Hooks)Better TypeScript support更好的 Ts支持Custom Renderer API暴露了自定义渲染APIFragment，Teleport (Protal)，Suspense更先进的组件注：

由于vue-amap不支持路线规划，因此不予采纳。在index.html的header中引入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script> <!--引入UI组件库（1.0版本） --><script type="text/javascript" src="ht

为了避免在每一个需要引入变量的组件中import全局的文件我们使用sass-resources-loadercnpm i sass-resources-loader --save-dev确认这些都已经安装了，注意安装顺序；cnpm install sass-loader@5.0.0 node-sass@4.14.1在build–>utils.js中修改将 return { css: generateLoaders(), postcss: generateLoade

TypeError: this.getOptions is not a function原因：sass版本过高降低sass版本先卸载然后再安装cnpm install sass-loader@5.0.0 node-sass@4.14.1

https://clipboardjs.com/

row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event重要代码 //右键点击事件 rightClick(row, column, event) { console.log(arguments); var menu = document.querySelector("#menu"); event.preventDefault(); //获取我们自定义的右键菜单 // 根据事.

第一次看到element ui中的上传图片时，可能因为好看的ui惊喜了一下下但是问题出现了，这些上传大多都是自动上传，而且是一个文件一个文件上传，所以为了解决一下问题一次上传多张手动上传图片图片预览问题:limit="limit" 限制上传图片的数量list-type="picture-card" 设置上传样式:on-preview="handlePictureCardPreview" 利用该事件来获得图片信息，完成图片预览:on-change="OnChange" 在选择好文件的

从v-key探究到vue响应式原理文章目录从v-key探究到vue响应式原理总结维护状态key数组更新检测变更方法替换数组注意事项知识扩展`Object.getPrototypeOf()``Object.assign()`Object.defineProperty()vue维护状态官方文档可能有一点点的难懂，那么我们举个例子实践一下吧 ，再来看官方给出的文档 <div id="app"> <div> <input type="text" v-mod

swiper中的时间，请参考官方文档，这里需要注意安装的swiper的版本<HeaderTab @toParent="getNowIndex" :tabInfo="tabInfo" :index="nowIndex" ></HeaderTab> <swiper @slide-change-transition-end="handleClickSlide" class="swiper" id

watch: { // 监听路由变化 "$route": function (newUrl, OldUrl) { console.log("监听路由"); console.log(newUrl, OldUrl); this.init(); }, },通过watch方法监听router的改变，当路由改变时调用页面初始化的方法。官网参考：https://router.vuejs.org/zh/guide/advanced/data-fet.

https://blog.youkuaiyun.com/yangxiaoman123/article/details/107855727<template> <!-- <q-page class="q-pa-sm"> --> <div v-if="tasks.length > 0"> <gantt-elastic :options="options" :tasks="tasks" @tasks-change

<template> <div class="pop-over"> <a @click="toggleOpen" class="pop-button" href="javascript: void(0);"> {{ buttonText }}你好呀 </a> <ul v-clickoutside="close" v-show="open" class="pop-list"> <slot&g.

<el-input class="textarea" size="small" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="comment" maxlength="1000" show-word-limit resize="none"