| # | \r\n\r\n \r\n \r\n \r\n | \r\n \r\n \r\n | \r\n
|---|---|---|
| {{index+1}} | \r\n\r\n item.id===source.id).length}\" @click=\"clickItem(source,index)\">\r\n \r\n \r\n | \r\n {{source[col.filed]}} | \r\n
\n 用于提供水平和垂直方向展开收起动画功能的小组件。\n
\n\n纵向动画\n<x-spread :visible=\"visible1\"></x-spread>\n横向动画\n<x-spread :visible=\"visible2\" horizontal></x-spread>\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| visible | \n控制内容的展开和收起，可动态绑定，必填。组件内部使用 v-show 控制内容的显示 | \nBoolean | \n—— | \n—— | \n
| horizontal | \n横向展开和收起，默认为纵向。 | \nBoolean | \n—— | \nfalse | \n
| duration | \n动画持续时间，单位为 ms | \nString , Number | \n—— | \n300 | \n
\n 用于页面和区块的加载中状态。\n
\n\n<x-spin :spinning=\"spinning\" tips=\"loading...\" :width=\"100\"></x-spin>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| spinning | \n是否显示加载效果，默认不显示 | \nBoolean | \n—— | \nfalse | \n
| delay | \n延迟显示加载效果出现的时间，单位为 ms，在加载效果出现前修改 spinning 为 false，则不出现加载效果（防止闪烁） | \nNumber | \n—— | \n—— | \n
| width | \n加载动画的直径大小，单位为 px | \nNumber | \n—— | \n80 | \n
| tips | \n加载状态的提示文字，将出现在加载动画的正下方 | \nString | \n—— | \n—— | \n
\n 一般在webpack入口页面main.js中如下配置：
\n\nimport Vue from 'vue';\nimport App from 'components/app.vue';\nimport Xue from 'xue-ui';\nimport 'xue-ui/lib/xue-ui.css';\nVue.use(Xue);\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n\n
以上代码便完成了Xue-ui的引入。需要注意的是，样式文件需要单独引入。
\n\n 使用Xue-ui时，您需要使用border-box盒模型，否则会影响样式。CSS代码示例：
\n\n*, *::before, *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n 使用:prop传递数据格式为数字、布尔值时，必须带:(兼容String除外，具体看组件文档)，比如：
\n\n正确的用法：\n<x-pager :total=\"100\" :current.sync=\"1\"></x-pager>\n错误的用法：\n<x-pager total=\"100\" current=\"1\"></x-pager> \n\n
一套基于 Vue 2.5 的
\nUI 组件库
\n\n 通过基础的24格分栏，快速构建网页布局。\n
\nmobile是默认的布局配置参数
\n\n<x-row>\n <x-col :mobile=\"{8:0}\"></x-col>\n <x-col :mobile=\"{8:0}\"></x-col>\n <x-col :mobile=\"{8:0}\"></x-col>\n</x-row>\n<x-row>\n <x-col :mobile=\"{4:0}\"></x-col>\n <x-col :mobile=\"{4:0}\"></x-col>\n <x-col :mobile=\"{4:0}\"></x-col>\n <x-col :mobile=\"{4:0}\"></x-col>\n <x-col :mobile=\"{4:0}\"></x-col>\n <x-col :mobile=\"{4:0}\"></x-col>\n</x-row>\n\n
gutter属性设置分栏间隙，配置参数键值比例设置分栏间空隙
\n\n<x-row gutter=\"20\">\n <x-col :mobile=\"{8:0}\"></x-col>\n <x-col :mobile=\"{8:0}\"></x-col>\n <x-col :mobile=\"{8:0}\"></x-col>\n</x-row>\n<x-row>\n <x-col :mobile=\"{8:0}\"></x-col>\n <x-col :mobile=\"{8:8}\"></x-col>\n</x-row>\n\n
同时设置多个配置参数，实现响应式布局
\n\n<x-row gutter=\"10\">\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n <x-col \n :mobile=\"{12:0}\" \n :npc=\"{6:0}\" \n :wpc=\"{3:0}\">\n </x-col>\n</x-row>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| gutter | \n栅格的间隙，单位为 px | \nString , Number | \n—— | \n—— | \n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| mobile,ipad,npc,pc,wpc | \n不同屏幕宽度下分栏所占宽度的配置参数，键对应分栏所占宽度，值对应分栏前空隙宽度。mobile-first，ipad、npc、pc、wpc对应 min-width 分别为 577px、769px、993px、1201px | \nObject | \n—— | \n—— | \n
\n 容器布局，可快速搭建页面的基本结构，需浏览器支持flex布局。在使用容器布局时，container组件的子组件只能是header，main，footer，sider或container，同时，上述子组件的父组件也只能是container。\n
\n\n<x-container>\n <x-header></x-header>\n <x-main></x-main>\n <x-footer></x-footer>\n</x-container>\n\n \n<x-container>\n <x-header></x-header>\n <x-container>\n <x-sider></x-sider>\n <x-main></x-main>\n </x-container>\n <x-footer></x-footer>\n</x-container>\n\n \n<x-container>\n <x-sider close-button></x-sider>\n <x-container>\n <x-header></x-header>\n <x-main></x-main>\n <x-footer></x-footer>\n </x-container>\n</x-container>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| close-button | \nsider 是否带关闭按钮 | \nBoolean | \n—— | \nfalse | \n
\n 将内容区域折叠/展开。\n
\n\n<x-collapse :selected.sync=\"selected\">\n <x-collapse-item name=\"social\">\n <template slot=\"title\">社会资讯</template>\n // 内容文本\n </x-collapse-item>\n <x-collapse-item name=\"finance\">\n <template slot=\"title\">财经新闻</template>\n // 内容文本\n </x-collapse-item>\n <x-collapse-item name=\"sicence\">\n <template slot=\"title\">科技新闻</template>\n // 内容文本\n </x-collapse-item>\n <x-collapse-item name=\"sports\">\n <template slot=\"title\">体育新闻</template>\n // 内容文本\n </x-collapse-item>\n</x-collapse>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| selected | \n当前展开 item 的 name 组成的数组。可以用 .sync 修饰符绑定。 | \nArray | \n—— | \n—— | \n
| multiple | \n是否允许同时展开多个 item。 | \nBoolean | \n—— | \ntrue | \n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| name | \nitem 的 name 属性，唯一且必填。 | \nString | \n—— | \n—— | \n
\n 瀑布流组件，快速实现瀑布流布局。\n
\n\n 通过作用域插槽，瀑布流组件可将数据传回父组件，父组件使用slot-scope可以在插槽中获取到传回的数据。\n
\n\n<x-waterfall \n :width=\"150\" \n :source=\"source\" \n @scroll-bottom=\"scrollBottom\">\n <div slot-scope=\"slotProps\">\n <div>slot</div>\n <div>宽度 {{`\\{\\{ slotProps.prop.size \\}\\}`}}</div>\n </div>\n</x-waterfall>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| width | \n瀑布流布局中每个子元素的宽度，单位为 px | \nNumber | \n—— | \n200 | \n
| source | \n组件 v-for 列表渲染的数据，必填，渲染时数据将以作用域插槽的形式传回父组件 | \nArray | \n—— | \n—— | \n
| target | \n组件监听滚动的目标，可以是 CSS 选择器，也可以是 HTML 元素，如果不传，组件将默认监听 window | \nString , HTMLElement | \n—— | \n—— | \n
| 事件名称 | \n说明 | \n回调参数 | \n
|---|---|---|
| scroll-bottom | \n被监听的元素滚动到底部时触发，只触发一次，当 source 数据改变时，会重新添加监听（滚动到底部时会再次触发）。 | \n—— | \n
\n 这是我出于提升自己对Vue和组件化开发的理解而制作的一个UI组件库。\n
\n 目前代码尚未完工，持续更新中。本组件库仅供学习交流，请勿在生产环境中使用。\n 欢迎讨论交流，如果你觉得还不错，请Star。\n
\n\n 在两种状态间切换时用到的开关选择器。使用v-model绑定一个布尔值，或者监听on-change事件，滑块在左侧时值为false，滑块在右侧时值为true。\n
\n\n<x-switch v-model=\"type1\"></x-switch>\n<x-switch disabled></x-switch>\n
\n<x-switch\n v-model=\"type2\" \n false-color=\"black\" \n true-color=\"blue\">\n</x-switch>\n<x-switch \n false-text=\"按月付费\" \n true-text=\"按年付费\" \n v-model=\"type3\">\n</x-switch>\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| x-width | \nswitch 开关的宽度 | \nString | \n—— | \n40px | \n
| disabled | \n禁用状态 | \nBoolean | \n—— | \nfalse | \n
| false-color / true-color | \nswitch 开关不同状态对应的背景颜色 | \nString | \n—— | \n—— | \n
| false-text / true-text | \nswitch 开关不同状态对应的提示文字 | \nString | \n—— | \n—— | \n
| 事件名称 | \n说明 | \n回调参数 | \n
|---|---|---|
| value-change | \nvalue 改变时触发 | \n改变后的 value 值 | \n
\n 基础表单组件，支持v-model绑定和原生事件。\n
\n\n<x-input placeholder=\"请输入\"></x-input>\n<x-input icon=\"username\" placeholder=\"请输入用户名\"></x-input>\n<x-input icon=\"lock\" v-model=\"someString\"></x-input>\n<x-input disabled></x-input>\n<x-input error></x-input>\n<x-input type=\"textarea\"></x-input>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| placeholder | \n原生属性 | \nString | \n—— | \n—— | \n
| type | \n原生属性(当type为textarea时渲染为文本输入框) | \nString | \n—— | \n—— | \n
| icon | \nicon 图标名 | \nString | \n—— | \n—— | \n
| disabled | \ndisabled 状态 | \nBoolean | \n—— | \nfalse | \n
| error | \nerror 状态 | \nBoolean | \n—— | \nfalse | \n
\n 适用于在多个互斥的选项中选择的场景。\n
\n\n<x-radio :options=\"options\" @on-change=\"radioOnChange($event)\"></x-radio>\n\n<x-radio :options=\"options\" @on-change=\"radioOnChange($event)\" vertical></x-radio>\n\noptions 数据结构如下\n options: [\n { label: '苹果', value: 'Apple' },\n { label: '梨', value: 'Pear' },\n { label: '橘子', value: 'Orange' }\n ]\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| options | \nradio 的选项数组 | \nArray | \n—— | \n—— | \n
| vertical | \n垂直排列的 radio | \nBoolean | \n—— | \nfalse | \n
| default-index | \n默认选中选项的 index 值 | \nNumber | \n—— | \n—— | \n
| 事件名称 | \n说明 | \n回调参数 | \n
|---|---|---|
| value-change | \n选中项改变时触发 | \n选中项的 value 值 | \n
\n 从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。
\n 级联选择器对数据有较严格要求，每个数据为一个对象，具有value、lable和children属性，子集为children，以此类推。selected为当前选中数据value值组成的数组，比如 ['北京市', '市辖区', '东城区'] ，按照层级次序排序，使用.sync进行绑定。\n
\n<x-cascader \n :source=\"shcool\" \n :selected.sync=\"selected\">\n</x-cascader>\n\nsource 数据结构如下\n{\n \"label\": \"某学校\",\n \"value\": 10000,\n \"children\": [{\n \"label\": \"高中部\",\n \"value\": 110000,\n \"children\": [{\n \"label\": \"一年级\",\n \"value\": 11100,\n \"children\": [{\n \"label\": \"一班\",\n \"value\": 11101\n },\n {\n \"label\": \"二班\",\n \"value\": 11102\n }\n ]\n }, {\n \"label\": \"二年级\",\n \"value\": 11200,\n \"children\": [{\n \"label\": \"一班\",\n \"value\": 11201\n }]\n }, {\n \"label\": \"三年级\",\n \"value\": 11300,\n \"children\": [{\n \"label\": \"一班\",\n \"value\": 11301\n },\n {\n \"label\": \"二班\",\n \"value\": 11302\n },\n {\n \"label\": \"三班\",\n \"value\": 11303\n }\n ]\n }]\n },\n {\n \"label\": \"初中部\",\n \"value\": 120000,\n \"children\": [{\n \"label\": \"一年级\",\n \"value\": 12100,\n \"children\": [{\n \"label\": \"一班\",\n \"value\": 12101\n }]\n }, {\n \"label\": \"二年级\",\n \"value\": 12200,\n \"children\": [{\n \"label\": \"一班\",\n \"value\": 12201\n },\n {\n \"label\": \"二班\",\n \"value\": 12202\n },\n {\n \"label\": \"三班\",\n \"value\": 12203\n }\n ]\n }, {\n \"label\": \"三年级\",\n \"value\": 12300,\n \"children\": [{\n \"label\": \"一班\",\n \"value\": 12301\n },\n {\n \"label\": \"二班\",\n \"value\": 12302\n }\n ]\n }]\n }\n ]\n}\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| source | \n级联选择器的数据源，格式较严格 | \nArray | \n—— | \n—— | \n
| selected | \n当前选中的数据 value 值的集合，按层级次序排序，用 .sync 绑定 | \nArray | \n—— | \n—— | \n
\n 输入或选择日期的组件。使用v-model绑定。\n
\n当前所选日期为：{{date}}
\n\n<x-date-picker v-model=\"date\" :default-value=\"today\"></x-date-picker>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| default-value | \n默认选中日期，必须为能转换为日期时间对象的字符串 | \nString | \n—— | \n—— | \n
\n 输入或选择时间的组件。使用v-model绑定。\n
\n当前所选时间为：{{time}}
\n\n<x-time-picker v-model=\"time\" :default-value=\"12:00:00\"></x-time-picker>\n\n
| 参数 | \n说明 | \n类型 | \n可选值 | \n默认值 | \n
|---|---|---|---|---|
| default-value | \n默认选中时间，必须为\"00:00:00\"格式的字符串 | \nString | \n—— | \n—— | \n
\n 由于使用了很多新特性，目前组件库主要支持现代浏览器，并且某些组件在移动端 / 微信浏览器的表现不甚理想。\n
\n\n 到官方仓库下载或使用命令行克隆到本地
\n\n$ git clone git@github.com:BlameDeng/xue-ui.git\n\n
\n 下载 / 克隆到本地后，你就可以注册某个组件然后使用了。\n
\n\n 推荐使用npm / yarn来安装，享受生态圈和工具带来的便利。
\n\n$ npm install xue-ui\n$ yarn add xue-ui\n\n
如果您使用了npm / yarn安装，请继续阅读快速上手章节。\n
\n