diff --git a/package.json b/package.json
index 073158e..cca8867 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "iview",
- "version": "0.9.10-rc-3",
+ "version": "0.9.10-rc-4",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",
diff --git a/src/components/layout/col.vue b/src/components/layout/col.vue
index 6296eab..52d7731 100644
--- a/src/components/layout/col.vue
+++ b/src/components/layout/col.vue
@@ -15,7 +15,11 @@
offset: [Number, String],
push: [Number, String],
pull: [Number, String],
- className: String
+ className: String,
+ xs: [Number, Object],
+ sm: [Number, Object],
+ md: [Number, Object],
+ lg: [Number, Object]
},
data () {
return {
@@ -24,7 +28,7 @@
},
computed: {
classes () {
- return [
+ let classList = [
`${prefixCls}`,
{
[`${prefixCls}-span-${this.span}`]: this.span,
@@ -34,7 +38,24 @@
[`${prefixCls}-pull-${this.pull}`]: this.pull,
[`${this.className}`]: !!this.className
}
- ]
+ ];
+
+ ['xs', 'sm', 'md', 'lg'].forEach(size => {
+ if (typeof this[size] === 'number') {
+ classList.push(`${prefixCls}-span-${size}-${this[size]}`);
+ } else if (typeof this[size] === 'object') {
+ let props = this[size];
+ Object.keys(props).forEach(prop => {
+ classList.push(
+ prop !== 'span'
+ ? `${prefixCls}-${size}-${prop}-${props[prop]}`
+ : `${prefixCls}-span-${size}-${props[prop]}`
+ );
+ });
+ }
+ });
+
+ return classList;
},
styles () {
let style = {};
diff --git a/src/styles/common/layout.less b/src/styles/common/layout.less
index d9f17ad..b57119a 100644
--- a/src/styles/common/layout.less
+++ b/src/styles/common/layout.less
@@ -52,3 +52,37 @@
}
.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+ .make-grid(-sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+ .make-grid(-md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+ .make-grid(-lg);
+}
diff --git a/src/styles/mixins/layout.less b/src/styles/mixins/layout.less
index 7744eee..5209007 100644
--- a/src/styles/mixins/layout.less
+++ b/src/styles/mixins/layout.less
@@ -9,13 +9,13 @@
.clearfix;
}
-.float-grid-columns() {
+.float-grid-columns(@class) {
.col(@index) { // initial
- @item: ~".@{col-prefix-cls}-span-@{index}";
+ @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
- @item: ~".@{col-prefix-cls}-span-@{index}";
+ @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -27,28 +27,28 @@
.col(1); // kickstart it
}
-.loop-grid-columns(@index) when (@index > 0) {
- .@{col-prefix-cls}-span-@{index} {
+.loop-grid-columns(@index, @class) when (@index > 0) {
+ .@{col-prefix-cls}-span@{class}-@{index} {
display: block;
width: percentage((@index / @grid-columns));
}
- .@{col-prefix-cls}-push-@{index} {
+ .@{col-prefix-cls}@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
- .@{col-prefix-cls}-pull-@{index} {
+ .@{col-prefix-cls}@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
- .@{col-prefix-cls}-offset-@{index} {
+ .@{col-prefix-cls}@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
- .@{col-prefix-cls}-order-@{index} {
+ .@{col-prefix-cls}@{class}-order-@{index} {
order: @index;
}
- .loop-grid-columns((@index - 1));
+ .loop-grid-columns((@index - 1), @class);
}
-.loop-grid-columns(@index) when (@index = 0) {
- .@{col-prefix-cls}-@{index} {
+.loop-grid-columns(@index, @class) when (@index = 0) {
+ .@{col-prefix-cls}@{class}-@{index} {
display: none;
}
.@{col-prefix-cls}-push-@{index} {
@@ -59,7 +59,7 @@
}
}
-.make-grid() {
- .float-grid-columns();
- .loop-grid-columns(@grid-columns);
+.make-grid(@class: ~'') {
+ .float-grid-columns(@class);
+ .loop-grid-columns(@grid-columns, @class);
}
\ No newline at end of file
diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less
index 40cd11b..5c5cceb 100644
--- a/src/styles/themes/default/custom.less
+++ b/src/styles/themes/default/custom.less
@@ -112,6 +112,27 @@
// Tag
@tag-font-size : 12px;
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs : 480px;
+@screen-xs-min : @screen-xs;
+@screen-xs-max : (@screen-xs-min - 1);
+
+// Small screen / tablet
+@screen-sm : 768px;
+@screen-sm-min : @screen-sm;
+@screen-sm-max : (@screen-sm-min - 1);
+
+// Medium screen / desktop
+@screen-md : 992px;
+@screen-md-min : @screen-md;
+@screen-md-max : (@screen-md-min - 1);
+
+// Large screen / wide desktop
+@screen-lg : 1200px;
+@screen-lg-min : @screen-lg;
+@screen-lg-max : (@screen-lg-min - 1);
+
// Z-index
@zindex-spin : 8;
@zindex-affix : 10;
diff --git a/test/routers/more.vue b/test/routers/more.vue
index f0cf592..5d15e79 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -1,133 +1,30 @@
-<style scoped>
- /*body{*/
- /*padding: 50px;*/
- /*height: 2000px;*/
- /*}*/
- .example-badge{
- width: 42px;
- height: 42px;
- border-radius: 6px;
- background: #eee;
- display: inline-block;
+<style>
+ .ivu-col div.aaaaa{
+ height: 100px;
+ line-height: 100px;
+ text-align: center;
+ color: #fff;
+ background: rgba(0, 153, 229, .9);
+ }
+ .ivu-col:nth-child(odd) div.aaaaa{
+ background: rgba(0, 153, 229, .7);
}
</style>
<template>
-
- <Badge count="10">
- <a class="example-badge"></a>
- </Badge>
-
- <Tag color="green" closable @on-close="closed">管理员</Tag>
- <Progress :percent="50" status="active" :stroke-width="20">
-
- </Progress>
-
- <Circle :percent="p">
- {{p}}%
- </Circle>
- <br><br>
- <Timeline pending>
- <Timeline-item color="red">发布3.0版本</Timeline-item>
- <Timeline-item color="green">
- <Icon type="cloak" slot="dot"></Icon>
- 发布2.0版本
- </Timeline-item>
- <Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
- <Timeline-item>发布里程碑版本</Timeline-item>
- </Timeline>
+ <Row>
+ <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 1</div></i-col>
+ <i-col :xs="20" :sm="16" :md="12" :lg="8"><div class="aaaaa">Col 2</div></i-col>
+ <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 3</div></i-col>
+ </Row>
<br><br>
- <Affix :offset-top="50" @on-change="affixChange">
- <i-button>固定的图钉</i-button>
- </Affix>
- <Back-top @on-click="backtop">
-
- </Back-top>
-
- <div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">
- <!--<Spin size="large" fix>加载中...</Spin>-->
- <Spin size="large" fix v-if="spinShow">加载中...</Spin>
- </div>
- <div @click="spinShow = !spinShow">消失</div>
- <br><br>
-
- <i-button @click="nextStep">下一步</i-button>
- <i-button @click="step_status = 'error'">步骤3切换为错误</i-button>
- <i-button @click="step_process = 'error'">切换steps状态为error</i-button>
- <Breadcrumb separator="<b>=></b>">
- <Breadcrumb-item href="/index">首页</Breadcrumb-item>
- <Breadcrumb-item href="/my">我的</Breadcrumb-item>
- <Breadcrumb-item>
- <Icon type="photo"></Icon>照片
- </Breadcrumb-item>
- </Breadcrumb>
- <br>
- <Steps :current="1" status="error">
- <Step title="已完成" content="这里是该步骤的描述信息"></Step>
- <Step title="进行中" content="这里是该步骤的描述信息"></Step>
- <Step title="待进行" content="这里是该步骤的描述信息"></Step>
- <Step title="待进行" content="这里是该步骤的描述信息"></Step>
- </Steps>
- <i-button @click="testStatus = 'process'">change Status</i-button>
+ <Row>
+ <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 1</div></i-col>
+ <i-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 2</div></i-col>
+ <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 3</div></i-col>
+ </Row>
</template>
<script>
- import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, iButton, BackTop, Spin, Steps, Breadcrumb} from 'iview';
- const TimelineItem = Timeline.Item;
- const Step = Steps.Step;
- const BreadcrumbItem = Breadcrumb.Item;
-
export default {
- components: {
- Badge,
- Tag,
- Progress,
- Circle,
- Timeline,
- TimelineItem,
- Icon,
- Affix,
- iButton,
- BackTop,
- Spin,
- Steps,
- Step,
- Breadcrumb,
- BreadcrumbItem
- },
- props: {
-
- },
- data () {
- return {
- total: 512,
- p: 50,
- step_current: 0,
- step_status: 'wait',
- step_process: 'process',
- spinShow: true,
- testStatus: 'wait'
- }
- },
- computed: {
- },
- methods: {
- closed (e) {
- console.log(e)
- },
- affixChange (status) {
- console.log(status)
- },
- backtop () {
- console.log('toppp')
- },
- nextStep () {
- this.step_current += 1;
- }
- },
- ready () {
- setTimeout(() => {
- this.p = 60;
- }, 1000)
- }
}
</script>
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 09685eb..4030493 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,157 +1,279 @@
<template>
- <i-button @click="down">down</i-button>
- <checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
- <checkbox value="show">展示</checkbox>
- <checkbox value="weak">唤醒</checkbox>
- <checkbox value="signin">登录</checkbox>
- <checkbox value="click">点击</checkbox>
- <checkbox value="active">激活</checkbox>
- <checkbox value="day7">7日留存</checkbox>
- <checkbox value="day30">30日留存</checkbox>
- <checkbox value="tomorrow">次日留存</checkbox>
- <checkbox value="day">日活跃</checkbox>
- <checkbox value="week">周活跃</checkbox>
- <checkbox value="month">月活跃</checkbox>
- </checkbox-group>
- <i-table :content="self" :data="tableData2" :columns="tableColumns2" border v-ref:table></i-table>
+ <i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>
+ <br>
+ <i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
+ <i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button>
+ <i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button>
</template>
<script>
export default {
data () {
return {
- self: this,
- tableData2: this.mockTableData2(),
- tableColumns2: [],
- tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
- }
- },
- methods: {
- mockTableData2 () {
- let data = [];
- function getNum() {
- return Math.floor(Math.random () * 10000 + 1);
- }
- for (let i = 0; i < 10; i++) {
- data.push({
- name: '推广名称' + (i+1),
- fav: 0,
- show: getNum(),
- weak: getNum(),
- signin: getNum(),
- click: getNum(),
- active: getNum(),
- day7: getNum(),
- day30: getNum(),
- tomorrow: getNum(),
- day: getNum(),
- week: getNum(),
- month: getNum()
- })
- }
- return data;
- },
- getTable2Columns () {
- const table2ColumnList = {
- name: {
- title: '名称',
- key: 'name',
- fixed: 'left',
- width: 200,
- render (row, column, index) {
- return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
- <Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
- <span>${row.name}</span>`;
+ columns8: [
+ {
+ "title": "名称",
+ "key": "name",
+ "fixed": "left",
+ "width": 200
+ },
+ {
+ "title": "展示",
+ "key": "show",
+ "width": 150,
+ "sortable": true,
+ filters: [
+ {
+ label: '大于4000',
+ value: 1
+ },
+ {
+ label: '小于4000',
+ value: 2
+ }
+ ],
+ filterMultiple: false,
+ filterMethod (value, row) {
+ if (value === 1) {
+ return row.show > 4000;
+ } else if (value === 2) {
+ return row.show < 4000;
+ }
}
},
- show: {
- title: '展示',
- key: 'show',
- width: 150,
- sortable: true
- },
- weak: {
- title: '唤醒',
- key: 'weak',
- width: 150,
- sortable: true
- },
- signin: {
- title: '登录',
- key: 'signin',
- width: 150,
- sortable: true
- },
- click: {
- title: '点击',
- key: 'click',
- width: 150,
- sortable: true
- },
- active: {
- title: '激活',
- key: 'active',
- width: 150,
- sortable: true
- },
- day7: {
- title: '7日留存',
- key: 'day7',
- width: 150,
- sortable: true
- },
- day30: {
- title: '30日留存',
- key: 'day30',
- width: 150,
- sortable: true
- },
- tomorrow: {
- title: '次日留存',
- key: 'tomorrow',
- width: 150,
- sortable: true
- },
- day: {
- title: '日活跃',
- key: 'day',
- width: 150,
- sortable: true
- },
- week: {
- title: '周活跃',
- key: 'week',
- width: 150,
- sortable: true
- },
- month: {
- title: '月活跃',
- key: 'month',
- width: 150,
- sortable: true
+ {
+ "title": "唤醒",
+ "key": "weak",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "登录",
+ "key": "signin",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "点击",
+ "key": "click",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "激活",
+ "key": "active",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "7日留存",
+ "key": "day7",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "30日留存",
+ "key": "day30",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "次日留存",
+ "key": "tomorrow",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "日活跃",
+ "key": "day",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "周活跃",
+ "key": "week",
+ "width": 150,
+ "sortable": true
+ },
+ {
+ "title": "月活跃",
+ "key": "month",
+ "width": 150,
+ "sortable": true
+ }
+ ],
+ data7: [
+ {
+ "name": "推广名称1",
+ "fav": 0,
+ "show": 7302,
+ "weak": 5627,
+ "signin": 1563,
+ "click": 4254,
+ "active": 1438,
+ "day7": 274,
+ "day30": 285,
+ "tomorrow": 1727,
+ "day": 558,
+ "week": 4440,
+ "month": 5610
+ },
+ {
+ "name": "推广名称2",
+ "fav": 0,
+ "show": 4720,
+ "weak": 4086,
+ "signin": 3792,
+ "click": 8690,
+ "active": 8470,
+ "day7": 8172,
+ "day30": 5197,
+ "tomorrow": 1684,
+ "day": 2593,
+ "week": 2507,
+ "month": 1537
+ },
+ {
+ "name": "推广名称3",
+ "fav": 0,
+ "show": 7181,
+ "weak": 8007,
+ "signin": 8477,
+ "click": 1879,
+ "active": 16,
+ "day7": 2249,
+ "day30": 3450,
+ "tomorrow": 377,
+ "day": 1561,
+ "week": 3219,
+ "month": 1588
+ },
+ {
+ "name": "推广名称4",
+ "fav": 0,
+ "show": 9911,
+ "weak": 8976,
+ "signin": 8807,
+ "click": 8050,
+ "active": 7668,
+ "day7": 1547,
+ "day30": 2357,
+ "tomorrow": 7278,
+ "day": 5309,
+ "week": 1655,
+ "month": 9043
+ },
+ {
+ "name": "推广名称5",
+ "fav": 0,
+ "show": 934,
+ "weak": 1394,
+ "signin": 6463,
+ "click": 5278,
+ "active": 9256,
+ "day7": 209,
+ "day30": 3563,
+ "tomorrow": 8285,
+ "day": 1230,
+ "week": 4840,
+ "month": 9908
+ },
+ {
+ "name": "推广名称6",
+ "fav": 0,
+ "show": 6856,
+ "weak": 1608,
+ "signin": 457,
+ "click": 4949,
+ "active": 2909,
+ "day7": 4525,
+ "day30": 6171,
+ "tomorrow": 1920,
+ "day": 1966,
+ "week": 904,
+ "month": 6851
+ },
+ {
+ "name": "推广名称7",
+ "fav": 0,
+ "show": 5107,
+ "weak": 6407,
+ "signin": 4166,
+ "click": 7970,
+ "active": 1002,
+ "day7": 8701,
+ "day30": 9040,
+ "tomorrow": 7632,
+ "day": 4061,
+ "week": 4359,
+ "month": 3676
+ },
+ {
+ "name": "推广名称8",
+ "fav": 0,
+ "show": 862,
+ "weak": 6520,
+ "signin": 6696,
+ "click": 3209,
+ "active": 6801,
+ "day7": 6364,
+ "day30": 6850,
+ "tomorrow": 9408,
+ "day": 2481,
+ "week": 1479,
+ "month": 2346
+ },
+ {
+ "name": "推广名称9",
+ "fav": 0,
+ "show": 567,
+ "weak": 5859,
+ "signin": 128,
+ "click": 6593,
+ "active": 1971,
+ "day7": 7596,
+ "day30": 3546,
+ "tomorrow": 6641,
+ "day": 1611,
+ "week": 5534,
+ "month": 3190
+ },
+ {
+ "name": "推广名称10",
+ "fav": 0,
+ "show": 3651,
+ "weak": 1819,
+ "signin": 4595,
+ "click": 7499,
+ "active": 7405,
+ "day7": 8710,
+ "day30": 5518,
+ "tomorrow": 428,
+ "day": 9768,
+ "week": 2864,
+ "month": 5811
}
- };
-
- let data = [table2ColumnList.name];
-
- this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
-
- return data;
- },
- changeTableColumns () {
- this.tableColumns2 = this.getTable2Columns();
- },
- toggleFav (index) {
- this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
- },
- down () {
- this.$refs.table.exportCsv({
- filename: '2132',
- original: false
- });
+ ]
}
},
- ready () {
- this.changeTableColumns();
+ methods: {
+ exportData (type) {
+ if (type === 1) {
+ this.$refs.table.exportCsv({
+ filename: '原始数据'
+ });
+ } else if (type === 2) {
+ this.$refs.table.exportCsv({
+ filename: '排序和过滤后的数据',
+ original: false
+ });
+ } else if (type === 3) {
+ this.$refs.table.exportCsv({
+ filename: '自定义数据',
+ columns: this.columns8.filter((col, index) => index < 4),
+ data: this.data7.filter((data, index) => index < 4)
+ });
+ }
+ }
}
}
</script>
--
libgit2 0.21.4