``` ```javascript import { ref, onMounted } from 'vue'; import { useRect } from '@vant/use'; export default { setup() { const root = ref(); onMounted(() => { const rect = useRect(root); console.log(rect); // -> the size of an element and its position relative to the viewport }); return { root }; }, }; ``` -------------------------------- ### Code Examples Source: https://github.com/youzan/vant/blob/main/packages/vant/src/watermark/README.zh-CN.md Demonstrates various ways to use the Watermark component with different configurations. ```APIDOC ## Code Examples ### Text Watermark Set the watermark text using the `content` attribute. ```html ``` ### Image Watermark Set the watermark image using the `image` attribute and adjust the overall opacity with `opacity`. ```html ``` ### Custom Spacing Control the spacing between multiple repeating watermarks using `gap-x` and `gap-y`. ```html ``` ### Custom Rotation Angle Control the rotation angle of the watermark using the `rotate` attribute. The default value is `-22`. ```html ``` ### Display Range Control the display range of the watermark using the `full-page` attribute. ```html ``` ### HTML Watermark Pass HTML directly as a watermark using the `content` slot. Styles in HTML only support inline styles and do not support self-closing tags. ```html ``` ``` -------------------------------- ### Vant Rate Component Change Event Handling Source: https://github.com/youzan/vant/blob/main/packages/vant/src/rate/README.md Demonstrates how to handle the 'change' event emitted by the Vant Rate component. The example shows the HTML template with the @change listener and the JavaScript setup, including a function to display a toast message with the new value. ```html ``` ```javascript import { ref } from 'vue'; import { showToast } from 'vant'; export default { setup() { const value = ref(3); const onChange = (value) => showToast('current value:' + value); return { value, onChange, }; }, }; ``` -------------------------------- ### Basic Vant ActionBar Usage with Icons and Button (Vue.js) Source: https://github.com/youzan/vant/blob/main/packages/vant/src/action-bar/README.md This example shows the basic structure of a Vant ActionBar, including ActionBarIcon and ActionBarButton components. It utilizes click event handlers to display toasts when icons or the button are pressed. Assumes Vant is installed and components are registered. ```html

``` ```javascript import { showToast } from 'vant'; export default { setup() { const onClickIcon = () => showToast('Click Icon'); const onClickButton = () => showToast('Click Button'); return { onClickIcon, onClickButton, }; }, }; ``` -------------------------------- ### Basic Usage Source: https://github.com/youzan/vant/blob/main/packages/vant/src/sticky/README.zh-CN.md Demonstrates the basic implementation of the Sticky component by wrapping content within it. ```APIDOC ## Basic Usage 将内容包裹在 `Sticky` 组件内即可。 ```html

基础用法

``` ``` -------------------------------- ### Basic Steps Usage Source: https://github.com/youzan/vant/blob/main/packages/vant/src/steps/README.zh-CN.md Demonstrates the basic usage of the Steps component. Use the `active` prop to set the current step index, starting from 0. ```html

买家下单

商家接单

买家提货

交易完成

``` ```javascript import { ref } from 'vue'; export default { setup() { const active = ref(1); return { active }; }, }; ``` -------------------------------- ### Basic Usage Source: https://github.com/youzan/vant/blob/main/packages/vant/src/icon/README.zh-CN.md Demonstrates the basic usage of the Icon component by specifying the icon name. ```APIDOC ## Basic Usage ### Description Use the `name` property to specify the icon to use. Vant includes a built-in icon library. ### Method GET ### Endpoint N/A (Component usage) ### Request Example ```html ``` ``` -------------------------------- ### Dialog Installation Source: https://github.com/youzan/vant/blob/main/packages/vant/src/dialog/README.zh-CN.md Global registration of the Dialog component. ```APIDOC ## Installation ### Global Registration To globally register the component, use the following code: ```js import { createApp } from 'vue'; import { Dialog } from 'vant'; const app = createApp(); app.use(Dialog); ``` ``` -------------------------------- ### Basic Usage - AddressList Source: https://github.com/youzan/vant/blob/main/packages/vant/src/address-list/README.zh-CN.md Demonstrates the basic usage of the AddressList component with sample data and event handlers. ```html ``` ```javascript import { ref } from 'vue'; import { showToast } from 'vant'; export default { setup() { const chosenAddressId = ref('1'); const list = [ { id: '1', name: '张三', tel: '13000000000', address: '浙江省杭州市西湖区文三路 13000000000东方通信大厦 7 楼 501 室', isDefault: true, }, { id: '2', name: '李四', tel: '1310000000', address: '浙江省杭州市拱墅区莫干山路 50 号', }, ]; const disabledList = [ { id: '3', name: '王五', tel: '1320000000', address: '浙江省杭州市滨江区江南大道 15 号', }, ]; const onAdd = () => showToast('新增地址'); const onEdit = (item, index) => showToast('编辑地址:' + index); return { list, onAdd, onEdit, disabledList, chosenAddressId, }; }, }; ``` -------------------------------- ### Switch Languages with Locale.use Source: https://github.com/youzan/vant/blob/main/packages/vant/src/locale/README.md Use the `Locale.use` method to switch to different languages. Ensure you import the desired language pack. ```javascript import { Locale } from 'vant'; import enUS from 'vant/es/locale/lang/en-US'; Locale.use('en-US', enUS); ``` -------------------------------- ### Basic Picker Usage Source: https://github.com/youzan/vant/blob/main/packages/vant/src/picker/README.zh-CN.md Configure options using the `columns` prop. Handle user selections with `@confirm`, `@cancel`, and `@change` events. The `onConfirm` event provides selected values. ```html ``` ```js import { showToast } from 'vant'; export default { setup() { const columns = [ { text: '杭州', value: 'Hangzhou' }, { text: '宁波', value: 'Ningbo' }, { text: '温州', value: 'Wenzhou' }, { text: '绍兴', value: 'Shaoxing' }, { text: '湖州', value: 'Huzhou' }, ]; const onConfirm = ({ selectedValues }) => { showToast(`当前值: ${selectedValues.join(',')}`); }; const onChange = ({ selectedValues }) => { showToast(`当前值: ${selectedValues.join(',')}`); }; const onCancel = () => showToast('取消'); return { columns, onChange, onCancel, onConfirm, }; }, }; ``` -------------------------------- ### CouponCell and CouponList Introduction Source: https://github.com/youzan/vant/blob/main/packages/vant/src/coupon-list/README.zh-CN.md Introduces the CouponCell and CouponList components and provides instructions for global registration. ```APIDOC ## Coupon 优惠券选择器 ### 介绍用于优惠券的兑换和选择。 ### 引入通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 ```js import { createApp } from 'vue'; import { CouponCell, CouponList } from 'vant'; const app = createApp(); app.use(CouponCell); app.use(CouponList); ``` ``` -------------------------------- ### Basic Vant CLI Configuration Source: https://github.com/youzan/vant/blob/main/packages/vant-cli/docs/config.zh-CN.md A basic `vant.config.mjs` setup for a component library, including its name, build site public path, and site metadata like title, logo, and navigation. ```javascript export default { // 组件库名称 name: 'demo-ui', // 构建配置 build: { site: { publicPath: '/demo-ui/', }, }, // 文档站点配置 site: { // 标题 title: 'Demo UI', // 图标 logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png', // 描述 description: '示例组件库', // 左侧导航 nav: [ { title: '开发指南', items: [ { path: 'home', title: '介绍', }, ], }, { title: '基础组件', items: [ { path: 'my-button', title: 'MyButton 按钮', }, ], }, ], }, }; ``` -------------------------------- ### Install @vant/use package Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/vant-use-intro.en-US.md Commands to install the @vant/use dependency using various package managers. It is recommended to install this package explicitly even if it is included in Vant's dependencies. ```shell # with npm npm i @vant/use # with yarn yarn add @vant/use # with pnpm pnpm add @vant/use # with Bun bun add @vant/use ``` -------------------------------- ### Signature Component Usage Source: https://github.com/youzan/vant/blob/main/packages/vant/src/signature/README.md Examples demonstrating basic usage, customizing pen color, line width, and background color of the Signature component. ```APIDOC ## Usage ### Basic Usage When the confirm button is clicked, the component will emit the `submit` event. The first parameter of the event is `data`, which contains the following fields: - `image`: The image corresponding to the signature, which is in base64 string format. Returns an empty string if the signature is empty. - `canvas`: The Canvas element. ```html

``` ```js import { ref } from 'vue'; import { showToast } from 'vant'; export default { setup() { const image = ref(''); const onSubmit = (data) => { image.value = data.image; }; const onClear = () => showToast('clear'); return { image, onSubmit, onClear, }; }, }; ``` ### Pen Color Use `pen-color` prop to set the color of the brush stroke. ```html ``` ### Line Width Use `line-width` prop to set the width of the line. ```html ``` ### Background Color Use `background-color` prop to set the color of the background. ```html ``` ``` -------------------------------- ### Install Vant Tabbar and TabbarItem Globally Source: https://github.com/youzan/vant/blob/main/packages/vant/src/tabbar/README.md This snippet demonstrates how to install the Vant Tabbar and TabbarItem components globally using `app.use` in a Vue application. Ensure Vant is installed in your project. ```javascript import { createApp } from 'vue'; import { Tabbar, TabbarItem } from 'vant'; const app = createApp(); app.use(Tabbar); app.use(TabbarItem); ``` -------------------------------- ### Scaffold a Project with Rsbuild Source: https://github.com/youzan/vant/blob/main/README.md Initialize a new project using the Rsbuild scaffold tool, which is recommended for optimal performance and integration with Vant. ```bash npm create rsbuild@latest ``` -------------------------------- ### Install Vant Collapse Component (Vue.js) Source: https://github.com/youzan/vant/blob/main/packages/vant/src/collapse/README.md This snippet demonstrates how to install and register the Vant Collapse and CollapseItem components globally in a Vue.js application using `app.use`. Ensure Vant is installed in your project. ```js import { createApp } from 'vue'; import { Collapse, CollapseItem } from 'vant'; const app = createApp(); app.use(Collapse); app.use(CollapseItem); ``` -------------------------------- ### Vue Setup for Reupload Source: https://github.com/youzan/vant/blob/main/packages/vant/src/uploader/README.zh-CN.md Initialize fileList with an initial image URL when reupload functionality is enabled. ```typescript import { ref } from 'vue'; export default { setup() { const fileList = ref([ { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, ]); return { fileList }; }, }; ``` -------------------------------- ### Install ActionSheet Component Globally - JavaScript Source: https://github.com/youzan/vant/blob/main/packages/vant/src/action-sheet/README.md Demonstrates how to install the Vant ActionSheet component globally using `app.use`. This is a common way to register components for use throughout a Vue application. Ensure you have Vue and Vant installed. ```javascript import { createApp } from 'vue'; import { ActionSheet } from 'vant'; const app = createApp(); app.use(ActionSheet); ``` -------------------------------- ### 全局注册 TreeSelect 组件 Source: https://github.com/youzan/vant/blob/main/packages/vant/src/tree-select/README.zh-CN.md 通过 `createApp` 和 `app.use()` 方法全局注册 TreeSelect 组件。更多注册方式请参考组件注册文档。 ```javascript import { createApp } from 'vue'; import { TreeSelect } from 'vant'; const app = createApp(); app.use(TreeSelect); ```