UI框架之Vant4

UI框架之Vant4

概述

Vant 是一个轻量、可定制的移动端组件库。

Vant3 框架适用于 Vue2，而 Vant4 框架则适用于 Vue3。

Vant4官网

安装框架

npm i vant@4

用法

完整导入框架

配置 main.js 文件：

import {createApp} from 'vue';
import './style.css';
import App from './App.vue';

// 完整引入Vant框架
import Vant from "vant";
import "vant/lib/index.css";

// 安装Vant框架
createApp(App).use(Vant).mount('#app');

基本使用

<script setup>
import {reactive} from 'vue';
import {showToast} from 'vant';

// 表单数据
const formData = reactive({
  username: '',
  phone: '',
  password: '',
  remark: ''
});

// 提交表单
const onSubmit = (values) => {
  console.log('表单数据：', values);
  // 这里可以添加您的提交逻辑，例如发送 API 请求
  showToast({
    type: 'success',
    message: '提交成功'
  });
};
</script>

<template>
  <div class="submit-form">
    <van-form @submit="onSubmit">
      <!-- 用户名输入 -->
      <van-cell-group inset>
        <!-- 用户名输入 -->
        <van-field
            v-model="formData.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"/>

        <!-- 手机号输入 -->
        <van-field
            v-model="formData.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
            { required: true, message: '请填写手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
          ]"/>

        <!-- 密码输入 -->
        <van-field
            v-model="formData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"/>

        <!-- 备注信息 -->
        <van-field
            v-model="formData.remark"
            name="remark"
            label="备注"
            type="textarea"
            placeholder="请输入备注信息"
            rows="2"
            maxlength="50"
            show-word-limit/>
      </van-cell-group>

      <!-- 提交按钮 -->
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>
.submit-form {
  padding: 16px 0;
}
</style>

效果：

按需导入

运行 npm run buile 命令，完整导入后打包生成文件：

按需导入步骤：

一、安装 unplugin-vue-components 插件：

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

二、配置 vite.config.js 文件：

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';

// 引入按需导入插件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {VantResolver} from '@vant/auto-import-resolver';

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [VantResolver()],
        }),
        Components({
            resolvers: [VantResolver()],
        }),
    ],
});

按需导入后打包生成的文件：

明显比完整导入小了很多。