随笔分类 - vue
前端框架
摘要:安装 npm install --save qrcode.vue or yarn add qrcode.vue 组件中使用 <script setup lang="ts"> import { useUiSetStore } from '@store/modules/uiSettings' //导入二
阅读全文
摘要:父组件中,子组件的加载一般是按照先后顺序加载的,子组件加载后才会加载父组件。 一个页面的子组件很多,由于会先加载子组件,那么父组件可能会出现比较长的白屏等待时间 大型项目,可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件Vue 提供defineAsyncComponent方法: imp
阅读全文
摘要:Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案 三大核心:state(存储的值),getters(计算属性),actions也可支持同步(改变值的方法,支持同步和异步) npm install pinia@next or yarn add pinia
阅读全文
摘要:最初使用的vue3-infinite-scroll-better插件进行滚动加载,打包部署后插件滚动功能失效了也不报错很难查找问题出现在哪个部分,只好自己写一个相对简单的功能 ### 主窗体滚动 使用的vueuse ```tsx import { useWindowScroll } from '@v
阅读全文
摘要:vue3实现搜索高亮 原文:Vue3文本高亮 - 掘金 (juejin.cn) 思路 将 input 的文本进行转义处理(eacapeReg函数),v-html 就不能相信用户的一切输入,并且需要匹配 ** . ( ) ***** 等等特殊字符; 根据正则匹配 input 文本,replace 写入
阅读全文
摘要:vue3区域滚动 从HTML属性区域内进行滚动 属性 | 属性 | 说明 | | | | | clientWidth | 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域。 | | clientWidth |
阅读全文
摘要:vue3-code-diff Vue2 / Vue3 可用的 code diff 插件 是 vue-code-diff 安装 # With NPM npm i v-code-diff # With Yarn yarn add v-code-diff 全局注册 import {createApp} f
阅读全文
摘要:vue3无限滚动插件 vue3-infinite-scroll-better 支持Vue3的滚动加载插件,所有用法和vue-infinite-scroll一致。并解决了一些bug。 安装 npm install vue3-infinite-scroll-better --save api | 参数
阅读全文
摘要:vue3选中后颜色赋值切换 html 定义html内容:class="sideIndex == index ? 'active' : ''" <div v-for="(res, index) in resData" :key="index" class="lside-list" :class="si
阅读全文
摘要:后端函数 /// <summary> /// 上传文件 /// </summary> /// <param name="files">文件流</param> /// <returns></returns> [HttpPost] public void FileSave(List < IFormFil
阅读全文
摘要:vue中使用Moment日期格式化 moment.js是一个JavaScript 日期处理类库。 由于用ant design日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换 Moment.js官网:http://momentjs.cn/ 安装插
阅读全文
摘要:net5配合vue3图片上传 FileSave函数 /// <summary> /// 上传文件 /// </summary> /// <param name="files">文件流</param> /// <returns></returns> [HttpPost] public void Fil
阅读全文
摘要:vue3+vite+ts搭建 vite初始化 使用 NPM: npm init @vitejs/app 使用 Yarn: yarn create @vitejs/app 选择模板 选择 vue-ts 或通过附加的命令行选项直接指定项目名和模板 # npm 6.x npm init @vitejs/a
阅读全文
摘要:# 使用unplugin-vue-components 开发应用程序时,我们通常会使用许多第三方组件库。然而,这些组件库通常包含大量的代码,而我们只需要其中的一小部分。这就导致了应用程序的体积变得非常大,加载时间变长。为了解决这个问题,我们可以使用unplugin-vue-components插件来
阅读全文
摘要:vite2 antd按需加载 main.ts import { createApp } from 'vue' import { setupAntd } from './antd-ui' import App from './App.vue' const app = createApp(App) se
阅读全文
摘要:[参考CSDN](https://blog.csdn.net/weixin_44717047/article/details/119846671?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~
阅读全文
摘要:# wp2vite 一个webpack转换vite2的工具 ### 安装 ``` npm install -g wp2vite or yarn global add wp2vite ``` ### 启动wp2vite 项目目录下启动wp2vite ```js // 执行wp2vite的命令行 wp2
阅读全文
摘要:vue3配置rem适配 postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem amfe-flexible 用于设置 rem 基准值 npm i postcss-pxtorem@5.1.1 使用 amfe-flexible 动态设置 REM 基准值(html 标签的字
阅读全文
摘要:vue3使用v-md-editor锚点 预览模式展示了如何在预览模式下通过外部锚点来定位到文档标题位置。 官网示例 https://ckang1229.gitee.io/vue-markdown-editor/zh/senior/anchor.html xxx.vue <template> <a-b
阅读全文
摘要:封装思路 index.ts 我们需要在src的根目录下创建一个axios文件夹,其中创建一个index.ts文件,这个文件主要用来封装axios的配置(实例化请求配置、请求拦截器、相应拦截器)及相应的方法(登录跳转、消息提示、错误处理等) base.ts 这个文件主要用于项目扩展的情况下 不同模块需
阅读全文