drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

release 0.9.9

Browse source 
release 0.9.9
This commit is contained in:
梁灏 2016-12-02 15:15:54 +08:00
parent 1c821c09d3
commit 0f4ccf4486
5 changed files with 70 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "0.9.9-rc-6", "version": "0.9.9",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",

6
src/components/table/table.vue
View file

@ -147,7 +147,9 @@
return [ return [
`${prefixCls}-wrapper`, `${prefixCls}-wrapper`,
{ {
[`${prefixCls}-hide`]: !this.ready [`${prefixCls}-hide`]: !this.ready,
[`${prefixCls}-with-header`]: this.showSlotHeader,
[`${prefixCls}-with-footer`]: this.showSlotFooter
} }
] ]
}, },
@ -158,8 +160,6 @@
[`${prefixCls}-${this.size}`]: !!this.size, [`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-border`]: this.border, [`${prefixCls}-border`]: this.border,
[`${prefixCls}-stripe`]: this.stripe, [`${prefixCls}-stripe`]: this.stripe,
[`${prefixCls}-with-header`]: this.showSlotHeader,
[`${prefixCls}-with-footer`]: this.showSlotFooter,
[`${prefixCls}-with-fixed-top`]: !!this.height [`${prefixCls}-with-fixed-top`]: !!this.height
} }
] ]

8
src/styles/components/table.less
View file

@ -46,16 +46,16 @@
} }
&-with-header{ &-with-header{
border-radius: @border-radius-base @border-radius-base 0 0; //border-radius: @border-radius-base @border-radius-base 0 0;
} }
&-with-footer{ &-with-footer{
border: 1px solid @border-color-base; //border: 1px solid @border-color-base;
border-radius: 0 0 @border-radius-base @border-radius-base; //border-radius: 0 0 @border-radius-base @border-radius-base;
} }
&-with-header&-with-footer{ &-with-header&-with-footer{
border-radius: @border-radius-base; //border-radius: @border-radius-base;
} }
&-title, &-footer{ &-title, &-footer{

83
test/routers/select.vue
View file

@ -1,44 +1,19 @@
<template> <template>
<i-select :model.sync="model1" style="width:200px" clearable> <Row style="margin: 100px">
<i-col span="12" style="padding-right:10px">
<i-select :model.sync="model11" filterable>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select> </i-select>
{{ model1 | json }} </i-col>
<i-button @click="change">修改数据</i-button> <i-col span="12">
<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange"> <i-select :model.sync="model12" filterable multiple>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select> </i-select>
{{ model10 | json }} </i-col>
<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange"> </Row>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model11 | json }}
<i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model12 | json }}
<br><br>
<i-select :model.sync="model2" size="small" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model3" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model4" size="large" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model7" style="width:200px">
<Option-group label="热门城市">
<i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
</Option-group>
<Option-group label="其它城市">
<i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
</Option-group>
</i-select>
</template> </template>
<script> <script>
import { iSelect, iOption, iButton, OptionGroup } from 'iview';
export default { export default {
components: { iSelect, iOption, iButton, OptionGroup },
data () { data () {
return { return {
cityList: [ cityList: [
@ -54,35 +29,21 @@
value: 'shenzhen', value: 'shenzhen',
label: '深圳市' label: '深圳市'
}, },
// { {
// value: 'hangzhou', value: 'hangzhou',
// label: '杭州市' label: '杭州市'
// }, },
// { {
// value: 'nanjing', value: 'nanjing',
// label: '南京市' label: '南京市'
// }, },
// { {
// value: 'chongqing', value: 'chongqing',
// label: '重庆市' label: '重庆市'
// }
],
model1: '',
model10: [],
model11: '',
model12: [],
model2: '',
model3: '',
model4: '',
model7: ''
} }
}, ],
methods: { model11: '',
change () { model12: []
this.cityList.splice(2, 1);
},
datachange (data) {
console.log(data);
} }
} }
} }

174
test/routers/table.vue
View file

@ -1,150 +1,50 @@
<template> <template>
<checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns"> <i-table border :columns="columns1" :data="data1">
<checkbox value="show">展示</checkbox> <div slot="header">表格标题</div>
<checkbox value="weak">唤醒</checkbox> <div slot="footer">表格页脚</div>
<checkbox value="signin">登录</checkbox> </i-table>
<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></i-table>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
self: this, columns1: [
tableData2: this.mockTableData2(), {
tableColumns2: [], title: '姓名',
tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month'] key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
} }
],
data1: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
}, },
methods: { {
mockTableData2 () { name: '张小刚',
let data = []; age: 25,
function getNum() { address: '北京市海淀区西二旗'
return Math.floor(Math.random () * 10000 + 1); },
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
} }
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>`;
}
},
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
}
};
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;
}
},
ready () {
this.changeTableColumns();
} }
} }
</script> </script>