在h5中使用vant组件 (vue3.x+vant3开发)

最新推荐文章于 2024-05-17 03:57:31 发布

if时光重来

最新推荐文章于 2024-05-17 03:57:31 发布

阅读量3.7k

点赞数

分类专栏： html js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/admin_web/article/details/121794828

版权

js 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

html

24 篇文章 0 订阅

订阅专栏

vant官方文档：https://vant-contrib.oschina.io/vant/v3/#/zh-CN/home

1.需要用到的文件

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

2.在h5中使用

用到的组件标签全部放在#app下

<div id="app">
	// 需要使用的标签
</div>

创建vue

const appHtml = {
        data(){
            return {
                
            }
        },
        methods: {
            
        },
        mounted() {
            
        },
    }
    // 创建
    const app=Vue.createApp(appHtml);
    app.mount('#app');

引入vant组件

app.use(vant);

引入需要使用的vant组件，引入的组件必须加上vant.，如：需要使用vant中的button组件，app.use(vant.Button)
vant组件的使用(演示如何引入使用轮播组件)

有些组件的标签引入时，必须得把单标签设置成双标签,如：

在使用宫格布局时，官方文档的标签是：
<van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>

在h5中使用必须把   
<van-grid-item icon="photo-o" text="文字" />
改变为  
<van-grid-item icon="photo-o" text="文字" > </van-grid-item>
否则下面的标签都将不显示

(1) 引入注册组件 app.use(vant.Swipe)
在这里插入图片描述
(2) 引入标签

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" >
</head>
<body>

<div id="app">
    <van-nav-bar title="标题"></van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
        </van-swipe-item>
    </van-swipe>
    <!-- 宫格布局 -->
    <div class="grid" style="margin-top: 15px;">
        <van-grid :column-num="3">
            <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字"></van-grid-item>
        </van-grid>
    </div>

    <!-- 空状态 -->
    <van-empty description="描述文字"></van-empty>

    <!-- button按钮 -->
    <van-button type="primary" is-link url="binding.html">标签上添加跳转1</van-button>
    <van-button type="primary" @click="toUrl" >点击跳转</van-button>
    
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
<script>
    const appHtml = {
        data(){
            return {
                images: [
                    'https://img.yzcdn.cn/vant/apple-1.jpg',
                    'https://img.yzcdn.cn/vant/apple-2.jpg',
                ]
            }
        },
        methods: {
            toUrl(){
                console.log('页面跳转');
                window.location.href="info.html"
            }
        },
        mounted() {
            
        },
    }
    // 创建
    const app=Vue.createApp(appHtml)
    // 引入vant组件
    app.use(vant);
    // 自动注册 Lazyload 组件
    app.use(vant.Lazyload);

    // 引入button
    app.use(vant.Button);
    // 引入宫格布局
    app.use(vant.Grid);
    app.use(vant.GridItem);
    // 空状态
    app.use(vant.Empty);

    app.mount('#app');

</script>
<style>
    /* 定义轮播图 */
    img{
        width: 100%;
        height: 260px;
    }
</style>
</body>
</html>

if时光重来

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
在h5中使用vant组件 (vue3.x+vant3开发)

vant官方文档：https://vant-contrib.oschina.io/vant/v3/#/zh-CN/home1.需要用到的文件<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/><script src="https://cdn.
复制链接

扫一扫

专栏目录