首页
最新

antdv上传图片前压缩图片

在使用 Ant Design 的上传组件时,如果需要在上传前对图片进行压缩,可以使用一些 JavaScript 库来实现。一个常用的库是 compressorjs,它可以在客户端对图片进行压缩。 以下是一个简单的使用示例: 首先,确保你的项目中已经安装了 compressorjs 库。你可以通过 npm 安装: yarn add compressorjs 然后,使用以下代码示例在上传前压
发布于 2023-12-9 下午3:31 阅读数 557

Nuxt3 – 使用navigateTo更改URL查询并使用watch进行监控

<script lang="ts" setup> const route = useRoute() watch( () => route.query, () => { console.log(route['query']) } ) function move() { navigateTo({ name: 'example', query: { foo: 'bar' }, }) } </script> <template> <button @click="move">move</button> </template&g
发布于 2023-11-7 下午2:13 阅读数 2218

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 阅读数 2105

Vue3设置动态head插件unhead的使用,支持title、meta、js等

如果我们想要在vue3的单页面上引入js,或者设置title和meta,我们可以使用unhead插件。 unhead插件文档:https://unhead.unjs.io/setup/vue/installation 安装 yarn add @unhead/vue //或者 npm install @unhead/vue //或者 pnpm add @unhead/vue 挂在 vue3 import { createApp } from 'vue' import { createHead } from '@unhe
发布于 2023-11-6 下午7:4 阅读数 2451

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 阅读数 4504

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 阅读数 4224

vue3修改当前路由参数

以下是一个示例代码: import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeId = () => { // 获取当前路径的参数 const id = route.query.id; // 修改id的值 router.push({ path: '/corpus-detail', query: { id: 4 } });
发布于 2023-10-30 上午11:43 阅读数 3294

vue3实现多选标签(包括反选)

页面代码 <div class="table-hs-d" v-for="(item, index) in chooseList" :key="index"> <div class="m-code @click="selectTag(item.number)" > <span>{{ item.number }}</span> <div class="mask" :class="{ 'mask-show': isTags(item.number) }"> <van-icon class="sele-icon" color="
发布于 2023-10-26 中午12:1 阅读数 3546

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 阅读数 14412

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 阅读数 8845

Vue3+Echarts 常用属性总结之饼图

类型 饼图分有三种类型: 基础饼图 圆环图 (设置设置radius:radius: ['50%', '70%'],) 南丁格尔图(玫瑰图,设置roseType: 'area') 举一个简单的例子 <template> <div class="chart-container"> <div style="width: 100%; height: 400px" ref="chartRef" class="chart"></div> </div> </temp
发布于 2023-8-4 下午5:15 阅读数 8264

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 阅读数 6849

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 阅读数 3320

Vue3 避免直接引用对象/数组 props

props 在Vue3中,当将对象或数组props作为子组件传递时,无法更改对象或数组本身,但可以更改对象或数组的嵌套属性。 当传递单个值作为 props 时 如果将单个值作为 props 传递,则更改子组件中的 props 值将不会反映父组件中的更改。这是因为 props 是单值的,因此子组件中的更改将被视为与局部变量的更改相同。 <script setup l
发布于 2023-8-1 下午11:21 阅读数 512

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 阅读数 1032

Vue 3 中的 Ref() 和 Reactive() — 该如何选择?

Composition API 中的 Ref 和 Reactive Composition API 提供了两种方法来将响应式状态引入到组件中。因此,你需要决定是否使用 ref、reactive 或者两者都使用。我将帮助你做出正确的选择,但让我们先快速了解一下它们。 快速介绍 Ref() 和 reactive() 用于跟踪其参数的更改。当你使用它们来初始化变量时,你向 Vue 提供了信息:“每
发布于 2023-6-18 下午10:29 阅读数 456

在 Vue3 中使用 toRefs() 函数

在Vue 3中,toRefs()函数用于将响应式对象转换为普通对象,其中每个属性都是一个独立的响应式引用。这样做的好处是,可以在不影响响应式对象本身的情况下,将其传递给子组件或其他函数。 下面是一个使用toRefs()的示例: <template> <div> <p>Count: {{ count }}</p> <p>Message: {{ message }}<
发布于 2023-6-13 下午11:10 阅读数 3043

Vue 3 中的 Ref() 和 Reactive() — 该如何选择?

Composition API 中的 Ref 和 Reactive Composition API 提供了两种方法来将响应式状态引入到组件中。因此,你需要决定是否使用 ref、reactive 或者两者都使用。我将帮助你做出正确的选择,但让我们先快速了解一下它们。 快速介绍 Ref() 和 reactive() 用于跟踪其参数的更改。当你使用它们来初始化变量时,你向 Vue 提供了信息:“每
发布于 2023-6-11 下午10:40 阅读数 2004

Vue3.2 style标签内可绑定变量和v-deep的使用

从 Vue.js3.2 开始,可以将 JavaScript 变量绑定为 CSS 变量。这意味着可以动态设置 CSS 值。 如下面的例子: <script setup lang="ts"> const color = ref('#000000') </script> <template> <div> <h1 class="title">选取颜色</h1> <input type="color" v-model="color" /> </di
发布于 2023-6-11 下午10:25 阅读数 1376

Vue3判断/监控是否在线

回顾JavaScript中的在线判断 navigator.online navigator.online可以检查用户当前是否在线。如果在线为true,离线为false。 console.log(navigator.online) online事件/offline事件 navigator.online只是获取当前的在线状态。因此,不可能执行比如“上线时做某事”之类的监视过程。 所以我们可以使用在线和离线事件来监控在线状态。o
发布于 2023-6-9 下午10:32 阅读数 1466

Vue3使用 v-memo 指令优化渲染

概要 从 Vue 3.2 开始添加了v-memo指令,v-memo指令可以通过省略不必要的重新渲染来提高性能。 v-memo如果指定的所有值都与上次渲染的结果相同,该指令将跳过重新渲染整个子树。 如何使用v-memo 指令 如下图,重新渲染组件时,如果数组中指定的valueA和valueB与上次渲染的值相同,则跳过div下元素的重新渲染。 <div v-memo="[val
发布于 2023-6-8 下午10:1 阅读数 1199

使用 vue3 的新特性“teleport”创建一个modal

创建modal一个组件 我们可以在components目录下面创建一个名为:SampleModal.vue的组件。 <script setup lang="ts"> const props = defineProps({ isVisible:{ required:true, type:Boolean, default:false }, with:{ type:String, default:'450px' }, bgColor:{ type:String, default:'#ffffff' }, borderRadius:{ typ
发布于 2023-6-8 上午11:26 阅读数 1291

vue3+bpmnjs实现流程图

BPMNJS是一个用于在浏览器中渲染BPMN 2.0流程图的JavaScript库。在Vue 3项目中使用BPMNJS,可以按照以下步骤: 安装BPMNJS库 可以使用npm或yarn来安装BPMNJS库。在终端中输入以下命令: npm install bpmn-js --save 或者 yarn add bpmn-js 在Vue组件中引入BPMNJS 在Vue组件中引入BPMNJS,可以使用import语句来引入: import BpmnMo
发布于 2023-6-6 上午12:2 阅读数 2968

Vue3 将参数发送到路由而不将它们添加到url上

正常的路由跳转 路由文件 import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path:"/", name:"Home", component: () => import("../views/Home.vue"), }, { path:"/about", name:"About", component: ()
发布于 2023-6-5 下午11:49 阅读数 1836

Vue3+TypeScript+Vuetify3+Pinia实例

使用Vite创建一个项目 yarn create vite 输入项目名称 选择框架vue 选择TypeScript 进入项目,安装依赖 安装Vuetify3 在项目根目录下面,执行: vue add vuetify 选择预设→Vuetify 3 - Vite (preview) 解决main.ts 引入./App.vue爆红提示 在vite-env.d.ts中添加一下代码。 declare module "*.vue" { import { DefineComponent }
发布于 2023-6-3 下午10:48 阅读数 1392

vue3

文章: 49关注: 1点击: 6
推荐作者
取经之路,就在脚下。
暂无描述
码。摄影。艺术。
阿里巴巴-咸鱼技术团队
暂无描述