最新
vue3将一个全局脚本添加在index.html中，在vue3页面中直接使用
如果你想将一段js脚本代码写入 Vue 项目的index.html文件中，并在 Vue 页面中使用，你需要将该脚本写入 <script> 标签内，同时，将结果放在全局对象上，例如 window 对象，因为 index.html 中的全局脚本和 Vue 组件文件的模块作用域是隔离的。 举个例子： 下面是一段随机生成二级域名的代码,先随机取出一个主域名，然后再根据
发布于 2024-5-7 下午2:30 阅读数 574
vue3+axios+useAxios多接口域名检测和加解密(AES)网络请求封装
需要实现的功能 vue3+axios+useAxios网络请求封装 主域名返回多个接口域名，循环检测接口域名，状态码为200，即该域名可以用 解密后端返回的加密的数据 实现代码 简单的vue3+axios+useAxios网络请求封装 //useAxiosApi.ts import { useAxios } from '@vueuse/integrations/useAxios' // 导入VueUse库中的useAxios函数 import a
发布于 2024-4-19 下午10:42 阅读数 705
用nuxt3官方提供的nuxt-icon插件来引入iconify的海量图标
旧的引用方式 这里我们不用ant蚂蚁框架的图标，我们从iconify从导入图标。 iconify图标是一种矢量图标格式，它可以以小尺寸的形式显示在各种设备上，如移动设备、桌面应用程序和网页。iconify图标可以缩放到任何尺寸而不失真，并且可以通过CSS或JavaScript进行动态更改。Iconify图标还支持多种颜色和主题，使其适合各种不同的设计需
发布于 2024-4-14 下午10:0 阅读数 726
vue3 + Nuxt3 使用AutoAnimate可以快速添加动画
AutoAnimate是什么？ 这是FormKit提供的一个动画库。只要安装了这个库，你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS，但在本文中，我将介绍如何在Vue中使用它。 官方文档： https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着，在nuxt.con
发布于 2024-3-17 下午9:30 阅读数 1125
antdv上传图片前压缩图片
在使用 Ant Design 的上传组件时，如果需要在上传前对图片进行压缩，可以使用一些 JavaScript 库来实现。一个常用的库是 compressorjs，它可以在客户端对图片进行压缩。 以下是一个简单的使用示例： 首先，确保你的项目中已经安装了 compressorjs 库。你可以通过 npm 安装： yarn add compressorjs 然后，使用以下代码示例在上传前压
发布于 2023-12-9 下午3:31 阅读数 1119
vue3添加百度统计的几种方式
申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，下面有几种方式。 把统计代码插入到index.html入口文件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial
发布于 2023-11-7 下午2:11 阅读数 3113
vue3 使用window.scrollTop回到页面顶部
如果你想在当前页面切换tab时将页面滚动到顶部，你可以使用window.scrollTo方法来实现。以下是一个示例代码： import { ref, watchEffect } from 'vue'; export default { setup() { const tab = ref(1); // 当前选中的tab，默认为1 watchEffect(() => { // 监听tab的变化 if (tab.value === 2) { // 如果切换到tab 2，将页面
发布于 2023-10-30 上午11:57 阅读数 5578
vue3路由跳转传多个参数
在Vue 3中，你可以使用对象的方式传递多个参数给router.push()方法。以下是一个示例代码： import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeParams = () => { // 获取当前路径的参数 const id = route.query.id; const
发布于 2023-10-30 上午11:45 阅读数 4951
vue3使用js-cookie，设置过期时间为分钟
在Vue 3中使用Cookie的过程类似于在Vue 2中使用。你可以使用第三方库来管理Cookie，例如js-cookie。以下是在Vue 3中使用js-cookie的简单步骤： 用法 安装js-cookie库： 在你的Vue 3项目中，可以使用npm或yarn来安装js-cookie： 使用npm： npm install js-cookie 使用yarn： yarn add js-cookie 导入并使用js-cookie： 在你的Vue组件中
发布于 2023-9-3 下午1:42 阅读数 14928
Vue3实现双色球开奖走势图并连线
效果 我们先来看一下要实现的效果： 原理 渲染页面的时候把需要连线的点加上“标记”类名，然后再把这些带有标记的元素用线段连接起来。 数据 const data = ref([ { p: '2023-01', list: [ { num: 10, active: 0 }, { num: 2, active: 0 }, { num: 14, active: 1 }, { num: 33, active: 0 }, { num: 11, active: 0 }, { num: 14,
发布于 2023-8-5 中午12:32 阅读数 9314
Vue3+echarts常用属性总结之折线图
Vue3中使用echarts 要在Vue 3中使用echarts图表库，你需要按照以下步骤进行操作： 安装echarts库。在终端中运行以下命令： npm install echarts 在需要使用echarts的组件中，引入echarts库： import * as echarts from 'echarts'; 创建一个容器元素用于展示echarts图表。可以在模板中添加一个<div>元素，并为其设置一个唯一的
发布于 2023-8-2 下午5:44 阅读数 7940
Vue3 x Vite修改端口和设置显示IP网络
Vue3 x Vite修改端口和设置显示IP网络 修改端口 项目的运行之后，默认的端口是5173，现在我们来改一下端口号 打开vite.config.js文件： export default defineConfig({ server: { port: 3000 }, }); 启动后地址就变成： http://localhost:3000/ 设置显示IP网络 在server对象中添加host属性，并指定要显示的IP地址。 例如，使用 0.0
发布于 2023-8-1 下午11:23 阅读数 4172
Vue3 避免直接引用对象/数组 props
props 在Vue3中，当将对象或数组props作为子组件传递时，无法更改对象或数组本身，但可以更改对象或数组的嵌套属性。 当传递单个值作为 props 时 如果将单个值作为 props 传递，则更改子组件中的 props 值将不会反映父组件中的更改。这是因为 props 是单值的，因此子组件中的更改将被视为与局部变量的更改相同。 <script setup l
发布于 2023-8-1 下午11:21 阅读数 957
Vue3+vite引入阿里图标的三种方式
引入阿里图标 下载图标代码 将解压包放在asset下 我们只需要一下几个文件即可： ├── font ├── iconfont.css ├── iconfont.json （font-class用法） ├── iconfont.js （symbol用法） ├── iconfont.ttf ├── iconfont.woff └── iconfont.woff2 unicode 格式 全局引入图标 在main.js里引入图标样式 import './assets/font/iconfont.c
发布于 2023-7-18 下午6:48 阅读数 1483
Vue 3 中的 Ref() 和 Reactive() — 该如何选择？
Composition API 中的 Ref 和 Reactive Composition API 提供了两种方法来将响应式状态引入到组件中。因此，你需要决定是否使用 ref、reactive 或者两者都使用。我将帮助你做出正确的选择，但让我们先快速了解一下它们。 快速介绍 Ref() 和 reactive() 用于跟踪其参数的更改。当你使用它们来初始化变量时，你向 Vue 提供了信息：“每
发布于 2023-6-18 下午10:29 阅读数 810
