RequesToGod的博客

初始化loading，cv微调样式即可，原理自行研究。

NaiveUI很多组件虽然需要手动操作，但根据个人体验，认为该UI库性能方面的确比较时髦，无愧于新生代的UI组件库。单独新建Message.vue组件,将message挂载在window。同时需要在xxx.d.ts中添加window相关声明types>global.d.tsdeclare global是为了在全局命名空间做声明，比如为对象增加一个未定义的属性。在App.vue入口文件中进行挂载。实际项目中的使用通过 window.$message.提示类型即可在全局使用。...

Vue企业微信扫码登录案例

微前端ice-stark框架下，子应用基础架构改造配置。

一个插件可以让你导入Markdown文件作为各种格式的vite项目。复制GitHub Markdown风格main.js引入vite.config.ts配置vite.config.js中配置vite-plugin-markdown插件封装MorkDown组件创建doc展示页面创建展示文档页面路由页面效果...

基于Vue3框架开发，使用web component对组件封装，打破组件库无法跨技术栈的制约。

为什么要使用PiniaPinia是Vue的一个存储库，它允许你跨组件/页面共享状态。 如果你熟悉Composition API，你可能会认为你已经可以通过一个简单的导出const state = reactive({})来共享一个全局状态。 这对于单页应用程序是正确的，但如果是服务器端呈现，则会暴露应用程序的安全漏洞。 但即使是在小的单页应用程序中，你也可以通过使用Pinia获得很多:热模块替换修改存储而无需重新加载页面在开发过程中保持任何现有状态使用插件扩展Pinia功能为JS用户提供正确.

Vue版本3.x插槽使用记录匿名插槽命名<template> <div class="titleModel"> <div class="titleArea"> <span class="titlelabel"></span> <span class="title_Main">{{ props.titleName }}</span> </div> <!-

Echarts设置宽高，图表仍展示不全问题问题示例如下：代码设置的宽度为100%父元素的宽，而打开F12会发现图表容器的宽高是100px。出现该问题的原因：1、高度固定，宽度百分比2、以Vue为例，图表中用到v-show等会引起页面重绘的指令，数据更新了但图表未更新。解决方案：1、重新调用图表绘制函数。2、调用Echats实例的resize()方法。...

记录一个Vue3.x版本在使用KeepAlive缓存时的页面问题。问题一：使用KeepAlive缓存公共组件切换页面时发生错乱错误正常问题二:KeepAlive缓存页面，同一子路由参数不同下切换页面，页面内容发生错乱以上两个问题解决方式：在给RouterView添加key值即可： <router-view :key="route.fullPath" include="Tabletitle"> </router-view>Vue3.x+Rout

引入 EChartsimport * as echarts from 'echarts';规定Type类型type EChartsOption = echarts.EChartsOption;const barChart = ref<any>(null);//实例化Dom对象let barChartSeries: any;初始化图表// 图表初始化onMounted(() => { if (barChart.value) { nextTick(() =&gt

在使用Echarts过程中，在Echarts中事件发生时，如何回调处理？在文档中的配置项手册中的Action可以找到相应的事件触发[]链接地址以Vue3+Echarts5.x为例在点击右侧Legend时，回调可以拿到相应的数据，从而可以与Echarts以外的DOM事件进行联动抛发。onMounted(() => { if (pieChart.value) { nextTick(() => { fiveLevelPieSeries = echarts.init

安装环境1.node版本12以上创建项目npm init @vitejs/app + 项目名1、配置路由router-index.tsnpm install vue-router@4 --saveimport { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";const routes: Array<RouteRecordRaw> = [ { path: "/", name:

eval函数作用：eval()函数会将传入的字符串当做JavaScript代码进行执行。const evilFn = (fn) => { let Fn = Function; // 一个变量指向Function，防止有些前端编译工具报错 return new Fn(`return ${fn}`)();};

创建Store-Vuex4.xstore—>modules—>user.tsimport { Module } from 'vuex';interface StoreUser { accountName: string;}const userModule = { namespaced: true, state() { const a = localStorage.getItem('accountName'); return { accountN

目录strokeStylefillRectclearRectmoveToverify.vuestrokeStylestrokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。fillRectfillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。传入四个参数,前两位-x,y坐标,后两位-矩形宽高.clearRectclearRect() 方法清空给定矩形内的指定像素。可用于清空画布,多个验证码带有透明度的情况下,可能会发生重叠moveTomoveTo(x,y); 移动至

目录父组件方法一：defineComponent方法二：setup语法糖小伙伴们在开箱Vue3的过程中一点会踩到不少坑。比如很多小伙伴想要通过ref来操纵DOM，可偏偏翻车。这里分享两个常用的方法，使用以下两个例子为例。父组件<template> <child ref="childRef"></child></template><script setup>import { ref } from "vue";// 引入子组件im