cloud-ui.vusion
Version:
Vusion Cloud UI
169 lines (158 loc) • 6.73 kB
Markdown
### 基本用法
#### data-source 数组
直接向`data-source`属性中传入`Array<Item>`格式的数组,每个`Item`为这样格式的对象`{ text: string, value: any, disabled: boolean, ... }`。
``` vue
<template>
<u-auto-complete v-model="value" :data-source="list"></u-auto-complete>
</template>
<script>
export default {
data() {
return {
value: '',
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-auto-complete v-model="value" :data-source="load"></u-auto-complete>
</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: '',
};
},
methods: {
load() {
return mockService.load();
},
}
};
</script>
```