### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/category/doc.taro.md

How to install and use the Category and CategoryPane components.

```APIDOC
```js
import { createApp } from 'vue'
import { Category, CategoryPane } from '@nutui/nutui-taro'

const app = createApp()
app.use(Category)
app.use(CategoryPane)
```
```

--------------------------------

### Install Project Dependencies with pnpm

Source: https://github.com/jd-opensource/nutui/blob/v4/CONTRIBUTING.md

Use this command to install all project dependencies. Ensure you are using pnpm as the package manager. It's recommended to pull the latest branch and re-run this command before starting contributions.

```bash
pnpm i
```

--------------------------------

### Vue Setup

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/timedetail/doc.md

Basic setup function for a Vue component using TimeSelect.

```javascript
setup() {
    const state = reactive({

    });

    return { ...toRefs(state) };
  }
```

--------------------------------

### Install Steps and Step Components

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/steps/doc.taro.md

Import and register the Steps and Step components from NutUI for Taro. This setup is required before using the components in your application.

```js
import { createApp } from 'vue'
import { Steps, Step } from '@nutui/nutui-taro'

const app = createApp()
app.use(Steps)
app.use(Step)
```

--------------------------------

### Install @nutui/icons-vue

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/icon/doc.en-US.md

Install the icon package using npm.

```bash
npm i --save @nutui/icons-vue
```

--------------------------------

### Install ShortPassword and NumberKeyboard

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/shortpassword/doc.en-US.md

Import and register the ShortPassword and NumberKeyboard components globally. Ensure you have Vue and NutUI installed.

```javascript
import { createApp } from 'vue'
import { ShortPassword, NumberKeyboard } from '@nutui/nutui'

const app = createApp()
app.use(ShortPassword)
app.use(NumberKeyboard)
```

--------------------------------

### Start Documentation and H5 Demo

Source: https://github.com/jd-opensource/nutui/blob/v4/CONTRIBUTING.md

Run this command to start the development server for the documentation and H5 demos. Component source code, documentation files, and demo source files are located in the `src/packages/__VUE/` directory.

```bash
pnpm dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/jd-opensource/nutui/blob/v4/packages/nutui-auto-import-resolver/README.zh-CN.md

Install @nutui/auto-import-resolver and unplugin-vue-components using your preferred package manager.

```shell
# via pnpm
pnpm add @nutui/auto-import-resolver unplugin-vue-components -D
```

```shell
# via npm
npm i @nutui/auto-import-resolver unplugin-vue-components -D
```

```shell
# via yarn
yarn add @nutui/auto-import-resolver unplugin-vue-components -D
```

```shell
# via Bun
bun add @nutui/auto-import-resolver unplugin-vue-components -D
```

--------------------------------

### Install NutUI

Source: https://context7.com/jd-opensource/nutui/llms.txt

Install the H5 or Taro version of NutUI using npm.

```bash
# Install H5 version
npm install @nutui/nutui

# Install Taro multi-platform version
npm install @nutui/nutui-taro
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/collapse/doc.md

Import and register the Collapse and CollapseItem components for Vue.js applications.

```javascript
import { createApp } from 'vue'
import { Collapse, CollapseItem } from '@nutui/nutui'

const app = createApp()
app.use(Collapse)
app.use(CollapseItem)
```

--------------------------------

### Install Backtop Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/backtop/doc.taro.md

Import and use the Backtop component in your Vue application. This setup is required before using the Backtop component.

```javascript
import { createApp } from 'vue'
import { Backtop } from '@nutui/nutui-taro'

const app = createApp()
app.use(Backtop)
```

--------------------------------

### Video Player Methods

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/video/doc.md

Access and control video playback through ref methods. This example shows how to get a reference to the video component instance.

```vue
<template>
  <Video ref="video" :source="source" />
</template>
<script>
import { reactive, ref, onMounted } from 'vue';

export default {
  setup() {
    const video = ref(null);
    const source = reactive({
      src: 'video.mp4',
      type: 'video/mp4'
    });

    onMounted(() => {
      // Access methods like video.value.play(), video.value.pause(), etc.
      console.log(video.value);
    });

    return {
      video,
      source
    };
  }
}
</script>
```

--------------------------------

### Install Audio Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/audio/doc.md

Import and register the Audio component globally when using Vue. Ensure you have Vue and NutUI installed.

```js
import { createApp } from 'vue'
import { Audio } from '@nutui/nutui'

const app = createApp()
app.use(Audio)
```

--------------------------------

### Set Initial Page Number

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/imagepreview/doc.md

Configure the initial page number for the image preview using the `init-no` prop. This example sets the preview to start on the fourth image (index 3).

```vue
<template>
  <nut-image-preview :show="state.showPreview" :images="state.imgData" :init-no="3" @close="hideFn" />
  <nut-cell isLink title="设置初始页码" :showIcon="true" @click="showFn"></nut-cell>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
  showPreview: false,
  imgData: [
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
    },
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
    },
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
    },
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
    }
  ]
})

const showFn = () => {
  state.showPreview = true
}

const hideFn = () => {
  state.showPreview = false
}
</script>
```

--------------------------------

### Icon Button Example

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.taro.md

Demonstrates how to include an icon within a button.

```vue
<template>
  <nut-button><template #icon><nut-icon name="star"></nut-icon></template>Icon按钮</nut-button>
</template>
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/uploader/doc.md

Import and use the Uploader component in your Vue application.

```js
import { createApp } from 'vue'
import { Uploader } from '@nutui/nutui'

const app = createApp()
app.use(Uploader)
```

--------------------------------

### Install Icon Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/icon/doc.taro.md

Install the @nutui/icons-vue-taro package using npm. This command adds the icon component library to your project.

```bash
npm i --save @nutui/icons-vue-taro
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/timedetail/doc.md

Import and register the TimeSelect component for Vue or Taro projects.

```javascript
import { createApp } from 'vue'
// vue
import { TimeSelect } from '@nutui/nutui'
// taro
import { TimeSelect } from '@nutui/nutui-taro'

const app = createApp()
app.use(TimeSelect)
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/inputnumber/doc.taro.md

Import and use the InputNumber component in your Vue application.

```javascript
import { createApp } from 'vue'
import { InputNumber } from '@nutui/nutui-taro'

const app = createApp()
app.use(InputNumber)
```

--------------------------------

### Install Noticebar Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/noticebar/doc.en-US.md

Import and use the Noticebar component in your Vue application.

```javascript
import { createApp } from 'vue'
import { Noticebar } from '@nutui/nutui'

const app = createApp()
app.use(Noticebar)
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/radio/doc.taro.md

Import Radio and RadioGroup components for use in your Taro Vue application.

```js
import { createApp } from 'vue'
import { Radio, RadioGroup } from '@nutui/nutui-taro'

const app = createApp()
app.use(Radio)
app.use(RadioGroup)
```

--------------------------------

### Install Input Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/input/doc.en-US.md

Import and use the Input component in your Vue application.

```javascript
import { createApp } from 'vue'
import { Input } from '@nutui/nutui'

const app = createApp()
app.use(Input)
```

--------------------------------

### Install Switch Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/switch/doc.en-US.md

Import and register the Switch component with your Vue application.

```js
import { createApp } from 'vue'
import { Switch } from '@nutui/nutui'

const app = createApp()
app.use(Switch)
```

--------------------------------

### Install List Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/list/doc.md

Import and use the List component in your Vue application.

```javascript
import { createApp } from 'vue'
import { List } from '@nutui/nutui'

const app = createApp()
app.use(List)
```

--------------------------------

### Install Sku Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/sku/doc.md

Import and register the Sku component globally in your Vue application.

```js
import { createApp } from 'vue'
import { Sku } from '@nutui/nutui'

const app = createApp()
app.use(Sku)
```

--------------------------------

### Install Skeleton Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/skeleton/doc.en-US.md

Import and register the Skeleton component globally in your Vue application. This setup is required before using the component.

```js
import { createApp } from 'vue'
import { Skeleton } from '@nutui/nutui'

const app = createApp()
app.use(Skeleton)
```

--------------------------------

### Basic Noticebar Usage

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/noticebar/doc.en-US.md

Demonstrates the basic implementation of the Noticebar component.

```vue
<template>
  <nut-noticebar text="NutUI is a Vue 3 based mobile component library"></nut-noticebar>
</template>
```

--------------------------------

### Install Skeleton Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/skeleton/doc.taro.md

Import and use the Skeleton component in your Vue application for Taro. This setup is required before using the Skeleton component.

```js
import { createApp } from 'vue'
import { Skeleton } from '@nutui/nutui-taro'

const app = createApp()
app.use(Skeleton)
```

--------------------------------

### Install Popover Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/popover/doc.en-US.md

Import and register the Popover component globally using createApp. This setup is required before using the Popover in your application.

```javascript
import { createApp } from 'vue'
import { Popover } from '@nutui/nutui'

const app = createApp()
app.use(Popover)
```

--------------------------------

### Install Ellipsis Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/ellipsis/doc.taro.md

Import and register the Ellipsis component globally in your Vue application. This setup is required before using the component in your templates.

```javascript
import { createApp } from 'vue'
import { Ellipsis } from '@nutui/nutui-taro'

const app = createApp()
app.use(Ellipsis)
```

--------------------------------

### Basic Usage of Noticebar

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/noticebar/doc.taro.md

Demonstrates the basic exhibition of the Noticebar component.

```vue
<template>
  <nut-noticebar>基础通告栏</nut-nut-noticebar>
</template>
```

--------------------------------

### Basic Picker Usage

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/picker/doc.md

Demonstrates the fundamental implementation of the Picker component.

```vue
<template>
  <nut-picker v-model="state.value" :columns="state.columns" @confirm="onConfirm" @cancel="onCancel"></nut-picker>
</template>
<script setup>
import { reactive } from 'vue';

const state = reactive({
  value: [],
  columns: [
    { text: 'Monday', value: 'Monday' },
    { text: 'Tuesday', value: 'Tuesday' },
    { text: 'Wednesday', value: 'Wednesday' },
    { text: 'Thursday', value: 'Thursday' },
    { text: 'Friday', value: 'Friday' },
  ],
});

const onConfirm = (val) => {
  console.log(val);
};

const onCancel = (val) => {
  console.log(val);
};
</script>
```

--------------------------------

### Customizing Sku Component with Slots

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/sku/doc.md

This example demonstrates how to customize various parts of the Sku component using Vue's template slots. It shows how to override the price display, extra header information, address selection area, and the operate buttons. The example also includes the necessary setup for data fetching and event handling.

```vue
<template>
  <nut-cell title="通过插槽自定义设置" desc="" @click="customBySlot = true"></nut-cell>
  <nut-sku
    v-model:visible="customBySlot"
    :sku="data.sku"
    :goods="data.goods"
    :btnOptions="['buy', 'cart']"
    @selectSku="selectSku"
    @clickBtnOperate="clickBtnOperate"
  >
    <!-- 商品展示区，价格区域 -->
    <template #sku-header-price>
      <div>
        <nut-price :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>
        <span class="tag"></span>
      </div>
    </template>
    <!-- 商品展示区，编号区域 -->
    <template #sku-header-extra>
      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ skuId }} </span>
    </template>
    <!-- sku 展示区上方与商品信息展示区下方区域，无默认展示内容 -->
    <template #sku-select-top>
      <div class="address">
        <nut-cell
          style="box-shadow:none;padding:13px 0"
          title="送至"
          :desc="addressDesc"
          @click="showAddressPopup = true"
        ></nut-cell>
      </div>
    </template>
    <!-- 底部按钮操作区 -->
    <template #sku-operate>
      <div class="sku-operate-box">
        <nut-button class="sku-operate-item" shape="square" type="warning">加入购物车</nut-button>
        <nut-button class="sku-operate-item" shape="square" type="primary">立即购买</nut-button>
      </div>
    </template>
  </nut-sku>

  <nut-address
    v-model:visible="showAddressPopup"
    type="exist"
    :exist-address="existAddress"
    :is-show-custom-address="false"
    @selected="selectedAddress"
    exist-address-title="配送至"
  ></nut-address>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
const customBySlot = ref(false)
const showAddressPopup = ref(false)
const data = reactive({
  sku: [],
  goods: {}
})

const addressDesc = ref('(配送地会影响库存，请先确认)')
const existAddress = ref([
  {
    id: 1,
    addressDetail: 'th ',
    cityName: '石景山区',
    countyName: '城区',
    provinceName: '北京',
    selectedAddress: true,
    townName: ''
  },
  {
    id: 2,
    addressDetail: '12 ',
    cityName: '电饭锅',
    countyName: '扶绥县',
    provinceName: '北京',
    selectedAddress: false,
    townName: ''
  },
  {
    id: 3,
    addressDetail: '发大水比 ',
    cityName: '放到',
    countyName: '广宁街道',
    provinceName: '钓鱼岛全区',
    selectedAddress: false,
    townName: ''
  },
  {
    id: 4,
    addressDetail: '还是想吧百度吧 ',
    cityName: '研发',
    countyName: '八里庄街道',
    provinceName: '北京',
    selectedAddress: false,
    townName: ''
  }
])

onMounted(() => {
  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
    .then((response) => response.json())
    .then((res) => {
      const { Sku, Goods, imagePathMap } = res
      data.sku = Sku
      data.goods = Goods
    }) //执行结果是 resolve就调用then方法
    .catch((err) => console.log('Oh, error', err)) //执行结果是 reject就调用catch方法
})

// 切换规格类目
const selectSku = (ss) => {
  const { sku, skuIndex, parentSku, parentIndex } = ss
  if (sku.disable) return false
  data.sku[parentIndex].list.forEach((s) => {
    s.active = s.id == sku.id
  })
  data.goods = {
    skuId: sku.id,
    price: '6002.10',
    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
  }
}
const selectedAddress = (prevExistAdd, nowExistAdd) => {
  const { provinceName, countyName, cityName } = nowExistAdd
  addressDesc.value = `${provinceName}${countyName}${cityName}`
}
// 底部操作按钮触发
const clickBtnOperate = (op) => {
  console.log('点击了操作按钮', op)
}
</script>

<style>
.sku-operate-box {
  width: 100%;
  display: flex;
  padding: 8px 10px;
  box-sizing: border-box;
}
.sku-operate-item {
  flex: 1;
}
.sku-operate-item:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.sku-operate-item:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>
```

--------------------------------

### Install ConfigProvider

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/configprovider/doc.taro.md

Import and use the ConfigProvider component to enable global configuration for NutUI components.

```javascript
import { createApp } from 'vue'
import { ConfigProvider } from '@nutui/nutui-taro'

const app = createApp()
app.use(ConfigProvider)
```

--------------------------------

### Video and Image Preview

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/imagepreview/doc.md

This example shows how to use the ImagePreview component to display both images and videos. Provide image data via the `images` prop and video data via the `videos` prop. Each video object should contain `source` and `options` properties.

```vue
<template>
  <nut-image-preview :show="state.showPreview" :images="state.imgData" :videos="state.videoData" @close="hideFn" />
  <nut-cell isLink title="视频、图片预览" :showIcon="true" @click="showFn"></nut-cell>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
  showPreview: false,
  imgData: [
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
    },
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
    },
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
    },
    {
      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
    }
  ],
  videoData: [
    {
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
        type: 'video/mp4'
      },
      options: {
        muted: true,
        controls: true
      }
    },
    {
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
        type: 'video/mp4'
      },
      options: {
        muted: true,
        controls: true
      }
    }
  ]
})

const showFn = () => {
  state.showPreview = true
}

const hideFn = () => {
  state.showPreview = false
}
</script>
```

--------------------------------

### Basic Usage

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/infiniteloading/doc.en-US.md

Demonstrates the fundamental implementation of the InfiniteLoading component. It shows how to bind data, control the loading state, and handle the load-more event to fetch additional content.

```APIDOC
## InfiniteLoading Component

### Description

This component enables infinite scrolling, automatically loading more data when the user scrolls to the bottom of the content.

### Props

- **v-model** (boolean) - Required - Loading status. Controls whether the loading indicator is shown.
- **has-more** (boolean) - Required - Indicates if there is more data to load. Defaults to `true`.
- **threshold** (number) - Optional - The distance in pixels from the bottom of the scrollable area that triggers the `load-more` event. Defaults to `200`.
- **use-capture** (boolean) - Optional - Whether to use capture mode for the scroll event listener. Defaults to `false`.
- **load-more-txt** (string) - Optional - The text displayed when there is no more data to load. Defaults to `Oops, this is the bottom`.
- **load-txt** (string) - Optional - The text displayed while loading more data. Defaults to `Loading...`.

### Events

- **load-more** - Emitted when the user scrolls near the bottom and more data needs to be loaded. No arguments are passed.
- **scroll-change** - Emitted in real-time as the scroll height changes. Passes the current scroll `height` as an argument.

### Slots

- **default**: Allows for custom content to be displayed within the infinite loading area.
- **loading**: Provides a slot to customize the loading text or indicator.
- **loading-icon**: Enables customization of the loading icon.
- **finished**: Offers a slot to display custom content when all data has been loaded.
```

--------------------------------

### Install Swiper Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/swiper/doc.en-US.md

Import and register the Swiper and SwiperItem components globally. Ensure you have Vue installed.

```javascript
import { createApp } from 'vue'
import { Swiper, SwiperItem } from '@nutui/nutui'

const app = createApp()
app.use(Swiper)
app.use(SwiperItem)
```

--------------------------------

### Button Size Example

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.md

Demonstrates the different button sizes: large, normal, small, and mini.

```html
<template>
  <nut-button size="large">Large</nut-button>
  <nut-button size="normal">Normal</nut-button>
  <nut-button size="small">Small</nut-button>
  <nut-button size="mini">Mini</nut-button>
</template>
```

--------------------------------

### Countdown Control Start and Pause

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/countdown/doc.md

Control the start and pause state of the countdown using the `paused` prop.

```vue
<template>
  <nut-countdown :paused="isPaused"></nut-countdown>
  <button @click="isPaused = !isPaused">{{ isPaused ? 'Resume' : 'Pause' }}</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const isPaused = ref(false);
</script>
```

--------------------------------

### Basic Usage of AddressList

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/addresslist/doc.taro.md

Demonstrates the basic setup for the AddressList component, including data binding and event handling for item clicks and icon interactions.

```vue
<template>
  <nut-address-list
    :data="data"
    @click-item="clickItem"
    @del-icon="delClick"
    @edit-icon="editClick"
    :show-bottom-button="false"
    :data-options="dataOptions"
  >
  </nut-address-list>
</template>
<script setup>
import { ref, reactive } from 'vue'
const data = ref([
  {
    testid: 3,
    testaddressName: '姓名',
    phone: '123****4567',
    defaultAddress: false,
    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
  },
  {
    testid: 4,
    testaddressName: '姓名',
    phone: '123****4567',
    defaultAddress: true,
    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
  }
])
const dataOptions = reactive({
  id: 'testid',
  addressDetail: 'testaddressDetail',
  addressName: 'testaddressName'
})
const clickItem = () => {
  console.log('Click To Address')
}
const delClick = () => {
  console.log('Click To Delete')
}
const editClick = () => {
  console.log('Click To Edit')
}
</script>
```

--------------------------------

### Install Navbar Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/navbar/doc.taro.md

Import and use the Navbar component in your Vue application. Ensure you have installed the necessary packages.

```js
import { createApp } from 'vue'
import { Navbar } from '@nutui/nutui-taro'

const app = createApp()
app.use(Navbar)
```

--------------------------------

### Install Invoice Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/invoice/doc.taro.md

Import and use the Invoice component in your Vue application. Ensure you have installed the necessary packages.

```javascript
import { createApp } from 'vue'
import { Invoice } from '@nutui/nutui-taro'

const app = createApp()
app.use(Invoice)
```

--------------------------------

### Install Image Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/image/doc.md

Import and use the Image component in your Vue application. Ensure you have Vue and NutUI installed.

```javascript
import { createApp } from 'vue'
import { Image } from '@nutui/nutui'

const app = createApp()
app.use()
```

--------------------------------

### Plain Button Example

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.md

Shows how to create a plain button using the `plain` prop. Plain buttons have colored text on a white background.

```html
<template>
  <nut-button plain type="primary">Primary Plain</nut-button>
  <nut-button plain type="success">Success Plain</nut-button>
</template>
```

--------------------------------

### Button Type Example

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.md

Demonstrates the different button types available: default, primary, info, warning, danger, and success.

```html
<template>
  <nut-button type="default">Default</nut-button>
  <nut-button type="primary">Primary</nut-button>
  <nut-button type="info">Info</nut-button>
  <nut-button type="warning">Warning</nut-button>
  <nut-button type="danger">Danger</nut-button>
  <nut-button type="success">Success</nut-button>
</template>
```

--------------------------------

### Icon Button Example

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.md

Example of a button with an icon. The icon can be placed in the default slot or a dedicated 'icon' slot.

```html
<template>
  <nut-button shape="square">
    <template #icon>
      <Home />
    </template>
    Icon Button
  </nut-button>
</template>

<script setup>
import { Home } from '@nutui/icons-vue';
</script>
```

--------------------------------

### Button Type Examples

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.taro.md

Demonstrates the different button types available: default, primary, info, warning, danger, and success.

```vue
<template>
  <nut-button type="default">default</nut-button>
  <nut-button type="primary">primary</nut-button>
  <nut-button type="info">info</nut-button>
  <nut-button type="warning">warning</nut-button>
  <nut-button type="danger">danger</nut-button>
  <nut-button type="success">success</nut-button>
</template>
```

--------------------------------

### Basic Usage

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/infiniteloading/doc.md

Demonstrates the fundamental implementation of the InfiniteLoading component, where data is loaded automatically when the user scrolls to the bottom.

```APIDOC
## InfiniteLoading Component

### Description

This component automatically loads more data as the user scrolls to the bottom of the list. It's useful for displaying large datasets without overwhelming the user.

### Props

- **v-model** (boolean) - Required - Controls whether to trigger the scroll loading.
- **has-more** (boolean) - Required - Indicates if there is more data to load. Defaults to `true`.
- **threshold** (number) - Optional - The distance from the bottom of the scrollable area that triggers the `load-more` event. Defaults to `200`.
- **use-capture** (boolean) - Optional - Specifies whether to use capture mode for event listeners. Defaults to `false`.
- **load-more-txt** (string) - Optional - The text displayed when there is no more data to load. Defaults to `'哎呀，这里是底部了啦'`.
- **load-txt** (string) - Optional - The text displayed while loading more data. Defaults to `加载中...`.

### Events

- **load-more**: Emitted when the user scrolls to the bottom and more data needs to be loaded. No specific parameters are returned.
- **scroll-change**: Emitted in real-time to provide the current scroll height. The scroll height is returned as a parameter.

### Slots

- **default**: Allows for custom content to be displayed within the InfiniteLoading component.
- **loading**: Customizes the loading indicator displayed at the bottom while more data is being fetched.
- **loading-icon**: Provides a slot to customize the loading icon.
- **finished**: Enables customization of the text displayed when all data has been loaded.
```

--------------------------------

### Icon Component Usage

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/icon/doc.taro.md

Demonstrates how to use the Icon component with different names and image URLs.

```APIDOC
## Icon Component

### Description

Use the `IconFont` component to display icons. The `name` prop accepts an icon name or an image URL.

### Usage

```vue
<template>
  <IconFont name="dongdong"></IconFont>
  <IconFont name="JD"></IconFont>
  <IconFont
    size="40"
    name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
  ></IconFont>
</template>
```
```

--------------------------------

### Control Countdown Start and Pause

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/countdown/doc.taro.md

Control the countdown's start and pause state using the `paused` prop. Set `auto-start` to `false` and `time` to the desired duration in milliseconds for manual control.

```vue
<template>
  <view>
    <nut-countdown :time='time' :paused='paused' :auto-start='false' format='mm:ss'></nut-countdown>
    <button @click='paused = !paused'>{{ paused ? 'Start' : 'Pause' }}</button>
  </view>
</template>
<script setup>
import {
  ref
} from 'vue';

const time = ref(3600);
const paused = ref(true);
</script>
```

--------------------------------

### Step-by-Step Tour Guidance

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/tour/doc.md

Set the `type` prop to 'step' to enable step-by-step navigation. The `steps` array defines the content and configuration for each step in the guide.

```vue
<template>
  <nut-tour
    type="step"
    :steps="steps"
    v-model="show"
    :current="current"
    next-step-txt="Next"
    prev-step-txt="Prev"
    complete-txt="Done"
  ></nut-tour>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);
const current = ref(0);
const steps = ref([
  {
    target: 'target1',
    content: 'First step of the guide.',
    location: 'bottom',
  },
  {
    target: 'target2',
    content: 'Second step, with custom location.',
    location: 'top',
  },
  {
    target: 'target3',
    content: 'Final step.',
  },
]);
</script>
```

--------------------------------

### Install Form Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/form/doc.md

Import and register the Form and FormItem components from NutUI Vue.

```javascript
import { createApp } from 'vue'
import { Form, FormItem } from '@nutui/nutui'

const app = createApp()
app.use(Form)
app.use(FormItem)
```

--------------------------------

### IconFont Full Usage Setup

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/icon/doc.en-US.md

Set up IconFont usage by importing the IconFont component and its CSS. This allows using icons by their name or URL.

```javascript
import { createApp } from 'vue'
import { IconFont } from '@nutui/icons-vue'
import '@nutui/icons-vue/dist/style_iconfont.css'
const app = createApp()
app.use(IconFont)
```

--------------------------------

### Loading Button Example

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.md

Shows a button in a loading state using the `loading` prop. This indicates an ongoing operation.

```html
<template>
  <nut-button loading type="primary">Loading</nut-button>
</template>
```

--------------------------------

### Install NumberKeyboard

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/numberkeyboard/doc.md

Import and use the NumberKeyboard component in your Vue application.

```javascript
import { createApp } from 'vue'
import { NumberKeyboard } from '@nutui/nutui'

const app = createApp()
app.use(NumberKeyboard)
```

--------------------------------

### Install Steps and Step Components

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/steps/doc.en-US.md

Import and register the Steps and Step components globally for use in your Vue application.

```javascript
import { createApp } from 'vue'
import { Steps, Step } from '@nutui/nutui'

const app = createApp()
app.use(Steps)
app.use(Step)
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/divider/doc.taro.md

Import and use the Divider component in your Vue application for Taro.

```javascript
import { createApp } from 'vue'
import { Divider } from '@nutui/nutui-taro'

const app = createApp()
app.use(Divider)
```

--------------------------------

### Button Size Examples

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/button/doc.taro.md

Illustrates the different button sizes: large, normal, small, and mini.

```vue
<template>
  <nut-button size="large">large</nut-button>
  <nut-button size="normal">normal</nut-button>
  <nut-button size="small">small</nut-button>
  <nut-button size="mini">mini</nut-button>
</template>
```

--------------------------------

### Basic Usage of Sku Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/sku/doc.md

Demonstrates how to use the Sku component for basic product selection. It fetches SKU data and handles user interactions like selecting variants and closing the modal.

```vue
<template>
  <nut-cell :title="`基础用法`" desc="" @click="base = true"></nut-cell>
  <nut-sku
    v-model:visible="base"
    :sku="data.sku"
    :goods="data.goods"
    @selectSku="selectSku"
    @clickBtnOperate="clickBtnOperate"
    @close="close"
  ></nut-sku>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
const base = ref(false)
const data = reactive({
  sku: [],
  goods: {}
})

onMounted(() => {
  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
    .then((response) => response.json())
    .then((res) => {
      const { Sku, Goods, imagePathMap } = res
      data.sku = Sku
      data.goods = Goods
    }) //执行结果是 resolve就调用then方法
    .catch((err) => console.log('Oh, error', err)) //执行结果是 reject就调用catch方法
})
// 切换规格类目
const selectSku = (ss) => {
  const { sku, skuIndex, parentSku, parentIndex } = ss
  if (sku.disable) return false
  data.sku[parentIndex].list.forEach((s) => {
    s.active = s.id == sku.id
  })
  data.goods = {
    skuId: sku.id,
    price: '4599.00',
    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
  }
}
// 底部操作按钮触发
const clickBtnOperate = (op) => {
  console.log('点击了操作按钮', op)
}
// 关闭商品规格弹框
const close = () => {}
</script>
```

--------------------------------

### Install Toast Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/toast/doc.md

Import and use the Toast component in your Vue application.

```js
import { createApp } from 'vue'
import { Toast } from '@nutui/nutui'

const app = createApp()
app.use(Toast)
```

--------------------------------

### Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/collapse/doc.taro.md

Import and register the Collapse and CollapseItem components for use in your Taro Vue application.

```javascript
import {
  createApp
} from 'vue'
import {
  Collapse,
  CollapseItem
} from '@nutui/nutui-taro'

const app = createApp()
app.use(Collapse)
app.use(CollapseItem)
```

--------------------------------

### Toast Installation

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/toast/doc.taro.md

Import and use the Toast component in your Vue application for Taro.

```js
import { createApp } from 'vue'
import { Toast } from '@nutui/nutui-taro'

const app = createApp()
app.use(Toast)
```

--------------------------------

### Run Taro Demos

Source: https://github.com/jd-opensource/nutui/blob/v4/CONTRIBUTING.md

Commands to run Taro demos for different platforms. This includes H5, WeChat Mini Program, and other mini-programs like Alipay and Toutiao.

```bash
# Taro H5
pnpm dev:h5

# Taro 微信小程序
pnpm dev:weapp

# 其他小程序
pnpm dev:taro jd
pnpm dev:taro alipay
pnpm dev:taro tt
...
```

--------------------------------

### Install TrendArrow Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/trendarrow/doc.md

Import and use the TrendArrow component in your Vue application.

```js
import { createApp } from 'vue'
import { TrendArrow } from '@nutui/nutui'

const app = createApp()
app.use(TrendArrow)
```

--------------------------------

### Basic Cascader Usage

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/cascader/doc.en-US.md

Demonstrates the basic implementation of the Cascader component by passing in an options list.

```vue
<template>
  <nut-cascader :options="options"></nut-cascader>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const options = reactive([
      {
        text: 'Level 1 - 1',
        value: '1',
        children: [
          {
            text: 'Level 2 - 1',
            value: '1-1',
            children: [
              {
                text: 'Level 3 - 1',
                value: '1-1-1'
              }
            ]
          }
        ]
      }
    ]);

    return {
      options
    };
  }
}
</script>
```

--------------------------------

### Install Textarea Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/textarea/doc.md

Import and use the Textarea component in your Vue application.

```javascript
import { createApp } from 'vue'
import { Textarea } from '@nutui/nutui'

const app = createApp()
app.use(Textarea)
```

--------------------------------

### Basic Usage of Swipe

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/swipe/doc.md

Demonstrates the fundamental implementation of the Swipe component.

```vue
<template>
  <Swipe>
    <template v-slot:left>
      <div class="button">Delete</div>
    </template>
    <div class="content">Swipe me</div>
    <template v-slot:right>
      <div class="button">Edit</div>
    </template>
  </Swipe>
</template>

<style>
.content {
  padding: 10px 20px;
  background-color: #fff;
}
.button {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #f00;
}
</style>
```

--------------------------------

### Install Table Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/table/doc.taro.md

Import and use the Table component in your Vue application.

```javascript
import { createApp } from 'vue'
import { Table } from '@nutui/nutui-taro'

const app = createApp()
app.use(Table)
```

--------------------------------

### Install Swipe Component

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/swipe/doc.md

Import and use the Swipe component in your Vue application.

```javascript
import { createApp } from 'vue'
import { Swipe } from '@nutui/nutui'

const app = createApp()
app.use(Swipe)
```

--------------------------------

### Use Custom Iconfont - Method 1

Source: https://github.com/jd-opensource/nutui/blob/v4/src/packages/__VUE/icon/doc.taro.md

Integrate custom icons from an iconfont service like iconfont.cn. This involves downloading the icon files, referencing the CSS in your main entry file, and then using the IconFont component with specified class names.

```bash
/assets/font/demo.css
/assets/font/demo_index.html
/assets/font/iconfont.css
/assets/font/iconfont.js
/assets/font/iconfont.json
/assets/font/iconfont.ttf
/assets/font/iconfont.woff
/assets/font/iconfont.woff2
```

```javascript
import './assets/font/iconfont.css'
```

```vue
<!-- 
  font-class-name 指定类名为默认 iconfont
  class-prefix 指定默认 icon
  name 值根据 iconfont.css 中值对应填写 
-->
<IconFont font-class-name="iconfont" class-prefix="icon" name="close" />
```