vue项目中使用vant轮播图组件(桌面端)

一. 内容简介

vue使用vant轮播图组件(桌面端)

二. 软件环境

2.1 Visual Studio Code 1.75.0

2.2 chrome浏览器

2.3 node v18.14.0

三.主要流程

3.1 安装环境

3.2 添加代码

3.3 结果展示

四.具体步骤

4.1 安装环境

先安装包

# Vue 3 项目,安装最新版 Vant
npm i vant# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2

然后桌面端适配

npm i @vant/touch-emulator -S

4.2 添加代码

注册组件
相比于官方给的代码,有两个方面需要注意,一个是适配桌面端,还有一个就是我以为vant组件是和vue组件一样,导入一个就包含所有的结构了,其实vant组件import导入的时候并没有导入css样式,就会出现这样,就是样式不全。
在这里插入图片描述

<template><div id="cc"><van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"><van-swipe-item>1</van-swipe-item><van-swipe-item>2</van-swipe-item><van-swipe-item>3</van-swipe-item></van-swipe></div>
</template><script>
import { Swipe, SwipeItem } from "vant";
// 为了适配桌面端
import "@vant/touch-emulator";
export default {data() {return {};},components: { [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem },
};
</script><style>
// 导入样式
@import "vant/lib/index.css";
#cc {width: 100%;clip: auto;
}
.van-swipe-item {width: 100%;color: #fff;font-size: 20px;line-height: 150px;text-align: center;background-color: #39a9ed;
}
</style>

4.3 结果展示

在这里插入图片描述

五. 参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/147559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

获取虎牙直播源

为了今天得LOL总决赛 然后想着下午看看 但是网页看占用高 就想起来有个直播源 也不复杂看了大概一个小时 没啥问题 进入虎牙页面只有 直接F12 网络 然后 看这个长条 一直在获取 发送 那就选中这个区间 找到都是数字这一条 如果直接访问的话会一直下载 我这都取消了 然后 打开…

Java刷题基本语法

1. 值相等比较 char比较&#xff1a;&#xff0c;因为char是基本类型 String比较&#xff1a; a.equals保险 b.如果是常量&#xff0c;可以 2. char[] 和 String相互转换 a. char[] > String 可不能用toString()方法啊&#xff0c;必须要用String.valueOf(char[]) b.…

PostgreSQL创建分区表,并插入大量数据

创建分区表&#xff0c;按日期范围分区 CREATE TABLE sales (id serial,sale_date DATE, amount NUMERIC, PRIMARY KEY(id, sale_date) ) PARTITION BY RANGE (sale_date); 创建分区 CREATE TABLE sales_2019 PARTITION OF sales FOR VALUES FROM (2019-0…

C#数组:一维数组,二维数组、交错数组、数组复制

在C#中&#xff0c;数组是一种用于存储相同类型元素的数据结构。数组提供了一种有序、索引访问的方式&#xff0c;使得可以通过索引快速访问和修改数组中的元素。在C#中&#xff0c;主要有一维数组和二维数组两种类型。 一维数组&#xff08;Single-Dimensional Array&#xf…

关于新版的Maven创建Maven项目的时候只有Maven Archetype,而找不到Maven的这个问题

问题情况 : 在最近的学习过程中&#xff0c;想要创建一个Maven模块用于分块设计&#xff0c;但是在idea里面创建Maven项目的时候&#xff0c;发现与maven相关的只有Maven Archetype这个模块&#xff0c;然后找不到单纯的Maven模块&#xff1b;就像下面这样 : 解决方案 : 其…

大数据Doris(二十五):数据导入演示和其他导入案例

文章目录 数据导入演示和其他导入案例 一、数据导入演示

设计模式 - 六大设计原则(1)

六大设计原则 1、单一职责原则 特点&#xff1a; 类和方法属性等&#xff0c;都应当遵守单一职责。尽可能保持统一性&#xff0c;单一性。 含义&#xff1a; &#xff08;1&#xff09;统一性&#xff0c;定义一个模块就必须要符合所有对象的行为特征。比如声明一个 Animal 类…

【每日一题】—— C. Yarik and Array(Codeforces Round 909 (Div. 3))(贪心)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

【STM32】RTC(实时时钟)

1.RTC简介 本质&#xff1a;计数器 RTC中断是外部中断&#xff08;EXTI&#xff09; 当VDD掉电的时候&#xff0c;Vbat可以通过电源--->实时计时 STM32的RTC外设&#xff08;Real Time Clock&#xff09;&#xff0c;实质是一个 掉电 后还继续运行的定时器。从定时器的角度…

科技创新 共铸典范 | 江西卫健办邓敏、飞图影像董事长洪诗诗一行到访拓世科技集团,提振公共卫生事业发展

2023年11月15日&#xff0c;拓世科技集团总部迎来了江西省卫健项目办项目负责人邓敏、江西飞图影像科技有限公司董事长洪诗诗一行的考察参观&#xff0c;集团董事长李火亮、集团高级副总裁方高强进行热情接待。此次多方交流&#xff0c;旨在共同探讨携手合作&#xff0c;激发科…

2023年11月12日阿里云产品全面故障的启示

2023年11月12日&#xff0c;阿里云产品因为某些故障&#xff0c;全线都受到影响。是的&#xff0c;双十一的第二天&#xff0c;我的购物车还没清空&#xff0c;阿里云就不让我买了。云产品全面故障&#xff0c;影响之大一个大铁锅都装不下。之所以阿里云故障受到大家这么关注&a…

ClickHouse建表优化

1. 数据类型 1.1 时间字段的类型 建表时能用数值型或日期时间型表示的字段就不要用字符串&#xff0c;全String类型在以Hive为中心的数仓建设中常见&#xff0c;但ClickHouse环境不应受此影响。 虽然ClickHouse底层将DateTime存储为时间戳Long类型&#xff0c;但不建议存储Long…

【Java】ArrayList和LinkedList使用不当,性能差距会如此之大!

文章目录 前言源码分析ArrayList基本属性初始化新增元素删除元素遍历元素 LinkedList实现类基本属性节点查询新增元素删除元素遍历元素 分析测试 前言 在面试的时候&#xff0c;经常会被问到几个问题&#xff1a; ArrayList和LinkedList的区别&#xff0c;相信大部分朋友都能回…

自动化网络图软件

由于 IT 系统的发展、最近向混合劳动力的转变、不断变化的客户需求以及其他原因&#xff0c;网络监控变得更加复杂。IT 管理员需要毫不费力地可视化整个网络基础设施&#xff0c;通过获得对网络的可见性&#xff0c;可以轻松发现模式、主动排除故障、确保关键设备可用性等。 为…

SEnet注意力机制(逐行代码注释讲解)

目录 ⒈结构图 ⒉机制流程讲解 ⒊源码&#xff08;pytorch框架实现&#xff09;及逐行解释 ⒋测试结果 ⒈结构图 左边是我自绘的&#xff0c;右下角是官方论文的。 ⒉机制流程讲解 通道注意力机制的思想是&#xff0c;对于输入进来的特征层&#xff0c;我们在每一个通道学…

阿里云+宝塔部署项目(Java+React)

阿里云服务器宝塔面板部署项目&#xff08;SpringBoot React&#xff09; 1. 上传所需的文件到服务器 比如jdk包和java项目的jar&#xff1a;这里以上传jar 为例&#xff0c;创建文件夹&#xff0c;上传文件&#xff1b; 在创建的文件夹下上传jar包 上传jdk 2. 配置jdk环境 3.…

OpenAI 解雇了首席执行官 Sam Altman

Sam Altman 已被 OpenAI 解雇&#xff0c;原因是担心他与董事会的沟通和透明度&#xff0c;可能会影响公司的发展。该公司首席技术官 Mira Murati 将担任临时首席执行官&#xff0c;但 OpenAI 可能会从科技行业寻找新的首席执行官来领导未来的产品开发。Altman 的解雇给 OpenAI…

实验(二):存储器实验

一、实验内容与目的 实验要求&#xff1a; 利用 CP226 实验仪上的 K16..K23 开关做为 DBUS 的数据&#xff0c;其它开关做为控制信号&#xff0c;实现主存储器 EM 的读写操作&#xff1b;利用 CP226 实验仪上的小键盘将程序输入主存储器 EM&#xff0c;实现程序的自动运行。 实…

Gem5模拟器学习之旅——翻译自官网

文章目录 安装并使用gem5 模拟器支持的操作系统和环境依赖在 Ubuntu 22.04 启动(gem5 > v21.1)Docker获取代码用 SCons 构建用法首次构建 gem5gem5 二进制类型调试opt快速 常见错误错误的 gcc 版本Python 位于非默认位置未安装 M4 宏处理器Protobuf 3.12.3 问题 安装并使用g…

如何零基础自学AI人工智能

随着人工智能&#xff08;AI&#xff09;的快速发展&#xff0c;越来越多的有志之士被其强大的潜力所吸引&#xff0c;希望投身其中。然而&#xff0c;对于许多零基础的人来说&#xff0c;如何入门AI成了一个难题。本文将为你提供一份详尽的自学AI人工智能的攻略&#xff0c;帮…