zxz-uni-data-select 插件使用

### 使用 `zxz-uni-data-select` 插件

为了在 UniApp 项目中集成并使用带有搜索功能的下拉框组件 `zxz-uni-data-select`，可以遵循以下指南：

#### 安装插件
首先，在项目的根目录执行命令安装此插件。通常情况下，可以通过 npm 或者 yarn 来完成安装。

npm install zxz-uni-data-select --save

或者如果更倾向于使用 Yarn:

yarn add zxz-uni-data-select

#### 导入与注册组件
接着，在页面或应用入口文件处导入该组件，并将其注册为全局/局部组件以便后续使用。

对于 Vue 文件来说，可以在 `<script setup>` 中引入：

import ZxzUniDataSelect from 'zxz-uni-data-select';
// 注册组件
export default {
    components: {ZxzUniDataSelect}
};

也可以通过 main.js 将其设为全局组件：

import Vue from 'vue'
import ZxzUniDataSelect from 'zxz-uni-data-select'

Vue.component('zxz-unidata-select', ZxzUniDataSelect);

#### 基本配置与属性设置
最后一步是在模板内定义好相应的标签结构以及绑定必要的数据源和其他参数。这里给出一个简单的例子来展示如何创建一个具有筛选能力的选择器[^3]。

<template>
  <div class="example">
      <!-- ...其他表单项 -->
      <uni-forms-item label="选择技能">
          <zxz-unidata-select 
              v-model="selectedSkill"
              :options="skillOptions"
              placeholder="请选择..."
              clearable
              filterable />
      </uni-forms-item>
      <!-- ...更多内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSkill: '',
      skillOptions: [
        { value: 'js', text: 'JavaScript' },
        { value: 'py', text: 'Python' },
        // 更多选项...
      ]
    }
  }
}
</script>

上述代码片段展示了如何利用 `v-model` 实现双向绑定所选值至变量 `selectedSkill` 上；并通过传递给 `options` 属性的对象数组提供可供选择的数据列表。同时启用了 `clearable` 和 `filterable` 特性使得用户能够方便地清空当前选择项并且支持输入关键字过滤候选条目。