codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/22.H5/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/70./351/200/211/346/213/251/345/231/250/20./351/200/211/346/213/251/345/231/250.md

@@ -0,0 +1,307 @@
+# 选择器
+
+点击展示选项选择，支持单选、多选、筛选等功能。选择器组件常用于可选择的场景，例如表单和数据筛选等。
+
+例如：在表单场景中，为商品选择分类。
+
+<img src="../assets/xuanzeqi_202408211147_1.png" class="imgStyle" style="max-width:375px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../../../20.应用开发/10.页面设计/17.组件通用属性说明.md)。
+
+### 数据属性
+
+* 值：当前选中的值。若开启“可多选”属性，建议“值”绑定为List类型数据，T的数据类型与“值字段”属性有关。"值“可手动输入值或编辑表达式，编辑表达式可绑定变量，可以动态获取选中的选项。
+
+  * 手动输入：手动输入时直接在制品页面中展示选中项，建议搭配“只读”属性使用。
+
+    <img src="../assets/xuanzeqi_h5_v33_2.png" alt="0" style="max-width:375px;" />
+  * 编辑表达式：编辑表达式时若直接绑定变量，支持开启“是否将组件输入赋值给变量“，开启时会根据选择的选项的“值字段”属性对应值改变变量的值，也会根据变量的值展示当前选择的选项。编辑表达式时若包含其他表达式，则仅支持根据表达式展示当前选择的选项，建议搭配“只读”属性使用。
+
+    <img src="../assets/xuanzeqi_h5_v33_3.png" alt="0" style="max-width:375px;" />
+* 数据源：组件所使用的数据的来源 。数据源可绑定 List类型变量或输出参数为数组或包含 List的匿名数据结构的逻辑，逻辑包含前端逻辑和服务端逻辑，List中T的类型可以是任意类型（包括 `List<T>`、联合类型）。例如绑定输出结果为 `{list:List<{student:Student}>,total:10}`的服务端逻辑。
+
+  操作步骤：点击“请选择表达式“进入编辑表达式页面，拖入变量或使用调用逻辑组件，可使用组件的可访问属性。
+
+    <img src="../assets/xuanzeqi_202408211147_2.png" class="imgStyle" style="" />
+
+* 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+* 值字段：绑定数据源后，在弹出窗口中获取的选项值的字段名。当数据源设置为动态数据源时，可点击选择数据类型中的属性作为值字段；当动态数据源的数据类型为基础类型时，默认为item且不可修改。当数据源为直接写入的静态数据源时，文本字段默认展示结构中value字段且无法修改。
+* 文本字段：绑定数据源后，在弹出窗口中展示的选项文本的字段名。当数据源设置为动态数据源时，可点击选择数据类型中的属性作为文本字段；当动态数据源的数据类型为基础类型时，默认为item且不可修改。当数据源为直接写入的静态数据源时，文本字段默认展示结构中text字段且无法修改。
+
+- 动态选项插槽：若开启“动态选项插槽“，下拉框的内容区域包含插槽。选择器在绑定数据源的前提下该属性生效，插槽中的组件支持根据选择器的数据源来配置信息并动态加载。若下拉框选项中仅需要将数据源中的某一属性作为文本展示，则可以直接配置“文本字段”，无需开启“动态选项插槽”。
+
+  - 例如：向插槽中拖拽标签组件并为标签组件的“文本”属性绑定变量current.item或其属性，制品应用中即可根据数据源动态渲染下拉选项中的标签。
+
+    <img src="../assets/xuanzeqih5_202412031110_1.png" class="imgStyle" style="" />
+
+  - 参考制品效果：
+
+    <img src="../assets/xuanzeqih5_202412031110_2.png" class="imgStyle" style="width:300px;" />
+
+* 分页：设置是否分页展示数据，即当前页数据加载触底后展示下一页数据。默认关闭。
+* 默认每页条数：选择每页中展示多少条数据，最小展示数量为10条，默认展示数据为50条。开启“分页加载更多”属性时生效。开启“分页”属性适用于“数据源”需要调用服务端逻辑的情况。开启“分页”时，组件可以获取到分页的大小和当前的页数，将属性传递到服务端逻辑并在查询的数据中完成分页规则配置即可实现分页，参考操作步骤如下：
+
+  * 当“数据源”为前端数据，即数据不经过服务端逻辑处理，开启“分页”属性并配置“默认分页条数”即可实现分页功能。
+  * 当"数据源“需要调用服务端逻辑时，若开启“分页”，组件可以获取到分页的大小和当前的页数，将属性传递到服务端逻辑并在查询的数据中完成分页规则配置即可实现分页，参考操作步骤如下：
+
+    1. 为需要调用的查询数据的服务端逻辑添加两个Integer类型输入参数page和size。
+
+       <img src="../assets/xuanzeqi_h5_v33_7.png" alt="0" style="" />
+    2. 双击编辑数据查询，进入分页排序界面，将输入参数作为分页参数。
+
+       <img src="../assets/xuanzeqi_h5_v33_8.png" alt="0" style="" />
+    3. 返回选择器组件的数据源，将当前组件的size和page属性作为输入参数传入服务端逻辑。
+
+       <img src="../assets/xuanzeqi_h5_v33_9.png" alt="0" style="" />
+
+* 初始化排序规则：设置初始化排序的字段和排序规则。当数据源设置为动态数据源时，可点击选择数据类型中的属性作为排序规则，排序规则默认值升序。
+
+### 主要属性
+
+* 是否使用新版外观：默认关闭。
+
+  * 旧版外观
+
+    <img src="../assets/xzq_202406141655_1.png" style="width: 375px;border: 1px solid #ccc;" />
+
+  * 新版外观
+
+    <img src="../assets/xzq_202406141655_2.png" style="width: 375px;border: 1px solid #ccc;" />
+
+* 分页加载更多：设置是否分页展示数据，即当前页数据加载触底后展示下一页数据。默认关闭。
+* 列表样式：弹出窗口展示的数据样式。支持选择器和列表。
+
+  * 选择器
+
+    <img src="../assets/xzq_202406141655_3.png" style="width: 375px;border: 1px solid #ccc;" />
+
+  * 列表（未开启“可多选”）
+
+    <img src="../assets/xzq_202406141655_4.png" style="width: 375px;width: 375px;border: 1px solid #ccc;" />
+
+  * 列表（开启“可多选”）
+
+    <img src="../assets/xzq_202406141655_5.png" style="width: 375px;border: 1px solid #ccc;" />
+
+* 占位提示：选择器无内容时的提示信息，支持自定义编辑，默认值“请选择”。
+* 工具栏标题：可修改工具栏中的标题文案。开启“显示工具栏”时有效。
+* 确认按钮文字：可修改工具栏中确认按钮的文案。开启“显示工具栏“时有效。
+* 取消按钮文字：可修改工具栏中取消按钮的文案。开启“显示工具栏”时有效。
+* 可见选项个数：可见的选项个数。“列表样式”为选择器时生效。
+* 对齐方式：选择器右侧展示内容的对齐方式，支持左对齐、右对齐、居中。开启编辑表达式功能后，用于标识"对齐方式“属性不同选项的对应值如下：
+
+  <img src="../assets/xzq_202406141655_6.png" style="width: 375px;border: 1px solid #ccc;" />
+
+* 显示工具栏：是否展示弹出窗口顶部的工具栏。默认开启。
+
+  <img src="../assets/xzq_202406141655_7.png" style="width: 375px;border: 1px solid #ccc;" />
+
+- 转换器：开启“可多选”属性后，将选中的值转为对应格式。支持以‘,’连接，以‘|’连接，以‘;’连接，json和无共五种模式。
+
+    - 选择“json”时将选中值转换为json格式文本。
+
+      <img src="../assets/xuanzeqi_202408212113_1.png" class="imgStyle" style="width:250px;" />
+
+    - 选择“以xx连接“时将选中值转换为以对应符号连接的文本。
+
+      <img src="../assets/xuanzeqi_202408212113_2.png" class="imgStyle" style="width:250px;" />
+
+    - 选择“无”时选中值为`List<V>`类型。
+
+      <img src="../assets/xuanzeqi_202408212113_3.png" class="imgStyle" style="width:250px;" />
+
+
+### 交互属性
+
+* 支持筛选：开启后选择器可输入文本根据“文本字段”进行模糊筛选，默认关闭。
+
+  * 当“数据源”为前端数据，即数据不经过服务端逻辑处理，开启“筛选”属性即可实现筛选功能。
+  * 当“数据源”需要调用服务端逻辑时，需要将页面组件的过滤文本属性传递到服务端逻辑并在查询的数据中完成筛选配置，参考操作步骤如下：
+
+    1. 进入选择器组件数据源绑定的服务端逻辑，为服务端逻辑添加String类型输入参数filterText。
+
+       <img src="../assets/xuanzeqi_h5_v33_10.png" alt="0" style="" />
+
+       <img src="../assets/xuanzeqi_h5_v33_11.png" alt="0" style="" />
+
+    2. 双击编辑数据查询，进入筛选条件界面，将输入参数作为筛选条件。筛选的实体属性建议与选择器组件的“文本字段”属性保持一致。
+
+       <img src="../assets/xuanzeqi_h5_v33_12.png" alt="0" style="" />
+
+    3. 返回选择器组件的数据源，将当前组件的filterText属性作为输入参数传入服务端逻辑。
+
+       <img src="../assets/xuanzeqi_h5_v33_13.png" alt="0" style="" />
+* 匹配方法：开启筛选后，支持筛选过滤时的匹配方法，支持包括、匹配开头和匹配结尾共三种模式。开启“筛选”属性时生效。适用于数据源进行前端筛选的情况。
+* 可多选：选项是否可多选，默认关闭。开启“可多选”属性时请将“列表样式”属性设置为“列表”。
+* 全选：是否支持全选和取消全选。开启“可多选”时生效。默认关闭。
+* 当前已选中项数：是否展示以选中项数。开启“可多选”时生效。默认关闭。
+
+  > 开启“全选”或“当前已选中项数”时，功能均默认展示在弹出窗口底部，不建议同时开启“全选”和“当前已选中项数”。
+  >
+* 点击遮罩层后关闭：开启时，点击遮罩则自动关闭弹出窗口。默认关闭。
+
+### 状态属性
+
+* 初始加载：设置初始时立即加载，开启后当数据源绑定逻辑时会调用相对应的逻辑。如逻辑中有输入参数需调用其他逻辑获取，建议关闭初始加载并在入参获取后再调用对应的数据源逻辑。
+* 只读：选择器正常展示，但禁止选择和输入，默认关闭。
+* 禁用：禁止任何交互，包括焦点、点击、选择、输入等，默认关闭。
+* 预览：内容区域展示预览状态，不支持编辑。通常用作模板样式预览。
+
+## 事件
+
+| 事件名           | 描述                 |
+| :------------ | :----------------- |
+| [点击完成按钮时触发](#点击完成按钮时触发) | 点击确定按钮时触发该事件中的逻辑   |
+| [点击取消按钮时触发](#点击取消按钮时触发) | 点击取消按钮时触发该事件中的逻辑   |
+| [选项改变时触发](#选项改变时触发)   | 选择器选中项改变时触发该事件中的逻辑 |
+
+### 点击完成按钮时触发
+
+- 事件概述：点击确定按钮时触发该事件中的逻辑。
+
+  <img src="../assets/xuanzeqi_202408211147_4.png" class="imgStyle" style="width: 375px;" />
+
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/xuanzeqi_202408211147_5.png" class="imgStyle" style="width: 200px;" />
+
+  - event：未开启“可多选”属性时为V类型，开启时为List类型，V由选择器“值字段“属性的数据类型决定。当前选择选项的选中值，值与选择器“值”属性相同。
+
+
+
+- 其他说明：触发事件的前提条件是开启“显示工具栏”属性。
+
+### 点击取消按钮时触发
+
+- 事件概述：点击取消按钮时触发该事件中的逻辑。
+
+  <img src="../assets/xuanzeqi_202408211147_6.png" class="imgStyle" style="width: 375px;" />
+
+- 其他说明：触发事件的前提条件是开启“显示工具栏”属性。
+
+### 选项改变时触发
+
+- 事件概述：选择器选中项改变时触发该事件中的逻辑。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用选择器组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/xuanzeqi_202408211147_8.png" class="imgStyle" style="width: 300px;" />
+
+- value（选中值）：数据类型由选择器“值字段“属性的数据类型决定，选择器选中项的值，值与“值”属性对齐。支持获取和赋值。
+- data（数据）：`List<T>`类型，选择器内容的数据集合，来源于选择器的数据源。支持获取。
+- page（当前页数）：Integer类型，选择器当前页数。支持获取。
+- size（分页大小）：Integer类型，选择器当前每页条数。支持获取。
+- filterText（过滤文本）：String类型，选择器开启“支持筛选”属性时的搜索内容。支持获取。
+- disabled（禁用）：Boolean类型，选择器是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- disabled（禁用）：Boolean类型，选择器是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- readonly（只读）：Boolean类型，选择器是否只读，值与“只读”属性对齐。支持获取和赋值。
+- preview（预览）：Boolean类型，选择器是否为预览态，值与“预览”属性对齐。支持获取和赋值。
+- _if（显示条件）：Boolean类型，选择器是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加选择器组件后，支持调用选择器的内置逻辑，内置逻辑有：
+
+| 逻辑名        | 描述           |
+| :--------- | :----------- |
+| [reload](#reload) | 清除缓存，重新加载数据。 |
+
+<img src="../assets/xuanzeqi_202408211147_9.png" class="imgStyle" style="width:400px;" />
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。适用于选择器的数据源使用调用逻辑的情况。
+- 其他说明：当选择器的数据源使用调用逻辑并添加了监听变量，被监听的变量改变时将自动触发选择器的reload。详细说明请参考[组件通用属性说明](../../17.组件通用属性说明.md)-监听变量。
+
+## 插槽
+
+选择器组件中包含插槽，支持拖拽放置其他组件：
+
+- 选择框左侧包含插槽。常见用法如：指示选择器的标题。
+
+  <img src="../assets/xuanzeqih5_202412031110_3.png" class="imgStyle" style="width:300px;" />
+
+- 若选择器开启“动态选项插槽”属性，选择器在绑定数据源后，下拉框的内容区域包含插槽。插槽中的组件支持根据选择器的数据源来配置信息并动态加载。常见用法如：指示选择器选择项的内容。
+
+  <img src="../assets/xuanzeqih5_202412031110_4.png" class="imgStyle" style="width:500px;" />
+
+  <div class="highlight">
+
+  当内容区域的插槽中不包含任何组件（包括布局组件）时，制品应用中显示的选项会根据文本字段动态加载文本，其效果等同于拖入文本组件并为文本组件绑定current变量下对应文本字段的值。
+
+  <img src="../assets/xuanzeqih5_202412031110_5.png" class="imgStyle" style="" />
+
+  </div>
+
+- 选择器开启“是否使用新版外观”后，弹出窗口上方和下方包含插槽。常见用法如：指示“确认”“取消”操作。
+
+    - 左上和左下插槽自带“点击取消按钮时触发”事件，即点击后关闭弹窗；
+    - 右上和右下插槽自带“点击完成按钮时触发”事件，即点击后确认选择并关闭弹窗。
+
+  <img src="../assets/xuanzeqih5_202412031110_6.png" class="imgStyle" style="width:500px;" />
+
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+## 使用说明
+
+支持直接向页面中拖拽实体或枚举生成选择器，并且生成对应的数据源。
+
+## 示例
+
+### 需求场景
+
+已有包含id和nam属性的实体ProductInfo，希望通过绑定动态数据源的方法将实体中的数据展示在选择器中，同时实现选择器的多选，获取选择的实体的id列表。
+
+### 操作步骤
+
+1. 拖入实体到页面中以选择框形式展示，应用支持自动生成相关逻辑并在数据源中调用，生成该实体的选择器。
+
+   <img src="../assets/xuanzeqi_h5_v33_19.png" style="" />
+
+2. 检查数据属性是否符合要求。
+
+   <img src="../assets/xuanzeqi_h5_v33_20.png" style="" />
+
+3. 开启选择器的“可多选”属性。
+
+   > 注意“列表样式”为列表。
+
+   <img src="../assets/xuanzeqi_h5_v33_21.png" style="" />
+
+4. 创建List类型的局部变量并绑定为选择器的值。
+
+   <img src="../assets/xuanzeqi_h5_v33_22.png" style="" />
+
+   此示例为了展示获取到的值，在页面拖入了文本组件并将文本绑定为以上局部变量。
+
+   <img src="../assets/xuanzeqi_h5_v33_23.png" style="max-width: 375px; " />
+
+### 效果演示
+
+<img src="../assets/xuanzeqi_h5_v33_24.gif" style="max-width: 375px; " />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年02月11日</span>
+</div>
+
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/22.H5/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/70./351/200/211/346/213/251/345/231/250/30./345/234/260/345/214/272/351/200/211/346/213/251.md

@@ -0,0 +1,167 @@
+# 地区选择
+
+地区选择组件是一种用于用户选择中国行政区域的组件。可显示地区的层级结构，并提供交互式操作，以便用户可以方便地选择他们所在的地区。
+
+<img src="../assets/diquxuanze_202409301439_1.png" class="imgStyle" style="width:300px;" />
+
+地区选择组件可以用于各种应用场景，如用户注册、填写个人资料、选择配送地址、地理位置搜索等，为用户提供便捷的地区选择功能。
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 数据属性
+
+- 值：当前选择的地区的值。“值”属性内容与“转换器”属性相关。默认开启编辑表达式，编辑表达式时若直接绑定变量，支持开启“是否将组件输入赋值给变量“，开启时会根据选择的地区的值改变变量的值，也会根据变量的值展示当前选择的地区。编辑表达式时若包含其他表达式，则仅支持根据表达式展示当前选择的地区，建议搭配“只读”属性使用。
+
+  <img src="../assets/diquxuanze_202409301439_2.png" class="imgStyle" style="width:400px;" />
+
+- 数据源：地区选择弹出窗口展示的数据的来源。支持手动输入静态数据源或绑定动态数据源。
+
+  说明：系统已提供中国行政区域，若符合需求，则无需绑定数据源。
+
+  - 静态数据源：在编辑表达式关闭时，可直接在输入框中输入包含province\_list、city\_list、county\_list对象的文本，province\_list、city\_list、county\_list对象中需要包含地区码和地区名称。参考示例如下：
+
+    ```
+    {
+      "province_list":{"110000":"北京市","330000":"浙江省"},
+      "city_list":{"110100":"北京市","330100":"杭州市","330200":"宁波市"},
+      "county_list":{"110101":"东城区","110102":"西城区","110105":"朝阳区","110108":"海淀区","330102":"上城区","330106":"西湖区","330108":"滨江区","330203":"海曙区","330211":"镇海区"}
+    }
+
+    ```
+  - 动态数据源：在编辑表达式开启时，可绑定如上结构的变量或逻辑。参考示例如下：
+
+
+
+    1. 创建如下所示数据结构AddressStructure。属性的数据类型为Map，Map的键和值分别存储地区码和地区名称。
+
+       <img src="../assets/diquxuanze_202409301439_3.png" class="imgStyle" style="" />
+
+    2. 在页面中创建AddressStructure类型局部变量，将数据存储在局部变量中。
+
+       <img src="../assets/diquxuanze_202409301439_4.png" class="imgStyle" style="" />
+
+       局部变量中的数据可以根据用户的实际需求添加，例如在进入页面事件中使用内置函数中的映射（Map）函数Put向局部变量下的属性中添加键值对。
+
+       <img src="../assets/diquxuanze_202409301439_5.png" class="imgStyle" style="" />
+
+    3. 开启编辑表达式。
+
+       <img src="../assets/diquxuanze_202409301439_6.png" class="imgStyle" style="" />
+
+    4. 点击“请选择表达式“进入编辑表达式页面，拖入变量。
+
+       <img src="../assets/diquxuanze_202409301439_7.png" class="imgStyle" style="" />
+
+### 主要属性
+
+- 是否使用新版外观：默认关闭。
+
+    - 旧版外观
+
+      <img src="../assets/diquxuanze_202409301439_8.png" class="imgStyle" style="width:300px;" />
+
+    - 新版外观
+
+      <img src="../assets/diquxuanze_202409301439_9.png" class="imgStyle" style="width:300px;" />
+
+- 顶部栏标题：选择器弹出窗口顶部的标题。选择框左侧插槽内容存在时优先展示插槽内容。
+- 确认按钮文字：可修改顶部栏中确认按钮的文案。
+- 取消按钮文字：可修改顶部栏中取消按钮的文案。
+- 可见选项个数：一列可见的选项个数。
+- 显示列数：支持选择的地区范围。列数为1时仅支持选择省；列数为2时支持选择省市；列数为3时支持选择省市区。
+- 对齐方式：选择器右侧展示内容的对齐方式。支持左对齐、居中和右对齐。开启编辑表达式功能后，用于标识"对齐方式“属性不同选项的对应值如下：
+
+  <img src="../assets/diquxuanze_202409301439_10.png" class="imgStyle" style="width:30%;" />
+
+- 转换器：支持选择地区名称及地区码。
+
+  - 若选择地区名称，则地区选择组件的“值”属性为所选地区的地区名称，例如：北京市 / 北京市 / 东城区；
+  - 若选择地区码，则“值”属性为其地区码，例如：110101。
+
+- 占位提示：选择器无内容时的提示信息。
+
+### 交互属性
+
+- 点击遮罩层后关闭：开启时，点击遮罩则自动关闭弹出窗口。默认关闭。
+
+### 状态属性
+
+- 只读：选择器正常展示，但禁止选择，默认关闭。
+- 禁用：禁止任何交互，包括焦点、点击、选择等。默认关闭。
+- 预览：内容区域展示预览状态，不支持编辑。通常用作模板样式预览。
+
+## 事件
+
+| 事件名       | 描述                     |
+| :-------- | :--------------------- |
+| 点击右上方完成按钮 | 点击顶部栏中的确认按钮时触发该事件中的逻辑。 |
+| 点击取消按钮时   | 点击顶部栏中的取消按钮时触发该事件中的逻辑。 |
+| 选项改变时触发   | 弹出层中选择内容改变时触发该事件中的逻辑。  |
+
+### 点击右上方完成按钮
+
+- 事件概述：点击顶部栏中的确认按钮时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/diquxuanze_202409301439_11.png" class="imgStyle" style="width:200px;" />
+
+  - event：`List<{code:String,name:String}>` 类型。选择地区的地区码及地区名称的列表。列表长度与“显示列数”有关。
+
+### 点击取消按钮时
+
+- 事件概述：点击顶部栏中的取消按钮时触发该事件中的逻辑。
+
+### 选项改变时触发
+
+- 事件概述：弹出层中选择内容改变时触发该事件中的逻辑。
+
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用地区选择组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/diquxuanze_202409301439_12.png" class="imgStyle" style="width:300px;" />
+
+- value（选中值）：String类型，地区选择选中地区的值，值与“值”属性对齐。支持获取和赋值。
+- disabled（禁用）：Boolean类型，地区选择是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- readonly（只读）：Boolean类型，地区选择是否只读，值与“只读”属性对齐。支持获取和赋值。
+- preview（预览）：Boolean类型，地区选择是否为预览态，值与“预览”属性对齐。支持获取和赋值。
+- \_if（显示条件）：Boolean类型，地区选择是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+地区选择组件中包含插槽，支持拖拽放置其他组件：
+
+- 选择框左侧包含插槽。常见用法如：指示地区选择的标题。
+
+  <img src="../assets/diquxuanze_202409301439_13.png" class="imgStyle" style="width:300px;" />
+
+  弹出框中标题内容与选择框左侧插槽内容同步。例如下图展示的图标组件实现的效果：
+
+  <img src="../assets/diquxuanze_202409301439_14.png" class="imgStyle" style="width:300px;" />
+
+  <img src="../assets/diquxuanze_202409301439_15.png" class="imgStyle" style="width:300px;" />
+
+- 地区选择开启“是否使用新版外观”后，弹出窗口上方和下方包含插槽。常见用法如：指示“确认”“取消”操作。
+
+    - 左上和左下插槽自带“点击取消按钮时”事件，即点击后关闭弹窗；
+    - 右上和右下插槽自带“点击右上方完成按钮”事件，即点击后确认选择并关闭弹窗。
+
+  <img src="../assets/diquxuanze_202409301439_16.png" class="imgStyle" style="width:400px;" />
+
+## 样式
+
+> 通用样式说明请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+## 使用说明
+
+当需要使用地区组件反显地区的值时，需要配合“转换器”属性。例如当转换器为地区名称，“值”属性为“浙江省/杭州市/滨江区”；或当转换器为地区码，“值”属性为“330108”，均可在地区选择组件中选择并展示“浙江省/杭州市/滨江区”。
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年09月30日</span>
+</div>