PiUI

https://piui.sadais.com
Admin
PiUI is a high-quality open-source component library that helps designers and developers quickly...
Tokens:116,376
Snippets:831
Trust Score:5.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Navbar Component Usage Examples

Source: https://piui.sadais.com/docs/components/Navbar.html

Examples demonstrating how to use the pi-navbar component with different configurations.

```APIDOC
## Navbar Component Examples

### Basic Usage

This example shows a basic navbar with a title.

```html
<pi-navbar title="Basic Title" />
```

### Fixed Navbar

Demonstrates how to fix the navbar to the top of the screen.

```html
<pi-navbar title="Fixed Navbar" :fixed="true" />
```

### Custom Back Button

Configuring a custom back icon and text.

```html
<pi-navbar
  show-back
  back-icon-name="scan"
  back-text="Back"
  :fixed="false"
/>
```

### Hidden Back Button

Example of hiding the back button.

```html
<pi-navbar :show-back="false" />
```

### Custom Background

Setting a custom background color or gradient for the navbar.

```html
<pi-navbar
  title="Custom Background"
  background="linear-gradient(to right, #e0eafc, #cfdef3)"
  :fixed="false"
/>
```

### Slot Usage (Left)

Using the 'left' slot to customize the left side of the navbar.

```html
<pi-navbar title="Left Slot">
  <view slot="left" class="custom-icon" />
</pi-navbar>
```

### Slot Usage (Title)

Using the 'title' slot to customize the navbar title, for example, with a search bar.

```html
<pi-navbar :fixed="false">
  <pi-search slot="title" />
</pi-navbar>
```

### Slot Usage (Right)

Using the 'right' slot to add custom content to the right side of the navbar.

```html
<pi-navbar title="Right Slot" :show-back="true">
  <view slot="right" class="custom-action" />
</pi-navbar>
```
```

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

### Basic Usage Examples

Source: https://piui.sadais.com/docs/components/DatePicker.html

Examples demonstrating the basic usage and customization of the DatePicker component.

```APIDOC
## Basic Usage

`v-model` 控制选择器收起/显示
`field` 控制选择器的粒度（年/月/日/时/分）
`default-value` 设置选择器的初始默认值

### 切换选择精度

```vue
<pi-date-picker
    v-model="datePickerOptions.show"
    field="year"
    :show-title="false"
    default-value="2020"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="month"
    :show-title="false"
    default-value="2020-05"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="day"
    :show-title="false"
    default-value="2020-05-23"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="hour"
    :show-title="false"
    default-value="2020-05-23 0"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="minute"
    :show-title="false"
    default-value="2020-05-23 12:10"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="second"
    :show-title="false"
    default-value="1990-05-23 12:10:25"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
```

### 切换操作栏位置

```vue
<pi-date-picker
    v-model="datePickerOptions.show"
    field="year"
    :show-title="false"
    default-value="2020"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="year"
    toolbar-position="top"
    :show-title="false"
    default-value="2020"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
```
```

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

### RadioGroup Example with Size and Icon Size

Source: https://piui.sadais.com/docs/components/Radio.html

Example demonstrating how to set the size and icon-size for RadioGroup.

```APIDOC
## RadioGroup Example

### Setting Size and Icon Size

`size` sets the text size of the radio button.
`icon-size` sets the icon size of the radio button.

```html
<pi-radio-group v-model="demo6" direction="vertical" size="60" icon-size="40">
  <pi-radio :name="1" active-mode="fill" active-color="red">红色，代表热情</pi-radio>
  <pi-radio :name="2" active-color="blue">蓝色，代表冷静</pi-radio>
  <pi-radio :name="3" disabled active-color="green">绿色，代表生活</pi-radio>
</pi-radio-group>
```
```

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

### Show Title Example

Source: https://piui.sadais.com/docs/components/PopupSelect.html

Demonstrates how to display the title using the `showTitle` prop.

```APIDOC
## Show Title

### Description
Set the `showTitle` prop to `true` to display the title of the popup.

### Request Example
```html
<template>
  <pi-button type="primary" @click="showTitle = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="showTitle" show-title />
</template>

<script>
export default {
  data() {
    return {
      showTitle: false
    }
  }
}
</script>
```
```

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

### Basic Usage Example

Source: https://piui.sadais.com/docs/components/List.html

Demonstrates the basic usage of the Pi-List and Pi-ListItem components to create a simple list.

```APIDOC
## Basic Usage

### Description
This example shows how to use `pi-card` to contain a `pi-list` with several `pi-list-item` components.

### Request Example
```html
<pi-card padding="32rpx 0">
  <template slot="body">
    <pi-list title="列表面板">
      <pi-list-item title="标题1" />
      <pi-list-item title="标题2" desc="描述文本1" />
      <pi-list-item title="标题3" desc="描述文本2" extra-text="额外文本" />
    </pi-list>
  </template>
</pi-card>
```
```

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

### Basic Usage Example

Source: https://piui.sadais.com/docs/components/Img.html

Demonstrates the basic usage of the Img component, including setting width, height, and src.

```APIDOC
## Basic Usage

Set the `width`, `height`, and `src` of the image to display it normally.
If loading fails, placeholder content will be displayed.

```html
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  src="http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg"
/>
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  src="http://img.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg"
/>
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc + 1"
>
  <view slot="error">
    Custom placeholder content
  </view>
</pi-img>
```
```

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

### Toolbar Position Example

Source: https://piui.sadais.com/docs/components/PopupSelect.html

Illustrates how to position the toolbar using the `toolbar-position` prop.

```APIDOC
## Toolbar Position

### Description
Use the `toolbar-position` prop to set the toolbar's location. Options include `'top'`, `'bottom'` (default), and `'none'` to hide it.

### Request Example
```html
<template>
  <pi-button type="primary" @click="toolbarPosition = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="toolbarPosition" toolbar-position="top" />
</template>

<script>
export default {
  data() {
    return {
      toolbarPosition: false
    }
  }
}
</script>
```
```

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

### Basic Usage Example

Source: https://piui.sadais.com/docs/components/PopupSelect.html

Demonstrates how to use the PopupSelect component with `v-model` to control its visibility.

```APIDOC
## Basic Usage

### Description
Use `v-model` or `value` to control the display of the popup.

### Request Example
```html
<template>
  <pi-button type="primary" @click="baseUsed = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="baseUsed" />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: false
    }
  }
}
</script>
```
```

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

### Set Storage Example

Source: https://piui.sadais.com/docs/js-tool/lib/storage.html

Demonstrates saving an object to storage with a specific expiration date.

```javascript
setStorage('USER_INFO', {name: 'aaaa', phone: 123123231}, new Date('2022-02-02'))
```

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

### Cropping and Scaling Example

Source: https://piui.sadais.com/docs/components/Img.html

Illustrates different cropping and scaling modes available for the Img component.

```APIDOC
## Cropping/Scaling

More details on scaling/cropping modes can be found in uni-app's Image component.

```html
<pi-img
  width="220"
  mode="widthFix"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="320"
  mode="scaleToFill"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="aspectFit"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="aspectFill"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
```
```

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

### Basic Marquee Usage

Source: https://piui.sadais.com/docs/components/Marquee.html

Demonstrates the fundamental usage of the Pi-Marquee component for displaying scrolling text. This example shows a basic setup without specific direction or speed configurations.

```Vue
<template>
  <pi-marquee>
    <template v-slot:item>
      <view>江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</view>
    </template>
  </pi-marquee>
</template>
```

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

### Show Cancel Button Example

Source: https://piui.sadais.com/docs/components/PopupSelect.html

Shows how to display the cancel button with custom styling using the `cancelBtn` prop.

```APIDOC
## Show Cancel Button

### Description
Configure the cancel button's appearance using the `cancelBtn` prop. Set `show: true` to display it.

### Request Example
```html
<template>
  <pi-button type="primary" @click="showCancelBtn = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="showCancelBtn" :cancel-btn="{ show: true }" />
</template>

<script>
export default {
  data() {
    return {
      showCancelBtn: false
    }
  }
}
</script>
```
```

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

### Combined Slot Example

Source: https://piui.sadais.com/docs/components/List.html

An example showcasing the use of both left and right slots within `pi-list-item` for complex list item layouts.

```APIDOC
## Combined Slot Example

### Description
This example demonstrates a `pi-list` with `pi-list-item` components that utilize both `left` and `right` slots for richer content presentation.

### Request Example
```html
<pi-list title="示例">
  <pi-list-item title="订单记录">
    <pi-icon slot="left" name="order1" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="我的">
    <pi-icon slot="left" name="mine" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="个人信息">
    <pi-icon slot="left" name="form" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="系统设置">
    <pi-icon slot="left" name="setup-fill" size="50" custom-class="pi-primary" />
  </pi-list-item>
</pi-list>
```
```

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

### Image Shape Example

Source: https://piui.sadais.com/docs/components/Img.html

Demonstrates how to set the shape of the image using the `shape` property.

```APIDOC
## Image Shape

Set the image shape using `shape` for more versatile use cases.

```html
<pi-img
  width="220"
  height="220"
  mode="widthFix"
  shape="square"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="scaleToFill"
  loading-type="round"
  shape="round"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
```
```

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

### Throttle Implementation Examples

Source: https://piui.sadais.com/docs/js-tool/lib/throttle.html

Demonstrates common use cases including scroll event handling, token renewal with specific options, and cancelling a throttled function.

```javascript
// Avoid excessively updating the position while scrolling.
jQuery(window).on('scroll', throttle(updatePosition, 100))

// Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
const throttled = throttle(renewToken, 300000, { 'trailing': false })
jQuery(element).on('click', throttled)

// Cancel the trailing throttled invocation.
jQuery(window).on('popstate', throttled.cancel)
```

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

### Lazy Loading Example

Source: https://piui.sadais.com/docs/components/Img.html

Shows how to enable lazy loading for images using the `lazyLoad` property. It requires `width` and `height` to be set.

```APIDOC
## Lazy Loading

The `lazyLoad` property can enable image lazy loading. Note that it needs to be used with `width` and `height`.

```html
<pi-img
  width="220"
  height="200"
  mode="widthFix"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
 />
<pi-img
  width="220"
  height="200"
  mode="widthFix"
  loading-type="round"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
```

**Tip:** You can use slots to encapsulate the component and customize the loading icon and error content.
```

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

### Basic Usage Example

Source: https://piui.sadais.com/docs/components/CalendarPanel.html

Demonstrates the basic usage of the CalendarPanel component, setting a default selected date using v-model.

```APIDOC
## Basic Usage

Use `v-model` or `value` to set the default selected date.

```vue
<template>
   <pi-calendar-panel v-model="base.value" />
</template>

<script>
export default {
  data() {
    return {
      base: {
        value: '2019-08-11'
      }
    }
  }
}
</script>
```
```

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

### Custom Height Example

Source: https://piui.sadais.com/docs/components/PopupSelect.html

Shows how to set a custom height for the PopupSelect component using the `height` prop.

```APIDOC
## Custom Height

### Description
Set the `height` prop to customize the popup's height. For content to auto-expand, set `height: 'auto'`.

### Request Example
```html
<template>
  <pi-button type="primary" @click="customHeight = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="customHeight" height="400rpx" />
</template>

<script>
export default {
  data() {
    return {
      customHeight: false
    }
  }
}
</script>
```
```

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

### Configure Multi Column Picker

Source: https://piui.sadais.com/docs/components/Picker.html

This example demonstrates configuring a multi-column picker. The `default-value` array should have a length equal to the number of columns.

```vue
<pi-picker
  v-model="pickerOptions.show"
  :items="pickerOptions.items"
  :type="pickerOptions.type"
  :default-value="pickerOptions.defaultValue"
  :popup-select="{
    showTitle: true,
    title: pickerOptions.title,
    borderRadius: '24rpx 24rpx 0 0',
    appendToBody: true
  }"
  @confirm="handlePickerConfirm"
/>

export default {
   data() {
    return {
      pickerOptions: {
        key: '',
        show: true,
        items: items,
        type: 'multi',
        defaultValue: [1, 1],
        title: 'default-value = [1, 1]'
      }
    }
  }
}
```

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

### Custom Buttons Example

Source: https://piui.sadais.com/docs/components/PopupSelect.html

Illustrates how to customize both confirm and cancel buttons using `confirmBtn` and `cancelBtn` props.

```APIDOC
## Custom Buttons

### Description
Customize the confirm and cancel buttons using the `confirmBtn` and `cancelBtn` props, respectively. You can configure properties like `type`, `round`, and `text`.

### Request Example
```html
<template>
  <pi-button type="primary" @click="customBtns = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select
    v-model="customBtns"
    :confirm-btn="{ show: true, type: 'warn', round: true }"
    :cancel-btn="{ show: true, type: 'line', round: true }"
  />
</template>

<script>
export default {
  data() {
    return {
      customBtns: false
    }
  }
}
</script>
```
```

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

### Configure Single Column Picker

Source: https://piui.sadais.com/docs/components/Picker.html

This example shows how to configure and use a single-column picker. Ensure `default-value` array length matches the number of columns.

```vue
<pi-picker
  v-model="pickerOptions.show"
  :items="pickerOptions.items"
  :type="pickerOptions.type"
  :default-value="pickerOptions.defaultValue"
  :popup-select="{
    showTitle: true,
    title: pickerOptions.title,
    borderRadius: '24rpx 24rpx 0 0',
    appendToBody: true
  }"
  @confirm="handlePickerConfirm"
/>

export default {
   data() {
    return {
      pickerOptions: {
        key: '',
        show: true,
        items: items,
        type: 'single',
        defaultValue: [1],
        title: 'default-value = [1]'
      }
    }
  }
}
```

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

### Get System Information

Source: https://piui.sadais.com/docs/js-tool/lib/system.html

Retrieve general system information. This is a global constant that returns an object containing system details.

```javascript
System.systemInfo
```

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

### Left Slot Usage Example

Source: https://piui.sadais.com/docs/components/List.html

Illustrates how to use the `left` slot in `pi-list-item` to prepend custom content, such as icons.

```APIDOC
## Left Slot Usage

### Description
Utilize the `left` slot within `pi-list-item` to add custom elements like icons before the main content.

### Request Example
```html
<pi-list title="左侧slot" desc="slot left">
  <pi-list-item title="标题标题" desc="描述">
    <pi-icon slot="left" name="commentfill" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="是否开启版本更新提示" desc="更快更轻">
    <pi-icon slot="left" name="activity-fill" size="50" custom-class="pi-primary" dot />
    <pi-switch slot="right" size="40" active-color="#ff508a" />
  </pi-list-item>
  <pi-list-item title="点击更新" desc="更快更轻">
    <pi-icon slot="left" name="tasklist-fill" size="50" custom-class="pi-primary" dot />
    <pi-button slot="right" type="primary" size="tiny">更新</pi-button>
  </pi-list-item>
</pi-list>
```
```

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

### Popup Positioning Example

Source: https://piui.sadais.com/docs/components/Popup.html

Demonstrates how to position the popup at different locations (top, bottom, left, right) using the `position` prop. Includes dynamic style adjustments for left/right positioning to ensure content fills the available space.

```vue
<template>
  <pi-grid col="2" gap="24" :border="false">
    <pi-grid-item :index="0">
      <pi-button type="primary" @click="handleShowPosition('top')">
        上方弹出
      </pi-button>
    </pi-grid-item>
    <pi-grid-item :index="1">
      <pi-button type="primary" @click="handleShowPosition('bottom')">
        下方弹出
      </pi-button>
    </pi-grid-item>
    <pi-grid-item :index="2">
      <pi-button type="primary" @click="handleShowPosition('left')">
        左侧弹出
      </pi-button>
    </pi-grid-item>
    <pi-grid-item :index="3">
      <pi-button type="primary" @click="handleShowPosition('right')">
        右侧弹出
      </pi-button>
    </pi-grid-item>
  </pi-grid>
  <pi-popup v-model="position.show" :position="position.position">
    <view :style="[position.style]" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      position: {
        show: false,
        position: 'top',
        style: { width: '100%', height: '800rpx' }
      }
    }
  },
  methods: {
    handleShowPosition(position = 'top') {
      const positionStyleMap = {
        top: { width: '100%', height: '800rpx' },
        bottom: { width: '100%', height: '800rpx' },
        left: { width: '500rpx', height: '100%' },
        right: { width: '500rpx', height: '100%' }
      }
      this.position = {
        show: true,
        position,
        style: positionStyleMap[position]
      }
    }
  }
}
</script>
```

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

### Range Selection Example

Source: https://piui.sadais.com/docs/components/CalendarPanel.html

Demonstrates how to configure the CalendarPanel for date range selection by setting the `type` prop to 'range'.

```APIDOC
## Range Selection

Set `type: 'range'` to display the calendar component in date range selection mode.

**Note:** When `type: 'range'` is set, the `v-model` or `value` should be an `Array`.

```vue
<template>
  <pi-calendar-panel v-model="range.value" type="range" />
</template>

<script>
export default {
  data() {
    return {
      range: {
        value: ['2019-08-11', '2019-08-28']
      }
    }
  }
}
</script>
```
```

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

### Basic ActionSheet Usage

Source: https://piui.sadais.com/docs/components/ActionSheet.html

Demonstrates how to use the pi-action-sheet component for basic selection. Control visibility with `v-model` and handle selections via the `@select` event. This example shows setting up three action sheets for different scenarios: basic, with description, and with a cancel button.

```vue
<template>
  <pi-form show-right-icon>
    <pi-form-item label="基础使用" @click="baseUsed.show = true">
      <input
        :value="form.baseUsed"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
    <pi-form-item label="展示描述信息" @click="description.show = true">
      <input
        :value="form.description"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
    <pi-form-item label="展示取消按钮" @click="cancelText.show = true">
      <input
        :value="form.cancelText"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <pi-action-sheet
    v-model="baseUsed.show"
    :items="baseUsed.items"
    @select="form.baseUsed = $event.text"
  />
  <pi-action-sheet
    v-model="description.show"
    :items="description.items"
    description="这是一段描述文字"
    @select="form.description = $event.text"
  />
  <pi-action-sheet
    v-model="cancelText.show"
    :items="cancelText.items"
    cancel-text="取消"
    @select="form.cancelText = $event.text"
  />
</template>

<script>
export default {
  data() {
    return {
      form: {
        baseUsed: '选项一',
        description: '选项二',
        cancelText: '选项三',
        itemOption: '着色选项'
      },
      baseUsed: {
        show: false,
        items: [
          { id: 1, text: '选项一' },
          { id: 2, text: '选项二' },
          { id: 3, text: '选项三' }
        ],
        defaultValue: null
      },
      description: {
        show: false,
        items: [
          { id: 1, text: '选项一' },
          { id: 2, text: '选项二' },
          { id: 3, text: '选项三' }
        ],
        defaultValue: null
      },
      cancelText: {
        show: false,
        items: [
          { id: 1, text: '选项一' },
          { id: 2, text: '选项二' },
          { id: 3, text: '选项三' }
        ],
        defaultValue: null
      }
    }
  }
}
</script>

```

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

### Configure Multi-Auto Column Picker

Source: https://piui.sadais.com/docs/components/Picker.html

This example configures a cascading multi-column picker. The `default-value` array length must match the maximum depth of the selection.

```vue
<pi-picker
  v-model="pickerOptions.show"
  :items="pickerOptions.items"
  :type="pickerOptions.type"
  :default-value="pickerOptions.defaultValue"
  :popup-select="{
    showTitle: true,
    title: pickerOptions.title,
    borderRadius: '24rpx 24rpx 0 0',
    appendToBody: true
  }"
  @confirm="handlePickerConfirm"
/>

export default {
   data() {
    return {
      pickerOptions: {
        key: '',
        show: true,
        items:  items,
        type: 'multi-auto',
        defaultValue: [2, 0, 2],
        title: 'default-value = [2, 0, 2]'
      }
    }
  }
}
```

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

### Basic Marquee Usage

Source: https://piui.sadais.com/docs/components/Marquee.html

This example demonstrates the basic usage of the pi-marquee component with an array of text items. Ensure the 'items' prop is an array of strings or handle non-string arrays using the 'item' slot.

```vue
<template>
  <pi-marquee :items="marqueeTexts" />
</template>

<script>
export default {
  data() {
    return {
      marqueeTexts: [
        '江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
      ]
    }
  }
}
</script>
```

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

### Import and Initialize Storage

Source: https://piui.sadais.com/docs/js-tool/lib/storage.html

Shows how to import the storage module or access it via the global instance.

```javascript
import Storage from '@sadais/piui-tool/tools/storage'
// or
this.$pi.storage.setStorage(key, value, expiryDate)
```

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

### generateArray(start, end)

Source: https://piui.sadais.com/docs/js-tool/lib/common.html

Generates a continuous array from start to end.

```APIDOC
## generateArray(start, end)

### Description
Generates a continuous array from start to end.

### Parameters
- **start** (number) - Required - Start value.
- **end** (number) - Required - End value.

### Response
- **Returns** (Array) - The generated array.
```

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

### Import and Usage of Throttle

Source: https://piui.sadais.com/docs/js-tool/lib/throttle.html

Shows how to import the throttle utility or use it via the global $pi instance.

```javascript
import throttle from '@sadais/piui-tool/tools/throttle'
// or
this.$pi.throttle(fn, delay)
```

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

### getTag(value)

Source: https://piui.sadais.com/docs/js-tool/lib/lang.html

Gets the `tag` of `value`. (Internal: `Object.prototype.toString.call(value)`).

```APIDOC
## getTag(value) ⇒ `string`

获取对象标志
**Kind** : global function  
**Returns** : `string` - 对象的标志
Param | Type | Description  
---|---|---
value | `object` | 需要获取标志的对象  
**Example**
```
tag(null) // [object Null]
tag(undefined) // [object Undefined]
tag('a') // [object String]

```
```

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

### Importing Lang Utilities

Source: https://piui.sadais.com/docs/js-tool/lib/lang.html

Shows how to import the utility module or specific functions, and how to access them via the global $pi instance.

```javascript
import lang from '@sadais/piui-tool/tools/lang'
// or
import { isEmpty } from '@sadais/piui-tool/tools/lang'
// or
this.$pi.lang.isObjectLike(value)
```

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

### Stopping the Countdown

Source: https://piui.sadais.com/docs/components/CountDown.html

Shows how to control the start and stop of the countdown using the `autoplay` property.

```APIDOC
### Stopping the Countdown

The `autoplay` property controls whether the countdown starts or stops.

```html
<pi-count-down value="314159" :autoplay="false" />
```
```

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

### Importing File Utilities

Source: https://piui.sadais.com/docs/js-tool/lib/file.html

Demonstrates various ways to import the file utility module. Ensure you use the correct import path for your project.

```javascript
import file from '@sadais/piui-tool/tools/file'
// or
import { base64ToBlob } from '@sadais/piui-tool/tools/file'
// or
this.$pi.file.base64ToBlob('data:xxx')
```

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

### Basic Usage

Source: https://piui.sadais.com/docs/components/Icon.html

Demonstrates the basic usage of the Icon component by setting the `name` and `size` props.

```APIDOC
### Basic Usage

Use the `<pi-icon>` tag and set the `name` to the icon name. Use the `size` attribute to set the icon size.

```html
<pi-icon name="message-copy" size="16" />
<pi-icon name="bars" size="32" />
<pi-icon name="edit-line" size="48" />
<pi-icon name="add" size="64" />
```
```

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

### 基础用法 CalendarInput

Source: https://piui.sadais.com/docs/components/CalendarInput.html

Use v-model or value to control the date. This is the basic setup for the CalendarInput component.

```vue
<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="基础用法">
      <pi-calendar-input v-model="form.date" />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { date: '' }
    }
  }
}
</script>
```

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

### 验证 vue-cli 版本

Source: https://piui.sadais.com/docs/guide

检查当前安装的 vue-cli 版本是否正确。

```bash
vue --version
```

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

### CountUp Basic Usage

Source: https://piui.sadais.com/docs/components/CountUp.html

Demonstrates the basic usage of the CountUp component by setting start and end numbers.

```APIDOC
## CountUp Basic Usage

### Description
Demonstrates the basic usage of the CountUp component by setting start and end numbers.

### Example
```html
<pi-count-up start-num="0" end-num="999" />
<pi-count-up start-num="999" end-num="0" />
```
```

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

### Basic Usage

Source: https://piui.sadais.com/docs/components/Card.html

Demonstrates the basic usage of the Pi-Card component by setting the title.

```APIDOC
## Basic Usage

### Description

Set the title using the `title` prop.

### Code Example

```html
<pi-card title="基础用法" />
```
```

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

### Import System Module

Source: https://piui.sadais.com/docs/js-tool/lib/system.html

Import the System module to access system information. Alternatively, use the `$pi.system.systemInfo` property if available in your context.

```javascript
import System from '@sadais/piui-tool/tools/system'
```

```javascript
this.$pi.system.systemInfo
```

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

### Two-way Binding Example

Source: https://piui.sadais.com/docs/components/CalendarPanel.html

Shows how to achieve two-way binding with an input field using v-model for the CalendarPanel.

```APIDOC
## Two-way Binding

Use `v-model` or `value` to bind the CalendarPanel with an input field, automatically displaying the selected date.

```vue
<template>
  <pi-card>
    <pi-section slot="title" padding="0" title="双向绑定" />
    <template slot="body">
      <pi-calendar-panel v-model="sync.value" />
    </template>
    <view slot="footer" class=" pi-align-center">
      <pi-input v-model="sync.value" class="pi-flex-sub" />
      <pi-button type="primary" size="small">同步时间</pi-button>
    </view>
  </pi-card>
</template>

<script>
export default {
  data() {
    return {
      sync: {
        value: '2019-08-11'
      }
    }
  }
}
</script>
```
```

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

### 启动项目

Source: https://piui.sadais.com/docs/guide

进入项目目录并启动开发服务器。

```bash
cd my-project && npm run dev
```

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

### Basic ImgCropper Usage

Source: https://piui.sadais.com/docs/components/ImgCropper.html

Demonstrates the fundamental usage of the ImgCropper component. It shows how to bind the image source and handle the cropping result.

```vue
<template>
  <pi-img-cropper :src="xxx" @cropped="handleCrop" />
</template>

<script>
export default {
  handleCrop(res) {
    // res = { img: 'xxx', width, height }
  }
}
</script>
```

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

### 生成 piui 项目

Source: https://piui.sadais.com/docs/guide

使用 vue-cli 和指定的预设模板创建新项目。

```bash
vue create -m npm --preset direct:https://gitee.com/org-sadais/piui-preset-vue.git --clone my-project
```

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

### Pi-Popup Basic Usage

Source: https://piui.sadais.com/docs/components/Popup.html

Demonstrates the basic usage of the Pi-Popup component, showing how to display it and control its visibility.

```APIDOC
## Pi-Popup Basic Usage

### Description
This example shows how to display a popup using the `v-model` directive and a button to control its visibility.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **v-model** (Boolean) - Required - Controls the visibility of the popup.

### Request Example
```html
<template>
  <pi-button type="primary" @click="showPopup = true">
    显示弹出层
  </pi-button>
  <pi-popup v-model="showPopup">
    <view style="height: 800rpx;" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    }
  }
}
</script>
```

### Response
N/A (Component Usage)
```

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

### Left Slot Content

Source: https://piui.sadais.com/docs/components/Navbar.html

Customize the left side of the navbar by using the `left` slot. Example shows adding an icon.

```html
<pi-navbar :fixed="false" title="左边插槽">
  <view slot="left" class="pi-pd-left-24 pi-icon-add pi-fz-46 pi-primary" />
</pi-navbar>
```

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

### Right Slot Usage Example

Source: https://piui.sadais.com/docs/components/List.html

Demonstrates using the `right` slot in `pi-list-item` to append custom content, such as checkboxes or buttons.

```APIDOC
## Right Slot Usage

### Description
The `right` slot in `pi-list-item` allows for the insertion of custom elements like checkboxes or buttons to the right of the main content.

### Request Example
```html
<pi-list title="右侧slot" desc="slot right">
  <pi-list-item title="中文">
    <pi-checkbox slot="right" active-mode="fill" shape="round" :value="true" />
  </pi-list-item>
  <pi-list-item title="英文">
    <pi-checkbox slot="right" active-mode="fill" shape="round" />
  </pi-list-item>
</pi-list>
```
```

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

### 引入 piui 样式文件

Source: https://piui.sadais.com/docs/guide

在 App.vue 或 uni.css 中引入 piui 的样式文件，需使用 scss。

```scss
<style lang="scss">
  @import 'sadais-piui/scss/index.scss';
</style>
```

```scss
<style lang="scss">
  @import 'sadais-piui/scss/variable.scss';
</style>
```

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

### Disabled List Item Example

Source: https://piui.sadais.com/docs/components/List.html

Demonstrates how to disable list items using the `disabled` prop, visually indicating they are not interactive.

```APIDOC
## Disabled List Item

### Description
Set the `disabled` prop on `pi-list-item` to make the item non-interactive and visually distinct.

### Request Example
```html
<pi-list title="禁用行">
  <pi-list-item v-for="item in 3" :key="item" disabled>
    {{ item }}
  </pi-list-item>
</pi-list>
```
```

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

### System Information

Source: https://piui.sadais.com/docs/js-tool/lib/system.html

Access system information, check for iPhone X series devices, and get safe area insets.

```APIDOC
## System Information API

This API provides access to various system-related information and device properties.

### Endpoints

#### `systemInfo`

**Description**: Retrieves general system information.
**Kind**: Global Constant
**Returns**: `Object` - An object containing system details.

#### `isIpx`

**Description**: Checks if the device is an iPhone X series model.
**Kind**: Global Constant
**Returns**: `Boolean` - `true` if it's an iPhone X series device, `false` otherwise.

#### `safeAreaInsets`

**Description**: Gets the safe area insets for the device screen.
**Kind**: Global Constant
**Returns**: `Object` - An object containing the safe area inset values.

### Usage Examples

```javascript
// Import the System module
import System from '@sadais/piui-tool/tools/system';

// Access system information
const systemInfo = System.systemInfo;

// Check if it's an iPhone X series device
const isIpx = System.isIpx;

// Get safe area insets
const safeAreaInsets = System.safeAreaInsets;
```

```javascript
// Alternatively, using the pi instance

// Access system information
const systemInfo = this.$pi.system.systemInfo;

// Check if it's an iPhone X series device
const isIpx = this.$pi.system.isIpx;

// Get safe area insets
const safeAreaInsets = this.$pi.system.safeAreaInsets;
```
```

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

### Import and Usage of Validation Tools

Source: https://piui.sadais.com/docs/js-tool/lib/validate.html

Shows how to import validation functions or access them via the global $pi instance.

```javascript
import validate from '@sadais/piui-tool/tools/validate'
// or
import { isEmail } from '@sadais/piui-tool/tools/validate'
// or
this.$pi.validate.checkPassword(password)
```

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

### Implement basic LineProgress

Source: https://piui.sadais.com/docs/components/LineProgress.html

Set the percent attribute to a value between 0 and 100. Use width and height to adjust the component dimensions.

```html
<pi-line-progress width="200" percent="40" />
<pi-line-progress percent="50" />
<pi-line-progress percent="60" :round="false" />
<pi-line-progress height="30" percent="70" />
```

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

### Marquee with Scroll Delay

Source: https://piui.sadais.com/docs/components/Marquee.html

Sets a delay before the Pi-Marquee component starts scrolling. This is configured using the `run-delay` prop, specified in milliseconds.

```Vue
<template>
  <pi-marquee :run-delay="2000">
    <template v-slot:item>
      <view>延迟2000毫秒后滚动江山如此多娇引无数英雄竞折腰惜秦皇汉武略输文采唐宗宋祖稍逊风骚一代天骄成吉思汗只识弯弓射大雕俱往矣数风流人物还看今朝</view>
    </template>
  </pi-marquee>
</template>
```

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

### 配置 vue.config.js 转译

Source: https://piui.sadais.com/docs/guide

在 vue-cli 工程中显式声明对 piui 相关库的转译。

```javascript
// vue.config.js
module.exports = {
  transpileDependencies: ['@sadais/piui-tool', 'sadais-piui']
}
```

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

### Hiding Right Icon Example

Source: https://piui.sadais.com/docs/components/List.html

Shows how to hide the default right-side arrow icon in list items using the `show-right-icon` prop.

```APIDOC
## Hiding Right Icon

### Description
Use the `show-right-icon` prop on `pi-list-item` to control the visibility of the right-side arrow.

### Request Example
```html
<pi-list title="隐藏右侧图标">
  <pi-list-item v-for="item in 3" :key="item" :show-right-icon="false">
    {{ item }}
  </pi-list-item>
</pi-list>
```
```

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

### Basic Usage

Source: https://piui.sadais.com/docs/components/Modal.html

Demonstrates the basic usage of the Modal component, controlled by `v-model` and configured with `title` and `content`.

```APIDOC
## Basic Usage

Controls the modal's visibility with `v-model`, sets the title with `title`, and the content with `content`.

### Component Usage
```vue
<template>
  <pi-button type="primary" @click="baseUsed = true">
    Show Modal
  </pi-button>
  <pi-modal v-model="baseUsed" title="Modal Title" content="This is the modal content." />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: false
    }
  }
}
</script>
```
```

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

### Get Weekday in Chinese

Source: https://piui.sadais.com/docs/js-tool/lib/date.html

Retrieves an array of Chinese characters representing the days of the week. Useful for displaying weekdays in a localized format.

```javascript
const arr = getWeekDayZh() // ['日', '一', '二', '三', '四', '五', '六']
```

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

### 设置边框与圆角

Source: https://piui.sadais.com/docs/base-style/Base.html

使用 pi-solid-* 或 pi-dashed-* 设置边框，pi-radius-* 设置圆角。

```html
<template>
  <view class="pi-solid-1" /> // 等价于border:1px solid $pi-line-color
  <view class="pi-dashed-1" /> // 等价于border:1px dashed $pi-line-color
</template>
```

```html
<template>
  <view class="pi-solid-top-2" /> // 等价于border-top:2px solid $pi-line-color
  <view class="pi-dashed-bottom-2" /> // 等价于border-bottom:2px dashed $pi-line-color
</template>
```

```html
<template>
  <view class="pi-radius-4" /> // 等价于border-radius:4rpx
  <view class="pi-circle" /> // 等价于border-radius:50%
  <view class="pi-radius-round" /> // 等价于border-radius:50%
</template>
```

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

### Right Slot Content

Source: https://piui.sadais.com/docs/components/Navbar.html

Add custom content to the right side of the navbar using the `right` slot. Example shows adding an icon.

```html
<pi-navbar :fixed="false" title="右边插槽" :show-back="true">
  <view slot="right" class="pi-pd-right-24 pi-icon-add pi-fz-46 pi-primary" />
</pi-navbar>
```
Tokens:
Raw