cloud-ui.vusion

# USelect 选择器 - [示例](#示例) - [基本用法](#基本用法) - [禁用状态、禁用某一项](#禁用状态-禁用某一项) - [分隔符](#分隔符) - [分组](#分组) - [可清除](#可清除) - [多项选择](#多项选择) - [Tags 风格](#tags-风格) - [可以重复](#可以重复) - [其它样式](#其它样式) - [修改尺寸](#修改尺寸) - [过滤（搜索）](#过滤搜索) - [后端过滤（搜索）](#后端过滤搜索) - [自动补充](#自动补充) - [前端加载更多](#前端加载更多) - [后端加载更多](#后端加载更多) - [USelect API](#uselect-api) - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) - [USelectItem API](#uselectitem-api) - [Props/Attrs](#propsattrs-2) - [Slots](#slots-2) - [Events](#events-2) - [USelectGroup API](#uselectgroup-api) - [Props/Attrs](#propsattrs-3) - [Slots](#slots-3) - [USelectDivider API](#uselectdivider-api) **Selector** 下拉选择器，支持单选、多选、搜索等功能 ## 示例 ### 基本用法默认为单选模式，通过`placeholder`属性设置初始占位符，使用`v-model`双向绑定值。添加选择项有三种方式： #### tag 方式使用`<u-select-item>`组件添加。在有少量静态数据的时候，推荐使用这种方式。 ``` html <u-linear-layout> <u-select> <u-select-item value="java">Java</u-select-item> <u-select-item value="nodejs">Node.js</u-select-item> <u-select-item value="go">Go</u-select-item> <u-select-item value="python">Python</u-select-item> <u-select-item value="ruby">Ruby</u-select-item> <u-select-item value="csharp">C#</u-select-item> <u-select-item value="php">PHP</u-select-item> </u-select> <u-select placeholder="设置占位符"> <u-select-item value="java">Java</u-select-item> <u-select-item value="nodejs">Node.js</u-select-item> <u-select-item value="go">Go</u-select-item> <u-select-item value="python">Python</u-select-item> <u-select-item value="ruby">Ruby</u-select-item> <u-select-item value="csharp">C#</u-select-item> <u-select-item value="php">PHP</u-select-item> </u-select> </u-linear-layout> ``` #### data-source 数组在有较大量数据时，推荐使用这种方式。直接向`data-source`属性中传入`Array<Item>`格式的数组，每个`Item`为这样格式的对象`{ text: string, value: any, disabled: boolean, ... }`。 ``` vue <template> <u-select v-model="value" :data-source="list"></u-select> </template> <script> export default { data() { return { value: 'cpp', list: [ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ], }; }, }; </script> ``` #### data-source 函数向`data-source`属性中传入一个加载函数，这种方式会自动处理 loading 加载、error 错误等效果，并且在下文中的加载更多、过滤（搜索）等功能均需要采用这种传入数据的方式。加载函数的格式是这样的 ``` ts (params) => Promise<Array<Item> | { data: Array<Item>, total: number } | { data: Array<Item>, last: boolean }> ``` 组件会给加载函数提供过滤（搜索）、加载更多等参数，要求返回一个如上的 Promise。 ``` vue <template> <u-select v-model="value" :data-source="load"></u-select> </template> <script> // 模拟后端请求 const mockRequest = (data, timeout = 300) => new Promise((res, rej) => setTimeout(() => res(data), timeout)); // 模拟数据服务 const mockService = { load() { return mockRequest([ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ]); }, }; export default { data() { return { value: 'cpp', }; }, methods: { load() { return mockService.load(); }, } }; </script> ``` #### 指定选项字段名如果你的数据中选项文本和值的字段不一定叫`'text'`和`'value'`，可以通过`text-field`和`value-field`两个属性快速指定。 ``` vue <template> <u-select v-model="value" :data-source="list" text-field="name" value-field="name"></u-select> </template> <script> export default { data() { return { value: 'C++', list: [ { name: 'Batch' }, { name: 'C' }, { name: 'C#' }, { name: 'C++' }, { name: 'CSS' }, { name: 'Clojure' }, { name: 'CoffeeScript' }, { name: 'Coq' }, { name: 'Diff' }, { name: 'Dockerfile' }, { name: 'F#' }, { name: 'Go' }, { name: 'Groovy' }, { name: 'HLSL' }, { name: 'HTML' }, { name: 'Handlebars' }, { name: 'Ignore' }, { name: 'Ini' }, { name: 'JSON' }, { name: 'Java' }, { name: 'JavaScript' }, { name: 'Jinja' }, { name: 'Jupyter' }, { name: 'Less' }, { name: 'Log' }, { name: 'Lua' }, { name: 'Makefile' }, { name: 'Markdown' }, { name: 'Objective-C' }, { name: 'Objective-C++' }, { name: 'PHP' }, { name: 'Perl' }, { name: 'PowerShell' }, { name: 'Properties' }, { name: 'Pug' }, { name: 'Python' }, { name: 'R' }, { name: 'Razor' }, { name: 'Ruby' }, { name: 'Rust' }, { name: 'SCSS' }, { name: 'SQL' }, { name: 'SVG' }, { name: 'Shaderlab' }, { name: 'Shell Script' }, { name: 'Swift' }, { name: 'TypeScript' }, { name: 'Visual Basic' }, { name: 'Vue' }, { name: 'XML' }, { name: 'XSL' }, { name: 'YAML' }, ], }; }, }; </script> ``` ### 禁用状态、禁用某一项 ``` vue <template> <u-linear-layout> <u-select v-model="value" :data-source="list" disabled></u-select> <u-select v-model="value" :data-source="list"></u-select> </u-linear-layout> </template> <script> export default { data() { return { value: 'nodejs', list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C#', value: 'csharp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` #### 为空禁用有时在没有数据的情况下，不希望用户进行选择。使用`empty-disabled`属性自动禁用掉这种情况。 ``` html <u-select value="nut" empty-disabled placeholder="暂无选项"></u-select> ``` #### 自动获取焦点 #### autofocus ``` html <u-linear-layout> <u-select autofocus> <u-select-item value="java">Java</u-select-item> <u-select-item value="python">Python</u-select-item> <u-select-item value="nodejs">Node.js</u-select-item> <u-select-item value="go">Go</u-select-item> <u-select-item value=".net">.NET</u-select-item> <u-select-item value="php">PHP</u-select-item> </u-select> <u-select> <u-select-item>苹果</u-select-item> <u-select-item>香蕉</u-select-item> <u-select-item>蛋糕</u-select-item> </u-select> </u-linear-layout> ``` ### 分隔符 ``` html <u-select value="nut"> <u-select-item value="cup">水杯</u-select-item> <u-select-item value="toothbrush">牙刷</u-select-item> <u-select-divider></u-select-divider> <u-select-item value="nut">坚果</u-select-item> <u-select-item value="towel">毛巾</u-select-item> <u-select-item value="sofa">沙发</u-select-item> </u-select> ``` ### 分组 ``` html <u-select> <u-select-group title="洗具"> <u-select-item>毛巾</u-select-item> <u-select-item>牙刷</u-select-item> </u-select-group> <u-select-group title="杯具"> <u-select-item>牙缸</u-select-item> <u-select-item>水杯</u-select-item> </u-select-group> <u-select-group title="餐具"> <u-select-item>筷子</u-select-item> <u-select-item>碗</u-select-item> </u-select-group> </u-select> ``` ### 可清除 ``` vue <template> <u-linear-layout> <u-select v-model="value" :data-source="list" clearable></u-select> </u-linear-layout> </template> <script> export default { data() { return { value: 'nodejs', list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C#', value: 'csharp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` ### 多项选择使用`multiple`属性开启多选模式。注意：此时`v-model`双向绑定的类型为一个数组`Array<any>`。 ``` vue <template> <u-select multiple v-model="values" title="多选列表" :data-source="list"></u-select> </template> <script> export default { data() { return { values: ['c', 'cpp'], list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` 值转换器：组件的 value 与各选择器的 value 的转换器。 converter值可以为`'join'``'json'`，表示将 values 数组 join 之后变成 value。`'join'`的分隔符可以是`','`,`'|'`等，默认是`','`。 ``` vue <template> <u-select multiple v-model="values" title="多选列表" :data-source="list" converter="join:|"></u-select> </template> <script> export default { data() { return { values: '', list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` ``` vue <template> <u-select multiple v-model="values" title="多选列表" :data-source="list" converter="json"></u-select> </template> <script> export default { data() { return { values: '[]', list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` 设置属性text形式 ``` vue <template> <u-linear-layout> <u-select v-model="values" multiple style="width: 240px"> <u-select-item text="Java" value="java"></u-select-item> <u-select-item text="Node.js" value="nodejs"></u-select-item> <u-select-item text="Go" value="go"></u-select-item> <u-select-item text="Python" value="python"></u-select-item> </u-select> </u-linear-layout> </template> <script> export default { data() { return { values: ['java', 'nodejs'], }; }, }; </script> ``` ### Tags 风格 Tags 过多时如何显示。 ``` vue <template> <u-linear-layout> <u-select multiple tags-overflow="hidden" v-model="values" :data-source="list" placeholder="过多时省略"></u-select> <u-select multiple tags-overflow="collapse" v-model="values" :data-source="list" placeholder="过多时收缩"></u-select> <u-select multiple tags-overflow="visible" v-model="values" :data-source="list" placeholder="过多时显示"></u-select> </u-linear-layout> </template> <script> export default { data() { return { values: ['c', 'csharp', 'cpp', 'java', 'go'], list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` ### 可以重复设置`duplicated`属性可以让选项重复。 ``` vue <template> <u-select multiple duplicated v-model="values" :data-source="list"></u-select> </template> <script> export default { data() { return { values: ['c', 'csharp', 'cpp'], list: [ { text: 'Java', value: 'java' }, { text: 'Node.js', value: 'nodejs' }, { text: 'Go', value: 'go' }, { text: 'Python', value: 'python' }, { text: 'Ruby', value: 'ruby', disabled: true }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'PHP', value: 'php', disabled: true }, ], }; }, }; </script> ``` ### 其它样式 #### Flag ``` html <u-select value="C"> <u-select-item value="A">苹果</u-select-item> <u-select-item value="B" flag>香蕉</u-select-item> <u-select-item value="C" flag="默认选项">蛋糕</u-select-item> </u-select> ``` #### Label ``` html <u-select value="C" label="CPU"> <u-select-item value="A">1核</u-select-item> <u-select-item value="B">2核</u-select-item> <u-select-item value="C">4核</u-select-item> </u-select> ``` ### 修改尺寸通过`size`属性设置`mini`、`small`、`normal`、`medium`、`large`、`huge`、`full`几种尺寸，宽高可以自由组合。如果以上几种预设不能满足，也可以直接添加`style="width: 240px;"`来设置。 ``` html <u-linear-layout direction="vertical"> <u-linear-layout> <u-select size="mini" placeholder="mini"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="mini small" placeholder="mini small"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="mini normal" placeholder="mini normal"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="mini medium" placeholder="mini medium"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> <u-linear-layout> <u-select size="small mini" placeholder="small mini"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="small" placeholder="small"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="small normal" placeholder="small normal"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="small medium" placeholder="small medium"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> <u-linear-layout> <u-select size="normal mini" placeholder="normal mini"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="normal small" placeholder="normal small"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="normal" placeholder="normal"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="normal medium" placeholder="normal medium"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> <u-linear-layout> <u-select size="medium mini" placeholder="medium mini"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="medium small" placeholder="medium small"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="medium normal" placeholder="medium normal"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> <u-select size="medium" placeholder="medium"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> <u-linear-layout> <u-select size="large" placeholder="large"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> <u-linear-layout> <u-select size="huge" placeholder="huge"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> <u-linear-layout> <u-select size="huge full" placeholder="huge full"> <u-select-item>C</u-select-item> <u-select-item>C#</u-select-item> <u-select-item>C++</u-select-item> </u-select> </u-linear-layout> </u-linear-layout> ``` ### 过滤（搜索） #### 前端过滤（搜索）如果数据源本身为前端数据或是从后端一次性拿过来的，设置`filterable`属性即可开启过滤功能。用于快速查找选项。 ``` vue <template> <u-linear-layout> <u-select v-model="value" :data-source="list" filterable clearable placeholder="前端过滤"></u-select> <u-select v-model="values" multiple :data-source="list" filterable clearable placeholder="前端过滤（多选）" style="width: 240px"></u-select> </u-linear-layout> </template> <script> export default { data() { return { value: 'css', values: ['c', 'cpp'], list: [ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ], }; }, }; </script> ``` #### 匹配方式在`match-method`属性中可以配置字符串的匹配方式，常见的有`includes`、`startsWith`、`endsWith`，也可以传一个函数。 ``` vue <template> <u-linear-layout> <u-select :data-source="list" filterable match-method="includes" placeholder="包括即可（默认）"></u-select> <u-select :data-source="list" filterable match-method="startsWith" placeholder="只匹配开头"></u-select> <u-select :data-source="list" filterable match-method="endsWith" placeholder="只匹配结尾"></u-select> </u-linear-layout> </template> <script> export default { data() { return { list: [ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ], }; }, }; </script> ``` #### 区分大小写默认不区分大小写，可用`case-sensitive`属性开启。 ``` vue <template> <u-linear-layout> <u-select :data-source="list" filterable placeholder="不区分大小写（默认）"></u-select> <u-select :data-source="list" filterable case-sensitive placeholder="区分大小写"></u-select> </u-linear-layout> </template> <script> export default { data() { return { list: [ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ], }; }, }; </script> ``` ### 后端过滤（搜索）如果需要通过后端接口进行过滤，在开启`filterable`属性的基础上，还要开启`remote-filtering`属性。这时需要用最前面提到的 data-source 函数的方式传入数据。加载函数的格式是这样的`({ filterText: string }) => Promise<Array<Item | { data: Array<Item>, total: number } | { data: Array<Item>, last: boolean }>>`。组件会给加载函数提供过滤输入框中的文本，要求返回一个 Promise。可以看下面的示例，在数据栏中`result`为最新一次模拟请求的返回数据。 ``` vue <template> <u-linear-layout> <u-select v-model="value" :data-source="load" filterable remote-filtering clearable placeholder="后端过滤"> </u-select> <u-select v-model="values" multiple :data-source="load" filterable remote-filtering clearable placeholder="后端过滤（多选）" style="width: 240px"></u-select> </u-linear-layout> </template> <script> // 模拟后端请求 const mockRequest = (data, timeout = 300) => new Promise((res, rej) => setTimeout(() => res(data), timeout)); // 模拟后端数据 const mockData = [ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ]; // 模拟数据服务 const mockService = { loadPartial(keyword) { // 在这里模拟了一个后端过滤数据的请求 return mockRequest({ total: mockData.length, data: mockData.filter((item) => item.text.includes(keyword)), }); }, }; export default { data() { return { value: 'css', values: ['c', 'cpp'], result: undefined, }; }, methods: { load({ filterText }) { return mockService.loadPartial(filterText) .then((result) => this.result = result); // 这句只是在 Demo 中打印一下数据，方便查看 }, } }; </script> ``` ### 自动补充在过滤（搜索）的基础上，使用`auto-complete`属性可以开启自动补充功能，可以将不在选项中的文本添加成选项。 ``` vue <template> <u-linear-layout> <u-select v-model="value" :data-source="load" filterable clearable auto-complete placeholder="自动补充"></u-select> <u-select v-model="values" multiple :data-source="load" filterable clearable auto-complete placeholder="自动补充（多选）" style="width: 240px"></u-select> </u-linear-layout> </template> <script> // 模拟后端请求 const mockRequest = (data, timeout = 300) => new Promise((res, rej) => setTimeout(() => res(data), timeout)); // 模拟后端数据 const mockData = [ { text: 'Batch', value: 'bat' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'CSS', value: 'css' }, { text: 'Clojure', value: 'clojure' }, { text: 'CoffeeScript', value: 'coffeescript' }, { text: 'Coq', value: 'coq' }, { text: 'Diff', value: 'diff' }, { text: 'Dockerfile', value: 'dockerfile' }, { text: 'F#', value: 'fshape' }, { text: 'Go', value: 'go' }, { text: 'Groovy', value: 'groovy' }, { text: 'HLSL', value: 'hlsl' }, { text: 'HTML', value: 'html' }, { text: 'Handlebars', value: 'Handlebars' }, { text: 'Ignore', value: 'ignore' }, { text: 'Ini', value: 'ini' }, { text: 'JSON', value: 'json' }, { text: 'Java', value: 'java' }, { text: 'JavaScript', value: 'javascript' }, { text: 'Jinja', value: 'jinja' }, { text: 'Jupyter', value: 'jupyter' }, { text: 'Less', value: 'less' }, { text: 'Log', value: 'log' }, { text: 'Lua', value: 'lua' }, { text: 'Makefile', value: 'makefile' }, { text: 'Markdown', value: 'markdown' }, { text: 'Objective-C', value: 'objective-c' }, { text: 'Objective-C++', value: 'objective-cpp' }, { text: 'PHP', value: 'php' }, { text: 'Perl', value: 'perl' }, { text: 'PowerShell', value: 'powershell' }, { text: 'Properties', value: 'properties' }, { text: 'Pug', value: 'jade' }, { text: 'Python', value: 'python' }, { text: 'R', value: 'r' }, { text: 'Razor', value: 'razor' }, { text: 'Ruby', value: 'ruby' }, { text: 'Rust', value: 'rust' }, { text: 'SCSS', value: 'scss' }, { text: 'SQL', value: 'sql' }, { text: 'SVG', value: 'svg' }, { text: 'Shaderlab', value: 'shaderlab' }, { text: 'Shell Script', value: 'shellscript' }, { text: 'Swift', value: 'swift' }, { text: 'TypeScript', value: 'typescript' }, { text: 'Visual Basic', value: 'vb' }, { text: 'Vue', value: 'vue' }, { text: 'XML', value: 'xml' }, { text: 'XSL', value: 'xsl' }, { text: 'YAML', value: 'yaml' }, ]; // 模拟数据服务 const mockService = { loadPartial(keyword) { // 在这里模拟了一个后端过滤数据的请求 return mockRequest({ total: mockData.length, data: mockData.filter((item) => item.text.includes(keyword)), }); }, }; export default { data() { return { value: 'css', values: ['c', 'cpp'], result: undefined, }; }, methods: { load({ filterText }) { return mockService.loadPartial(filterText) .then((result) => this.result = result); // 这句只是在 Demo 中打印一下数据，方便查看 }, } }; </script> ``` ### 前端加载更多如果数据源本身为前端数据或是从后端一次性拿过来的，设置`pageable`或`pageable="auto-more"`即可开启前端加载更多功能，用`page-size`属性修改分页大小。 ``` vue <template> <u-select v-model="value" :data-source="list" placeholder="前端加载更多" pageable :page-size="10"></u-select> </template> <script> export default { data() { // 构造数量较多的 500 条数据 let list = []; for (let i = 1; i <= 500; i++) list.push('item' + i); list = list.map((text) => ({ text, value: text })); return { value: undefined, values: [], list, }; }, }; </script> ``` ### 后端加载更多如果需要通过后端接口进行加载更多，在开启`pageable`属性的基础上，还要开启`remote-paging`属性。这时需要用最前面提到的 data-source 函数的方式传入数据。加载函数的格式是这样的： ``` ts ({ paging: { size: number, // 每页大小 number: number, // 页数。从1开始计 offset: number, // 偏移量：(number - 1) * size limit: number, // 同 size } }) => Promise<Array<Item> | { data: Array<Item>, total: number } | { data: Array<Item>, last: boolean }> ``` 组件会给加载函数提供分页信息或加载位置的参数，要求返回如上的一个 Promise。翻页是否到底，如果 Promise 的结果为： - `{ data: Array<Item>, total: number }`，根据 total 数值判断是否翻到最底部 - `{ data: Array<Item>, last: boolean }`，根据 last 布尔值判断是否为最后一次 - `Array<Item>`，则根据数组为空判断为最后一次可以看下面的示例，在数据栏中`result`为最新一次模拟请求的返回数据。 ``` vue <template> <u-linear-layout> <u-select multiple :data-source="load1" placeholder="返回带 total" pageable remote-paging></u-select> <u-select multiple :data-source="load2" placeholder="返回带 last" pageable remote-paging></u-select> <u-select multiple :data-source="load3" placeholder="只返回数组" pageable remote-paging></u-select> </u-linear-layout> </template> <script> // 模拟后端请求 const mockRequest = (data, timeout = 300) => new Promise((res, rej) => setTimeout(() => res(data), timeout)); // 模拟构造数量较多的 500 条后端数据 const mockData = (() => { let mockData = []; const total = 500; for (let i = 1; i <= total; i++) mockData.push('item' + i); return mockData.map((text) => ({ text, value: text })); })(); // 模拟数据服务 const mockService = { loadWithTotal(offset, limit) { return mockRequest({ total: mockData.length, data: mockData.slice(offset, offset + limit), }); }, loadWithLast(offset, limit) { return mockRequest({ last: offset + limit >= mockData.length, data: mockData.slice(offset, offset + limit), }); }, loadOnlyArray(offset, limit) { return mockRequest(mockData.slice(offset, offset + limit)); }, }; export default { data() { return { result1: undefined, result2: undefined, result3: undefined, }; }, methods: { load1({ paging }) { return mockService.loadWithTotal(paging.offset, paging.limit) .then((result1) => this.result1 = result1); // 这句只是在 Demo 中打印一下数据，方便查看 }, load2({ paging }) { return mockService.loadWithLast(paging.offset, paging.limit) .then((result2) => this.result2 = result2); // 这句只是在 Demo 中打印一下数据，方便查看 }, load3({ paging }) { return mockService.loadOnlyArray(paging.offset, paging.limit) .then((result3) => this.result3 = result3); // 这句只是在 Demo 中打印一下数据，方便查看 }, }, }; </script> ``` #### 前缀方式使用`<u-select-item>`组件添加。在有少量静态数据的时候，推荐使用这种方式。 ``` html <u-linear-layout> <u-select prefix="search"> <u-select-item value="java">Java</u-select-item> <u-select-item value="nodejs">Node.js</u-select-item> <u-select-item value="go">Go</u-select-item> <u-select-item value="python">Python</u-select-item> <u-select-item value="ruby">Ruby</u-select-item> <u-select-item value="csharp">C#</u-select-item> <u-select-item value="php">PHP</u-select-item> </u-select> <u-select suffix="search" placeholder="设置占位符"> <u-select-item value="java">Java</u-select-item> <u-select-item value="nodejs">Node.js</u-select-item> <u-select-item value="go">Go</u-select-item> <u-select-item value="python">Python</u-select-item> <u-select-item value="ruby">Ruby</u-select-item> <u-select-item value="csharp">C#</u-select-item> <u-select-item value="php">PHP</u-select-item> </u-select> </u-linear-layout> ``` #### 自定义可扩展下拉项开启可扩展下拉项后即`showRenderFooter`为 `true`，可使用 `renderFooter`插槽对下拉菜单进行自由扩展 ``` vue <template> <u-select showRenderFooter> <u-select-item value="php">PHP</u-select-item> <template #renderFooter> <div style="padding: 6px 0; text-align: center;"> <u-button>Click Me</u-button> </div> </template> </u-select> </template> ``` ## USelect API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data-source | Array\<Item\> \| Function \| object \| DataSource | | | 展示数据的输入源，可设置为集合类型变量（List<T>）或输出参数为集合类型的逻辑。 | | data-schema | schema | | | 数据源返回的数据结构的类型，自动识别类型进行展示说明 | | value.sync, v-model | any | | | 当前选中的值 | | text-field | string | | `'text'` | 集合的元素类型中，用于显示文本的属性名称 | | value-field | string | | `'value'` | 集合的元素类型中，用于标识选中值的属性 | | pageable | boolean | | `false` | 设置是否分页加载更多 | | remote-paging | boolean | | `false` | 是否使用后端分页 | | pagination | boolean | | | 设置是否分页展示数据 | | page-size | number | | `50` | | | sorting | { field: string, order: string, compare: Function } | | `'{ field: undefined, order: 'desc' }'` | 设置数据初始化时的排序字段和顺序规则 | | description | boolean | | `false` | 选项的辅助说明信息，展示在选项文本下方 | | description-field | string | | | 集合的元素类型中，用于显示文本下方辅助描述的字段 | | icon-field | string | | | 集合的元素类型中，用于显示文本前面图标的属性名称。与文本字段、值字段类似的写法 | | selected-values-data | Array | | | 当下拉列表是分页或加载更多时，需要使用该字段回显选择框内数据。格式为[{text:'text',value:'value'}] | | filterable | boolean | | `false` | 设置是否可以筛选，开启将会支持搜索。 | | remote-filtering | boolean | | `false` | 设置是否使用后端筛选 | | match-method | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'includes'` | 过滤时的匹配方法 | | show-render-footer | boolean | | `false` | 设置是否可扩展下拉项,开启后可自定义下拉框选项 | | hasAllCheckItem | boolean | | `false` | 是否存在可以控制选项的全选/反选 | | allCheckItemText | string | | `'全选'` | 是否存在可以控制选项的全选/反选 | | converter | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | | 将选中的值以选择的符号作为连接符，转为字符串格式；选择“json”则转为JSON字符串格式。 | | placeholder | string | | `'请选择'` | 为空时显示的占位符文本 | | autofocus | boolean | | `false` | 设置是否自动获取焦点 | | prefix | string | `[object Object]` | | | | suffix | string | `[object Object]` | | | | append-to | string | `[object Object]`<br/>`[object Object]` | `'reference'` | 设置弹出层依据哪个元素定位位置，可选值：`'body'`表示添加到 document.body，`'reference'`表示添加到参考元素中。 | | clearable | boolean | | `false` | 可点击清除按钮一键清除所选内容 | | tags-overflow | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'collapse'` | 多选项过多时的展示形式 | | cancelable | boolean | | `false` | 设置是否可以取消选择 | | multiple | boolean | | `false` | 设置是否可以多选行 | | initial-load | boolean | | `true` | 设置初始时是否立即加载 | | loading-text | string | | `'加载中...'` | 正在加载中的文字，使用分页加载时才会出现 | | show-empty-text | boolean | | `true` | 是否在数据为空时展示暂无数据的文字提示 | | empty-text | string | | `'暂无数据'` | 暂无数据状态显示的提示文案 | | empty-disabled | boolean | | `false` | 为空时置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | | readonly | boolean | | `false` | 正常显示，但禁止选择/输入 | | disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | | opened.sync | boolean | | `false` | 弹出状态分为“True(弹出)/False(关闭)”，默认为“弹出” | | width | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'normal'` | 设置选择框宽度大小 | | popperWidth | string | | | 设置下拉列表宽度 | | isItemDisplay | boolean | | `true` | 设置回显选项 | | height | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'normal'` | 设置选择框高度大小 | | case-sensitive | string \| Function | | `'includes'` | 过滤时大小写是否敏感 | | auto-complete | boolean | | `false` | 是否开启自动补充模式，用于增加列表中没有的项 | ### Slots #### (default) 插入`<u-select-item>`、`<u-select-divider>`或`<u-select-group>`子组件。 ### Events #### @before-select 选择某一项前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 选择项的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择项相关对象 | | $event.itemVM | SelectItem | 选择项子组件 | | $event.preventDefault | Function | 阻止选择流程 | | senderVM | USelect | 发送事件实例 | #### @input 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | any | 选择项的值 | | senderVM | USelect | 发送事件实例 | #### @select 选择某一项后触发。单选模式中： | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 改变后的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择项相关对象 | | $event.oldItem | object | 旧的选择项相关对象 | | $event.itemVM | USelectItem | 选择项子组件 | | $event.oldVM | USelectItem | 旧的选择项子组件 | | senderVM | USelect | 发送事件实例 | #### @change 选择值改变时触发。单选模式中： | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 选择项的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择项相关对象 | | $event.oldItem | object | 旧的选择项相关对象 | | $event.itemVM | USelectItem | 选择项子组件 | | $event.oldVM | USelectItem | 旧的选择项子组件 | | senderVM | USelect | 发送事件实例 | #### @before-open 弹出前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止弹出流程 | | senderVM | USelect | 发送事件实例 | #### @open 弹出后触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 空 | | senderVM | USelect | 发送事件实例 | #### @before-close 关闭