更新记录

1.0.2（2021-10-05）

1、新增 Button 按钮,Cell 单元格,Icon 图标,Image 图片,Layout 布局,Toast 提示,Checkbox 复选框,DatetimePicker 时间选择,Field 输入框,Picker 选择器,Radio 单选框,Rate 评分,Search 搜索框,Loading 加载 2、原有组件优化

1.0.1（2021-07-12）

vant 多端适配版本发布，支持 日期选择、弹出、动画组件，其他组件正在测试中，会尽快发布。

平台兼容性

介绍

uni-app 社区内，只有对 vant 单端兼容的版本，vantPro 由此而发布。为了更好的适配开发者的开发习惯，拥抱庞大的开发社区和生态。 vantPro 多端适配版本发布，现支持 日期选择、弹出、动画组件。

文档

文档地址：http://vantpro.com

使用

在使用此组件前，假设您已经安装了 scss 依赖，hx 版本 版本为3.0以上，支持 easycom 规则 引入组件。

1. main.js 引入

import vantPro from 'vant-pro' 
Vue.use(vantPro)

2. App.vue 引入 样式。

<style>
    /*每个页面公共css */
    @import '@/vant-pro/index.css';
</style>

3. uni.scss引入全局scss文件

@import '@/vant-pro/theme.scss';

4. pages.json 依据 easycom 规则 全局引入 组件

    "easycom": {
        "autoscan": true,
        "custom": {
            "^van-(.*)": "@/vant-pro/components/van-$1/van-$1.vue"
        }
    }

示例

如不出意外的话，引入后您将直接在页面中 使用组件即可，例子如下：

<template>
    <view>
        <button  @click="calendarShow = true" >选择日期区间</button>
        <van-calendar v-model="calendarShow" @confirm="onConfirm" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            calendarShow: false
        };
    },
    onLoad() {},
    methods: {
        /**
         * 选择日期回调
         * @param {Object} result
         */
        onConfirm(result){
            // 解析结果
            console.log(result.map(el => this.$u.cUtil.dateFormate(el, 'yyyy-MM-dd')));
            // 关闭组件
            this.calendarShow = false;
        }
    }
};
</script>
......

鸣谢

vant(opens new window) 官方提供的基础组件 uView(opens new window) 多平台快速开发的UI框架

版权信息

遵循MIT开源协议，全面拥抱开源。