{"id":13701373,"url":"https://github.com/cube-ui/cube-application-guide","last_synced_at":"2025-05-04T21:30:49.790Z","repository":{"id":96171798,"uuid":"123381090","full_name":"cube-ui/cube-application-guide","owner":"cube-ui","description":"A guild for cube-ui application","archived":false,"fork":false,"pushed_at":"2019-01-08T07:52:06.000Z","size":2013,"stargazers_count":262,"open_issues_count":0,"forks_count":68,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-11-13T07:35:51.517Z","etag":null,"topics":["cube-ui","vue"],"latest_commit_sha":null,"homepage":"https://cube-ui.github.io/cube-application-guide/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cube-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-03-01T04:15:28.000Z","updated_at":"2024-08-20T09:22:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"75aad00b-9f57-4db5-9792-8c7d9701c99f","html_url":"https://github.com/cube-ui/cube-application-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-ui%2Fcube-application-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-ui%2Fcube-application-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-ui%2Fcube-application-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-ui%2Fcube-application-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cube-ui","download_url":"https://codeload.github.com/cube-ui/cube-application-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403736,"owners_count":21742428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cube-ui","vue"],"created_at":"2024-08-02T20:01:33.412Z","updated_at":"2025-05-04T21:30:48.490Z","avatar_url":"https://github.com/cube-ui.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# cube-ui 快速上手教程\n\n[cube-ui](https://didi.github.io/cube-ui/#/zh-CN/) 是一个基于 [Vue.js](https://cn.vuejs.org/v2/guide/%20Vue.js) 实现的精致移动端组件库。\n它响应迅速、动画流畅，追求极致的交互体验。\n总体分为基础、弹层、滚动三大组件模块，可以说基本涵盖了我们移动端所有的组件需求。\n\n那么这里呢，我们想利用它来做一个浏览赛事的 APP ，大体可以分为顶部导航、比赛列表和弹窗三大部分。\n首先，用户要可以流畅的滚动列表来查看比赛，并且可以通过下拉列表来刷新赛事情况，以及通过上拉列表的方式来加载更多赛事；其次，用户可以左右滑动 Tab 页，或者点击顶部 Tab 来切换不同状态的比赛；接着，用户还可以对比赛的类型进行选择，你想看篮球、足球还是 Dota ？然后，用户可以对感兴趣的比赛进行订阅，我们利用弹窗来给用户反馈一些提示信息。先给你看一下，最终完成的效果是这样哒~ 。好了，现在就让我们从初始化项目开始吧……\n\n![Example](./src/assets/p10.gif)\n\n![Example](./src/assets/qr-code.png)\n\n你可以扫码体验哦~\n\n[**更多完整的实战视频教程**](https://coding.imooc.com/class/74.html)\n\n[项目演示地址](http://ustbhuangyi.com/sell/)\n\n![二维码](https://qr.api.cli.im/qr?data=http%253A%252F%252Fustbhuangyi.com%252Fsell%252F%2523%252Fgoods\u0026level=H\u0026transparent=false\u0026bgcolor=%23ffffff\u0026forecolor=%23000000\u0026blockpixel=12\u0026marginblock=1\u0026logourl=\u0026size=280\u0026kid=cliim\u0026key=686203a49c4613080b5b3004323ff977)\n\n## 初始化项目\ncube-ui 为我们提供了脚手架，可以方便的迅速初始化一个 cube-ui 项目，里面有基本配置和基础代码，然后你就可以开始的使用它了。\n```shell\n# 在当前目录下初始化一个 cube-ui 项目\n$ vue init cube-ui/cube-template\n# 在当前目录下创建一个叫application的文件夹，在里面初始化项目\n$ vue init cube-ui/template some-sub-application\n\n```\n上面两种方法都可以，建议你已经创建了一个空文件夹，然后进入空文件夹后再使用第一种命令，或直接用第二种。\n接着，你需要回答一些问题：\n\n```shell\n$ vue init cube-ui/cube-template\n\nGenerate project in current directory? Yes\n  A newer version of vue-cli is available.\n\n  latest:    2.9.3\n  installed: 2.8.2\n\n# 为你的项目起个名字\n? Project name cube-application-guide\n# 起你的项目写一段描述\n? Project description A guide for cube application\n# 作者\n? Author AmyFoxFN \u003c********.com\u003e\n# 选择vue种类，第一种是运行时编译，第二种是只运行，建议选后者将编译交给webpack并且体积要小大约30%\n? Vue build (Use arrow keys)\n❯ Runtime + Compiler: recommended for most users\n  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONL\nY allowed in .vue files - render functions are required elsewhere\n# 是否后编译\n? Use post-compile? Yes\n# 按需引入组件还是全部引入\n? Import type Partly\n# 是否自定义主题，使用后编译的情况下可用\n? Custom theme? Yes\n# rem 布局，使用后编译的情况下可用\n? Use rem layout? No\n# 是否安装vue-router\n? Install vue-router? No\n# 是否用ESLint来规范你的代码\n? Use ESLint to lint your code? Yes\n# 选择一个ESLint预设标准\n? Pick an ESLint preset Standard\n# 是否建立单元测试\n? Set up unit tests No\n# 是否建立端对端测试\n? Setup e2e tests with Nightwatch? No\n```\n你可以在[这里](https://github.com/cube-ui/cube-template/wiki)对以上的问题有更深入的了解\n注意，cube-cli 脚手架默认帮我们在 main.js 中注册了很多 cube-ui 的组件，你可以将你不需要的删除。\n现在，我们就有了最基本的项目结构，可参考 [stage-1](https://github.com/cube-ui/cube-application-guide/tree/stage-1) 分支。\n\n\u003cimg src=\"http://img.blog.csdn.net/20180313082311325?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSG9uZXltYW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70\" width=\"30%\"/\u003e\n\n现在，你可以通过以下命令，来启动一下项目了。成功后，你会看到一个有 Vue 标志的页面。\n\n```shell\n# 安装依赖\n$ npm install\n# 在本地的8080端口起一个有热刷新功能的服务\n$ npm run dev\n```\n现在，根据功能我们将项目划分出赛事列表组件 MatchList ，以及弹窗组件 SubscribeDialog 。首先，我们在 App.vue 中写一下应用的基本结构。\n### App.vue\n我们先构建一下顶部导航部分，此部分可参考 [stage-2](https://github.com/cube-ui/cube-application-guide/tree/stage-2) 。\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cdiv class=\"header\"\u003e\n    \u003cdiv class=\"title\" @click=\"showPicker\"\u003e\n      \u003cspan\u003e全部赛事\u003c/span\u003e\n      \u003ci class=\"cubeic-select\" :class=\"{flip: toFlip}\" ref=\"select\"\u003e\u003c/i\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"navigator\"\u003e\n      \u003cul class=\"nav-list\"\u003e\n        \u003cli v-for=\"(item, index) in tabList\" :key=\"index\"\n          @click=\"switchTab(index)\" :class=\"{active: currentPage === index}\"\u003e\n          {{ item }}\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"triangle-up\" :class=\"{left: currentPage === 0, right: currentPage === 2}\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"content\"\u003e\n      \u003ccube-slide\u003e\n      \u003c/cube-slide\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n`switchTab` 和 `currentPage` 是为了 Tab 下的小角标随着 Tab 切换而移动的，详细可看[具体代码](https://github.com/cube-ui/cube-application-guide/blob/stage-2/src/App.vue) 。\n但是，用户在手机上只能通过点击顶部的 Tab 来切换不同状态的比赛，是不是太不方便了。而 cube-ui 的 Slide 组件，提供了很流畅的轮播及 Swipe 功能，我们就可以通过它，来丰富我们的移动端体验。\n\n```html\n\u003cdiv class=\"content\"\u003e\n  \u003ccube-slide\n    :data=\"tabList\"\n    :initialIndex=\"currentPage\"\n    :loop=\"false\"\n    :autoPlay=\"false\"\n    :threshold=\"0.1\"\n    @change=\"slideChange\"\u003e\n    \u003ccube-slide-item v-for=\"(item, index) in tabList\" :key=\"index\"\u003e\n      \u003cdiv class=\"match-list-wrapper\"\u003e\n        \u003cmatch-list :type=\"type\" :status=\"index\"\u003e\u003c/match-list\u003e\n      \u003c/div\u003e\n    \u003c/cube-slide-item\u003e\n    \u003cdiv slot=\"dots\"\u003e\u003c/div\u003e\n  \u003c/cube-slide\u003e\n\u003c/div\u003e\n```\n\n由于我们的列表内容比较复杂，又是一个组件，所以我们使用了自定义内容。Slide 组件为我们提供了默认插槽和 `cube-slide-item` 来自定义每个轮播页的结构，`cube-slide` 也为我们预留了很多的参数可供设置，比如这里，我们设置了它的初始索引值为1、不循环播放、不自动播放、切换页面的滑动阈值等，详细参考[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)。现在，用户就可以很方便的通过左右滑动来切换 Tab 页了，你可以去 [stage-2](https://github.com/cube-ui/cube-application-guide/tree/stage-2) 查看这一步的效果，接下来，我们继续来实现列表部分。\n### MatchList\n此部分参考 [stage-3](https://github.com/cube-ui/cube-application-guide/tree/stage-3) 分支。\n我们先来实现一下比赛列表的静态样式。\n\n```html\n\u003cul class=\"match-inner\"\u003e\n  \u003cli v-for=\"(item, index) in matchList\" :key=\"index\" class=\"match-item\"\u003e\n    \u003cdiv class=\"left-team\"\u003e\n      \u003cimg :src=\"item.hostLogoUrl\" alt=\"\" class=\"logo\"\u003e\n      \u003cp class=\"name\"\u003e{{item.hostTeamName}}\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"center\"\u003e\n      \u003cp v-if=\"item.live\" class=\"guest\" :class=\"{end : item.isEnd}\"\u003e{{item.live}}\u003c/p\u003e\n      \u003cp v-if=\"item.order\" class=\"order\" @click=\"subscribe\"\u003e{{item.order}}\u003c/p\u003e\n      \u003cp class=\"score\" :class=\"{last: item.isEnd}\"\u003e\n        {{item.hostScore}} - {{item.guestScore}}\n      \u003c/p\u003e\n      \u003cp v-if=\"!item.isEnd\" class=\"time\"\u003e{{item.endTime}}\u003c/p\u003e\n\n    \u003c/div\u003e\n    \u003cdiv class=\"right-team\"\u003e\n      \u003cimg :src=\"item.guestLogoUrl\" alt=\"\" class=\"logo\"\u003e\n      \u003cp class=\"name\"\u003e{{item.guestTeamName}}\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nMatchList 是我们模拟的列表数据，每个 `li` 都是一条赛事，整个 `ul` 是赛事列表。具体的数据渲染以及元素样式，就不一一解释啦，你可以去仓库代码里详细[查看](https://github.com/cube-ui/cube-application-guide/blob/stage-3/src/components/match-list.vue)。接下来，就要为我们的列表组件添加一些丰富的功能了。\n\n#### 滚动\n在比赛列表这个组件中，我们的主要功能就是滚动，所以我们可以使用 cube-ui 的 Scroll 组件来完成，从而为用户提供了更流畅的浏览体验。\n由上一步可以看到，我们的列表内容还是比较复杂的，所以可以采用默认插槽来自定义内容，也就是说，直接把我们上面的列表内容，包在 `\u003ccube-scroll\u003e` 标签里就行了。当然，如果你的数据十分简单，可以直接将数据传入 `\u003ccube-scroll\u003e` 的 `data`字段  。\n\n```html\n\u003ccube-scroll\n  ref=\"scroll\"\n  :data=\"matchList\" \n  :options=\"options\"\n  @pulling-down=\"onPullingDown\"\n  @pulling-up=\"onPullingUp\"\u003e\n  \u003cul class=\"match-inner\"\u003e\n    \u003cli v-for=\"(item, index) in matchList\" :key=\"index\" class=\"match-item\"\u003e\n\t  \u003c!-- 内容省略 --\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/cube-scroll\u003e\n```\n\n虽然我们是自定义内容，但同样建议为 Scroll 的 `data` 属性传入数据，这样 Scroll 组件可以帮我们自动进行数据监听和重新渲染。\n`\u003ccube-scroll\u003e` 还为我们提供了很多的参数，你可以通过他们来设置滚动条、滚动方向、开启下拉刷新功能等，详细请参考[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)。\n比如这里，我们通过 `options` 的 `scrollbar` 来对滚动条进行设置，你可以选择显示或不显示，这里，我们选择淡入淡出的滚动条。\n\n```js\noptions: {\n  scrollbar: {\n     fade: true\n  }\n},\n```\n\n这里还需提醒大家注意一下，在使用 Scroll 组件的时候，为保证正常滚动，内容元素  `.cube-scroll-content`  在滚动方向上的长度必须大于容器元素  `.cube-scroll-wrapper` ，具体滚动原理请去往[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)里查看。\n#### 下拉刷新\n比赛的变化瞬息万变，用户就需要时不时的刷新列表来获取最新的数据。\nScroll 组件默认无下拉刷新功能，我们需要通过配置项 `pullDownRefresh` 开启。\n\n```js\npullDownRefresh: {\n  threshold: 90,\n   stop: 50,\n   txt: '刷新成功'\n}\n```\n\n我们为这次下拉动画设置了下拉距离阈值、回弹位置以及刷新成功的文案。\n下拉距离阈值你可以理解为，是你下拉到某一个可以开始刷新数据的位置；\n回弹位置则是你放手之后列表的恢复位置。这些你都可以去 [文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction) 里详细的查看或尝试。\n\n刚才，我们对下拉动作进行了设置。现在，就该写触发了这次动作后你想做的事情，在这里也就是刷新数据了。当用户下拉列表超过阈值时，会触发 Scroll 组件的 `pulling-down` 事件，这个事件我们已经在之前的模板里面绑定了处理函数，而在这个事件的处理函数中，我们可以刷新数据了。\n\n```js\nmethods: {\nonPullingDown () {\n  this.loadMatch('down')\n},\nloadMatch (type) {\n  setTimeout(() =\u003e {     //这里用setTimeout模拟数据请求,真实情况下你需要向接口请求数据\n    if (Math.random() \u003e 0.5) {\n      let match = []\n      for (let index = 5; index \u003e 0; index--) {\n        match.push(this.matchList[index])\n      }\n      if (type === DOWN) {\n        this.matchList.unshift(...match)\n      } else if (type === UP) {\n        this.matchList = this.matchList.concat(match)\n      }\n    } else {\n      this.$refs.scroll.forceUpdate()\n      if (type === UP) {   //上拉加载时，无更多数据的提示文案显示之后，让列表回到原位\n        setTimeout(() =\u003e {\n          this.$refs.scroll.scroll.scrollBy(0, 64, 800)\n        }, 1000)\n      }\n    }\n  }, 1000)\n}\n}\n```\n\n这里需要注意的是，如果请求结果是没有新数据，则必须使用 `this.$refs.scroll.forceUpdate()`  结束此次下拉刷新。这样，Scroll 组件才会开始监听下一次下拉刷新操作。\n另外，如果你不喜欢内置的下拉刷新动画，还可以用作用域插槽做自定义动画，详情见[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)。\n#### 上拉加载\n我们不可能一次放入所有的列表数据，用户可以通过上来加载来查看更多的比赛。\n与下拉刷新相同，Scroll 组件默认无上拉加载功能，可通过配置项  `pullUpLoad` 开启。\n\n```js\npullUpLoad: {\n  threshold: 100,\n  txt: {\n    more: '加载更多',\n    noMore: '没有更多的比赛啦'\n  }\n}\n```\n\n我们为这次上拉动作设置了上拉距离阈值，以及提示加载和没有更多数据的文案。\n那么同样，当用户上拉列表超过阈值时，会触发 Scroll 组件的 `pulling-up` 事件，而在这个事件的处理函数中，我们可以刷新数据了。\n\n```js\nmethods: {\nonPullingUp () {\n  this.loadMatch('up')\n},\nloadMatch (type) {\n  setTimeout(() =\u003e {     //这里用setTimeout模拟数据请求，真实情况下你需要向接口请求数据\n    if (Math.random() \u003e 0.5) {\n      let match = []\n      for (let index = 5; index \u003e 0; index--) {\n        match.push(this.matchList[index])\n      }\n      if (type === DOWN) {\n        this.matchList.unshift(...match)\n      } else if (type === UP) {\n        this.matchList = this.matchList.concat(match)\n      }\n    } else {\n      this.$refs.scroll.forceUpdate()\n      if (type === UP) {   //上拉加载时，无更多数据的提示文案显示之后，让列表回到原位\n        setTimeout(() =\u003e {\n          this.$refs.scroll.scroll.scrollBy(0, 64, 800)\n        }, 1000)\n      }\n    }\n  }, 1000)\n}\n}\n```\n\n与下拉刷新相同，请注意没有数据的情况，以及同样可以用作用域插槽做自定义动画，详情见[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)。\n### 订阅弹窗\n我们需要在用户点击订阅后，为用户弹一个开启订阅的弹窗，因为弹窗样子比较花，哈哈，所以我们可以基于 cube-ui 的 Popup 封装一个，这也是 cube-ui 为我们提供的一个很好的功能。那这里，就不得不先说一下，cube-ui 的另一个是非重要的 API 了。\n#### createAPI 方法\n`createAPI` 的作用是把我们之前声明式的组件使用方式改变成 API 式的调用。我们知道 Vue 推荐的就是声明式的组件使用方式，比如在使用一个组件 xxx，我们简单在使用的地方声明它就好了。\n\n```html\n\u003ctempalte\u003e\n  \u003cxxx/\u003e\n\u003c/tempalte\u003e\n```\n\n对于一般组件，这样使用并没有问题，但对于全屏类的弹窗组件，如果在一个层级嵌套很深的子组件中使用，仍然通过声明式的方式，很可能它的样式会受到父元素某些 CSS 的影响导致渲染不符合预期。这类组件最好的使用方式就是挂载到 body 下，但是我们如果是声明式地把这些组件挂载到最外层，对它们的控制也非常不灵活。其实最理想的方式是动态把这类组件挂载到 body 下，`createAPI` 就是干这个事情的。\n我们现在就用它来做我们的订阅弹窗。\n\ncube-ui 提供了所有弹窗类组件的基类组件 Popup，如果是新增一个弹窗类组件，推荐基于 Popup 做二次开发。我们这里就是基于 Proup 封装了名为 `subscribe-dialog` 的弹窗组件。\n首先我们在 main.js 中通过 `createAPI` 创建一个 `this.$createSubscribeDialog` API，把 `SubscribeDialog` 变成一个 API 式调用的组件：\n\n```js\nimport SubscribeDialog from './components/subscribe-dialog/subscribe-dialog'\ncreateAPI(Vue, SubscribeDialog, [], true)\n```\n\n接着我们就可以在 MatchList 组件内部通过 `this.$createSubscribeDialog()` 的方式调用它\n\n```js\nthis.subscribeDialog = this.$createSubscribeDialog()\n```\n\n当你想让这个弹窗显示，就执行 `.show()` 方法。当执行 `.show()` 的时候，cube-ui 内部会把 `SubscribeDialog` 组件动态挂载到 body 下。\n\n![Example QR](./src/assets/p9.jpeg)\n\n上图就是我们完成好的弹窗，在右边的审查元素中，我用两个小红点标出了 `App.vue` 挂载的元素和我们的弹窗组件，你可以看到他们是并列的关系，弹窗组件确实是直接被挂载到了 body 下。\n你还可以为你的弹出层做 mask 之类更详细的配置，这一部分你可以参考项目中的 [stage-4](https://github.com/cube-ui/cube-application-guide/tree/stage-4) 分支。\ncube-ui 的弹出层组件部分，还包含了 Picker、TimePicker、Dialog 等其他弹出层，详情见[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)。\n\n### 赛事选择\n我们希望用户在点击顶部的全部赛事后，由屏幕下方上滑出一个弹窗，供用户选择比赛类型，像这样：\n\u003cimg src=\"http://img.blog.csdn.net/20180312203957620?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSG9uZXltYW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70\" width=\"40%\"/\u003e\n\n这时，就可以使用 cube-ui 的 Picker 组件。用户可以通过屏幕下边上滑出的 Picker，来选择想看的比赛类型，点击确认后，如果确认值有变，则更新比赛列表。并且点击取消、确定以及 Picker 之外的地方时，都让 Picker 消失。同样，Picker 也是用 `createAPI` 创建的，此部分见 [stage-5](https://github.com/cube-ui/cube-application-guide/blob/stage-5/src/App.vue) 分支。\n\n```js\nmounted () {\n  this.picker = this.$createPicker({\n    title: '赛事',\n    data: [this.pickerList],\n    onSelect: () =\u003e {   //点击确定时\n      this.toFlip = !this.toFlip\n    },\n    onCancel: () =\u003e {  //点击取消时\n      this.toFlip = !this.toFlip\n    },\n    onValueChange: (selectedVal) =\u003e {   //确认的值有改变时\n      this.type = selectedVal[0]\n    }\n  })\n}\n```\n\n我们创建了 Picker，并为它的 `data` 字段传入表示比赛类型的数组，然后你可以在它的各种事件处理函数中做你想做的事情，还可以为这个 Picker 做一些其他更详细的配置，详情见[官方文档](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction) 。\n\n### 总结\n到这里，我们的应用可以说是基本完成了。但其实，也还只是用了 cube-ui 几个比较主要的组件。cube-ui 还有很多很棒的组件，如表单、开关、loading 等，如果你有兴趣的话，也可以继续丰富我们这个赛事应用。当然，你也已经完全可以借助 cube-ui ，开始一个自己的项目啦~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcube-ui%2Fcube-application-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcube-ui%2Fcube-application-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcube-ui%2Fcube-application-guide/lists"}