docs: add unplugin-vue-components tip (#11251)

* fix(Skeleton): incorrect export component name

* chore: fix name

packages/vant/docs/markdown/quickstart.en-US.md

@@ -213,6 +213,11 @@ import 'vant/es/image-preview/style';
 
 > Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
 
+#### Tips
+
+- "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
+- unplugin-vue-components is not officially maintained by Vant. If you encounter issues when using this plugin, please feedback to [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) repository.
+
 ## With Frameworks
 
 ### Use Vant in Nuxt 3

packages/vant/docs/markdown/quickstart.zh-CN.md

@@ -218,7 +218,10 @@ import 'vant/es/image-preview/style';
 
 你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
 
-> 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。
+#### 使用提示
+
+- 请避免同时使用「全量引入」和「按需引入」这两种引入方式，否则会导致代码重复、样式错乱等问题。
+- unplugin-vue-components 并不是 Vant 官方维护的插件，如果在使用过程中遇到问题，建议优先到 [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 仓库下反馈。
 
 ## 在框架中使用
 

packages/vant/src/date-picker/DatePicker.tsx

@@ -128,9 +128,12 @@ export default defineComponent({
           case 'day':
             return genDayOptions();
           default:
-            throw new Error(
-              `[Vant] DatePicker: unsupported columns type: ${type}`
-            );
+            if (process.env.NODE_ENV !== 'production') {
+              throw new Error(
+                `[Vant] DatePicker: unsupported columns type: ${type}`
+              );
+            }
+            return [];
         }
       })
     );

packages/vant/src/image-preview/ImagePreviewItem.tsx

@@ -195,6 +195,8 @@ export default defineComponent({
 
       const { offsetX, offsetY } = touch;
       const deltaTime = Date.now() - touchStartTime;
+
+      // Same as the default value of iOS double tap timeout
       const TAP_TIME = 250;
       const TAP_OFFSET = 5;
 

packages/vant/src/picker/PickerColumn.tsx

@@ -97,8 +97,10 @@ export default defineComponent({
       currentOffset.value = offset;
     };
 
+    const isReadonly = () => props.readonly || !props.options.length;
+
     const onClickOption = (index: number) => {
-      if (moving || props.readonly) {
+      if (moving || isReadonly()) {
         return;
       }
 
@@ -134,7 +136,7 @@ export default defineComponent({
     };
 
     const onTouchStart = (event: TouchEvent) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
 
@@ -153,7 +155,7 @@ export default defineComponent({
     };
 
     const onTouchMove = (event: TouchEvent) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
 
@@ -178,7 +180,7 @@ export default defineComponent({
     };
 
     const onTouchEnd = () => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
 

packages/vant/src/skeleton/demo/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import VanSkeleton, { VanSkeletonParagraph, VanSkeletonImage } from '..';
+import VanSkeleton, {
+  SkeletonImage as VanSkeletonImage,
+  SkeletonParagraph as VanSkeletonParagraph,
+} from '..';
 import VanSwitch from '../../switch';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';

packages/vant/src/skeleton/index.ts

@@ -6,10 +6,10 @@ import _SkeletonParagraph from './SkeletonParagraph';
 
 import { withInstall } from '../utils';
 
-export const VanSkeletonImage = withInstall(_SkeletonImage);
-export const VanSkeletonTitle = withInstall(_SkeletonTitle);
-export const VanSkeletonAvatar = withInstall(_SkeletonAvatar);
-export const VanSkeletonParagraph = withInstall(_SkeletonParagraph);
+export const SkeletonImage = withInstall(_SkeletonImage);
+export const SkeletonTitle = withInstall(_SkeletonTitle);
+export const SkeletonAvatar = withInstall(_SkeletonAvatar);
+export const SkeletonParagraph = withInstall(_SkeletonParagraph);
 export const Skeleton = withInstall(_Skeleton);
 
 export default Skeleton;
@@ -43,9 +43,9 @@ export type {
 declare module 'vue' {
   export interface GlobalComponents {
     VanSkeleton: typeof Skeleton;
-    VanSkeletonImage: typeof VanSkeletonImage;
-    VanSkeletonTitle: typeof VanSkeletonTitle;
-    VanSkeletonAvatar: typeof VanSkeletonAvatar;
-    VanSkeletonParagraph: typeof VanSkeletonParagraph;
+    VanSkeletonImage: typeof SkeletonImage;
+    VanSkeletonTitle: typeof SkeletonTitle;
+    VanSkeletonAvatar: typeof SkeletonAvatar;
+    VanSkeletonParagraph: typeof SkeletonParagraph;
   }
 }

packages/vant/src/skeleton/test/index.spec.tsx

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import { Skeleton, VanSkeletonImage } from '..';
+import { Skeleton, SkeletonImage } from '..';
 
 test('should render with row width array correctly', () => {
   const wrapper = mount(Skeleton, {
@@ -80,13 +80,13 @@ test('should allow to disable animation', async () => {
 });
 
 test('should skeleton image render correctly', () => {
-  const wrapper = mount(VanSkeletonImage);
+  const wrapper = mount(SkeletonImage);
 
   expect(wrapper.html()).toMatchSnapshot();
 });
 
 test('should skeleton image works with imageSize prop', () => {
-  const wrapper = mount(VanSkeletonImage, {
+  const wrapper = mount(SkeletonImage, {
     props: {
       imageSize: '20rem',
     },
@@ -98,7 +98,7 @@ test('should skeleton image works with imageSize prop', () => {
 });
 
 test('should skeleton image works with imageShape prop', () => {
-  const wrapper = mount(VanSkeletonImage, {
+  const wrapper = mount(SkeletonImage, {
     props: {
       imageShape: 'round',
     },

packages/vant/src/time-picker/TimePicker.tsx

@@ -83,9 +83,12 @@ export default defineComponent({
               filter
             );
           default:
-            throw new Error(
-              `[Vant] DatePicker: unsupported columns type: ${type}`
-            );
+            if (process.env.NODE_ENV !== 'production') {
+              throw new Error(
+                `[Vant] DatePicker: unsupported columns type: ${type}`
+              );
+            }
+            return [];
         }
       })
     );