PlusProComponents

https://plus-pro-components.com/
Admin
PlusProComponents is a Vue 3.2 component library based on Element Plus that provides page-level...
Tokens:94,475
Snippets:685
Trust Score:5.3
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install PlusProComponents with yarn

Source: https://plus-pro-components.com/guide/installation

Use this command to install the library with yarn. Ensure you have yarn installed.

```sh
yarn add plus-pro-components
```

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

### Install PlusProComponents with npm

Source: https://plus-pro-components.com/guide/installation

Use this command to install the library with npm. Ensure you have npm installed.

```sh
npm install plus-pro-components   --save
```

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

### Install PlusProComponents with pnpm

Source: https://plus-pro-components.com/guide/installation

Use this command to install the library with pnpm. Ensure you have pnpm installed.

```sh
pnpm install plus-pro-components
```

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

### Install @plus-pro-components/utils with npm

Source: https://plus-pro-components.com/api/utils

Use this command to install the utility package using npm.

```sh
npm install @plus-pro-components/utils  --save
```

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

### Install @plus-pro-components/utils with yarn

Source: https://plus-pro-components.com/api/utils

Use this command to install the utility package using yarn.

```sh
yarn add @plus-pro-components/utils
```

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

### Install @plus-pro-components/utils with pnpm

Source: https://plus-pro-components.com/api/utils

Use this command to install the utility package using pnpm.

```sh
pnpm install @plus-pro-components/utils
```

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

### DatePicker Basic Usage

Source: https://plus-pro-components.com/components/date-picker

Demonstrates the basic integration of the DatePicker component. No specific setup or imports are shown in this example.

```vue
<template>
  <PlusDatePicker v-model="value" />
</template>

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

const value = ref([])
</script>

```

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

### Layout Event Handling Example

Source: https://plus-pro-components.com/components/layout

Shows how to handle events emitted by the PlusSidebar and PlusHeader components within the PlusLayout. Ensure the corresponding handler functions are defined in your setup.

```html
<PlusLayout
  :sidebarProps="{ onToggleCollapse: handleToggleCollapse }"
  :headerProps="{ onClickDropdownItem: handleClickDropdownItem}"
/>
```

```typescript
const handleClickDropdownItem = (dropdownItem: { label: string; value: string }) => {
  console.log(dropdownItem)
}

const handleToggleCollapse = (collapse: boolean) => {
  console.log(collapse)
}
```

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

### Install @plus-pro-components/resolver

Source: https://plus-pro-components.com/ecosystem/resolver

Install the resolver package using pnpm. This is the first step to enable automatic component imports.

```sh
pnpm i @plus-pro-components/resolver
```

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

### Basic InputTag Usage

Source: https://plus-pro-components.com/components/input-tag

Demonstrates the fundamental usage of the InputTag component. No specific setup or constraints are mentioned for this basic example.

```vue
<template>
  <InputTag v-model="tags" />
</template>

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

const tags = ref<string[]>([])

```

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

### PlusForm Implementation Example

Source: https://plus-pro-components.com/components/form.html

A complete Vue component example demonstrating the usage of PlusForm with various built-in field types and configuration options.

```vue
<template>
  <el-card>
    <PlusForm
      v-model="state"
      label-width="140px"
      :columns="columns"
      @change="handleChange"
      @submit="handleSubmit"
      @submit-error="handleSubmitError"
      @reset="handleReset"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { PlusColumn, FieldValues } from 'plus-pro-components'

interface RestaurantItem {
  value: string
  link: string
}

interface Option {
  key: number
  label: string
  disabled: boolean
}

const state = ref<FieldValues>({
  autocomplete: 'vue',
  cascader: ['0', '0-0', '0-0-0'],
  'cascader-multiple': [
    ['0', '0-0', '0-0-0'],
    ['0', '0-0', '0-0-1'],
    ['0', '0-0', '0-0-2']
  ],
  checkbox: ['0'],
  'color-picker': 'rgba(255, 69, 0, 0.68)',
  year: '2024',
  years: ['2024', '2005'],
  month: '2024-02',
  date: '2024-03-05',
  dates: ['2024-03-05', '2024-03-06'],
  datetime: '2024-03-19 00:00:00',
  week: '2024-03-19',
  datetimerange: ['2024-03-07 00:00:00', '2024-03-09 00:00:00'],
  daterange: ['2024-02-29', '2024-03-29'],
  monthrange: ['2024-03', '2024-05'],
  select: '0',
  'select-multiple': ['0', '1'],
  'select-option-group': ['Shanghai'],
  input: '单行文本',
  textarea: '多行文本',
  'input-number': 4,
  rate: 3,
  switch: true,
  radio: '0',
  slider: 50,
  'time-picker': '2024-03-18 09:55:31',
  'time-select': '09:55:31',
  text: '文本',
  transfer: [1, 2, 3, 4, 5, 6],
  'plus-radio': 1,
  'plus-date-picker': ['2024-03-18 09:55:31', '2024-03-20 09:55:31'],
  'plus-input-tag': ['tag', 'tag1'],
  'select-v2': 'Option 1',
  'select-v2-multiple': ['Option 1', 'Option 2']
})

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0
    })
  }
  return data
}

const restaurants = ref<RestaurantItem[]>([])

const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' }
  ]
}

restaurants.value = loadAll()

const cascaderOptions = [
  {
    value: '0',
    label: '陕西',
    children: [
      {
        value: '0-0',
        label: '西安',
        children: [
          {
            value: '0-0-0',
            label: '新城区'
          },
          {
            value: '0-0-1',
            label: '高新区'
          },
          {
            value: '0-0-2',
            label: '灞桥区'
          }
        ]
      }
    ]
  },
  {
    value: '1',
    label: '山西',
    children: [
      {
        value: '1-0',
        label: '太原',
        children: [
          {
            value: '1-0-0',
            label: '小店区'
          },
          {
            value: '1-0-1',
            label: '古交市'
          },
          {
            value: '1-0-2',
            label: '万柏林区'
          }
        ]
      }
    ]
  }
]

const columns: PlusColumn[] = [
  {
    label: 'autocomplete',
    width: 120,
    prop: 'autocomplete',
    valueType: 'autocomplete',
    tooltip: '自动补全输入框',
    fieldProps: {
      fetchSuggestions: (queryString: string, cb: any) => {
        const results = queryString
          ? restaurants.value.filter(createFilter(queryString))
          : restaurants.value
        // call callback function to return suggestions
        cb(results)
      }
    }
  },
  {
    label: 'cascader',
    prop: 'cascader',
    valueType: 'cascader',
    options: cascaderOptions
  },
  {
    label: 'cascader-multiple',
    prop: 'cascader-multiple',
    valueType: 'cascader',
    options: cascaderOptions,
    fieldProps: {
```

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

### Basic Dialog Usage

Source: https://plus-pro-components.com/components/dialog

Demonstrates the fundamental implementation of the Dialog component. No specific setup is required beyond including the component.

```vue
<template>
  <Dialog v-model="dialogVisible" title="Dialog Title">
    <span>This is the dialog content.</span>
  </Dialog>
</template>

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

const dialogVisible = ref(false)
</script>
```

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

### Advanced Table Example

Source: https://plus-pro-components.com/components/table

Demonstrates an advanced usage example of the PlusTable component, combining various customization options.

```APIDOC
## Advanced Table

:::demo

table/advanced

:::
```

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

### Implement a Basic PlusForm

Source: https://plus-pro-components.com/components/form.html

A comprehensive example showing form state management, column definitions with various value types, and event handling.

```vue
<template>
  <el-card>
    <PlusForm
      v-model="state"
      :columns="columns"
      :rules="rules"
      @change="handleChange"
      @submit="handleSubmit"
      @submit-error="handleSubmitError"
      @reset="handleReset"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { PlusColumn, FieldValues } from 'plus-pro-components'

const state = ref<FieldValues>({
  status: '0',
  name: '',
  rate: 4,
  progress: 100,
  switch: true,
  time: new Date().toString(),
  endTime: [],
  img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
})

const rules = {
  name: [
    {
      required: true,
      message: '请输入名称'
    }
  ],
  tag: [
    {
      required: true,
      message: '请输入标签'
    }
  ]
}

const columns: PlusColumn[] = [
  {
    label: '名称',
    width: 120,
    prop: 'name',
    valueType: 'copy',
    //  v0.1.15 版本新增，支持计算属性
    tooltip: computed(() => (state.value.name as string) || '提示：复制名称')
  },
  {
    label: '状态',
    width: 120,
    prop: 'status',
    valueType: 'select',
    options: [
      {
        label: '未解决',
        value: '0',
        color: 'red'
      },
      {
        label: '已解决',
        value: '1',
        color: 'blue'
      },
      {
        label: '解决中',
        value: '2',
        color: 'yellow'
      },
      {
        label: '失败',
        value: '3',
        color: 'red'
      }
    ]
  },
  {
    label: '标签',
    width: 120,
    prop: 'tag'
  },
  {
    label: '执行进度',
    width: 200,
    prop: 'progress'
  },
  {
    label: '评分',
    width: 200,
    prop: 'rate',
    valueType: 'rate'
  },
  {
    label: '是否显示',
    width: 100,
    prop: 'switch',
    valueType: 'switch'
  },
  {
    label: '图片',
    prop: 'img',
    width: 100,
    valueType: 'img'
  },
  {
    label: '时间',
    prop: 'time',
    valueType: 'date-picker'
  },
  {
    label: '数量',
    prop: 'number',
    valueType: 'input-number',
    fieldProps: { precision: 2, step: 2 }
  },
  {
    label: '城市',
    prop: 'city',
    valueType: 'cascader',
    options: [
      {
        value: '0',
        label: '陕西',
        children: [
          {
            value: '0-0',
            label: '西安',
            children: [
              {
                value: '0-0-0',
                label: '新城区'
              },
              {
                value: '0-0-1',
                label: '高新区'
              },
              {
                value: '0-0-2',
                label: '灞桥区'
              }
            ]
          }
        ]
      },
      {
        value: '1',
        label: '山西',
        children: [
          {
            value: '1-0',
            label: '太原',
            children: [
              {
                value: '1-0-0',
                label: '小店区'
              },
              {
                value: '1-0-1',
                label: '古交市'
              },
              {
                value: '1-0-2',
                label: '万柏林区'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    label: '地区',
    prop: 'place',
    tooltip: '请精确到门牌号',
    fieldProps: {
      placeholder: '请精确到门牌号'
    }
  },
  {
    label: '要求',
    prop: 'demand',
    valueType: 'checkbox',
    options: [
      {
        label: '四六级',
        value: '0'
      },
      {
        label: '计算机二级证书',
        value: '1'
      },
      {
        label: '普通话证书',
        value: '2'
      }
    ]
  },
  {
    label: '梦想',
    prop: 'gift',
    valueType: 'radio',
    options: [
      {
        label: '诗',
        value: '0'
      },
      {
        label: '远方',
        value: '1'
      },
      {
        label: '美食',
        value: '2'
      }
    ]
  },
  {
    label: '到期时间',
    prop: 'endTime',
    valueType: 'date-picker',
    fieldProps: {
      type: 'datetimerange',
      startPlaceholder: '请选择开始时间',
      endPlaceholder: '请选择结束时间'
    }
  },
  {
    label: '说明',
    prop: 'desc',
    valueType: 'textarea',
    fieldProps: {
      maxlength: 10,
      showWordLimit: true,
      autosize: { minRows: 2, maxRows: 4 }
    }
  }
]

const handleChange = (values: FieldValues, prop: PlusColumn) => {
  console.log(values, prop, 'change')
}
const handleSubmit = (values: FieldValues) => {
  console.log(values, 'Submit')
}
const handleSubmitError = (err: any) => {
  console.log(err, 'err')
}
const handleReset = () => {
  console.log('handleReset')
}
</script>
```

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

### Overall Render Function Example

Source: https://plus-pro-components.com/components/rule

Demonstrates using an overall render function to apply the same rendering logic to all items in a loop. The `allRender` function is used to generate the VNode for each item.

```html
<template>
  <div v-for="item in list" :key="item.value">
    <!--渲染出来的每一项都是 a 标签  -->
    <component :is="allRender(item)"></component>
  </div>
</template>

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

  type Item = {
    value: number
  }
  const list = [{ value: 1 }, { value: 2 }]
  const allRender = (item: Item) => h('a', null, String(item.value))
</script>
```

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

### Layout Basic Usage

Source: https://plus-pro-components.com/components/layout

Demonstrates the basic integration of the PlusLayout component. This snippet is intended for initial setup and understanding of the component's structure.

```html
<PlusLayout>

</PlusLayout>
```

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

### Individual Render Function Example

Source: https://plus-pro-components.com/components/rule

Illustrates using individual render functions for each item in a loop, allowing for different rendering logic per item. Each item in the `list` has a `render` property that defines its specific VNode.

```html
<template>
  <div v-for="item in list" :key="item.value">
    <!--渲染出来的第一项是 a 标签，渲染出来的第二项是 p 标签  -->
    <component :is="item.render(item)"></component>
  </div>
</template>

<script lang="ts" setup>
  import type { VNode } from 'vue'
  import { h } from 'vue'

  type Item = {
    value: number
    render: (item: Item) => VNode
  }
  const list = [
    { value: 1, render: (item: Item) => h('a', null, String(item.value)) },
    { value: 2, render: (item: Item) => h('p', null, String(item.value)) }
  ]
</script>
```

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

### Basic Radio Usage

Source: https://plus-pro-components.com/components/radio

Demonstrates the fundamental usage of the PlusRadio component. No specific setup is required beyond importing the component.

```vue
<template>
  <plus-radio v-model="radio" :options="options" />
</template>

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

const radio = ref('')
const options = ref([
  {
    label: 'Option 1',
    value: '1'
  },
  {
    label: 'Option 2',
    value: '2'
  }
])
</script>
```

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

### Use AES Encryption

Source: https://plus-pro-components.com/api/utils/encrypt

Example usage of the encrypt function.

```typescript
import { encrypt } from '@plus-pro-components/utils'

encrypt('key', 'message') // U2FsdGVkX19GcnbMMQplTX7ZrBomhN24tzbA5Nlc1dw=
```

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

### DisplayItem Basic Usage

Source: https://plus-pro-components.com/components/display-item

Demonstrates the basic rendering of the DisplayItem component. No specific setup is required beyond its inclusion in a PlusTable.

```vue
<template>
  <PlusTable :columns="columns" :data="data">
    <template #plus-cell-name="{row, prop, label, value}">
      <DisplayItem :column="columns.find(c => c.prop === prop)" :row="row" :index="data.indexOf(row)" />
    </template>
  </PlusTable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PlusTable, PlusColumn } from 'plus-pro-components'

const columns = ref<PlusColumn[]>([
  { prop: 'name', label: 'Name', width: 120 },
  { prop: 'age', label: 'Age', width: 120 },
  { prop: 'address', label: 'Address' },
])

const data = ref([
  { name: 'John Doe', age: 30, address: 'New York' },
  { name: 'Jane Smith', age: 25, address: 'Los Angeles' },
])
</script>
```

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

### Format Money Utility

Source: https://plus-pro-components.com/api/utils

Import and use the formatMoney function to format currency values. Ensure the package is installed and imported correctly.

```ts
import { formatMoney } from '@plus-pro-components/utils'  

formatMoney('100') // ￥100.00
```

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

### Storage Utility Functions

Source: https://plus-pro-components.com/api/utils/storage

Functions for setting, getting, and removing data from localStorage.

```APIDOC
## setStorage

### Description
Sets a value in localStorage.

### Parameters
- **key** (string) - Required - The storage key.
- **value** (any) - Required - The data to store.

## getStorage

### Description
Retrieves a value from localStorage.

### Parameters
- **key** (string) - Required - The storage key.

## removeStorage

### Description
Removes an item from localStorage.

### Parameters
- **key** (string) - Required - The storage key to remove.
```

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

### Basic StepsForm Usage

Source: https://plus-pro-components.com/components/steps-form

Demonstrates the fundamental usage of the StepsForm component. Set the 'active' prop to control the current step (starting from 1) and provide 'data' for the form fields.

```vue
<template>
  <StepsForm v-model="active" :data="data" @next="next" @submit="submit" />
</template>

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

const active = ref(1)
const data = ref([
  {
    component: 'ElInput',
    label: 'Name',
    prop: 'name'
  },
  {
    component: 'ElInput',
    label: 'Email',
    prop: 'email'
  }
])

const next = (values) => {
  console.log('Next step with values:', values)
}

const submit = (values) => {
  console.log('Form submitted with values:', values)
}
</script>
```

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

### ElTable Attributes Example

Source: https://plus-pro-components.com/components/table

Demonstrates how to use common ElTable attributes like stripe, border, and fit with the PlusTable component. These attributes control the visual appearance and behavior of the table.

```html
<PlusTable :stripe="true" :border="true" :fit="false" />
```

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

### Basic Header Usage

Source: https://plus-pro-components.com/components/header

Demonstrates the basic implementation of the PlusHeader component.

```vue
<template>
  <PlusHeader />
</template>

<script lang="ts" setup>
import { PlusHeader } from 'plus-pro-components'
</script>
```

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

### Disable Start Date Logic

Source: https://plus-pro-components.com/components/date-picker

Use this function to determine if a start date should be disabled. It returns true if the start time is after the provided end value.

```javascript
const startDisabledDate = (startTime, endValue) => {
  if (!endValue) return false
  return startTime.getTime() > new Date(endValue).getTime()
}
```

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

### 项目目录结构

Source: https://plus-pro-components.com/guide/dev

展示了 PlusProComponents 项目的根目录结构及各文件夹的功能说明。

```sh

├── CHANGELOG.md            #changelog文件
├── commitlint.config.js    #commitlint配置
├── docs                    #文档所在目录
|  ├── .vitepress           #vitepress配置
|  ├── components           #组件文档
|  ├── examples             #组件文档对应的vue示例
|  ├── deploy.sh            #文档部署脚本
|  ├── guide                #快速开始文档
|  ├── index.md             #文档首页
|  ├── package.json
|  ├── public
|  └── utils
├── global.d.ts              #全局组件ts提示
├── LICENSE                  #LICENSE 文件
├── package.json
├── packages                 #包文件夹
|  ├── components            #主组件
|  ├── constants             #固定变量
|  ├── eslint-config         #eslint配置独立
|  ├── hooks                 #hooks
|  ├── locale                #国际化
|  ├── play                  #组件实时预览
|  ├── plus-pro-components   #主包入口
|  ├── utils                 #工具
|  ├── theme-chalk           #样式
|  └── types                 #公共TS类型
├── pnpm-lock.yaml
├── pnpm-workspace.yaml      #工作空间配置
├── README.md                #项目介绍
├── scripts                  #脚本
|  ├── build                 #主包打包
|  ├── changelog             #changelog
|  ├── create-component      #新增组件
|  ├── release               #整包release
|  ├── utils                 #公共打包工具
|  ├── commit.sh             #代码提交
|  └── publish.sh            #整包发布
├── tsconfig.base.json       #tsconfig配置
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── tsconfig.web.json
├── typings                   #全局d.ts
|  └── env.d.ts
└── vitest.config.ts          #vitest配置
```

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

### Get Decrypted Token

Source: https://plus-pro-components.com/api/utils/storage

Retrieves and decrypts a token from localStorage using AES. Provide the key to get the decrypted token string.

```typescript
/**
 * 获取token  带AES解密
 * @returns token
 */
declare function getToken(key: string): string
```

```typescript
import { getToken } from '@plus-pro-components/utils'

getToken('tokenKey') //  'token'
```

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

### openExe

Source: https://plus-pro-components.com/api/utils/other

Opens a local application on the computer using a specified protocol.

```APIDOC
## openExe

### Description
Opens a local application on the computer by invoking its protocol handler.

### Method
POST (conceptual, as it triggers an action)

### Endpoint
N/A (Client-side function)

### Parameters
- **protocol** (string) - Required - The protocol of the local application (e.g., `vscode://`).
- **event** (Event) - Required - The click event from an element (e.g., `el-button` or native `button`).
- **timeout** (number) - Optional - The timeout in milliseconds to consider the open action failed if no response is received. Defaults to 1000ms.

### Request Example
```html
<button @click="handleClick">Open VS Code</button>
```

```javascript
import { openExe } from '@plus-pro-components/utils';

const url = 'vscode://';

const handleClick = async (event) => {
  try {
    await openExe(url, event, 2000); // 2 second timeout
    console.log('Application opened successfully.');
  } catch (error) {
    console.error('Failed to open application:', error);
  }
};
```

### Response
#### Success Response (200)
- **FocusEvent** - A FocusEvent object if the application is successfully launched or focused.

#### Response Example
(This is a conceptual example as the actual response is an event object)
```json
{
  "type": "focus",
  "target": "<button>",
  "currentTarget": "<button>"
}
```
```

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

### endDisabledDate Function

Source: https://plus-pro-components.com/components/date-picker

This function determines if an end date should be disabled based on a start date value. It returns true if the end date is before the start date.

```APIDOC
## endDisabledDate Function

### Description
Determines if an end date should be disabled based on a start date value. Returns true if the end date is before the start date.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
const endDisabledDate = (endTime, startValue) => {
  if (!startValue) return false
  return endTime.getTime() < new Date(startValue).getTime()
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### startDisabledDate Function

Source: https://plus-pro-components.com/components/date-picker

This function determines if a start date should be disabled based on an end date value. It returns true if the start date is after the end date.

```APIDOC
## startDisabledDate Function

### Description
Determines if a start date should be disabled based on an end date value. Returns true if the start date is after the end date.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
const startDisabledDate = (startTime, endValue) => {
  if (!endValue) return false
  return startTime.getTime() > new Date(endValue).getTime()
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### DatePicker Change Event Example

Source: https://plus-pro-components.com/components/date-picker

Example of how to handle the 'change' event for the el-date-picker component within PlusDatePicker. Other events like 'blur' can be handled similarly.

```html
<PlusDatePicker :start-props="{onBlur: () => {} }" :end-props="{onBlur: () => {} }" />
```

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

### Get Form Instance with Ref in Vue

Source: https://plus-pro-components.com/components/QA.html

To access methods of a form element (like a tree-select) within a Vue component, use `ref` to get a reference to the element. Assign the element instance to a ref variable using the `fieldProps.ref` callback.

```vue
<template>
  <el-card>
    <PlusForm v-model="state" label-width="140px" :columns="columns" />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { PlusColumn, FieldValues } from 'plus-pro-components'

const state = ref<FieldValues>({
  'tree-select': ''
})

const treeSelectInstance = ref()

watch(treeSelectInstance, val => {
  console.log(val, 'val')
})

const cascaderOptions = [
  {
    value: '0',
    label: '陕西',
    children: [
      {
        value: '0-0',
        label: '西安',
        children: [
          {
            value: '0-0-0',
            label: '新城区'
          },
          {
            value: '0-0-1',
            label: '高新区'
          }
        ]
      }
    ]
  }
]

const columns: PlusColumn[] = [
  {
    label: 'tree-select',
    prop: 'tree-select',
    valueType: 'tree-select',
    fieldProps: {
      ref: e => {
        treeSelectInstance.value = e
      },
      data: cascaderOptions
    }
  }
]
</script>
```

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

### 配置构建工具自动导入

Source: https://plus-pro-components.com/guide/quickstart

在 Vite、Webpack 或 Vue CLI 中配置解析器以实现自动按需导入。

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { PlusProComponentsResolver } from '@plus-pro-components/resolver'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver(), PlusProComponentsResolver()]
    })
  ]
})
```

```javascript
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { PlusProComponentsResolver } = require('@plus-pro-components/resolver')

module.exports = {
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [PlusProComponentsResolver(), ElementPlusResolver()]
    })
  ]
}
```

```javascript
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { PlusProComponentsResolver } = require('@plus-pro-components/resolver')

module.exports = defineConfig({
  // ...
  configureWebpack: {
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [PlusProComponentsResolver(), ElementPlusResolver()]
      })
    ]
  }
})
```

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

### Use AES Decryption

Source: https://plus-pro-components.com/api/utils/encrypt

Example usage of the decrypt function.

```typescript
import { decrypt } from '@plus-pro-components/utils'

decrypt('key', 'U2FsdGVkX19GcnbMMQplTX7ZrBomhN24tzbA5Nlc1dw=') // message
```

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

### 在 Vite 中注入 SCSS 变量

Source: https://plus-pro-components.com/guide/namespace

在 vite.config.ts 的 preprocessorOptions 中通过 additionalData 导入样式配置文件。

```ts
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`
      }
    }
  }
  // ...
})
```

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

### Configure external links

Source: https://plus-pro-components.com/components/sidebar

Set the path to start with /+ to define an external link in the route configuration.

```vue
sidebar/external
```

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

### Launch Local Applications

Source: https://plus-pro-components.com/api/utils/other

Triggers a local application protocol (e.g., vscode://) via a browser event.

```ts
/**
 * @description 打开电脑本地软件
 * @param protocol  本地软件协议， 如 vscode 的协议 `vscode://`
 * @param event  点击按钮事件， `el-button` 或者原生 `button`
 * @param timeout 默认`1000`ms，没响应则认为打开失败
 */
declare const openExe: (protocol: string, event: Event, timeout?: number) => Promise<FocusEvent>
```

```html
<button @click="handleClick">打开vscode</button>
```

```ts
import { openExe } from '@plus-pro-components/utils'

const url = 'vscode://'

const handleClick = async (event: MouseEvent) => {
  await openExe(url, event)
}
```

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

### Get localStorage Item

Source: https://plus-pro-components.com/api/utils/storage

Use this function to retrieve an item from localStorage by its key. The retrieved value is returned.

```typescript
/**
 * 获取 localStorage
 * @returns storage
 */
declare function getToken(key: string): string
```

```typescript
import { getStorage } from '@plus-pro-components/utils'

getStorage('key') // { data: { username: "name" } }
```

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

### Exposes

Source: https://plus-pro-components.com/components/date-picker

The PlusDatePicker component exposes instances of the start and end el-date-picker components, allowing for direct manipulation or access to their methods.

```APIDOC
## Exposes

### Description
The PlusDatePicker component exposes instances of the start and end el-date-picker components, allowing for direct manipulation or access to their methods.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **startPickerInstance** (object) - The instance of the start el-date-picker.
- **endPickerInstance** (object) - The instance of the end el-date-picker.

#### Response Example
None
```

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

### Implement basic sidebar

Source: https://plus-pro-components.com/components/sidebar

Displays the standard sidebar configuration based on provided route information.

```vue
sidebar/basic
```

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

### Basic DrawerForm Usage

Source: https://plus-pro-components.com/components/drawer-form

Demonstrates the basic implementation of the DrawerForm component. Ensure v-model values are defined using ref to prevent potential reactivity loss.

```vue
<template>
  <drawer-form v-model="visible" />
</template>

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

const visible = ref(false)
</script>
```

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

### Include PlusProComponents via unpkg CDN

Source: https://plus-pro-components.com/guide/installation

Include these script and link tags in your HTML's head section to use PlusProComponents directly from the unpkg CDN. This method makes the library available globally as `PlusProComponents`.

```html
<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//unpkg.com/element-plus"></script>

  <!-- 导入plus-pro-components样式 -->
  <link rel="stylesheet" href="//unpkg.com/plus-pro-components/index.css" />
  <!--导入plus-pro-components"  -->
  <script src="//unpkg.com/plus-pro-components"></script>
</head>
```

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

### DrawerForm Exposes

Source: https://plus-pro-components.com/components/drawer-form

Exposed instances from the DrawerForm component.

```APIDOC
## DrawerForm Exposes

### Description
Exposed instances from the DrawerForm component for programmatic access.

### Exposes
- **`formInstance`** - Instance of the `el-form` component. Type: `object`.
- **`drawerInstance`** - Instance of the `el-drawer` component. Type: `object`.
```

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

### 项目启动与开发命令

Source: https://plus-pro-components.com/guide/dev

用于安装依赖、启动开发环境及预览文档的常用命令。

```sh
pnpm i
```

```sh
pnpm docs:dev
```

```sh
pnpm dev
```

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

### Basic Page Usage

Source: https://plus-pro-components.com/components/page

Demonstrates the fundamental integration of the Page component.

```html
<template>
  <plus-page :columns="columns" :data="data" />
</template>

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

const columns = ref([
  { field: "id", title: "ID", width: 80 },
  { field: "name", title: "Name" },
  { field: "email", title: "Email" },
  { field: "createdAt", title: "Created At" },
]);

const data = ref([
  { id: 1, name: "John Doe", email: "john.doe@example.com", createdAt: "2023-01-01" },
  { id: 2, name: "Jane Smith", email: "jane.smith@example.com", createdAt: "2023-01-02" },
]);
</script>

```

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

### 单行可编辑表格示例

Source: https://plus-pro-components.com/components/table

通过调用 formRefs 的 startCellEdit 方法实现单行编辑与校验。

```text
table/row-edit
```

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

### Disable End Date Logic

Source: https://plus-pro-components.com/components/date-picker

Use this function to determine if an end date should be disabled. It returns true if the end time is before the provided start value.

```javascript
const endDisabledDate = (endTime, startValue) => {
  if (!startValue) return false
  return endTime.getTime() < new Date(startValue).getTime()
}
```

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

### Customize Tooltip Icon with 'tooltip-icon' Slot

Source: https://plus-pro-components.com/components/form.html

Use the 'tooltip-icon' slot to provide a custom tooltip icon. This example replaces the default icon with an ElIcon Warning component.

```vue
<template>
  <el-card>
    <PlusForm v-model="state" label-width="100px" :columns="columns">
      <template #tooltip-icon>
        <el-icon :size="16" style="margin-left: 10px"><Warning /></el-icon>
      </template>
    </PlusForm>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { PlusColumn, FieldValues } from 'plus-pro-components'
import { Warning } from '@element-plus/icons-vue'

const state = ref<FieldValues>({
  input: '文本'
})

const columns: PlusColumn[] = [
  {
    label: '输入框',
    prop: 'input',
    valueType: 'input',
    tooltip: '自动补全输入框'
  }
]
</script>

```

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

### 配置 SCSS 命名空间变量

Source: https://plus-pro-components.com/guide/namespace

在样式文件中通过 @forward 覆盖 Element Plus 和 plus-pro-components 的命名空间变量。

```scss
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

@forward 'plus-pro-components/theme-chalk/src/mixins/config.scss' with (
  $el-namespace: 'ep'
);
```

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

### Form Event Handlers

Source: https://plus-pro-components.com/components/form.html

Provides example functions for handling form events such as changes, submissions, submission errors, and resets. These functions log the relevant data to the console.

```javascript
const handleChange = (values: FieldValues, prop: PlusColumn) => {
  console.log(values, prop, 'change')
}
```

```javascript
const handleSubmit = (values: FieldValues) => {
  console.log(values, 'Submit')
}
```

```javascript
const handleSubmitError = (err: any) => {
  console.log(err, 'err')
}
```

```javascript
const handleReset = () => {
  console.log('handleReset')
}
```

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

### 配置 ElConfigProvider 命名空间

Source: https://plus-pro-components.com/guide/namespace

在根组件中使用 ElConfigProvider 并设置 namespace 属性。

```html
<!-- App.vue -->
<template>
  <el-config-provider namespace="ep">
    <!-- ... -->
  </el-config-provider>
</template>
```

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

### StepsForm Header Slot Rendering

Source: https://plus-pro-components.com/components/steps-form

Allows custom rendering of the StepsForm header using slots. This example shows how to use slots for header customization, similar to the simple style.

```vue
<template>
  <StepsForm v-model="active" :data="data">
    <template #header="{ title, description, icon, status }">
      <div>
        <h3>{{ title }}</h3>
        <p>{{ description }}</p>
      </div>
    </template>
  </StepsForm>
</template>

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

const active = ref(1)
const data = ref([
  {
    component: 'ElInput',
    label: 'Name',
    prop: 'name',
    title: 'Step 1',
    description: 'Enter your name',
    icon: 'User'
  },
  {
    component: 'ElInput',
    label: 'Email',
    prop: 'email',
    title: 'Step 2',
    description: 'Enter your email',
    icon: 'Message'
  }
])
</script>
```

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

### 克隆仓库

Source: https://plus-pro-components.com/guide/dev

从 GitHub 或 Gitee 镜像克隆项目仓库。

```sh
git clone https://github.com/plus-pro-components/plus-pro-components.git
```

```bash
git clone https://gitee.com/plus-pro-components/plus-pro-components.git
```

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

### 完整引入 PlusProComponents

Source: https://plus-pro-components.com/guide/quickstart

在 main.ts 中全局注册 PlusProComponents 及其样式。

```typescript
import { createApp } from 'vue'

// 导入element-plus 及其样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 导入plus-pro-components 及其样式
import PlusProComponents from 'plus-pro-components'
import 'plus-pro-components/index.css'

import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)

// 使用
app.use(PlusProComponents)
app.mount('#app')
```

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

### Handle Form Validation Event

Source: https://plus-pro-components.com/components/form.html

This example shows how to handle the 'validate' event emitted by the PlusForm component when form validation is performed. The handler receives the property name, validity status, and error message.

```html
<PlusForm @validate="handleValidate" />
```

```typescript
const handleValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
  console.log(dropdownItem)
}
```

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

### 恢复 PlusSearch 按钮布局

Source: https://plus-pro-components.com/guide/upgrade

通过 CSS 覆盖默认样式，使搜索按钮恢复到旧版本的布局。

```css
.plus-search .plus-search__button__wrapper.el-form-item {
  flex: none;
}
```

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

### 新增组件流程

Source: https://plus-pro-components.com/guide/dev

创建新组件、配置导出、注册类型及预览组件的步骤。

```sh
pnpm run new table
```

```text
Confirm create table component? yes
```

```sh

├── index.ts          #主文件
├── src
|  └── index.vue      #组件实际代码
├── style
|  ├── index.ts       #组件按需加载 scss 样式，包含自身样式和外部样式
|  └── css.ts         #组件按需加载 css 样式，包含自身样式和外部样式
└── __tests__
  └── table.test.tsx  #单元测试代码  主要测试组件中的 props、event、slots、样式、CSS class 名、生命周期钩子，和其他相关的问题。
```

```ts
export * from './table'
```

```js
import { PlusTable } from '@plus-pro-components/components/table'

const plugins: Component[] = [PlusDialog, PlusPagination, PlusTable]
```

```ts
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    PlusTable: typeof import('plus-pro-components')['PlusTable']
  }
}
```

```html
<template>
  <PlusTable />
</template>
```
Tokens:
Raw