release 0.9.9
release 0.9.9
This commit is contained in:
梁灏
parent
1c821c09d3
commit
0f4ccf4486
5 changed files with 70 additions and 209 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "0.9.9-rc-6",
|
||||
"version": "0.9.9",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
|||
|
|
@ -147,7 +147,9 @@
|
|||
return [
|
||||
`${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}-border`]: this.border,
|
||||
[`${prefixCls}-stripe`]: this.stripe,
|
||||
[`${prefixCls}-with-header`]: this.showSlotHeader,
|
||||
[`${prefixCls}-with-footer`]: this.showSlotFooter,
|
||||
[`${prefixCls}-with-fixed-top`]: !!this.height
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -46,16 +46,16 @@
|
|||
}
|
||||
|
||||
&-with-header{
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
//border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&-with-footer{
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
//border: 1px solid @border-color-base;
|
||||
//border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
|
||||
&-with-header&-with-footer{
|
||||
border-radius: @border-radius-base;
|
||||
//border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&-title, &-footer{
|
||||
|
|
|
|||
|
|
@ -1,44 +1,19 @@
|
|||
<template>
|
||||
<i-select :model.sync="model1" style="width:200px" clearable>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model1 | json }}
|
||||
<i-button @click="change">修改数据</i-button>
|
||||
<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model10 | json }}
|
||||
<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">
|
||||
<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>
|
||||
<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-select>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<i-select :model.sync="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
import { iSelect, iOption, iButton, OptionGroup } from 'iview';
|
||||
export default {
|
||||
components: { iSelect, iOption, iButton, OptionGroup },
|
||||
data () {
|
||||
return {
|
||||
cityList: [
|
||||
|
|
@ -54,35 +29,21 @@
|
|||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
// {
|
||||
// value: 'hangzhou',
|
||||
// label: '杭州市'
|
||||
// },
|
||||
// {
|
||||
// value: 'nanjing',
|
||||
// label: '南京市'
|
||||
// },
|
||||
// {
|
||||
// value: 'chongqing',
|
||||
// label: '重庆市'
|
||||
// }
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
model1: '',
|
||||
model10: [],
|
||||
model11: '',
|
||||
model12: [],
|
||||
model2: '',
|
||||
model3: '',
|
||||
model4: '',
|
||||
model7: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change () {
|
||||
this.cityList.splice(2, 1);
|
||||
},
|
||||
datachange (data) {
|
||||
console.log(data);
|
||||
model12: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,150 +1,50 @@
|
|||
<template>
|
||||
<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></i-table>
|
||||
<i-table border :columns="columns1" :data="data1">
|
||||
<div slot="header">表格标题</div>
|
||||
<div slot="footer">表格页脚</div>
|
||||
</i-table>
|
||||
</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>`;
|
||||
}
|
||||
columns1: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
show: {
|
||||
title: '展示',
|
||||
key: 'show',
|
||||
width: 150,
|
||||
sortable: true
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age'
|
||||
},
|
||||
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: 'address'
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.changeTableColumns();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue