《Vant 移动端 Vue 组件库的使用》

295 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

@TOC

Vant 移动端 Vue 组件库的使用

轻量、可靠的移动端 Vue 组件库

案例demo

van-form Form 表单的使用

在这里插入图片描述

cell 单元格的使用

<van-form>
            <van-cell title="基本信息">
            <!--  #icon 原来定义左侧图标  -->
                <template #icon>
                    <van-icon name="search" class="search-icon" />
                </template>
            </van-cell>
        </van-form>

在这里插入图片描述

require 的使用

在这里插入图片描述

自定义 field #input 的使用

<template #input>
                    <van-radio-group v-model="form.sex" direction="horizontal">
                    <van-radio name="0">男</van-radio>
                    <van-radio name="1">女</van-radio>
                    </van-radio-group>
                </template>

van-field 的 input-align="center" 的使用 在这里插入图片描述 去除移动端 单击 按钮高亮的问题

在这里插入图片描述

编辑 babel.config.js --- 添加 UI库样式

在这里插入图片描述