{"id":20325390,"url":"https://github.com/xuqiang521/vui","last_synced_at":"2026-03-06T11:32:45.493Z","repository":{"id":84641429,"uuid":"90005902","full_name":"xuqiang521/vui","owner":"xuqiang521","description":":lock:  此项目已迁移地址，这里暂不做维护，新项目地址为 =\u003e","archived":false,"fork":false,"pushed_at":"2017-12-27T03:53:50.000Z","size":5391,"stargazers_count":64,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-09-01T14:45:59.375Z","etag":null,"topics":["components","es6","javascript","vue"],"latest_commit_sha":null,"homepage":"https://github.com/Brickies/vui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xuqiang521.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2017-05-02T07:46:48.000Z","updated_at":"2022-03-30T03:15:57.000Z","dependencies_parsed_at":"2023-07-20T20:51:48.504Z","dependency_job_id":null,"html_url":"https://github.com/xuqiang521/vui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xuqiang521/vui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuqiang521%2Fvui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuqiang521%2Fvui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuqiang521%2Fvui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuqiang521%2Fvui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xuqiang521","download_url":"https://codeload.github.com/xuqiang521/vui/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuqiang521%2Fvui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30173694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T07:56:45.623Z","status":"ssl_error","status_checked_at":"2026-03-06T07:55:55.621Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["components","es6","javascript","vue"],"created_at":"2024-11-14T19:39:42.316Z","updated_at":"2026-03-06T11:32:45.456Z","avatar_url":"https://github.com/xuqiang521.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## vui\n\n[![Version](https://img.shields.io/npm/v/x-vui.svg)](https://www.npmjs.com/package/x-vui) [![Downloads](http://img.shields.io/npm/dm/x-vui.svg)](https://www.npmjs.com/package/x-vui) [![License](https://img.shields.io/npm/l/x-vui.svg?style=flat)](https://opensource.org/licenses/MIT) [![TravisCI](https://travis-ci.org/xuqiang521/vui.svg)](https://travis-ci.org/xuqiang521/x-vui)\n\u003c!-- [![Dependency](https://david-dm.org/xuqiang521/x-vui.svg)](https://david-dm.org/xuqiang521/x-vui) --\u003e\n\n\u003e It's a A personal Vue UI component library .\n\n## Install\n\n```bash\nnpm install x-vui -S\n```\n\n## Quick Start\n\n### Import Components (Only for part)\n\n```javascript\nimport {\n  Scroller,\n  Select\n  // ...\n} from 'x-vui'\n\nVue.component(Scroller.name, Scroller)\nVue.component(Select.name, Select)\n```\n\n### Fully import\n\n```javascript\nimport { VUICOMS } from 'x-vui'\n\nVUICOMS.map(component =\u003e {\n  Vue.component(component.name, component)\n})\n```\n\n### Import Plugins\n\n```javascript\nimport {\n  $msg,\n  $modal\n} from 'x-vui'\n\nVue.prototype.$dialog = {\n  msg: $msg,\n  modal: $modal\n}\n```\n\n# Existing components\n\n- [x] [swiper](https://github.com/xuqiang521/vui/tree/master/src/components/swiper)\n- [x] [scroller](https://github.com/xuqiang521/vui/tree/master/src/components/scroller)\n- [x] [search](https://github.com/xuqiang521/vui/tree/master/src/components/search)\n- [x] [message](https://github.com/xuqiang521/vui/tree/master/src/components/dialog/message)\n- [x] [modal](https://github.com/xuqiang521/vui/tree/master/src/components/dialog/modal)\n- [x] [table](https://github.com/xuqiang521/vui/tree/master/src/components/table)\n- [x] [picker](https://github.com/xuqiang521/vui/tree/master/src/components/picker)\n- [x] [select](https://github.com/xuqiang521/vui/tree/master/src/components/select)\n- [x] [switch](https://github.com/xuqiang521/vui/tree/master/src/components/switch)\n- [x] [dropdown](https://github.com/xuqiang521/vui/tree/master/src/components/dropdown)\n\n# Usage of vui\n\n## swiper\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/swiper.gif)\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| type  | swiper类型    | string   | swiper(正常)/thum(缩略) | swiper |\n| auto  | 自动播放时长    | number   | — | 5000 |\n| items  | swiper展示的列表    | array   | — | [] |\n| showIndicators  | 是否展示swiper小圆点    | boolean   | — | true |\n| styles  | swiper样式控制  |  object  | — | {}   |\n| resetTitle  | 重置title内容  |  string  | — | —   |\n\n### Events\n\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change  | swiper滑动回调    | 当前swiper item索引 |\n\n### 用法\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"swiper-page\"\u003e\n    \u003cp\u003e正常swiper\u003c/p\u003e\n    \u003cx-swiper :items='items' :styles=\"{height: '180px'}\"\u003e\u003c/x-swiper\u003e\n    \u003cp\u003e缩略swiper\u003c/p\u003e\n    \u003cx-swiper type='thum' :items='items' :styles=\"{height: '208px'}\"\u003e\u003c/x-swiper\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      items: [\n        require('assets/beauty_1.png'),\n        require('assets/beauty_2.png'),\n        require('assets/beauty_3.png'),\n        require('assets/beauty_4.png'),\n        require('assets/beauty_5.png')\n      ],\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"stylus\" scoped\u003e\n.swiper-page {\n  height auto\n}\n\u003c/style\u003e\n```\n\n## scroller\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/scroller.gif)\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| onRefresh  | 下拉回调    | function   | — | — |\n| onInfinite  | 上拉回调    | function   | — | — |\n| width  | scroller宽度    | string   | — | 100% |\n| height  | scroller高度    | string   | — | 100% |\n| isLoadMore  | 是否展示上拉加载  |  boolean  | — | true   |\n| refreshText  | 下拉文本内容  |  string  | — | 下拉刷新   |\n| noDataText  | 无数据文本    | string   | — | 没有更多数据啦~   |\n| refreshLayerColor  | 下拉文本颜色    | string   | — | #AAA |\n| loadingLayerColor  | 上拉文本颜色     | string   | — | #AAA |\n| animating  | 是否有动画    | boolean   | — | true |\n| animationDuration  | 动画间隔    | number   | — | 250 |\n| bouncing  | 是否有反弹效果    | string   | — | true |\n| cssClass  | content css class    | string   | — | —   |\n\n### 用法\n\n```html\n\u003cstyle scoped\u003e\n.scroller-page {\n  height: 330px\n}\nul {\n  padding: 20px 0\n}\nli {\n  width: 100%;\n  height: 35px;\n  line-height: 35px;\n  border-bottom: 1px solid #eee;\n  text-align: center;\n}\n\u003c/style\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"scroller-page\"\u003e\n    \u003cx-scroller\n      :on-refresh=\"refresh\"\n      :on-infinite=\"infinite\"\n      :noDataText=\"noDataText\"\n    \u003e\n      \u003c!-- content is here --\u003e\n      \u003cul\u003e\n        \u003cli\u003e数据1\u003c/li\u003e\n        \u003cli\u003e数据2\u003c/li\u003e\n        \u003cli\u003e数据3\u003c/li\u003e\n        \u003cli\u003e数据4\u003c/li\u003e\n        \u003cli\u003e数据5\u003c/li\u003e\n        \u003cli\u003e数据6\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/x-scroller\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      noDataText: '没有更多数据啦~'\n    }\n  },\n  methods: {\n    refresh (done) {\n      setTimeout(done, 1000)\n      this.noDataText = ''\n      console.log('refresh');\n    },\n    infinite (done) {\n      setTimeout(done, 1000, true)\n      this.noDataText = '没有更多数据啦~'\n      console.log('infinite');\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## search\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/search.gif)\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| async  | 是否进行节流    | boolean   | — | true |\n| timeout  | 搜索节流时长    | number   | — | 100 |\n| styles  | search样式  |  object  | — | —   |\n| placeholder  | placeholder  |  string  | — | '搜索'   |\n| autofocus  | 是否自动聚焦(iOS端autofocus无效)    | boolean   | — | —   |\n| clear  | 进行搜索是否清空search框内容    | boolean   | — | false   |\n\n### Events\n\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| search  | search搜索回调    | 搜索文本 |\n| enter  | enter时搜索回调    | 搜索文本 |\n| close  | 点击搜索关闭按钮回调    | '' |\n\n### 用法\n\n#### 1、只有搜索框\n\n```html\n\u003cstyle lang=\"stylus\"\u003e\n.search-page {\n  padding: 0 10px;\n  margin-top: 10px;\n}\n\u003c/style\u003e\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cx-search\n      placeholder=\"请输入搜索关键字\"\n      @search=\"searchFn\"\n      @enter=\"searchEnter\"\n      @close=\"closeFn\"\n    \u003e\u003c/x-search\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    searchFn (query) {\n      console.log('search', query)\n    },\n    searchEnter (query) {\n      console.log('enter', query)\n    },\n    closeFn (query) {\n      console.log('close', query)\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### 2、拥有默认的搜索结果列表\n\n```html\n\u003cstyle lang=\"stylus\"\u003e\n.search-page {\n  padding: 0 10px;\n  margin-top: 10px;\n}\n\u003c/style\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"search-page\" v-title data-title=\"search\"\u003e\n    \u003cx-search\n      placeholder=\"请输入搜索关键字\"\n      :autofocus=\"true\"\n      :async=\"false\"\n      @search=\"searchFn\"\n      @enter=\"searchEnter\"\n      @close=\"closeFn\"\n    \u003e\n      \u003cx-search-list :result=\"filterResult\" @listSearch=\"listSearch\" v-show=\"visible\"\u003e\u003c/x-search-list\u003e\n    \u003c/x-search\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      keyword: '',\n      visible: false, // 点击列表，列表是否消失\n      defaultResult: [\n        'Apple',\n        'Banana',\n        'Orange',\n        'Durian',\n        'Lemon',\n        'Peach',\n        'Cherry',\n        'Berry',\n        'Core',\n        'Fig',\n        'Haw',\n        'Melon',\n        'Plum',\n        'Pear',\n        'Peanut',\n        'Other'\n      ]\n    }\n  },\n  watch: {\n    keyword (val) {\n      if (!val) {\n        this.visible = false;\n      }\n    }\n  },\n  methods: {\n    searchFn (query) {\n      this.keyword = query;\n      this.visible = true;\n      console.log('search', query)\n    },\n    searchEnter (query) {\n      this.keyword = query;\n      console.log('enter', query)\n    },\n    closeFn (query) {\n      this.keyword = query;\n      console.log('close', query)\n    },\n    listSearch (index) {\n      this.visible = false;\n      console.log(index, this.defaultResult[index])\n    }\n  },\n  computed: {\n    filterResult() {\n      return this.defaultResult.filter(item =\u003e new RegExp(this.keyword, 'i').test(item));\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### 3、定制化结果列表，关键字高亮匹配\n\n```html\n\u003cstyle lang=\"stylus\"\u003e\n.search-page {\n  padding: 0 10px;\n  margin-top: 10px;\n\n  .search-result {\n    position: relative;\n    overflow: hidden;\n    .l {\n      width: 100%;\n      margin-bottom: 5px;\n    }\n    .r {\n      position: absolute;\n      right: 0;\n      top: 50%;\n      margin-top: -10px;\n      line-height: 20px;\n    }\n    .price {\n      color: #ff6f5c;\n    }\n    .gray {\n      font-size: 12px;\n    }\n  }\n}\n\u003c/style\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"search-page\" v-title data-title=\"search\"\u003e\n    \u003cx-search\n      placeholder=\"请输入搜索关键字\"\n      :autofocus=\"true\"\n      :async=\"false\"\n      @search=\"searchFn\"\n      @enter=\"searchEnter\"\n      @close=\"closeFn\"\n    \u003e\n      \u003cx-search-list :result=\"filterResult\" @listSearch=\"listSearch\" v-show=\"visible\"\u003e\n        \u003cdiv class=\"search-result\" slot=\"list-item\" slot-scope=\"props\"\u003e\n          \u003cp class=\"l\" v-html=\"props.slotValue.name\"\u003e\u003c/p\u003e\n          \u003cp class=\"gray\" v-show=\"props.slotValue.price\"\u003e￥{{props.slotValue.price}}/斤\u003c/p\u003e\n          \u003cdiv class=\"gray r\" v-show=\"props.slotValue.amount\"\u003e剩余{{props.slotValue.amount}}斤\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/x-search-list\u003e\n    \u003c/x-search\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      keyword: '',\n      visible: false,\n      defaultResult: [\n        {name: 'Apple', price: 5, amount: 20},\n        {name: 'Banana', price: 5, amount: 30},\n        {name: 'Orange', price: 3, amount: 10},\n        {name: 'Durian', price: 10, amount: 25},\n        {name: 'Lemon', price: 4, amount: 30},\n        {name: 'Peach', price: 5, amount: 40},\n        {name: 'Cherry', price: 20, amount: 50},\n        {name: 'Berry', price: 15, amount: 60},\n        {name: 'Core', price: 10, amount: 21},\n        {name: 'Fig', price: 10, amount: 22},\n        {name: 'Haw', price: 10, amount: 23},\n        {name: 'Melon', price: 10, amount: 24},\n        {name: 'Plum', price: 10, amount: 25},\n        {name: 'Pear', price: 10, amount: 26},\n        {name: 'Peanut', price: 10, amount: 27},\n        {name: 'Other'}\n      ],\n      // 防止defaultResult值被污染\n      copy: []\n    }\n  },\n  watch: {\n    keyword (val) {\n      if (!val) {\n        this.visible = false;\n      }\n    }\n  },\n  methods: {\n    searchFn (query) {\n      this.keyword = query;\n      this.visible = true;\n      console.log('search', query)\n    },\n    searchEnter (query) {\n      this.keyword = query;\n      console.log('enter', query)\n    },\n    closeFn (query) {\n      this.keyword = query;\n      console.log('close', query)\n    },\n    listSearch (index) {\n      this.visible = false;\n      console.log(index, this.defaultResult[index].name)\n    }\n  },\n  computed: {\n    filterResult() {\n      // i 忽略大小写\n      let result = this.defaultResult.filter(item =\u003e new RegExp(this.keyword, 'i').test(item.name));\n      // 关键字高亮匹配\n      this.copy = JSON.parse(JSON.stringify(result))\n      this.copy.forEach((item, index) =\u003e {\n        let name = item.name, word = this.keyword;\n        name = name.toLowerCase();\n        word = word.toLowerCase();\n\n        if (word \u0026\u0026 name.indexOf(word) !== -1) {\n          let arr    = item.name.split('')\n          let i      = name.indexOf(word);\n          let len    = word.length;\n          let active = '\u003cspan class=\"price\"\u003e' + arr.splice(i, len).join('') + '\u003c/span\u003e';\n          arr.splice(i, 0, active);\n          item.name  = arr.join('');\n        }\n      })\n      return this.copy;\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## dialog\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/dialog.gif)\n\n### Attributes(message)\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| msg  | msg文本内容    | string   | — | — |\n| timeout  | msg显示时长    | number | —   | 2000  |\n| callback  | 回调函数    | function   | — | —   |\n| icon  | 特殊icon    | string   | — | —   |\n\n### 用法\n\n```javascript\nthis.$dialog.msg({msg: 'hello message components ~'})\n```\n\n### Attributes(modal)\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| show  | modal是否显示    | boolean   | — | — |\n| title  | modal标题  |  string  | — | —   |\n| content  | modal内容  |  string  | — | —   |\n| onOk  | 确定按钮回调    | function   | — | —   |\n| onCancel  | 取消按钮回调    | function   | — | —   |\n| okText  | 确定按钮内容    | string   | — | —   |\n| cancelText  | 取消按钮内容    | string   | — | —   |\n| showCloseIcon  | 是否显示关闭icon    | boolean   | — | true   |\n\n### 用法(插件)\n\n```javascript\nthis.$dialog.modal({\n  title: 'Demo Modal',\n  cancelText: '取消',\n  okText: '确定',\n  content: '测试，测试，测试，测试，测试，测试，测试，测试，测试',\n  onOk () {\n    console.log('click ok btn to do someting');\n  },\n  onCancel () {\n    console.log('click cancel btn to do someting');\n  }\n})\n```\n\n### modal组件用法\n\n```html\n\u003cstyle lang=\"stylus\"\u003e\n.dialog-page {\n  .dialog-btn {\n    width 100%\n    position absolute\n    top 50%\n    left 0\n    transform translateY(-50%)\n    \u003e p {\n      width 80%\n      height 50px\n      line-height 50px\n      margin 40px auto 0\n      border 1px solid #CCC\n      border-radius 10px\n      font-size 16px\n      font-weight bold\n      letter-spacing 2px\n      text-align center\n      \u0026:first-child {\n        margin-top 0\n      }\n    }\n  }\n  .modal-text {\n    text-align: center;\n  }\n}\n\u003c/style\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"dialog-page\"\u003e\n    \u003cdiv class=\"dialog-btn\"\u003e\n      \u003cp @click=\"message\"\u003emessage dialog\u003c/p\u003e\n      \u003cp @click=\"open\"\u003emodal dialog\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cx-modal title=\"Demo Modal\" cancelText=\"取消\" :onCancel=\"close\" :show=\"selectModel\" okText=\"确认\" :onOk=\"close\"\u003e\n      \u003cp class=\"modal-text\"\u003emodal components test is awesome!!!\u003c/p\u003e\n    \u003c/x-modal\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      selectModel: false\n    }\n  },\n  methods: {\n    message () {\n      return this.$dialog.msg({msg: 'this is a message dialog'})\n    },\n    open () {\n      this.selectModel = true\n    },\n    close () {\n      this.selectModel = false\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## table\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/table.png)\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| tableData  | table数据    | array   | — | — |\n| label  | thead标题（TableColum）    | — | —   |\n| prop  | 绑定的数据    | string   | — | —   |\n\n### 用法\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"table\" v-title data-title=\"table\"\u003e\n    \u003cx-scroller\n      :on-refresh=\"refresh\"\n      :on-infinite=\"infinite\"\n      :noDataText=\"noDataText\"\n      class=\"table-content\"\n    \u003e\n      \u003cx-table :tableData=\"items\"\u003e\n        \u003cx-table-column prop=\"list_1\" label=\"LIST ONE\"\u003e\u003c/x-table-column\u003e\n        \u003cx-table-column prop=\"list_2\" label=\"LIST TWO\"\u003e\u003c/x-table-column\u003e\n        \u003cx-table-column prop=\"list_3\" label=\"LIST THREE\"\u003e\u003c/x-table-column\u003e\n        \u003cx-table-column prop=\"list_4\" label=\"LIST FOUR\"\u003e\u003c/x-table-column\u003e\n      \u003c/x-table\u003e\n    \u003c/x-scroller\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      items: [\n        {\n          list_1: '2017.12.09',\n          list_2: '路人1',\n          list_3: '爱过',\n          list_4: '有'\n        },\n        {\n          list_1: '2017.12.10',\n          list_2: '路人2',\n          list_3: '爱过',\n          list_4: '有'\n        },\n        {\n          list_1: '2017.12.11',\n          list_2: '路人3',\n          list_3: '爱过',\n          list_4: '没有'\n        },\n        {\n          list_1: '2017.12.12',\n          list_2: '路人4',\n          list_3: '爱过',\n          list_4: '没有'\n        }\n      ],\n      noDataText: '没有更多数据啦~'\n    }\n  },\n  methods: {\n    refresh (done) {\n      setTimeout(done, 1000)\n      this.noDataText = ''\n      console.log('refresh');\n    },\n    infinite (done) {\n      setTimeout(done, 1000, true)\n      this.noDataText = '没有更多数据啦~'\n      console.log('infinite');\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## picker\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/picker.gif)\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| default  | picker默认选中的值    | string/number   | — | — |\n| type  | picker类型    | string   | date/time/datetime/custom | datetime |\n| title  | 选择器弹窗标题    | string   | — | —   |\n| placeholder  | placeholder    | string   | — | 请选择时间   |\n| timeStep  | 时间选择粒度(有分钟的选择器)   | number   | — | 1 |\n| startYear  | 起始年份    | number/string   | — | 今年 |\n| endYear  | 结束年份    | number/string   | — | 10年的范围 |\n| startDate  | 起始日期    | string   | — | — |\n| endDate  | 结束日期    | string   | — | — |\n| startHour  | 起始时间    | number/string   | — | 0 |\n| endHour  | 结束时间    | number/string   | — | 23 |\n| startMinute  | 起始分钟    | number/string   | — | 0 |\n| endMinute  | 结束分钟    | number/string   | — | 59 |\n| yearFormat  | “年“的格式化    | string   | — | '{value}年' |\n| monthFormat  | “月“的格式化    | string   | — | '{value}月' |\n| dayFormat  | “日“的格式化    | string   | — | '{value}日' |\n| hourFormat  | “时“的格式化    | string   | — | '{value}时' |\n| minuteFormat  | “分“的格式化    | string   | — | '{value}分' |\n\n### 用法\n\n```html\n\u003cstyle lang=\"stylus\"\u003e\n.picker-page {\n  .x-list {\n    padding: 0 0.32rem;\n    background: #fff;\n    color: #333;\n    font-size: 14px;\n\n    \u003e li {\n      min-height: 60px;\n      padding-top: 21px;\n      border-bottom: 1px solid #f2f2f2;\n      overflow: hidden;\n\n      \u003e label {\n        float: left;\n      }\n\n      \u003e div {\n        float: right;\n      }\n\n      .x-list-arrow {\n        min-width: 100px;\n        margin-right: 10px;\n        position: relative;\n\n        \u003e div {\n          float: right;\n          text-align: right;\n          margin-right: 10px;\n        }\n\n        \u0026:after {\n          content: '';\n          position: absolute;\n          top: 4px;\n          right: -5px;\n          width: 10px;\n          height: 10px;\n          border-top: 1px solid #ccc;\n          border-right: 1px solid #ccc;\n          transform: rotate(45deg);\n          -webkit-transform: rotate(45deg);\n        }\n      }\n    }\n  }\n}\n\u003c/style\u003e\n\u003ctemplate\u003e\n\u003cdiv class=\"picker-page\" v-title data-title=\"picker\"\u003e\n  \u003cul class='x-list'\u003e\n    \u003cli\u003e\n      \u003clabel\u003e日期选择\u003c/label\u003e\n      \u003cdiv class=\"x-list-arrow\"\u003e\n        \u003cx-picker title=\"选择日期\" startYear=\"2016\" startDate=\"2015-01-01\" endDate=\"2019-12-01\"  placeholder=\"请选择日期\" v-model=\"now_date\" type=\"date\"\u003e\u003c/x-picker\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003clabel\u003e时间选择\u003c/label\u003e\n      \u003cdiv class=\"x-list-arrow\"\u003e\n        \u003cx-picker title=\"选择时间\" placeholder=\"请选择时间\" startMinute=\"2\" endMinute=\"30\" v-model=\"now_time\" type=\"time\"\u003e\u003c/x-picker\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003clabel\u003e日期时间选择\u003c/label\u003e\n      \u003cdiv class=\"x-list-arrow\"\u003e\n        \u003cx-picker title=\"选择日期时间\" placeholder=\"请选择日期时间\" v-model=\"now_datetime\" :timeStep=\"20\" type=\"datetime\"\u003e\u003c/x-picker\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003clabel\u003e性别选择\u003c/label\u003e\n      \u003cdiv class=\"x-list-arrow\"\u003e\n        \u003cx-picker v-model=\"gender.value\" placeholder=\"请选择性别\" :default=\"gender.default\" title=\"选择性别\" type=\"custom\"\u003e\u003c/x-picker\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      gender: {\n        default: -1,\n        value: [\n          {\n            name: \"保密\",\n            value: 0\n          },\n          {\n            name: \"男\",\n            value: 1\n          },\n          {\n            name: \"女\",\n            value: 2\n          }\n        ]\n      },\n      now_date: null,\n      now_time: null,\n      now_datetime: null // new Date().getTime()/1000\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n## select\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/select.gif)\n\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| selectData  | 下拉数据    | array   | — | [] |\n| title  | 默认显示的标题    | string   | — | ''   |\n| alwaysShowTitle  | 是否一直显示默认标题    | boolean   | — | false |\n| defaultValue  | 默认选中的值    | number/string   | — | 0 |\n| width  | select组件的宽度    | string   | — | '100%' |\n| ellipsisWidth  | select文字超过多出省略号的宽度    | string   | — | '120px' |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| search  | select 选择时的回调函数    | 参数1：索引，参数2：所中项的id值 |\n\n### 用法\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"select-page\" v-title data-title=\"select\"\u003e\n    \u003cx-select\n      @search=\"searchFn\"\n      :selectData=\"selectData\"\n      title=\"LIST ONE\"\n      :alwaysShowTitle=\"false\"\n      width=\"50%\"\n      defaultValue=\"0\"\n    \u003e\u003c/x-select\u003e\n    \u003cx-select\n      @search=\"searchFn1\"\n      :selectData=\"selectData1\"\n      title=\"LIST TWO\"\n      width=\"50%\"\n      ellipsisWidth=\"65px\"\n      defaultValue=\"1\"\n    \u003e\u003c/x-select\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      selectData: [\n        { id: 1, name: \"LIST ONE 1\" },\n        { id: 2, name: \"LIST ONE 2\" },\n        { id: 3, name: \"LIST ONE 3\" },\n        { id: 4, name: \"LIST ONE 4\" },\n        { id: 5, name: \"LIST ONE 5\" }\n      ],\n      selectData1: [\n        { id: 1, name: \"LIST TWO 1\" },\n        { id: 2, name: \"LIST TWO 2\" },\n        { id: 3, name: \"LIST TWO 3\" },\n        { id: 4, name: \"LIST TWO 4\" },\n        { id: 5, name: \"LIST TWO 5\" }\n      ]\n    };\n  },\n  methods: {\n    searchFn(index, id) {\n      console.log(index, id);\n    },\n    searchFn1(index, id) {\n      console.log(index, id);\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n## switch\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| width  | switch的宽度（像素）    | number/string   | — | 60 |\n| height  | switch的高度（像素）    | number/string   | — | — |\n| disabled  | 是否禁用    | boolean   | — | false   |\n| value  | switch初始化选择状态    | boolean/number/string   | — | 0 |\n| activeClass  | switch 打开时的class    | string   | — | avtive |\n| inactiveClass  | switch 关闭时的class    | string   | — | inactive |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change  | switch 状态发生变化时的回调函数    | 新状态的值 |\n\n### 用法\n\n**注：如果未使用v-model指令进行值的双向绑定，则switch会显示value值对应的位置，但不能进行on-off操作**\n\n```html\n\u003cstyle lang=\"stylus\"\u003e\n@import '../stylus/_common.styl';\n.switch-page {\n\t.x-switch {\n\t\tmargin-top: -7px;\n\t}\n}\n\u003c/style\u003e\n\n\u003ctemplate\u003e\n\t\u003cdiv class=\"switch-page\" v-title data-title=\"switch\"\u003e\n\t\t\u003cul class='x-list'\u003e\n      \u003cli\u003e\n        \u003clabel\u003e默认switch，值：{{val1}}\u003c/label\u003e\n    \t\t\u003cdiv\u003e\u003cx-switch v-model=\"val1\"\u003e\u003c/x-switch\u003e\u003c/div\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003clabel\u003e设置宽高，默认选中，值：{{val2}}\u003c/label\u003e\n    \t\t\u003cdiv\u003e\u003cx-switch @change=\"handleChange\" v-model=\"val2\" width=\"50\" height=\"30\"\u003e\u003c/x-switch\u003e\u003c/div\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003clabel\u003e禁止点击，值：{{val3}}\u003c/label\u003e\n    \t\t\u003cdiv\u003e\u003cx-switch :disabled=\"true\"\u003e\u003c/x-switch\u003e\u003c/div\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003clabel\u003e禁止点击，值：{{val4}}\u003c/label\u003e\n    \t\t\u003cdiv\u003e\u003cx-switch :disabled=\"true\" v-model=\"val4\"\u003e\u003c/x-switch\u003e\u003c/div\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n\tdata () {\n\t\treturn {\n\t\t\tval1: true,\n\t\t\tval2: false,\n\t\t\tval3: false,\n\t\t\tval4: true,\n\t\t}\n\t},\n\tmethods: {\n\t\thandleChange (val, oldVal) {\n\t\t\tconsole.log('val:'+val, 'oldVal:'+oldVal)\n\t\t}\n\t}\n}\n\u003c/script\u003e\n```\n\n## dropdown\n\n![](https://raw.githubusercontent.com/xuqiang521/vui/master/src/assets/dropdown.png)\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"test\"\u003e\n    \u003cx-dropdown trigger=\"click\" @command=\"commandHandle\" :hide-on-click=\"true\"\u003e\n        \u003cspan class=\"drop-down_link\"\u003e下拉菜单\u003c/span\u003e\n        \u003cx-dropdown-menu\u003e\n            \u003cx-dropdown-list command=\"a\"\u003e下拉列表1\u003c/x-dropdown-list\u003e\n            \u003cx-dropdown-list command=\"b\"\u003e下拉列表2\u003c/x-dropdown-list\u003e\n            \u003cx-dropdown-list command=\"c\"\u003e\u003ch4\u003e下拉列表3\u003c/h4\u003e\u003c/x-dropdown-list\u003e\n        \u003c/x-dropdown-menu\u003e\n    \u003c/x-dropdown\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'Dropdown',\n  methods: {\n    commandHandle (command, instance) {\n      console.log(command, instance);\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Running of this Project\n\n``` bash\n# clone the project vui\ngit clone https://github.com/xuqiang521/vui.git\n\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuqiang521%2Fvui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxuqiang521%2Fvui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuqiang521%2Fvui/lists"}