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

vant官方文档：https://vant-contrib.oschina.io/vant/v3/#/zh-CN/home1.需要用到的文件<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/><!-- 引入 Vue 和 Vant

if时光重来

4083人浏览 · 2021-12-08 16:58:00

if时光重来 · 2021-12-08 16:58:00 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^