Lime UI+

https://limeui.familyzone.top
Admin
Lime UI+ is a lightweight component library for the UniApp ecosystem, offering dual-mode...
Tokens:405,579
Snippets:2,911
Trust Score:0.7
Update:10 months ago
Show doc for...
Tokens:
Raw
### LimeCascader Basic Usage Example (Vue3 Setup)

Source: https://limeui.familyzone.top/components/cascader

Demonstrates the basic implementation of the LimeCascader component using Vue 3 setup syntax. It shows how to trigger the cascader, handle selection changes, and populate options. Dependencies include `ref` from Vue.

```html
<view class="cell" @click="visible = true">
  <text>地址</text>
  <text v-show="fieldValue == null" style="color: #999;">请选择地址 ></text>
  <text v-show="fieldValue != null">{{fieldValue}}</text>
</view>
<l-cascader 
  v-model:visible="visible" 
  v-model="cascaderValue" 
  :options="options" 
  title="请选择所在地区"
  @change="onChange"/>
```

```javascript
const visible = ref(false)
// 设置默认值，如 110000
const cascaderValue = ref('');
const fieldValue = ref<string|null>(null);
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    label: '北京市',
    value: '110000',
    children: [
      {
        value: '110100',
        label: '北京市',
        children: [
          { value: '110101', label: '东城区' },
          { value: '110102', label: '西城区' },
          { value: '110105', label: '朝阳区' },
          // 更多区域...
        ],
      },
    ],
  },
  {
    label: '天津市',
    value: '120000',
    children: [
      {
        value: '120100',
        label: '天津市',
        children: [
          { value: '120101', label: '和平区' },
          { value: '120102', label: '河东区' },
          // 更多区域...
        ],
      },
    ],
  },
];
// 全部选项选择后，会触发 change 事件
const onChange = (value: string, options: UTSJSONObject[]) => {
  fieldValue.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};
```

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

### Basic LimeSidebar Usage (JavaScript Setup)

Source: https://limeui.familyzone.top/components/sidebar

Provides the corresponding JavaScript setup for the basic LimeSidebar usage example, showing how to initialize the `active` model using Vue's Composition API.

```javascript
// setup 语法
const active = ref<string|number>(0);
```

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

### Custom Layout Examples

Source: https://limeui.familyzone.top/components/skeleton

Examples demonstrating how to use the `row-col` attribute to create highly customized skeleton screen layouts.

```APIDOC
## Custom Layout Examples

### Simple Custom Layout

```html
<l-skeleton loading animation="flashed" :row-col="[
  [{ width: '30%', height: '40px' }, { width: '66%', height: '40px' }],
  { width: '80%', height: '16px' },
  { width: '90%', height: '16px' },
  { width: '70%', height: '16px' }
]">
</l-skeleton>
```

### Complex Nested Layout

```html
<l-skeleton loading animation="gradient" :rows="2" :row-col="[
  [
    { type: 'circle', size: '60px', marginRight: '16px' }, 
    {
      width: '274px',
      flexDirection: 'row',
      flexWrap: 'wrap',
      marginBottom: '16px',
      children: [
        { width: '80%', height: '20px' },
        { width: '100%', height: '16px' },
        { width: '60%', height: '16px', marginRight: '40%' },
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: 'auto'}
      ]
    }
  ]]
]">
</l-skeleton>
```

### Custom Layout with Styles

```html
<l-skeleton loading animation="flashed" :row-col="[
  [{ 
    width: '100%', 
    height: '180px',
    borderRadius: '12px',
    type: 'rect'
  }],
  [{ 
    width: '50%', 
    height: '30px',
    borderRadius: '4px',
    type: 'rect'
  }],
  [{ 
    width: '100%', 
    height: '16px',
    borderRadius: '4px',
    type: 'text'
  }],
  [{ 
    width: '60%', 
    height: '16px',
    borderRadius: '4px',
    type: 'text'
  }]
]">
</l-skeleton>
```
```

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

### LimeCascader With Initial Value Example (Vue3 Setup)

Source: https://limeui.familyzone.top/components/cascader

Illustrates how to set an initial value for the LimeCascader component using `v-model` or `value`. This example demonstrates pre-selecting an option when the component mounts. It relies on Vue's `ref` and external data like `areaList`.

```html
<view class="cell" @click="visible2 = true">
  <text>地址</text>
  <text v-show="fieldValue2 == null" style="color: #999;">请选择地址 ></text>
  <text v-show="fieldValue2 != null">{{fieldValue2}}</text>
</view>
<l-cascader 
  v-model:visible="visible2" 
  v-model="cascaderValue2" 
  :options="options2" 
  title="请选择所在地区"
  @change="onChange2"/>
```

```javascript
const visible2 = ref(false)
// 设置默认值
const cascaderValue2 = ref('120119');
const fieldValue2 = ref<string|null>(null);
const options2 = areaList;
const onChange2 = (value: string, options: UTSJSONObject[]) => {
  fieldValue2.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};
```

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

### Vue 2 Composition API Setup

Source: https://limeui.familyzone.top/components/overview

This snippet demonstrates how to set up the Composition API for Vue 2 compatibility. It requires installing the '@vue/composition-api' package and registering it with Vue.

```javascript
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```

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

### Complete Footer Example

Source: https://limeui.familyzone.top/components/footer

A comprehensive example demonstrating the LimeFooter component with a logo, navigation links, and copyright information.

```APIDOC
## Complete Footer Example

This example shows a fully configured footer that includes a logo, navigation links, and copyright text.

### HTML

```html
<l-footer 
  :logo="{
    icon: '/static/logo.png',
    title: 'Brand Name',
    url: '/pages/index'
  }" 
  :links="[
    {name: 'User Agreement', url: '/pages/agreement'},
    {name: 'Privacy Policy', url: '/pages/privacy'},
    {name: 'Contact Us', url: '/pages/contact'}
  ]" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved." 
/>
```
```

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

### GET Request Example

Source: https://limeui.familyzone.top/uts/request

Example of making a GET request to fetch user data, with type definition and handling the response.

```APIDOC
## GET Request

To make a GET request, use the `get` method. You can specify the expected response data type using generics. Note that on uni-appx Android, type consistency is important; use `any` if unsure.

### Request Example

```javascript
// Define the expected data type for a user
type User = {
	id : string
	username : string
	email : string
	phone : string
	avatar : string
	nickname : string
	gender : string
	birthday : string
}

// Make a GET request to fetch users
// For uni-appx Android, ensure type consistency or use 'any'
request.get<User[]>('/users', {
	params: {
		ID: 12345,
	},
} as LimeRequestConfig).then(res => {
  console.log(res.data)
})
```
```

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

### Example of Connecting to a Printer (JavaScript)

Source: https://limeui.familyzone.top/native/printer

Provides a practical example of using the `connect` function to establish a connection with a printer. It specifies the target `deviceId` and includes a success callback to log a confirmation message. This code snippet demonstrates the basic usage pattern for connecting.

```javascript
printer.connect({
  deviceId: 'XX:XX:XX:XX:XX',
  success: () => {/* 连接成功处理 */}
});
```

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

### Complete lime-pag-x Example (HTML)

Source: https://limeui.familyzone.top/native/svga0x

Shows a comprehensive example of the PAG animation playback component, including animation control and event listening. It uses `ref` for player instance access and `@` for event binding.

```html
<l-pag-x 
  style="height: 600px;"
  :src="src"
  ref="pagPlayer"
  @animationStart="animationStart"
  @animationEnd="animationEnd"
  @init="onLoaded">
</l-pag-x>
```

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

### UI Example for Audio Conversion - HTML

Source: https://limeui.familyzone.top/native/sherpa-onnx

Provides basic HTML elements for a user interface that interacts with the speech recognition functionality. It includes text display and buttons for triggering audio-to-text conversion, starting, and stopping audio recording.

```html
<text>{{txt}}</text>
<button @click="onClick">音频转文本</button>
<button @click="startRecord">开始录制音频</button>
<button @click="stopRecord">停止录制音频</button>
```

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

### Basic Usage Example

Source: https://limeui.familyzone.top/components/footer

Demonstrates the simplest way to use the LimeFooter component, displaying only the copyright information.

```APIDOC
## Basic Usage

This example shows the most basic implementation of the footer component, displaying only the copyright text.

### HTML

```html
<l-footer text="Copyright © 2024-2025 LimeUI. All Rights Reserved." />
```
```

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

### Complete lime-pag-x Example (JavaScript)

Source: https://limeui.familyzone.top/native/svga0x

The JavaScript logic for the complete lime-pag-x example, handling animation events, initialization, and demonstrating playback control methods like play, pause, isPlaying, and load. It also includes type casting for the player instance.

```javascript
export default {
  data() {
    return {
      src: '/static/like.pag'
    }
  },
  methods: {
    animationStart() {
      console.log('动画开始')
    },
    animationEnd() {
      console.log('动画结束')
    },
    onLoaded() {
      // 获取播放器实例并播放
      const player = this.$refs["pagPlayer"] as LPagXElement
      player.play()
    },
    // 控制动画的方法示例
    controlAnimation() {
      const player = this.$refs["pagPlayer"] as LPagXElement
      
      // 播放动画
      player.play()
      
      // 暂停动画
      // player.pause()
      
      // 检查是否正在播放
      const isPlaying = player.isPlaying()
      console.log('是否正在播放:', isPlaying)
      
      // 加载新的动画文件
      // player.load('/static/new-animation.pag')
    }
  }
}
```

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

### LimeFloatingPanel Usage Examples

Source: https://limeui.familyzone.top/components/floating-panel

Examples demonstrating the basic usage and advanced features of the LimeFloatingPanel component.

```APIDOC
## LimeFloatingPanel Usage Examples

### Basic Usage

Default height is `100px`. Users can drag to expand the panel up to `60%` of the screen height.

```html
<l-floating-panel>
  <view>Content</view>
</l-floating-panel>
```

### Custom Anchors

Set anchor points using the `anchors` prop and control the current panel height with `v-model:height`.

```html
<!-- vue3 using v-model:height -->
<!-- vue2 using :height.sync -->
<l-floating-panel v-model:height="height" :anchors="anchors">
  <view style="text-align: center; padding: 15px">
    <p>Panel Height: {{ height.toFixed(0) }} px</p>
  </view>
</l-floating-panel>
```

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const { windowHeight } = uni.getSystemInfoSync();
    const anchors = [
      100,
      Math.round(0.4 * windowHeight),
      Math.round(0.7 * windowHeight),
    ];
    const height = ref(anchors[0]);

    return { anchors, height };
  },
};
```

### Header Only Dragging

Disable content dragging by setting `content-draggable` to `false`.

```html
<l-floating-panel :content-draggable="false">
  <view style="text-align: center; padding: 15px">
    <text>Content is not draggable</text>
  </view>
</l-floating-panel>
```

### Set Initial Anchor

Change the initial anchor point using the `defaultAnchor` prop.

```html
<l-floating-panel :defaultAnchor="1">
  <view style="text-align: center; padding: 15px">
    <text>Content</text>
  </view>
</l-floating-panel>
```

### Jump to Specific Anchor

Use the `toAnchor` method via a ref to jump to a specified anchor.

```html
<l-floating-panel ref="floatingPanelRef">
  <view style="text-align: center; padding: 15px">
    <text>Content</text>
  </view>
</l-floating-panel>
<button @click="to">Jump to Anchor 1</button>
```

```javascript
const floatingPanelRef = ref(null);

const to = () => floatingPanelRef.value.toAnchor(1);
```
```

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

### Basic Usage Example

Source: https://limeui.familyzone.top/native/vibrate

Demonstrates the basic implementation of the LimeVibrate component in a uni-app project.

```APIDOC
## Importing and Using the Vibrate Function

### Description
This example shows how to import the `vibrate` function from the `lime-vibrate` module and use it to trigger device vibrations.

### Method
JavaScript (import and function call)

### Code
```javascript
// Import the vibration function
import { vibrate } from '@/uni_modules/lime-vibrate';

// Trigger a vibration for 150 milliseconds
vibrate();

// Trigger a vibration for 200 milliseconds (Note: iOS does not support custom durations)
vibrate(200);
```

### Platform Notes
- The `vibrate()` function with a specified duration is supported on Android and HarmonyOS Next.
- iOS does not support specifying the duration; it will use a default vibration pattern if supported.
- Ensure you have correctly installed the `lime-vibrate` module in your uni-app project.
```

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

### Basic Usage Example

Source: https://limeui.familyzone.top/components/sticky

Demonstrates the basic implementation of the LimeSticky component to achieve a sticky effect.

```APIDOC
## Basic Usage

Wrap your content within the `l-sticky` component to achieve the sticky effect.

```html
<l-sticky>
  <button>Basic Sticky</button>
</l-sticky>
```
```

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

### LimeTable Basic Usage Example (HTML)

Source: https://limeui.familyzone.top/components/table

Demonstrates the fundamental structure of the LimeTable component using l-tr for rows and l-td for cells. This example shows how to create a simple table with a header and data rows.

```html
<l-table>
	<!-- 表头 -->
	<l-tr style="background-color: #f5f5f5;">
		<l-td><text class="cell">ID</text></l-td>
		<l-td><text class="cell">姓名</text></l-td>
		<l-td><text class="cell">城市</text></l-td>
	</l-tr>
	<!-- 数据结构 -->
	<l-tr>
		<l-td><text class="cell">1</text></l-td>
		<l-td><text class="cell">张三</text></l-td>
		<l-td><text class="cell">广州</text></l-td>
	</l-tr>
	<l-tr>
		<l-td><text class="cell">2</text></l-td>
		<l-td><text class="cell">李四</text></l-td>
		<l-td><text class="cell">深圳</text></l-td>
	</l-tr>
</l-table>
```

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

### LimeSidebar with Anchor Component Integration (JavaScript Setup)

Source: https://limeui.familyzone.top/components/sidebar

Provides the JavaScript setup for integrating LimeSidebar with L-Anchor. It initializes the `current` model, defines the `onChange` handler, and sets up sample data for the sidebar items and their corresponding content sections.

```javascript
// setup 语法
const current = ref<string|number>(0);
const onChange = (value: number|string) => {
  console.log('value', value);
};

// 模拟数据
const list = ref([
  { title: '标签1', children: ['内容1', '内容2', '内容3'] },
  { title: '标签2', children: ['内容1', '内容2', '内容3'] },
  { title: '标签3', children: ['内容1', '内容2', '内容3'] }
]);
```

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

### Installing Iconify Tools for Private Iconify Usage

Source: https://limeui.familyzone.top/components/icon

This command installs the necessary Node.js packages for local processing and management of Iconify icons, enabling a private Iconify setup.

```bash
yarn add @iconify/json @iconify/tools @iconify/utils
```

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

### Full Configuration Example

Source: https://limeui.familyzone.top/native/otpauth

Demonstrates using all available options to configure the TOTP generator, including issuer, label, secret, algorithm, digits, and period.

```APIDOC
## Full Configuration Example

### Description

This example showcases initializing the TOTP generator with a comprehensive set of options, including issuer details, a custom secret, SHA512 algorithm, 8 digits, and a 60-second period.

### Method

`useTOTP(options).generate()`

### Parameters

- **options** (UseTOTPOptions) - Configuration object:
  - **issuer** (string) - Optional - The name of the issuer or provider.
  - **label** (string) - Optional - The account label (e.g., user's email).
  - **issuerInLabel** (boolean) - Optional - Whether to include the issuer prefix in the label. Defaults to true.
  - **secret** (string) - Required - The secret key (base32 encoded).
  - **algorithm** (LimeHMACAlgorithm) - Optional - Hashing algorithm. Defaults to 'SHA1'.
  - **digits** (number) - Optional - Number of digits for the code. Defaults to 6.
  - **period** (number) - Optional - Validity period of the code in seconds. Defaults to 30.

### Request Example

```typescript
import { useTOTP, type UseTOTPOptions } from '@/uni_modules/lime-otpauth'

const options: UseTOTPOptions = {
  issuer: 'My Application',      // Issuer/provider name
  label: 'user@example.com',      // Account label (e.g., user email)
  issuerInLabel: true,            // Include issuer in label
  secret: 'JBSWY3DPEHPK3PXP',     // Secret key
  algorithm: 'SHA512',            // Use SHA512 algorithm for higher security
  digits: 8,                      // 8-digit code
  period: 60                      // 60-second validity period
}

const totp = useTOTP(options)
const code: string = totp.generate()
console.log('Full Config Code:', code)
```

### Response

#### Success Response (200)

- **code** (string) - The generated TOTP code based on the full configuration.

#### Response Example

```json
{
  "code": "12345678"
}
```
```

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

### LimeCalendar: Custom First Day of Week

Source: https://limeui.familyzone.top/components/calendar

Sets the starting day of the week using the `first-day-of-week` attribute. For example, setting it to `1` makes Monday the first day of the week.

```html
<l-calendar v-model:visible="visible" type="range" confirm-btn="确认" :firstDayOfWeek="1"></l-calendar>
```

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

### Manage Locale Messages and Formats (JavaScript)

Source: https://limeui.familyzone.top/uts/i18n

Provides examples of managing locale messages and formats using the i18n global API. This includes setting, getting, and merging locale messages, as well as setting, getting, and merging date-time and number formats. It shows usage for both the Options API (e.g., `this.$i18n.global`) and Composition API (e.g., `getCurrentInstance()`).

```javascript
// Can manually import i18n, for example if you created i18n in a separate file, you can import this file to use i18n
i18n.global.setLocaleMessage('zh-CN', zhCN)
i18n.global.getLocaleMessage('zh-CN')

// If using Options API, you can use
this.$i18n.global.setLocaleMessage

// If using Composition API, you can get the current component instance first
const instance = getCurrentInstance()
instance.proxy!.$i18n.global.setLocaleMessage
```

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

### Vue 2 Setup for Composition API

Source: https://limeui.familyzone.top/components/badge

为 Vue 2 项目配置 Composition API 的说明。在 main.js 文件中导入并使用 '@vue/composition-api' 插件。这是使用 Composition API 的前提。

```js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```

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

### PAG Animation Player Component (lime-pag-x)

Source: https://limeui.familyzone.top/native/svga0x

Documentation for the lime-pag-x component, covering installation, basic usage, complete examples with controls and event listeners, component props, events, and methods.

```APIDOC
## lime-pag-x PAG Animation Player Component

Based on the PAG format, this is a high-performance animation player component that supports basic playback control and animation state listening. PAG is an efficient animation format that allows for lightweight animation effects, suitable for various interactive scenarios and UI motion display.

**Plugin Dependency:** Requires usage within a custom base.

### Installation

1. Search for and import `lime-pag-x` in uni-app.
2. After importing, you may need to recompile the project.
3. Must be used within a custom base.
4. Use the `l-pag-x` component in your pages.
5. This plugin tag only supports Android and iOS. HarmonyOS Next requires cooperation with lime-pag.

### Basic Usage

Simplest usage of the PAG animation player component. Set the `src` attribute to point to the PAG file path.

**HTML:**
```html
<l-pag-x 
  style="height: 300px;"
  :src="pagSrc">
</l-pag-x>
```

**JavaScript:**
```javascript
export default {
  data() {
    return {
      pagSrc: '/static/animation.pag'
    }
  }
}
```

### Complete Example (with Controls and Event Listeners)

Includes a complete example with animation control and event listening.

**HTML:**
```html
<l-pag-x 
  style="height: 600px;"
  :src="src"
  ref="pagPlayer"
  @animationStart="animationStart"
  @animationEnd="animationEnd"
  @init="onLoaded">
</l-pag-x>
```

**JavaScript:**
```javascript
export default {
  data() {
    return {
      src: '/static/like.pag'
    }
  },
  methods: {
    animationStart() {
      console.log('Animation started')
    },
    animationEnd() {
      console.log('Animation ended')
    },
    onLoaded() {
      // Get player instance and play
      const player = this.$refs["pagPlayer"] as LPagXElement
      player.play()
    },
    // Example method for controlling animation
    controlAnimation() {
      const player = this.$refs["pagPlayer"] as LPagXElement
      
      // Play animation
      player.play()
      
      // Pause animation
      // player.pause()
      
      // Check if playing
      const isPlaying = player.isPlaying()
      console.log('Is playing:', isPlaying)
      
      // Load new animation file
      // player.load('/static/new-animation.pag')
    }
  }
}
```

### Component Tag Information

| Tag     | Description              |
| ------- | ------------------------ |
| `l-pag-x` | Component tag            |

### Props

| Attribute Name | Description            | Type    | Default Value |
| -------------- | ---------------------- | ------- | ------------- |
| `src`          | PAG file resource address | _string_ | `""`          |

### Events

| Event Name      | Description             | Callback Parameters |
| --------------- | ----------------------- | ------------------- |
| `init`          | Component initialized   | -                   |
| `animationStart`| Animation starts playing| -                   |
| `animationEnd`  | Animation ends normally | -                   |
| `animationUpdate`| Animation progress update| -                   |
| `animationRepeat`| Animation loops         | -                   |
| `animationCancel`| Animation interrupted   | -                   |
| `frame`         | Current playback frame  | _frame: number_     |
| `fail`          | Load/play failure       | _error: Error_      |

### Methods API

Call methods via the component instance:

**uni-app:**
```javascript
const player = this.$refs.pagPlayer
```

**uni-appx:**
```javascript
const player = this.$refs["pagPlayer"] as LPagXElement
```

| Method Name | Description                 | Parameters |
| ----------- | --------------------------- | ---------- |
| `play`      | Start/resume animation play | -          |
| `pause`     | Pause animation playback    | -          |
| `isPlaying` | Returns playback status (true=playing) | -          |
| `load`      | Load new animation file     | _src: string_ |

### Usage Notes

1. The component requires a custom base; normal compilation environments may not function correctly.
2. Ensure the PAG file path is correct and the file format meets requirements.
3. The component height must be set via the `style` attribute; otherwise, it may not display correctly.
4. Perform playback control operations only after the component is initialized (when the `init` event is triggered).
```

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

### Loading Switch Example (HTML)

Source: https://limeui.familyzone.top/components/switch

Illustrates how to set the switch to a loading state using the 'loading' attribute, which also disables user interaction.

```html
<l-switch v-model="checked" loading></l-switch>
```

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

### Methods

Source: https://limeui.familyzone.top/native/svga-x

API documentation for the component's methods, accessible via a ref.

```APIDOC
## Methods

Methods can be called by obtaining the component instance through ref:

| Method Name | Description | Parameters |
|---|---|---|
| `load` | Load new SVGA animation resource | `url: string` - Resource address |
| `startAnimation` | Start playing animation | - |
| `pauseAnimation` | Pause animation playback | - |
| `stopAnimation` | Stop and reset animation | - |
| `setLoops` | Set loop count | `count: number` - Loop count, 0 for infinite loop |
| `stepToFrame` | Jump to a specific frame | `frame: number` - Target frame <br> `play: boolean` - Whether to continue playing |
| `stepToPercentage` | Jump to a specific percentage position | `percent: number` - Percentage value (0-100) <br> `play: boolean` - Whether to continue playing |
| `setText` | Dynamically replace text content | `content: object` - Text object <br> `key: string` - Element identifier |
| `setImage` | Dynamically replace image element | `src: string` - Image address <br> `key: string` - Element identifier |
| `setFillMode` | Set fill mode | `mode: string` - Fill mode, e.g., 'forward'
```

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

### LimeCalendar: Select Date Range

Source: https://limeui.familyzone.top/components/calendar

Allows selecting a date range by setting the `type` attribute to `range`. The `confirm` event returns an array containing two timestamps: the start date and the end date of the selected range. The example formats these into a readable range string.

```html
<l-calendar v-model:visible="visible" type="range" @confirm="handleConfirm"></l-calendar>
```

```javascript
const date = ref('');
const visible = ref(false);
const formatDate = (date: number) => {
    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
};
const handleConfirm = (dates: number[]) => {
    date.value = `${formatDate(new Date(dates[0]))} - ${formatDate(new Date(dates[1]))}`;
};
```

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

### Vue 2 Usage of LimeIcon with Composition API

Source: https://limeui.familyzone.top/components/icon

Provides instructions and code examples for using the LimeIcon component in a Vue 2 project. It highlights the need to install and use the `@vue/composition-api` plugin and demonstrates how to register the `limeIcons` plugin with icon URLs or JSON collections.

```javascript
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

// 配置svg指定路径，后期可上传到后端，不占用本地空间，如果使用的是`iconify`也可以不配置这一步
import {limeIcons} from '@/uni_modules/lime-icon'

Vue.use(VueCompositionAPI)

// 示例1 配置icons地址
Vue.use(limeIcons, ['https://xxx.cn/static/icons', null])

// 示例2 配置icons集合json
import icons from './static/icons/icons.json'
Vue.use(limeIcons, [null, icons])
```

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

### Initialize and Play Audio with LimeAudioPlayer (JavaScript)

Source: https://limeui.familyzone.top/native/audio-player

This snippet demonstrates how to initialize an audio context using `createInnerAudioContext` from the lime-audio-player module and play an audio file. It includes an event listener for when the audio is ready to play. No external dependencies are required beyond the lime-audio-player module.

```javascript
import { createInnerAudioContext } from '@/uni_modules/lime-audio-player';
const ctx = createInnerAudioContext()
ctx.src = 'xxxx.mp3'
ctx.onCanplay((_)=>{
	console.log("可以播放了")
	ctx.play()
})
```

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

### LimeCascader Custom Field Names Example (Vue3 Setup)

Source: https://limeui.familyzone.top/components/cascader

Shows how to customize the field names used for options in the LimeCascader component via the `keys` prop. This is useful when your data structure uses different property names for labels, values, and children. Uses Vue's `ref`.

```html
<view class="cell" @click="visible3 = true">
  <text>地址</text>
  <text v-show="fieldValue3 == null" style="color: #999;">请选择地址 ></text>
  <text v-show="fieldValue3 != null">{{fieldValue3}}</text>
</view>
<l-cascader 
  v-model:visible="visible3" 
  v-model="cascaderValue3" 
  :options="options3" 
  :keys="keys"
  title="请选择所在地区"
  @change="onChange3"/>
```

```javascript
const visible3 = ref(false)
const cascaderValue3 = ref('');
const fieldValue3 = ref<string|null>(null);
const options3 = [
  {
    name: '北京市',
    code: '110000',
    items: [
      {
        code: '110100',
        name: '北京市',
        items: [
          { code: '110101', name: '东城区' },
          { code: '110102', name: '西城区' },
          // 更多区域...
        ],
      },
    ],
  },
  // 更多省份...
];

const keys = {label: 'name', value: 'code', children: 'items'}
const onChange3 = (value: string, options: UTSJSONObject[]) => {
  fieldValue3.value = options.map((item: UTSJSONObject):any|null => (item['name'])).join('/');
};
```

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

### Basic LimeDialog Logic (JavaScript)

Source: https://limeui.familyzone.top/components/dialog

Provides the necessary JavaScript logic for the basic LimeDialog example. It defines a reactive variable `visible` to control the dialog's display state and a `confirm` function to handle the confirmation action. This setup is typical for managing dialog visibility and interactions in a Vue application.

```javascript
const visible = ref(false);
const confirm = () => {
	console.log('点击了确认按钮')
}
```

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

### Vue 2 Initialization with Vue Composition API (JavaScript)

Source: https://limeui.familyzone.top/components/qrcode

This code demonstrates how to integrate Vue Composition API into a Vue 2 project, which might be necessary for using certain features or components like lime-qrcode that rely on it. This setup is done in the `main.js` file.

```javascript
// Using in a Vue 2 project
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';

Vue.use(VueCompositionAPI);
```

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

### Customize LimeLottie Animation Properties

Source: https://limeui.familyzone.top/components/lottie

Explains how to customize the behavior of the Lottie animation using component props. Attributes like `loop` for continuous playback, `autoplay` for automatic starting, and `speed` for controlling the playback rate can be directly set on the `l-lottie` component. The example shows these properties applied in a Vue template.

```html
<template>
  <l-lottie 
    src="https://example.com/animation.json" 
    :loop="true" 
    :autoplay="true"
    :speed="1.5"
  ></l-lottie>
</template>
```

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

### Dynamically Load Locale Messages with LimeI18n

Source: https://limeui.familyzone.top/uts/i18n

This snippet demonstrates how to dynamically load locale messages after the application has started, using `setLocaleMessage`. This is useful for lazy-loading translations or fetching them from an API. The examples show this functionality within a `setTimeout` callback for both direct i18n instance usage, Options API, and Composition API. Dependencies include the i18n instance and locale message data.

```uts
// 模拟请求后端接口返回
setTimeout(() => {
  // 直接调用创建的
  i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

// 选项式API中使用：
// 模拟请求后端接口返回
setTimeout(() => {
  this.$i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

// 组合式API中使用：
// 模拟请求后端接口返回
const instance = getCurrentInstance()
setTimeout(() => {
  instance.proxy!.$i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)
```

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

### Landscape Mode Example

Source: https://limeui.familyzone.top/components/signature

Illustrates how to enable landscape mode for the signature pad by setting the `landscape` prop, adjusting the container size, and demonstrating button placement for landscape orientation.

```APIDOC
## Landscape Mode Example

### HTML
```html
<view style="width: 100vw; height: 100vh;">
	<l-signature landscape></l-signature>
</view>
<view style="transform: rotate(90deg);">
	<button @click="onClick('clear')">清空</button>
	<button @click="onClick('undo')">撤消</button>
	<button @click="onClick('save')">保存</button>
	<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>
```
```

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

### LimeCountTo: Set Start and End Values

Source: https://limeui.familyzone.top/components/count-to

Specify the value from which the number starts rolling to the target value.

```html
<l-count-to :from="0" :to="1000"></l-count-to>
```

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

### Basic Usage

Source: https://limeui.familyzone.top/native/svga-x

Demonstrates the simplest way to use the SVGA player by setting the resource address and listening for load completion events.

```APIDOC
## Basic Usage

Most basic SVGA player usage, just set the resource address and listen for the load completion event.

### HTML
```html
<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
    @percentage="onPercentage"
  />
</template>
```

### JavaScript
```javascript
export default {
  methods: {
    onPercentage(progress) {
      console.log('Current playback progress:', progress)
    },
    onLoaded() {
      // uniappx
      (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
      // uniapp
      // this.$refs.svgaPlayer.startAnimation()
    }
  }
}
```
```

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

### Set Up Network Printer Connection (JavaScript)

Source: https://limeui.familyzone.top/native/printer

Initializes the printer connection for network printing. This is a placeholder function, as actual network printing functionality was not tested. Users intending to use network printing should refer to the documentation for further implementation details.

```javascript
printer.setUpConnection('net')
```

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

### LimeColorGrab Component Usage Example

Source: https://limeui.familyzone.top/components/color-grab

Examples demonstrating how to use the LimeColorGrab component in HTML and JavaScript.

```APIDOC
## Usage Examples

### HTML
```html
<l-color-grab src="'/static/logo.png'" @change="onChange"></l-color-grab>
```

### JavaScript
```javascript
const onChange = (color) => {
	console.log('color', color);
}
```
```

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

### Quick Preview Component (HTML)

Source: https://limeui.familyzone.top/components/switch

Includes a placeholder HTML tag for a quick preview of the lime-switch component, typically found within its installed directory.

```html
<!-- 代码位于 uni_modules/lime-switch/components/lime-switch -->
<lime-switch />
```

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

### Check if Xiaohongshu Client is Installed

Source: https://limeui.familyzone.top/native/xhsshare

Checks if the Xiaohongshu application is installed on the device. This is a utility function to determine if sharing to Xiaohongshu is possible.

```javascript
// 是否存在小红书客户端
xhsUtils.isInstalled()
```

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

### Quick Preview of LimeOverlay Component

Source: https://limeui.familyzone.top/components/overlay

Illustrates how to quickly preview the LimeOverlay component within a Uni-app project after installation. This involves using a specific tag directly in the template.

```html
<!-- 代码位于 uni_modules/lime-overlay/components/lime-overlay -->
<lime-overlay />
```

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

### Basic Usage Example

Source: https://limeui.familyzone.top/components/blur-view

Demonstrates how to use the LimeBlurView component with the `blur` attribute to apply a Gaussian blur effect.

```APIDOC
## Basic Usage Example

### Description
This example shows how to implement the `l-blur-view` component and apply a blur effect using the `blur` attribute.

### Markup
```html
<l-blur-view class="blur" :blur="5">
	<text class="text">高斯模糊</text>
</l-blur-view>
<image class="image" mode="widthFix" src="https://img30.360buyimg.com/sku/jfs/t1/226459/37/16721/264461/662dec54F95822c8b/a87d699d4008c0c0.jpg"></image>
```

### Notes
- The `blur` attribute controls the intensity of the blur effect.
```

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

### Check WeChat Client Installation

Source: https://limeui.familyzone.top/native/weixin

Checks if the WeChat client is installed on the device using the isInstalled method. This is useful to determine if WeChat-related features can be used.

```javascript
// 是否存在微信客户端
wxUtils.isInstalled()
```

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

### LimeGzip Decompression Usage Example (JavaScript)

Source: https://limeui.familyzone.top/native/gzip

Provides examples of how to use the `decompressGzip` function to decompress Gzip data. It shows how to handle both Uint8Array and string output formats.

```javascript
const compressedData = new Uint8Array([...]); // GZIP压缩数据

// 返回 Uint8Array
decompressGzip({
  input: compressedData,
  success: (res) => {
    console.log('Decompressed data:', res.data);
    console.log('Original size:', res.originalSize);
    console.log('Compressed size:', res.compressedSize);
  }
} as UnGZipOptions); // uniapp不需要强制类型 所以不需要 as UnGZipOptions

// 返回字符串
decompressGzip({
  input: compressedData,
  asText: true,
  success: (res) => {
    console.log('Decompressed text:', res.data);
  }
} as UnGZipOptions); // uniapp不需要强制类型 所以不需要 as UnGZipOptions
```

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

### Quick Preview Component

Source: https://limeui.familyzone.top/components/blur-view

Instructions on how to use the `lime-blur-view` tag for a quick preview of the component's functionality after installation.

```APIDOC
## Quick Preview

### Description
After installing the plugin, you can use the `lime-blur-view` tag to quickly preview the component's appearance and functionality.

### Usage
```html
<lime-blur-view />
```

### Note
- The component tag for general use is `l-blur-view`.
- The tag `lime-blur-view` is specifically for the demo component.
```

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

### Install Tesseract.js for Web

Source: https://limeui.familyzone.top/native/ocr

For Web deployments, the Tesseract.js library must be installed separately using npm. This library is essential for enabling OCR functionality in a web browser environment.

```shell
npm install tesseract.js

```

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

### POST Request Example

Source: https://limeui.familyzone.top/uts/request

Illustrates how to perform a POST request to create a new pet record, including handling success and error responses.

```APIDOC
## POST Request

Use the `post` method for sending data to create or update resources. The example shows creating a pet record.

### Request Example

```javascript
request
	.post<any>('/pet', {
		name: 'Hello Kitty',
		status: 'sold',
	})
	.then((response) => {
		// Handle successful response
		console.log('onPost response:::', response.data)
	})
	.catch((error) => {
		// Handle error
		console.log('onPost error:::', error)
	})
```
```

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

### Uniappx Usage Example

Source: https://limeui.familyzone.top/components/signature

Provides a specific example for using LimeSignature within a Uniappx environment, including type imports and handling for different actions like saving, undoing, redoing, and clearing.

```APIDOC
## Uniappx Usage Example

### JavaScript (Uniappx)
```javascript
import {LimeSignatureToTempFilePathOptions, LimeSignatureToFileSuccess} from '@/uni_modules/lime-signature'
export default {
	data() {
		return {
			title: 'Hello',
			penColor: 'red',
			penSize: 5,
			url: '',
			openSmooth: true
		}
	},
	methods: {
		onClick(type: string) {
			const signatureRef = this.$refs['signatureRef'] as LSignatureComponentPublicInstance
			// APP 不支持
			// #ifndef APP 
			 if(type == 'openSmooth') {
				 this.openSmooth = !this.openSmooth
			 }
			 // #endif
			if (type == 'save') {
				signatureRef.canvasToTempFilePath({
					success: (res: LimeSignatureToFileSuccess) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						this.url = res.tempFilePath
					}
				} as LimeSignatureToTempFilePathOptions)
				return
			}
			if(type == 'undo'){
				signatureRef.undo()
			}
			if(type == 'redo'){
				signatureRef.redo()
			}
			if(type == 'clear'){
				signatureRef.clear()
			}
		}
	}
}
```
```
Tokens:
Raw