{site_name}

{site_name}

🌜 搜索

Vant是一个基于Vue.js的移动端UI组件库,在Vant 4.0版本中进行了

前端 𝄐 0
vant版本,vant36.5,vant dialog,vant下载,vant vue3.0,vant android
Vant是一个基于Vue.js的移动端UI组件库,在Vant 4.0版本中进行了一些重大更新和改进,主要包括以下方面:

1. 改进的Tree组件:Tree树形组件现在支持异步加载,同时还添加了数据透传功能,使得组件更加灵活。

示例代码:

vue
<van-tree :items="items" :load-child-nodes="loadChildNodes">
<template #item="{ node, data }">
{{ data.name }}
</template>
</van-tree>

<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Node 1' },
{ id: 2, name: 'Node 2', children: [] },
{ id: 3, name: 'Node 3' },
],
};
},

methods: {
async loadChildNodes(node) {
const { id } = node;
const res = await fetch(/api/nodes/${id});
const data = await res.json();
return data.children;
},
},
};
</script>


2. 新增的Calendar组件:Calendar日历组件新增了日期范围选择功能、周起始日配置、自定义日期渲染等功能。

示例代码:

vue
<van-calendar :min-date="minDate" :max-date="maxDate" :default-date="defaultDate" range />


3. 提升的Lazyload组件:Lazyload懒加载组件优化了性能和可用性,现在支持图片预加载、错误占位图、占位符等功能。

示例代码:

vue
<van-lazyload>
<img v-for="src in imgList" :key="src" :src="src">
</van-lazyload>


总之,Vant 4.0版本带来了许多更新和改进,使得组件库更加丰富、功能更加完善、使用更加便捷。