Lawrence Lee
GitHub
commit
b087f93efa
61 changed files with 1759 additions and 365 deletions
|
|
@ -4,7 +4,7 @@
|
|||
</a>
|
||||
</p>
|
||||
|
||||
# iView [](https://travis-ci.org/iview/iview) [](https://www.npmjs.org/package/iview) [](https://npmjs.org/package/iview) [](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
# iView [](https://travis-ci.org/iview/iview) [](https://www.npmjs.org/package/iview) [](https://npmjs.org/package/iview) [](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
### A high quality UI Toolkit built on Vue.js.
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ module.exports = merge(webpackBaseConfig, {
|
|||
resolve: {
|
||||
alias: {
|
||||
iview: '../../src/index',
|
||||
vue: 'vue/dist/vue.js'
|
||||
// vue: 'vue/dist/vue.js'
|
||||
vue: 'vue/dist/vue.runtime.js'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
|
|
|
|||
101
examples/components/table.vue
Normal file
101
examples/components/table.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<Table width="550" border :columns="columns2" :data="data3"></Table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'etable',
|
||||
data () {
|
||||
return {
|
||||
columns2: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '省份',
|
||||
key: 'province',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '市区',
|
||||
key: 'city',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '邮编',
|
||||
key: 'zip',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, '查看'),
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, '编辑')
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data3: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
province: '北京市',
|
||||
city: '朝阳区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
province: '北京市',
|
||||
city: '海淀区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
province: '上海市',
|
||||
city: '浦东新区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
province: '广东',
|
||||
city: '南山区',
|
||||
zip: 100000
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,39 +1,273 @@
|
|||
<!--<template>-->
|
||||
<!--<Row>-->
|
||||
<!--<i-col span="4">-->
|
||||
<!--<Button @click="handleLoad">load</Button>-->
|
||||
<!--{{ v1 }}-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="4">-->
|
||||
<!--<Cascader :data="data2" filterable v-model="v1" style="width: 200px;"></Cascader>-->
|
||||
<!--<!–<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>–>-->
|
||||
<!--</i-col>-->
|
||||
<!--</Row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--v1: [],-->
|
||||
<!--data2: [-->
|
||||
<!--{-->
|
||||
<!--value: 'zhejiang',-->
|
||||
<!--label: '浙江',-->
|
||||
<!--children: [],-->
|
||||
<!--loading: false-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'jiangsu',-->
|
||||
<!--label: '江苏',-->
|
||||
<!--children: [{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京',-->
|
||||
<!--children: [-->
|
||||
<!--{-->
|
||||
<!--value: 'zhonghuamen',-->
|
||||
<!--label: '中华门'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v1',-->
|
||||
<!--label: 'v111'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v2',-->
|
||||
<!--label: 'v2222'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v3',-->
|
||||
<!--label: 'v333'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v4',-->
|
||||
<!--label: 'v4444'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v5',-->
|
||||
<!--label: 'v555'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v6',-->
|
||||
<!--label: 'v666'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'v7',-->
|
||||
<!--label: 'v777'-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}]-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--data3: [{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京',-->
|
||||
<!--children: [-->
|
||||
<!--{-->
|
||||
<!--value: 'gugong',-->
|
||||
<!--label: '故宫'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'tiantan',-->
|
||||
<!--label: '天坛'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'wangfujing',-->
|
||||
<!--label: '王府井'-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}, {-->
|
||||
<!--value: 'jiangsu',-->
|
||||
<!--label: '江苏',-->
|
||||
<!--children: [-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京',-->
|
||||
<!--children: [-->
|
||||
<!--{-->
|
||||
<!--value: 'fuzimiao',-->
|
||||
<!--label: '夫子庙',-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'suzhou',-->
|
||||
<!--label: '苏州',-->
|
||||
<!--children: [-->
|
||||
<!--{-->
|
||||
<!--disabled: true,-->
|
||||
<!--value: 'zhuozhengyuan',-->
|
||||
<!--label: '拙政园',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shizilin',-->
|
||||
<!--label: '狮子林',-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--}]-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--handleLoad () {-->
|
||||
<!--this.data2[0].loading = !this.data2[0].loading;-->
|
||||
<!--},-->
|
||||
<!--loadData (item, cb) {-->
|
||||
<!--item.loading = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--if (item.value === 'zhejiang') {-->
|
||||
<!--item.children = [-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州',-->
|
||||
<!--loading: false,-->
|
||||
<!--children: []-->
|
||||
<!--}-->
|
||||
<!--];-->
|
||||
<!--} else if (item.value === 'hangzhou') {-->
|
||||
<!--item.children = [-->
|
||||
<!--{-->
|
||||
<!--value: 'ali',-->
|
||||
<!--label: '阿里巴巴'-->
|
||||
<!--}-->
|
||||
<!--];-->
|
||||
<!--}-->
|
||||
<!--item.loading = false;-->
|
||||
<!--cb();-->
|
||||
<!--}, 1000);-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<Cascader :data="data4" :load-data="loadData"></Cascader>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--data4: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京',-->
|
||||
<!--children: [],-->
|
||||
<!--loading: false-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州',-->
|
||||
<!--children: [],-->
|
||||
<!--loading:false-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--loadData (item, callback) {-->
|
||||
<!--item.loading = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--if (item.value === 'beijing') {-->
|
||||
<!--item.children = [-->
|
||||
<!--{-->
|
||||
<!--value: 'talkingdata',-->
|
||||
<!--label: 'TalkingData'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'baidu',-->
|
||||
<!--label: '百度'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'sina',-->
|
||||
<!--label: '新浪'-->
|
||||
<!--}-->
|
||||
<!--];-->
|
||||
<!--} else if (item.value === 'hangzhou') {-->
|
||||
<!--item.children = [-->
|
||||
<!--{-->
|
||||
<!--value: 'ali',-->
|
||||
<!--label: '阿里巴巴'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: '163',-->
|
||||
<!--label: '网易'-->
|
||||
<!--}-->
|
||||
<!--];-->
|
||||
<!--}-->
|
||||
<!--item.loading = false;-->
|
||||
<!--callback();-->
|
||||
<!--}, 1000);-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<!--<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>-->
|
||||
<div>
|
||||
<Cascader :data="data2" v-model="v1" disabled clearable></Cascader>
|
||||
<Cascader :data="data2" clearable></Cascader>
|
||||
<Cascader :data="data" v-model="model" :load-data="loadData"></Cascader>
|
||||
<ul>
|
||||
<li v-for="(log, idx) in logs" :key="idx">{{log}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
v1: ['zhejiang', 'hangzhou', 'xihu'],
|
||||
data2: [{
|
||||
value: 'zhejiang',
|
||||
label: '浙江',
|
||||
children: [{
|
||||
data4: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [],
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: '西湖'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: '江苏',
|
||||
disabled: true,
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: '南京',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: '中华门'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
children: [],
|
||||
loading:false
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
model: [340000, 340100, 340104],
|
||||
count: 1,
|
||||
logs: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData (item, callback) {
|
||||
this.logs.push(`第${this.count}次请求: ${item.value}`)
|
||||
this.count++
|
||||
item.loading = true;
|
||||
setTimeout(() => {
|
||||
if (item.value === 340000) {
|
||||
item.children = [
|
||||
{value: 340100, label: "合肥市", children: [], loading: false}
|
||||
];
|
||||
} else if (item.value === 340100) {
|
||||
item.children = [
|
||||
{value: 340104, label: "蜀山区"},
|
||||
{value: 340111, label: "包河区"}
|
||||
];
|
||||
}
|
||||
item.loading = false;
|
||||
callback();
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.data = [{value: 340000, label: "安徽省", children: [], loading: false}];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<Checkbox-group v-model="fruit">
|
||||
<Checkbox v-for="item in tags" :label="item.label"></Checkbox>
|
||||
<Checkbox v-for="item in tags" :label="item.label" :key="item"></Checkbox>
|
||||
</Checkbox-group>
|
||||
<div>{{ fruit }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ val1 }}
|
||||
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
|
||||
<Date-picker v-model="val1" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<Date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<div @click="val1 = '2017-03-02'">change</div>
|
||||
</div>
|
||||
<Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
val1: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ddd () {
|
||||
const date = new Date(this.val1);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<row>-->
|
||||
<!--<i-col span="12">-->
|
||||
|
|
|
|||
|
|
@ -1,25 +1,63 @@
|
|||
<!--<template>-->
|
||||
<!--<Row>-->
|
||||
<!--<i-col span="8">-->
|
||||
<!--<Card>-->
|
||||
<!--<Dropdown @on-click="handleClick">-->
|
||||
<!--<a href="javascript:void(0)">-->
|
||||
<!--下拉菜单-->
|
||||
<!--<Icon type="arrow-down-b"></Icon>-->
|
||||
<!--</a>-->
|
||||
<!--<Dropdown-menu slot="list">-->
|
||||
<!--<Dropdown-item name="1">驴打滚</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="2">炸酱面</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="3" disabled>豆汁儿</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="4">冰糖葫芦</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="5" divided>北京烤鸭</Dropdown-item>-->
|
||||
<!--</Dropdown-menu>-->
|
||||
<!--</Dropdown>-->
|
||||
<!--</Card>-->
|
||||
<!--</i-col>-->
|
||||
<!--</Row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--methods: {-->
|
||||
<!--handleClick (val) {-->
|
||||
<!--console.log(val)-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Dropdown @on-click="handleClick">
|
||||
<a href="javascript:void(0)">
|
||||
下拉菜单
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item name="1">驴打滚</Dropdown-item>
|
||||
<Dropdown-item name="2">炸酱面</Dropdown-item>
|
||||
<Dropdown-item name="3" disabled>豆汁儿</Dropdown-item>
|
||||
<Dropdown-item name="4">冰糖葫芦</Dropdown-item>
|
||||
<Dropdown-item name="5" divided>北京烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<Table border :context="self" :columns="columns7" :data="data6"></Table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
columns7: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<Dropdown @on-click="change"><a href="javascript:void(0)">下拉菜单<Icon type="arrow-down-b"></Icon></a><Dropdown-menu slot="list"><Dropdown-item name="1">驴打滚</Dropdown-item><Dropdown-item name="2">炸酱面</Dropdown-item><Dropdown-item disabled name="3">豆汁儿</Dropdown-item><Dropdown-item>冰糖葫芦</Dropdown-item><Dropdown-item divided>北京烤鸭</Dropdown-item></Dropdown-menu></Dropdown>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (val) {
|
||||
console.log(val)
|
||||
change (s) {
|
||||
console.log(s)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<Input-number :max="10" :min="-1" v-model="v1"></Input-number>
|
||||
<Input-number :max="10" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>
|
||||
{{ v1 }}
|
||||
<div @click="c">change v1</div>
|
||||
<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>
|
||||
|
|
@ -12,7 +12,8 @@
|
|||
data () {
|
||||
return {
|
||||
v1: 1,
|
||||
v2: 1
|
||||
v2: 1,
|
||||
autofocus: true
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="width: 300px;">
|
||||
<i-input v-model="value11" icon="ios-clock-outline">
|
||||
<i-input v-model="value11" icon="ios-clock-outline" :autofocus="autofocus">
|
||||
<span slot="prepend">.com</span>
|
||||
</i-input>
|
||||
<i-input v-model="value11" icon="ios-clock-outline">
|
||||
|
|
@ -17,7 +17,8 @@
|
|||
value13: '',
|
||||
select1: 'http',
|
||||
select2: 'com',
|
||||
select3: 'day'
|
||||
select3: 'day',
|
||||
autofocus: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-button @click.native="info">显示普通提示</i-button>
|
||||
<i-button @click.native="success">显示成功提示</i-button>
|
||||
<i-button @click.native="warning">显示警告提示</i-button>
|
||||
<i-button @click.native="error">显示错误提示</i-button>
|
||||
|
|
@ -9,6 +10,17 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
info () {
|
||||
// this.$Message.info('这是一条普通提示');
|
||||
this.$Message.success({
|
||||
content: '这是一条普通提示2',
|
||||
duration: 500,
|
||||
onClose () {
|
||||
console.log(123)
|
||||
},
|
||||
closable: true
|
||||
})
|
||||
},
|
||||
success () {
|
||||
this.$Message.success('这是一条成功的提示');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,33 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
||||
|
||||
<Modal
|
||||
v-model="modal1"
|
||||
:title="title"
|
||||
@on-ok="ok"
|
||||
:mask-closable="false"
|
||||
@on-cancel="cancel">
|
||||
<p><Button type="ghost" @click="title = '这是标题'">设置标题</Button> {{title}}</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<Button @click="confirm">标准</Button>
|
||||
<Button @click="custom">自定义按钮文字</Button>
|
||||
<Button @click="async">异步关闭</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal1: true,
|
||||
title:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
this.$Message.info('点击了确定');
|
||||
confirm () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
onOk: () => {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
onCancel: () => {
|
||||
this.$Message.info('点击了取消');
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
custom () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel'
|
||||
});
|
||||
},
|
||||
async () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>对话框将在 2秒 后关闭</p>',
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
setTimeout(() => {
|
||||
this.$Modal.remove();
|
||||
this.$Message.info('异步关闭了对话框');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,44 @@
|
|||
<template>
|
||||
<i-button type="primary" @click.native="time">打开提醒</i-button>
|
||||
<div>
|
||||
<p>带描述信息</p>
|
||||
<Button @click="info(false)">消息</Button>
|
||||
<Button @click="success(false)">成功</Button>
|
||||
<Button @click="warning(false)">警告</Button>
|
||||
<Button @click="error(false)">错误</Button>
|
||||
<p>仅标题</p>
|
||||
<Button @click="info(true)">消息</Button>
|
||||
<Button @click="success(true)">成功</Button>
|
||||
<Button @click="warning(true)">警告</Button>
|
||||
<Button @click="error(true)">错误</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
time () {
|
||||
this.$Notice.open({
|
||||
info (nodesc) {
|
||||
this.$Notice.info({
|
||||
title: '这是通知标题',
|
||||
desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。'
|
||||
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
},
|
||||
success (nodesc) {
|
||||
this.$Notice.success({
|
||||
title: '这是通知标题',
|
||||
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
},
|
||||
warning (nodesc) {
|
||||
this.$Notice.warning({
|
||||
title: '这是通知标题',
|
||||
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
},
|
||||
error (nodesc) {
|
||||
this.$Notice.error({
|
||||
title: '这是通知标题',
|
||||
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$Notice.config({
|
||||
top: 150,
|
||||
duration: 3
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<Page :total="100" :current="current"></Page>
|
||||
{{ current }}
|
||||
<Button @click="current = 1">set current</Button>
|
||||
<div style="margin: 100px;">
|
||||
<Page :total="100" show-sizer placement="top"></Page>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
current: 2
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio-group v-model="date.sex">
|
||||
<Radio label="male form"></Radio>
|
||||
<Radio label="female"></Radio>
|
||||
<div v-if="show">
|
||||
<Radio label="male"></Radio>
|
||||
<Radio label="female"></Radio>
|
||||
</div>
|
||||
</Radio-group>
|
||||
<Button @click="handleChange">change</Button>
|
||||
</div>
|
||||
|
|
@ -12,13 +14,15 @@
|
|||
data () {
|
||||
return {
|
||||
date: {
|
||||
sex: ''
|
||||
}
|
||||
sex: 'male'
|
||||
},
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange () {
|
||||
this.date.sex = 'male form';
|
||||
// this.date.sex = 'male form';
|
||||
this.show = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,166 @@
|
|||
<template>
|
||||
<Select v-model="fields.pid" filterable>
|
||||
<Option :value="0" label="一级菜单"></Option>
|
||||
<Option :value="1" label="二级菜单"></Option>
|
||||
</Select>
|
||||
<Row>
|
||||
<i-col span="4">{{model}}</i-col>
|
||||
<i-col span="8">
|
||||
<i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
|
||||
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
fields: {
|
||||
pid: 0
|
||||
}
|
||||
// model: 'Alabama',
|
||||
model: ['Alabama', 'Hawaii'],
|
||||
options: [
|
||||
|
||||
],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Al", "Alabama", "Alaska", "Arizona",
|
||||
"Arkansas", "California", "Colorado",
|
||||
"Connecticut", "Delaware", "Florida",
|
||||
"Georgia", "Hawaii", "Idaho", "Illinois",
|
||||
"Indiana", "Iowa", "Kansas", "Kentucky",
|
||||
"Louisiana", "Maine", "Maryland",
|
||||
"Massachusetts", "Michigan", "Minnesota",
|
||||
"Mississippi", "Missouri", "Montana",
|
||||
"Nebraska", "Nevada", "New Hampshire",
|
||||
"New Jersey", "New Mexico", "New York",
|
||||
"North Carolina", "North Dakota", "Ohio",
|
||||
"Oklahoma", "Oregon", "Pennsylvania",
|
||||
"Rhode Island", "South Carolina",
|
||||
"South Dakota", "Tennessee", "Texas",
|
||||
"Utah", "Vermont", "Virginia",
|
||||
"Washington", "West Virginia", "Wisconsin",
|
||||
"Wyoming"]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.options = [
|
||||
// {
|
||||
// label: '全部',
|
||||
// value: 0
|
||||
// },{
|
||||
// label: '苹果',
|
||||
// value: 1
|
||||
// },{
|
||||
// label: '香蕉',
|
||||
// value: 2
|
||||
// },{
|
||||
// label: '西瓜',
|
||||
// value: 3
|
||||
// }
|
||||
];
|
||||
},
|
||||
methods: {
|
||||
handleAdd () {
|
||||
this.options = [
|
||||
{
|
||||
label: '全部',
|
||||
value: 0
|
||||
},{
|
||||
label: '苹果',
|
||||
value: 1
|
||||
},{
|
||||
label: '香蕉',
|
||||
value: 2
|
||||
},{
|
||||
label: '西瓜',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
remoteMethod (query) {
|
||||
console.log(13)
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
this.options = [];
|
||||
}
|
||||
},
|
||||
handleInput () {
|
||||
// console.log(1)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.list = this.states.map(item => {
|
||||
return {
|
||||
value: item,
|
||||
label: 'L ' + item
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Row style="width: 400px;">-->
|
||||
<!--<i-col span="12" style="padding-right:10px">-->
|
||||
<!--<Select v-model="model11" filterable>-->
|
||||
<!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Select v-model="model12" filterable multiple>-->
|
||||
<!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</i-col>-->
|
||||
<!--</Row>-->
|
||||
<!--<Button @click="handleSet">set</Button>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model11: '',-->
|
||||
<!--model12: []-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--handleSet () {-->
|
||||
<!--this.model11 = 'shanghai';-->
|
||||
<!--// this.model12 = ['beijing'];-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
|
|
|||
|
|
@ -1,27 +1,39 @@
|
|||
<template>
|
||||
<div>
|
||||
<Table border :context="self" :columns="columns7" :data="data6"></Table>
|
||||
<abc></abc>
|
||||
</div>
|
||||
<Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
|
||||
</template>
|
||||
<script>
|
||||
import abc from '../components/test.vue';
|
||||
import etable from '../components/table.vue';
|
||||
export default {
|
||||
components: { abc },
|
||||
components: { etable },
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
columns7: [
|
||||
{
|
||||
type: 'expand',
|
||||
width: 50,
|
||||
render: (h, params) => {
|
||||
// return h(etable);
|
||||
return h('div', params.row.name)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<abc></abc>`;
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Icon', {
|
||||
props: {
|
||||
type: 'person'
|
||||
}
|
||||
}),
|
||||
h('strong', params.row.name)
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age'
|
||||
key: 'age',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
|
|
@ -32,8 +44,34 @@
|
|||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
render (row, column, index) {
|
||||
return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'primary',
|
||||
size: 'small'
|
||||
},
|
||||
style: {
|
||||
marginRight: '5px'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.show(params.index)
|
||||
}
|
||||
}
|
||||
}, '查看'),
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'error',
|
||||
size: 'small'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.index)
|
||||
}
|
||||
}
|
||||
}, '删除')
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
@ -51,7 +89,8 @@
|
|||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
address: '上海市浦东新区世纪大道',
|
||||
_expanded: true
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
|
|
@ -70,6 +109,10 @@
|
|||
},
|
||||
remove (index) {
|
||||
this.data6.splice(index, 1);
|
||||
},
|
||||
expand (row, s) {
|
||||
// console.log(row);
|
||||
// console.log(s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
setTimeout(function() {
|
||||
console.log('--1');
|
||||
// _this.data1 = null;
|
||||
_this.data1 = _this.getMockData1();
|
||||
// _this.data1 = _this.getMockData1();
|
||||
console.log('-fetch-', _this.data1);
|
||||
|
||||
}, 1500);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "2.0.0-rc.11",
|
||||
"version": "2.0.0-rc.15",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
|||
|
|
@ -67,7 +67,8 @@
|
|||
this.backTop = window.pageYOffset >= this.height;
|
||||
},
|
||||
back () {
|
||||
scrollTop(window, document.body.scrollTop, 0, this.duration);
|
||||
const sTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
scrollTop(window, sTop, 0, this.duration);
|
||||
this.$emit('on-click');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
import Notification from './notification.vue';
|
||||
import Vue from 'vue';
|
||||
import { camelcaseToHyphen } from '../../../utils/assist';
|
||||
|
||||
Notification.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
const Instance = new Vue({
|
||||
data: _props,
|
||||
render (h) {
|
||||
return h(Notification, {
|
||||
props: _props
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<notification${props}></notification>`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const notification = new Vue({
|
||||
el: div,
|
||||
data: _props,
|
||||
components: { Notification }
|
||||
}).$children[0];
|
||||
const component = Instance.$mount();
|
||||
document.body.appendChild(component.$el);
|
||||
const notification = Instance.$children[0];
|
||||
|
||||
return {
|
||||
notice (noticeProps) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
<template>
|
||||
<transition :name="transitionName">
|
||||
<div :class="classes" :style="styles">
|
||||
<div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</a>
|
||||
<template v-if="type === 'notice'">
|
||||
<div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</a>
|
||||
</template>
|
||||
<template v-if="type === 'message'">
|
||||
<div :class="[baseClass + '-content']" ref="content">
|
||||
<div :class="[baseClass + '-content-text']" v-html="content"></div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
|
@ -19,6 +29,9 @@
|
|||
type: Number,
|
||||
default: 1.5
|
||||
},
|
||||
type: {
|
||||
type: String
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
:key="notice.name"
|
||||
:prefix-cls="prefixCls"
|
||||
:styles="notice.styles"
|
||||
:type="notice.type"
|
||||
:content="notice.content"
|
||||
:duration="notice.duration"
|
||||
:closable="notice.closable"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,17 @@
|
|||
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
||||
<slot>
|
||||
<i-input
|
||||
readonly
|
||||
ref="input"
|
||||
:readonly="!filterable"
|
||||
:disabled="disabled"
|
||||
v-model="displayRender"
|
||||
:value="displayInputRender"
|
||||
@on-change="handleInput"
|
||||
:size="size"
|
||||
:placeholder="placeholder"></i-input>
|
||||
:placeholder="inputPlaceholder"></i-input>
|
||||
<div
|
||||
:class="[prefixCls + '-label']"
|
||||
v-show="filterable && query === ''"
|
||||
@click="handleFocus">{{ displayRender }}</div>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
</slot>
|
||||
|
|
@ -16,12 +22,24 @@
|
|||
<Drop v-show="visible">
|
||||
<div>
|
||||
<Caspanel
|
||||
v-show="!filterable || (filterable && query === '')"
|
||||
ref="caspanel"
|
||||
:prefix-cls="prefixCls"
|
||||
:data="data"
|
||||
:disabled="disabled"
|
||||
:change-on-select="changeOnSelect"
|
||||
:trigger="trigger"></Caspanel>
|
||||
<div :class="[prefixCls + '-dropdown']" v-show="filterable && query !== '' && querySelections.length">
|
||||
<ul :class="[selectPrefixCls + '-dropdown-list']">
|
||||
<li
|
||||
:class="[selectPrefixCls + '-item', {
|
||||
[selectPrefixCls + '-item-disabled']: item.disabled
|
||||
}]"
|
||||
v-for="(item, index) in querySelections"
|
||||
@click="handleSelectItem(index)" v-html="item.display"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul v-show="filterable && query !== '' && !querySelections.length" :class="[prefixCls + '-not-found-tip']"><li>{{ localeNotFoundText }}</li></ul>
|
||||
</div>
|
||||
</Drop>
|
||||
</transition>
|
||||
|
|
@ -35,12 +53,14 @@
|
|||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-cascader';
|
||||
const selectPrefixCls = 'ivu-select';
|
||||
|
||||
export default {
|
||||
name: 'Cascader',
|
||||
mixins: [ Emitter ],
|
||||
mixins: [ Emitter, Locale ],
|
||||
components: { iInput, Drop, Icon, Caspanel },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
|
|
@ -65,8 +85,7 @@
|
|||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
type: String
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
|
|
@ -88,16 +107,30 @@
|
|||
default (label) {
|
||||
return label.join(' / ');
|
||||
}
|
||||
},
|
||||
loadData: {
|
||||
type: Function
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
notFoundText: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
selectPrefixCls: selectPrefixCls,
|
||||
visible: false,
|
||||
selected: [],
|
||||
tmpSelected: [],
|
||||
updatingValue: false, // to fix set value in changeOnSelect type
|
||||
currentValue: this.value
|
||||
currentValue: this.value,
|
||||
query: '',
|
||||
validDataStr: '',
|
||||
isLoadedChildren: false // #950
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -106,8 +139,10 @@
|
|||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-show-clear`]: this.showCloseIcon,
|
||||
[`${prefixCls}-size-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-visible`]: this.visible,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
[`${prefixCls}-disabled`]: this.disabled,
|
||||
[`${prefixCls}-not-found`]: this.filterable && this.query !== '' && !this.querySelections.length
|
||||
}
|
||||
];
|
||||
},
|
||||
|
|
@ -121,6 +156,56 @@
|
|||
}
|
||||
|
||||
return this.renderFormat(label, this.selected);
|
||||
},
|
||||
displayInputRender () {
|
||||
return this.filterable ? '' : this.displayRender;
|
||||
},
|
||||
localePlaceholder () {
|
||||
if (this.placeholder === undefined) {
|
||||
return this.t('i.select.placeholder');
|
||||
} else {
|
||||
return this.placeholder;
|
||||
}
|
||||
},
|
||||
inputPlaceholder () {
|
||||
return this.filterable && this.currentValue.length ? null : this.localePlaceholder;
|
||||
},
|
||||
localeNotFoundText () {
|
||||
if (this.notFoundText === undefined) {
|
||||
return this.t('i.select.noMatch');
|
||||
} else {
|
||||
return this.notFoundText;
|
||||
}
|
||||
},
|
||||
querySelections () {
|
||||
let selections = [];
|
||||
function getSelections (arr, label, value) {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let item = arr[i];
|
||||
item.__label = label ? label + ' / ' + item.label : item.label;
|
||||
item.__value = value ? value + ',' + item.value : item.value;
|
||||
|
||||
if (item.children && item.children.length) {
|
||||
getSelections(item.children, item.__label, item.__value);
|
||||
delete item.__label;
|
||||
delete item.__value;
|
||||
} else {
|
||||
selections.push({
|
||||
label: item.__label,
|
||||
value: item.__value,
|
||||
display: item.__label,
|
||||
item: item,
|
||||
disabled: !!item.disabled
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
getSelections(this.data);
|
||||
selections = selections.filter(item => item.label.indexOf(this.query) > -1).map(item => {
|
||||
item.display = item.display.replace(new RegExp(this.query, 'g'), `<span>${this.query}</span>`);
|
||||
return item;
|
||||
});
|
||||
return selections;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -139,7 +224,7 @@
|
|||
toggleOpen () {
|
||||
if (this.disabled) return false;
|
||||
if (this.visible) {
|
||||
this.handleClose();
|
||||
if (!this.filterable) this.handleClose();
|
||||
} else {
|
||||
this.onFocus();
|
||||
}
|
||||
|
|
@ -170,10 +255,48 @@
|
|||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
handleInput (event) {
|
||||
this.query = event.target.value;
|
||||
},
|
||||
handleSelectItem (index) {
|
||||
const item = this.querySelections[index];
|
||||
|
||||
if (item.item.disabled) return false;
|
||||
this.query = '';
|
||||
this.$refs.input.currentValue = '';
|
||||
const oldVal = JSON.stringify(this.currentValue);
|
||||
this.currentValue = item.value.split(',');
|
||||
this.emitValue(this.currentValue, oldVal);
|
||||
this.handleClose();
|
||||
},
|
||||
handleFocus () {
|
||||
this.$refs.input.focus();
|
||||
},
|
||||
// 排除 loading 后的 data，避免重复触发 updateSelect
|
||||
getValidData (data) {
|
||||
function deleteData (item) {
|
||||
const new_item = Object.assign({}, item);
|
||||
if ('loading' in new_item) {
|
||||
delete new_item.loading;
|
||||
}
|
||||
if ('__value' in new_item) {
|
||||
delete new_item.__value;
|
||||
}
|
||||
if ('__label' in new_item) {
|
||||
delete new_item.__label;
|
||||
}
|
||||
if ('children' in new_item && new_item.children.length) {
|
||||
new_item.children = new_item.children.map(i => deleteData(i));
|
||||
}
|
||||
return new_item;
|
||||
}
|
||||
|
||||
return data.map(item => deleteData(item));
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.updateSelected(true);
|
||||
created () {
|
||||
this.validDataStr = JSON.stringify(this.getValidData(this.data));
|
||||
this.$on('on-result-change', (params) => {
|
||||
// lastValue: is click the final val
|
||||
// fromInit: is this emit from update value
|
||||
|
|
@ -201,12 +324,20 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
mounted () {
|
||||
this.updateSelected(true);
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
if (this.currentValue.length) {
|
||||
this.updateSelected();
|
||||
}
|
||||
} else {
|
||||
if (this.filterable) {
|
||||
this.query = '';
|
||||
this.$refs.input.currentValue = '';
|
||||
}
|
||||
}
|
||||
this.$emit('on-visible-change', val);
|
||||
},
|
||||
|
|
@ -222,8 +353,18 @@
|
|||
}
|
||||
this.updateSelected(true);
|
||||
},
|
||||
data () {
|
||||
this.$nextTick(() => this.updateSelected());
|
||||
data: {
|
||||
deep: true,
|
||||
handler () {
|
||||
const validDataStr = JSON.stringify(this.getValidData(this.data));
|
||||
if (validDataStr !== this.validDataStr) {
|
||||
this.validDataStr = validDataStr;
|
||||
if (!this.isLoadedChildren) {
|
||||
this.$nextTick(() => this.updateSelected());
|
||||
}
|
||||
this.isLoadedChildren = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
|
||||
<li :class="classes">
|
||||
{{ data.label }}
|
||||
<i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-right"></i>
|
||||
<i v-if="showLoading" class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -18,6 +22,12 @@
|
|||
[`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
showArrow () {
|
||||
return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading);
|
||||
},
|
||||
showLoading () {
|
||||
return 'loading' in this.data && this.data.loading;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<script>
|
||||
import Casitem from './casitem.vue';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
import { findComponentUpward } from '../../utils/assist';
|
||||
|
||||
export default {
|
||||
name: 'Caspanel',
|
||||
|
|
@ -47,23 +48,35 @@
|
|||
methods: {
|
||||
handleClickItem (item) {
|
||||
if (this.trigger !== 'click' && item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
this.handleTriggerItem(item, false, true);
|
||||
},
|
||||
handleHoverItem (item) {
|
||||
if (this.trigger !== 'hover' || !item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
this.handleTriggerItem(item, false, true);
|
||||
},
|
||||
handleTriggerItem (item, fromInit = false) {
|
||||
handleTriggerItem (item, fromInit = false, fromUser = false) {
|
||||
if (item.disabled) return;
|
||||
|
||||
if (item.loading !== undefined && !item.children.length) {
|
||||
const cascader = findComponentUpward(this, 'Cascader');
|
||||
if (cascader && cascader.loadData) {
|
||||
cascader.loadData(item, () => {
|
||||
// todo
|
||||
if (fromUser) {
|
||||
cascader.isLoadedChildren = true;
|
||||
}
|
||||
this.handleTriggerItem(item);
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// return value back recursion // 向上递归，设置临时选中值（并非真实选中）
|
||||
const backItem = this.getBaseItem(item);
|
||||
this.tmpItem = backItem;
|
||||
this.emitUpdate([backItem]);
|
||||
|
||||
if (item.children && item.children.length){
|
||||
this.sublist = item.children;
|
||||
// this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
|
||||
this.dispatch('Cascader', 'on-result-change', {
|
||||
lastValue: false,
|
||||
changeOnSelect: this.changeOnSelect,
|
||||
|
|
@ -71,7 +84,6 @@
|
|||
});
|
||||
} else {
|
||||
this.sublist = [];
|
||||
// this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
|
||||
this.dispatch('Cascader', 'on-result-change', {
|
||||
lastValue: true,
|
||||
changeOnSelect: this.changeOnSelect,
|
||||
|
|
|
|||
|
|
@ -324,7 +324,7 @@
|
|||
if (this[`${direction}CurrentView`] === 'year') {
|
||||
this.$refs[`${direction}YearTable`].nextTenYear();
|
||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
||||
this[`${direction}TableYear`]--;
|
||||
this[`${direction}TableYear`]++;
|
||||
} else {
|
||||
const date = this.date;
|
||||
date.setFullYear(date.getFullYear() + 1);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { oneOf, findComponentUpward } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-dropdown';
|
||||
|
||||
|
|
@ -99,8 +99,9 @@
|
|||
this.currentVisible = false;
|
||||
},
|
||||
hasParent () {
|
||||
const $parent = this.$parent.$parent.$parent;
|
||||
if ($parent && $parent.$options.name === 'Dropdown') {
|
||||
// const $parent = this.$parent.$parent.$parent;
|
||||
const $parent = findComponentUpward(this, 'Dropdown');
|
||||
if ($parent) {
|
||||
return $parent;
|
||||
} else {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form :class="classes"><slot></slot></form>
|
||||
<form :class="classes" @submit="formSubmit"><slot></slot></form>
|
||||
</template>
|
||||
<script>
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
|
||||
|
|
@ -75,6 +75,9 @@
|
|||
if (!field) { throw new Error('[iView warn]: must call validateField with valid prop string!'); }
|
||||
|
||||
field.validate('', cb);
|
||||
},
|
||||
formSubmit (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -19,10 +19,12 @@
|
|||
:class="inputClasses"
|
||||
:disabled="disabled"
|
||||
autocomplete="off"
|
||||
:autofocus="autofocus"
|
||||
@focus="focus"
|
||||
@blur="blur"
|
||||
@keydown.stop="keyDown"
|
||||
@change="change"
|
||||
:name="name"
|
||||
:value="value">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,6 +91,13 @@
|
|||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
name: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
||||
</transition>
|
||||
<input
|
||||
ref="input"
|
||||
:type="type"
|
||||
:class="inputClasses"
|
||||
:placeholder="placeholder"
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
:name="name"
|
||||
:value="currentValue"
|
||||
:number="number"
|
||||
:autofocus="autofocus"
|
||||
@keyup.enter="handleEnter"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
|
|
@ -35,6 +37,7 @@
|
|||
:readonly="readonly"
|
||||
:name="name"
|
||||
:value="value"
|
||||
:autofocus="autofocus"
|
||||
@keyup.enter="handleEnter"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
|
|
@ -98,6 +101,10 @@
|
|||
number: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -189,6 +196,13 @@
|
|||
const maxRows = autosize.maxRows;
|
||||
|
||||
this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
|
||||
},
|
||||
focus() {
|
||||
if (this.type === 'textarea') {
|
||||
this.$refs.textarea.focus();
|
||||
} else {
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
import LoadingBar from './loading-bar.vue';
|
||||
import Vue from 'vue';
|
||||
import { camelcaseToHyphen } from '../../utils/assist';
|
||||
|
||||
LoadingBar.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
const Instance = new Vue({
|
||||
data: _props,
|
||||
render (h) {
|
||||
return h(LoadingBar, {
|
||||
props: _props
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<loading-bar${props}></loading-bar>`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const loading_bar = new Vue({
|
||||
el: div,
|
||||
data: _props,
|
||||
components: { LoadingBar }
|
||||
}).$children[0];
|
||||
const component = Instance.$mount();
|
||||
document.body.appendChild(component.$el);
|
||||
const loading_bar = Instance.$children[0];
|
||||
|
||||
return {
|
||||
update (options) {
|
||||
|
|
@ -34,7 +31,9 @@ LoadingBar.newInstance = properties => {
|
|||
},
|
||||
component: loading_bar,
|
||||
destroy () {
|
||||
document.body.removeChild(div);
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0].parentElement);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,12 +28,7 @@ function getMessageInstance () {
|
|||
return messageInstance;
|
||||
}
|
||||
|
||||
function notice (content, duration = defaultDuration, type, onClose) {
|
||||
if (!onClose) {
|
||||
onClose = function () {
|
||||
|
||||
};
|
||||
}
|
||||
function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
|
||||
const iconType = iconTypes[type];
|
||||
|
||||
// if loading
|
||||
|
|
@ -52,7 +47,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
|
|||
<span>${content}</span>
|
||||
</div>
|
||||
`,
|
||||
onClose: onClose
|
||||
onClose: onClose,
|
||||
closable: closable,
|
||||
type: 'message'
|
||||
});
|
||||
|
||||
// 用于手动消除
|
||||
|
|
@ -66,20 +63,50 @@ function notice (content, duration = defaultDuration, type, onClose) {
|
|||
}
|
||||
|
||||
export default {
|
||||
info (content, duration, onClose) {
|
||||
return notice(content, duration, 'info', onClose);
|
||||
info (options) {
|
||||
const type = typeof options;
|
||||
if (type === 'string') {
|
||||
options = {
|
||||
content: options
|
||||
};
|
||||
}
|
||||
return notice(options.content, options.duration, 'info', options.onClose, options.closable);
|
||||
},
|
||||
success (content, duration, onClose) {
|
||||
return notice(content, duration, 'success', onClose);
|
||||
success (options) {
|
||||
const type = typeof options;
|
||||
if (type === 'string') {
|
||||
options = {
|
||||
content: options
|
||||
};
|
||||
}
|
||||
return notice(options.content, options.duration, 'success', options.onClose, options.closable);
|
||||
},
|
||||
warning (content, duration, onClose) {
|
||||
return notice(content, duration, 'warning', onClose);
|
||||
warning (options) {
|
||||
const type = typeof options;
|
||||
if (type === 'string') {
|
||||
options = {
|
||||
content: options
|
||||
};
|
||||
}
|
||||
return notice(options.content, options.duration, 'warning', options.onClose, options.closable);
|
||||
},
|
||||
error (content, duration, onClose) {
|
||||
return notice(content, duration, 'error', onClose);
|
||||
error (options) {
|
||||
const type = typeof options;
|
||||
if (type === 'string') {
|
||||
options = {
|
||||
content: options
|
||||
};
|
||||
}
|
||||
return notice(options.content, options.duration, 'error', options.onClose, options.closable);
|
||||
},
|
||||
loading (content, duration, onClose) {
|
||||
return notice(content, duration, 'loading', onClose);
|
||||
loading (options) {
|
||||
const type = typeof options;
|
||||
if (type === 'string') {
|
||||
options = {
|
||||
content: options
|
||||
};
|
||||
}
|
||||
return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
|
||||
},
|
||||
config (options) {
|
||||
if (options.top) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
import Modal from './modal.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import iButton from '../button/button.vue';
|
||||
import { camelcaseToHyphen } from '../../utils/assist';
|
||||
import Button from '../button/button.vue';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-modal-confirm';
|
||||
|
|
@ -10,36 +8,34 @@ const prefixCls = 'ivu-modal-confirm';
|
|||
Modal.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
});
|
||||
// let props = '';
|
||||
// Object.keys(_props).forEach(prop => {
|
||||
// props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
// });
|
||||
//
|
||||
// const div = document.createElement('div');
|
||||
// div.innerHTML = `
|
||||
// <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
|
||||
// <div class="${prefixCls}">
|
||||
// <div class="${prefixCls}-head">
|
||||
// <div class="${prefixCls}-head-title" v-html="title"></div>
|
||||
// </div>
|
||||
// <div class="${prefixCls}-body">
|
||||
// <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
|
||||
// <div v-html="body"></div>
|
||||
// </div>
|
||||
// <div class="${prefixCls}-footer">
|
||||
// <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
|
||||
// <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </Modal>
|
||||
// `;
|
||||
// document.body.appendChild(div);
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
|
||||
<div class="${prefixCls}">
|
||||
<div class="${prefixCls}-head">
|
||||
<div class="${prefixCls}-head-title" v-html="title"></div>
|
||||
</div>
|
||||
<div class="${prefixCls}-body">
|
||||
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
|
||||
<div v-html="body"></div>
|
||||
</div>
|
||||
<div class="${prefixCls}-footer">
|
||||
<i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const modal = new Vue({
|
||||
el: div,
|
||||
const Instance = new Vue({
|
||||
mixins: [ Locale ],
|
||||
components: { Modal, iButton, Icon },
|
||||
data: Object.assign(_props, {
|
||||
data: Object.assign({}, _props, {
|
||||
visible: false,
|
||||
width: 416,
|
||||
title: '',
|
||||
|
|
@ -53,6 +49,89 @@ Modal.newInstance = properties => {
|
|||
buttonLoading: false,
|
||||
scrollable: false
|
||||
}),
|
||||
render (h) {
|
||||
let footerVNodes = [];
|
||||
if (this.showCancel) {
|
||||
footerVNodes.push(h(Button, {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'large'
|
||||
},
|
||||
on: {
|
||||
click: this.cancel
|
||||
}
|
||||
}, this.localeCancelText));
|
||||
}
|
||||
footerVNodes.push(h(Button, {
|
||||
props: {
|
||||
type: 'primary',
|
||||
size: 'large',
|
||||
loading: this.buttonLoading
|
||||
},
|
||||
on: {
|
||||
click: this.ok
|
||||
}
|
||||
}, this.localeOkText));
|
||||
|
||||
return h(Modal, {
|
||||
props: Object.assign({}, _props, {
|
||||
width: this.width,
|
||||
scrollable: this.scrollable
|
||||
}),
|
||||
domProps: {
|
||||
value: this.visible
|
||||
},
|
||||
on: {
|
||||
input: (status) => {
|
||||
this.visible = status;
|
||||
}
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: prefixCls
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-head`
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-head-title`
|
||||
},
|
||||
domProps: {
|
||||
innerHTML: this.title
|
||||
}
|
||||
})
|
||||
]),
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-body`
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
class: this.iconTypeCls
|
||||
}, [
|
||||
h('i', {
|
||||
class: this.iconNameCls
|
||||
})
|
||||
]),
|
||||
h('div', {
|
||||
domProps: {
|
||||
innerHTML: this.body
|
||||
}
|
||||
})
|
||||
]),
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-footer`
|
||||
}
|
||||
}, footerVNodes)
|
||||
])
|
||||
]);
|
||||
},
|
||||
computed: {
|
||||
iconTypeCls () {
|
||||
return [
|
||||
|
|
@ -111,7 +190,11 @@ Modal.newInstance = properties => {
|
|||
onCancel () {},
|
||||
onRemove () {}
|
||||
}
|
||||
}).$children[0];
|
||||
});
|
||||
|
||||
const component = Instance.$mount();
|
||||
document.body.appendChild(component.$el);
|
||||
const modal = Instance.$children[0];
|
||||
|
||||
return {
|
||||
show (props) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-transfer-dom>
|
||||
<div>
|
||||
<transition :name="transitionNames[1]">
|
||||
<div :class="maskClasses" v-show="visible" @click="mask"></div>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ function notice (type, options) {
|
|||
transitionName: 'move-notice',
|
||||
content: content,
|
||||
onClose: onClose,
|
||||
closable: true
|
||||
closable: true,
|
||||
type: 'notice'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="showSizer || showElevator" :class="optsClasses">
|
||||
<div v-if="showSizer" :class="sizerClasses">
|
||||
<i-select v-model="currentPageSize" :size="size" @on-change="changeSize">
|
||||
<i-select v-model="currentPageSize" :size="size" :placement="placement" @on-change="changeSize">
|
||||
<i-option v-for="item in pageSizeOpts" :key="item" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
|
||||
</i-select>
|
||||
</div>
|
||||
|
|
@ -35,7 +35,8 @@
|
|||
_current: Number,
|
||||
pageSize: Number,
|
||||
allPages: Number,
|
||||
isSmall: Boolean
|
||||
isSmall: Boolean,
|
||||
placement: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
:show-sizer="showSizer"
|
||||
:page-size="currentPageSize"
|
||||
:page-size-opts="pageSizeOpts"
|
||||
:placement="placement"
|
||||
:show-elevator="showElevator"
|
||||
:_current.once="currentPage"
|
||||
:current="currentPage"
|
||||
|
|
@ -92,6 +93,12 @@
|
|||
return [10, 20, 30, 40];
|
||||
}
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'bottom']);
|
||||
},
|
||||
default: 'bottom'
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small']);
|
||||
|
|
@ -236,8 +243,8 @@
|
|||
},
|
||||
onSize (pageSize) {
|
||||
this.currentPageSize = pageSize;
|
||||
this.changePage(1);
|
||||
this.$emit('on-page-size-change', pageSize);
|
||||
this.changePage(1);
|
||||
},
|
||||
onPage (page) {
|
||||
this.changePage(page);
|
||||
|
|
|
|||
|
|
@ -71,6 +71,8 @@
|
|||
if (this.parent) this.group = true;
|
||||
if (!this.group) {
|
||||
this.updateValue();
|
||||
} else {
|
||||
this.parent.updateValue();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -22,12 +22,13 @@
|
|||
@keydown.delete="handleInputDelete"
|
||||
ref="input">
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
|
||||
</div>
|
||||
<transition name="slide-up">
|
||||
<Drop v-show="visible" ref="dropdown">
|
||||
<ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
|
||||
<ul v-show="!notFound" :class="[prefixCls + '-dropdown-list']" ref="options"><slot></slot></ul>
|
||||
<transition :name="transitionName">
|
||||
<Drop v-show="dropVisible" :placement="placement" ref="dropdown">
|
||||
<ul v-show="notFountShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
|
||||
<ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
|
||||
<ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
|
||||
</Drop>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
@ -52,6 +53,10 @@
|
|||
type: [String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: [String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -74,6 +79,20 @@
|
|||
filterMethod: {
|
||||
type: Function
|
||||
},
|
||||
remote: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
remoteMethod: {
|
||||
type: Function
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingText: {
|
||||
type: String
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large', 'default']);
|
||||
|
|
@ -85,6 +104,12 @@
|
|||
},
|
||||
notFoundText: {
|
||||
type: String
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'bottom']);
|
||||
},
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -97,10 +122,13 @@
|
|||
selectedMultiple: [],
|
||||
focusIndex: 0,
|
||||
query: '',
|
||||
lastQuery: '',
|
||||
selectToChangeQuery: false, // when select an option, set this first and set query, because query is watching, it will emit event
|
||||
inputLength: 20,
|
||||
notFound: false,
|
||||
slotChangeDuration: false, // if slot change duration and in multiple, set true and after slot change, set false
|
||||
model: this.value
|
||||
model: this.value,
|
||||
currentLabel: this.label
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -128,6 +156,8 @@
|
|||
if (!this.model.length) {
|
||||
status = true;
|
||||
}
|
||||
} else if( this.model === null){
|
||||
status = true;
|
||||
}
|
||||
|
||||
return status;
|
||||
|
|
@ -161,6 +191,26 @@
|
|||
} else {
|
||||
return this.notFoundText;
|
||||
}
|
||||
},
|
||||
localeLoadingText () {
|
||||
if (this.loadingText === undefined) {
|
||||
return this.t('i.select.loading');
|
||||
} else {
|
||||
return this.loadingText;
|
||||
}
|
||||
},
|
||||
transitionName () {
|
||||
return this.placement === 'bottom' ? 'slide-up' : 'slide-down';
|
||||
},
|
||||
dropVisible () {
|
||||
let status = true;
|
||||
const options = this.$slots.default || [];
|
||||
if (!this.loading && this.remote && this.query === '' && !options.length) status = false;
|
||||
return this.visible && status;
|
||||
},
|
||||
notFountShow () {
|
||||
const options = this.$slots.default || [];
|
||||
return (this.notFound && !this.remote) || (this.remote && !this.loading && !options.length);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -168,7 +218,6 @@
|
|||
if (this.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.visible = !this.visible;
|
||||
},
|
||||
hideMenu () {
|
||||
|
|
@ -219,8 +268,10 @@
|
|||
this.options = options;
|
||||
|
||||
if (init) {
|
||||
this.updateSingleSelected(true, slot);
|
||||
this.updateMultipleSelected(true, slot);
|
||||
if (!this.remote) {
|
||||
this.updateSingleSelected(true, slot);
|
||||
this.updateMultipleSelected(true, slot);
|
||||
}
|
||||
}
|
||||
},
|
||||
updateSingleSelected (init = false, slot = false) {
|
||||
|
|
@ -259,7 +310,7 @@
|
|||
},
|
||||
updateMultipleSelected (init = false, slot = false) {
|
||||
if (this.multiple && Array.isArray(this.model)) {
|
||||
let selected = [];
|
||||
let selected = this.remote ? this.selectedMultiple : [];
|
||||
|
||||
for (let i = 0; i < this.model.length; i++) {
|
||||
const model = this.model[i];
|
||||
|
|
@ -276,7 +327,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
this.selectedMultiple = selected;
|
||||
const selectedArray = [];
|
||||
const selectedObject = {};
|
||||
selected.forEach(item => {
|
||||
if (!selectedObject[item.value]) {
|
||||
selectedArray.push(item);
|
||||
selectedObject[item.value] = 1;
|
||||
}
|
||||
});
|
||||
|
||||
this.selectedMultiple = this.remote ? selectedArray : selected;
|
||||
|
||||
if (slot) {
|
||||
let selectedModel = [];
|
||||
|
|
@ -299,6 +359,12 @@
|
|||
if (this.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.remote) {
|
||||
const tag = this.model[index];
|
||||
this.selectedMultiple = this.selectedMultiple.filter(item => item.value !== tag);
|
||||
}
|
||||
|
||||
this.model.splice(index, 1);
|
||||
|
||||
if (this.filterable && this.visible) {
|
||||
|
|
@ -469,6 +535,12 @@
|
|||
this.query = child.label === undefined ? child.searchLabel : child.label;
|
||||
}
|
||||
});
|
||||
// 如果删除了搜索词，下拉列表也清空了，所以强制调用一次remoteMethod
|
||||
if (this.remote && this.query !== this.lastQuery) {
|
||||
this.$nextTick(() => {
|
||||
this.query = this.lastQuery;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.query = '';
|
||||
}
|
||||
|
|
@ -518,6 +590,23 @@
|
|||
},
|
||||
mounted () {
|
||||
this.modelToQuery();
|
||||
// 处理 remote 初始值
|
||||
if (this.remote) {
|
||||
if (!this.multiple && this.model !== '') {
|
||||
this.selectToChangeQuery = true;
|
||||
if (this.currentLabel === '') this.currentLabel = this.model;
|
||||
this.lastQuery = this.currentLabel;
|
||||
this.query = this.currentLabel;
|
||||
} else if (this.multiple && this.model.length) {
|
||||
if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
|
||||
this.selectedMultiple = this.model.map((item, index) => {
|
||||
return {
|
||||
value: item,
|
||||
label: this.currentLabel[index]
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.broadcastQuery('');
|
||||
});
|
||||
|
|
@ -526,12 +615,30 @@
|
|||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
this.$on('append', () => {
|
||||
this.modelToQuery();
|
||||
if (!this.remote) {
|
||||
this.modelToQuery();
|
||||
this.$nextTick(() => {
|
||||
this.broadcastQuery('');
|
||||
});
|
||||
} else {
|
||||
this.findChild(child => {
|
||||
child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
|
||||
});
|
||||
}
|
||||
this.slotChange();
|
||||
this.updateOptions(true, true);
|
||||
});
|
||||
this.$on('remove', () => {
|
||||
this.modelToQuery();
|
||||
if (!this.remote) {
|
||||
this.modelToQuery();
|
||||
this.$nextTick(() => {
|
||||
this.broadcastQuery('');
|
||||
});
|
||||
} else {
|
||||
this.findChild(child => {
|
||||
child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
|
||||
});
|
||||
}
|
||||
this.slotChange();
|
||||
this.updateOptions(true, true);
|
||||
});
|
||||
|
|
@ -550,6 +657,8 @@
|
|||
}
|
||||
|
||||
if (this.filterable) {
|
||||
// remote&filterable&multiple时，一次点多项，不应该设置true，因为无法置为false，下次的搜索会失效
|
||||
if (this.query !== '') this.selectToChangeQuery = true;
|
||||
this.query = '';
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
|
|
@ -559,7 +668,8 @@
|
|||
if (this.filterable) {
|
||||
this.findChild((child) => {
|
||||
if (child.value === value) {
|
||||
this.query = child.label === undefined ? child.searchLabel : child.label;
|
||||
if (this.query !== '') this.selectToChangeQuery = true;
|
||||
this.lastQuery = this.query = child.label === undefined ? child.searchLabel : child.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -587,6 +697,12 @@
|
|||
} else {
|
||||
this.updateSingleSelected();
|
||||
}
|
||||
// #957
|
||||
if (!this.visible && this.filterable) {
|
||||
this.$nextTick(() => {
|
||||
this.broadcastQuery('');
|
||||
});
|
||||
}
|
||||
},
|
||||
visible (val) {
|
||||
if (val) {
|
||||
|
|
@ -596,6 +712,16 @@
|
|||
} else {
|
||||
this.$refs.input.select();
|
||||
}
|
||||
if (this.remote) {
|
||||
this.findChild(child => {
|
||||
child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
|
||||
});
|
||||
// remote下，设置了默认值，第一次打开时，搜索一次
|
||||
const options = this.$slots.default || [];
|
||||
if (this.query !== '' && !options.length) {
|
||||
this.remoteMethod(this.query);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
} else {
|
||||
|
|
@ -610,20 +736,33 @@
|
|||
}
|
||||
},
|
||||
query (val) {
|
||||
this.$emit('on-query-change', val);
|
||||
|
||||
this.broadcastQuery(val);
|
||||
|
||||
let is_hidden = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.findChild((child) => {
|
||||
if (!child.hidden) {
|
||||
is_hidden = false;
|
||||
}
|
||||
if (this.remote && this.remoteMethod) {
|
||||
if (!this.selectToChangeQuery) {
|
||||
this.$emit('on-query-change', val);
|
||||
this.remoteMethod(val);
|
||||
}
|
||||
this.focusIndex = 0;
|
||||
this.findChild(child => {
|
||||
child.isFocus = false;
|
||||
});
|
||||
this.notFound = is_hidden;
|
||||
});
|
||||
} else {
|
||||
if (!this.selectToChangeQuery) {
|
||||
this.$emit('on-query-change', val);
|
||||
}
|
||||
this.broadcastQuery(val);
|
||||
|
||||
let is_hidden = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.findChild((child) => {
|
||||
if (!child.hidden) {
|
||||
is_hidden = false;
|
||||
}
|
||||
});
|
||||
this.notFound = is_hidden;
|
||||
});
|
||||
}
|
||||
this.selectToChangeQuery = false;
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,22 @@
|
|||
<Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
|
||||
</template>
|
||||
<template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
|
||||
<template v-if="renderType === 'expand'">
|
||||
<div :class="expandCls" @click="toggleExpand">
|
||||
<Icon type="ios-arrow-right"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
import { findComponentUpward } from '../../utils/assist';
|
||||
|
||||
export default {
|
||||
name: 'TableCell',
|
||||
components: { Checkbox },
|
||||
components: { Icon, Checkbox },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
row: Object,
|
||||
|
|
@ -22,6 +29,7 @@
|
|||
index: Number, // _index of data
|
||||
checked: Boolean,
|
||||
disabled: Boolean,
|
||||
expanded: Boolean,
|
||||
fixed: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
|
|
@ -40,50 +48,81 @@
|
|||
`${this.prefixCls}-cell`,
|
||||
{
|
||||
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
|
||||
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false
|
||||
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
|
||||
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
|
||||
}
|
||||
];
|
||||
},
|
||||
expandCls () {
|
||||
return [
|
||||
`${this.prefixCls}-cell-expand`,
|
||||
{
|
||||
[`${this.prefixCls}-cell-expand-expanded`]: this.expanded
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
compile () {
|
||||
if (this.column.render) {
|
||||
const $parent = this.context;
|
||||
const template = this.column.render(this.row, this.column, this.index);
|
||||
const cell = document.createElement('div');
|
||||
cell.innerHTML = template;
|
||||
if (this.column.render && this.renderType === 'render') {
|
||||
// 兼容真 Render，后期废弃旧用法
|
||||
let isRealRender = true;
|
||||
const Table = findComponentUpward(this, 'Table');
|
||||
if (Table.context) isRealRender = false;
|
||||
|
||||
this.$el.innerHTML = '';
|
||||
let methods = {};
|
||||
Object.keys($parent).forEach(key => {
|
||||
const func = $parent[key];
|
||||
if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
|
||||
methods[key] = func;
|
||||
if (isRealRender) {
|
||||
this.$el.innerHTML = '';
|
||||
const component = new Vue({
|
||||
functional: true,
|
||||
render: (h) => {
|
||||
return this.column.render(h, {
|
||||
row: this.row,
|
||||
column: this.column,
|
||||
index: this.index
|
||||
});
|
||||
}
|
||||
});
|
||||
const Cell = component.$mount();
|
||||
this.$refs.cell.appendChild(Cell.$el);
|
||||
} else {
|
||||
const $parent = this.context;
|
||||
const template = this.column.render(this.row, this.column, this.index);
|
||||
const cell = document.createElement('div');
|
||||
cell.innerHTML = template;
|
||||
|
||||
this.$el.innerHTML = '';
|
||||
let methods = {};
|
||||
Object.keys($parent).forEach(key => {
|
||||
const func = $parent[key];
|
||||
if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
|
||||
methods[key] = func;
|
||||
}
|
||||
});
|
||||
const res = Vue.compile(cell.outerHTML);
|
||||
// 获取父组件使用的局部 component
|
||||
const components = {};
|
||||
Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
|
||||
components[item] = $parent.$options.components[item];
|
||||
});
|
||||
|
||||
const component = new Vue({
|
||||
render: res.render,
|
||||
staticRenderFns: res.staticRenderFns,
|
||||
methods: methods,
|
||||
data () {
|
||||
return $parent._data;
|
||||
},
|
||||
components: components
|
||||
});
|
||||
if ($parent.$store != undefined) {
|
||||
component.$store = $parent.$store;
|
||||
}
|
||||
});
|
||||
const res = Vue.compile(cell.outerHTML);
|
||||
// todo 临时解决方案
|
||||
component.row = this.row;
|
||||
component.column = this.column;
|
||||
|
||||
// 获取父组件使用的局部 component
|
||||
const components = {};
|
||||
Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
|
||||
components[item] = $parent.$options.components[item];
|
||||
});
|
||||
|
||||
const component = new Vue({
|
||||
render: res.render,
|
||||
staticRenderFns: res.staticRenderFns,
|
||||
methods: methods,
|
||||
data () {
|
||||
return $parent._data;
|
||||
},
|
||||
components: components
|
||||
});
|
||||
component.row = this.row;
|
||||
component.column = this.column;
|
||||
|
||||
const Cell = component.$mount();
|
||||
this.$refs.cell.appendChild(Cell.$el);
|
||||
const Cell = component.$mount();
|
||||
this.$refs.cell.appendChild(Cell.$el);
|
||||
}
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
|
|
@ -91,6 +130,9 @@
|
|||
},
|
||||
toggleSelect () {
|
||||
this.$parent.$parent.toggleSelect(this.index);
|
||||
},
|
||||
toggleExpand () {
|
||||
this.$parent.$parent.toggleExpand(this.index);
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
|
@ -98,6 +140,8 @@
|
|||
this.renderType = 'index';
|
||||
} else if (this.column.type === 'selection') {
|
||||
this.renderType = 'selection';
|
||||
} else if (this.column.type === 'expand') {
|
||||
this.renderType = 'expand';
|
||||
} else if (this.column.render) {
|
||||
this.renderType = 'render';
|
||||
} else {
|
||||
|
|
|
|||
37
src/components/table/expand.vue
Normal file
37
src/components/table/expand.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div ref="cell"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
export default {
|
||||
name: 'TableExpand',
|
||||
props: {
|
||||
row: Object,
|
||||
render: Function,
|
||||
index: Number,
|
||||
},
|
||||
methods: {
|
||||
compile () {
|
||||
if (this.render) {
|
||||
this.$el.innerHTML = '';
|
||||
const component = new Vue({
|
||||
functional: true,
|
||||
render: (h) => {
|
||||
return this.render(h, {
|
||||
row: this.row,
|
||||
index: this.index
|
||||
});
|
||||
}
|
||||
});
|
||||
const Cell = component.$mount();
|
||||
this.$refs.cell.appendChild(Cell.$el);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.compile();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -4,39 +4,47 @@
|
|||
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
|
||||
</colgroup>
|
||||
<tbody :class="[prefixCls + '-tbody']">
|
||||
<tr
|
||||
v-for="(row, index) in data"
|
||||
:key="row"
|
||||
:class="rowClasses(row._index)"
|
||||
@mouseenter.stop="handleMouseIn(row._index)"
|
||||
@mouseleave.stop="handleMouseOut(row._index)"
|
||||
@click.stop="clickCurrentRow(row._index)"
|
||||
@dblclick.stop="dblclickCurrentRow(row._index)">
|
||||
<td v-for="column in columns" :class="alignCls(column, row)">
|
||||
<Cell
|
||||
:fixed="fixed"
|
||||
:prefix-cls="prefixCls"
|
||||
:row="row"
|
||||
:column="column"
|
||||
:natural-index="index"
|
||||
:index="row._index"
|
||||
:checked="rowChecked(row._index)"
|
||||
:disabled="rowDisabled(row._index)"
|
||||
<template v-for="(row, index) in data">
|
||||
<tr
|
||||
:key="row"
|
||||
:class="rowClasses(row._index)"
|
||||
@mouseenter.stop="handleMouseIn(row._index)"
|
||||
@mouseleave.stop="handleMouseOut(row._index)"
|
||||
@click.stop="clickCurrentRow(row._index)"
|
||||
@dblclick.stop="dblclickCurrentRow(row._index)">
|
||||
<td v-for="column in columns" :class="alignCls(column, row)">
|
||||
<Cell
|
||||
:fixed="fixed"
|
||||
:prefix-cls="prefixCls"
|
||||
:row="row"
|
||||
:column="column"
|
||||
:natural-index="index"
|
||||
:index="row._index"
|
||||
:checked="rowChecked(row._index)"
|
||||
:disabled="rowDisabled(row._index)"
|
||||
:expanded="rowExpanded(row._index)"
|
||||
></Cell>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="rowExpanded(row._index)">
|
||||
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
|
||||
<Expand :row="row" :render="expandRender" :index="row._index"></Expand>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<script>
|
||||
// todo :key="row"
|
||||
import Cell from './cell.vue';
|
||||
import Expand from './expand.vue';
|
||||
import Mixin from './mixin';
|
||||
|
||||
export default {
|
||||
name: 'TableBody',
|
||||
mixins: [ Mixin ],
|
||||
components: { Cell },
|
||||
components: { Cell, Expand },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
styleObject: Object,
|
||||
|
|
@ -49,6 +57,20 @@
|
|||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
expandRender () {
|
||||
let render = function () {
|
||||
return '';
|
||||
};
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
const column = this.columns[i];
|
||||
if (column.type && column.type === 'expand') {
|
||||
if (column.render) render = column.render;
|
||||
}
|
||||
}
|
||||
return render;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClasses (_index) {
|
||||
return [
|
||||
|
|
@ -66,6 +88,9 @@
|
|||
rowDisabled(_index){
|
||||
return this.objData[_index] && this.objData[_index]._isDisabled;
|
||||
},
|
||||
rowExpanded(_index){
|
||||
return this.objData[_index] && this.objData[_index]._isExpanded;
|
||||
},
|
||||
rowClsName (_index) {
|
||||
return this.$parent.rowClassName(this.objData[_index], _index);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
<tr>
|
||||
<th v-for="(column, index) in columns" :class="alignCls(column)">
|
||||
<div :class="cellClasses(column)">
|
||||
<template v-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
||||
<template v-if="column.type === 'expand'"></template>
|
||||
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
||||
<template v-else>
|
||||
<span v-html="renderHeader(column, index)"></span>
|
||||
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
|
||||
|
|
|
|||
|
|
@ -404,6 +404,18 @@
|
|||
}
|
||||
this.$emit('on-selection-change', selection);
|
||||
},
|
||||
toggleExpand (_index) {
|
||||
let data = {};
|
||||
|
||||
for (let i in this.objData) {
|
||||
if (parseInt(i) === _index) {
|
||||
data = this.objData[i];
|
||||
}
|
||||
}
|
||||
const status = !data._isExpanded;
|
||||
this.objData[_index]._isExpanded = status;
|
||||
this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status);
|
||||
},
|
||||
selectAll (status) {
|
||||
// this.rebuildData.forEach((data) => {
|
||||
// if(this.objData[data._index]._isDisabled){
|
||||
|
|
@ -581,9 +593,9 @@
|
|||
this.data.forEach((row, index) => {
|
||||
const newRow = deepCopy(row);// todo 直接替换
|
||||
newRow._isHover = false;
|
||||
if(newRow._disabled){
|
||||
if (newRow._disabled) {
|
||||
newRow._isDisabled = newRow._disabled;
|
||||
}else{
|
||||
} else {
|
||||
newRow._isDisabled = false;
|
||||
}
|
||||
if (newRow._checked) {
|
||||
|
|
@ -591,6 +603,11 @@
|
|||
} else {
|
||||
newRow._isChecked = false;
|
||||
}
|
||||
if (newRow._expanded) {
|
||||
newRow._isExpanded = newRow._expanded;
|
||||
} else {
|
||||
newRow._isExpanded = false;
|
||||
}
|
||||
if (newRow._highlight) {
|
||||
newRow._isHighlight = newRow._highlight;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style">
|
||||
<div :class="classes" :style="listStyle">
|
||||
<div :class="prefixCls + '-header'">
|
||||
<Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
|
||||
<span>{{ title }}</span>
|
||||
<span :class="prefixCls + '-header-title'" @click="toggleSelectAll(!checkedAll)">{{ title }}</span>
|
||||
<span :class="prefixCls + '-header-count'">{{ count }}</span>
|
||||
</div>
|
||||
<div :class="bodyClasses">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
data: Array,
|
||||
renderFormat: Function,
|
||||
checkedKeys: Array,
|
||||
style: Object,
|
||||
listStyle: Object,
|
||||
title: [String, Number],
|
||||
filterable: Boolean,
|
||||
filterPlaceholder: String,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
renderFormat: this.renderFormat,
|
||||
checkedKeys: this.leftCheckedKeys,
|
||||
validKeysCount: this.leftValidKeysCount,
|
||||
style: this.listStyle,
|
||||
listStyle: this.listStyle,
|
||||
title: this.localeTitles[0],
|
||||
filterable: this.filterable,
|
||||
filterPlaceholder: this.localeFilterPlaceholder,
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
renderFormat: this.renderFormat,
|
||||
checkedKeys: this.rightCheckedKeys,
|
||||
validKeysCount: this.rightValidKeysCount,
|
||||
style: this.listStyle,
|
||||
listStyle: this.listStyle,
|
||||
title: this.localeTitles[1],
|
||||
filterable: this.filterable,
|
||||
filterPlaceholder: this.localeFilterPlaceholder,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ export default {
|
|||
i: {
|
||||
select: {
|
||||
placeholder: 'Select',
|
||||
noMatch: 'No matching data'
|
||||
noMatch: 'No matching data',
|
||||
loading: 'Loading'
|
||||
},
|
||||
table: {
|
||||
noDataText: 'No Data',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ export default {
|
|||
i: {
|
||||
select: {
|
||||
placeholder: 'Seleccionar',
|
||||
noMatch: 'Sin coincidencias'
|
||||
noMatch: 'Sin coincidencias',
|
||||
loading: 'Cargando'
|
||||
},
|
||||
table: {
|
||||
noDataText: 'Sin Datos',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ export default {
|
|||
i: {
|
||||
select: {
|
||||
placeholder: '選んでください',
|
||||
noMatch: 'マッチするデータなし'
|
||||
noMatch: 'マッチするデータなし',
|
||||
loading: 'ロード中'
|
||||
},
|
||||
table: {
|
||||
noDataText: 'データなし',
|
||||
|
|
|
|||
96
src/locale/lang/ru-RU.js
Normal file
96
src/locale/lang/ru-RU.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
export default {
|
||||
i: {
|
||||
select: {
|
||||
placeholder: 'Выбрать',
|
||||
noMatch: 'Нет соответствующих данных',
|
||||
loading: 'Загрузка'
|
||||
},
|
||||
table: {
|
||||
noDataText: 'Нет данных',
|
||||
noFilteredDataText: 'Нет данных по фильтру',
|
||||
confirmFilter: 'Подтвердить',
|
||||
resetFilter: 'Сброс',
|
||||
clearFilter: 'Все'
|
||||
},
|
||||
datepicker: {
|
||||
selectDate: 'Выбрать дату',
|
||||
selectTime: 'Выбрать время',
|
||||
startTime: 'Начальное время',
|
||||
endTime: 'Конечное время',
|
||||
clear: 'Очистить',
|
||||
ok: 'OK',
|
||||
month: '',
|
||||
month1: 'Январь',
|
||||
month2: 'Февраль',
|
||||
month3: 'Март',
|
||||
month4: 'Апрель',
|
||||
month5: 'Май',
|
||||
month6: 'Июнь',
|
||||
month7: 'Июль',
|
||||
month8: 'Август',
|
||||
month9: 'Сентябрь',
|
||||
month10: 'Октябрь',
|
||||
month11: 'Ноябрь',
|
||||
month12: 'Декабрь',
|
||||
year: '',
|
||||
weeks: {
|
||||
sun: 'Вс',
|
||||
mon: 'Пн',
|
||||
tue: 'Вт',
|
||||
wed: 'Ср',
|
||||
thu: 'Чт',
|
||||
fri: 'Пт',
|
||||
sat: 'Сб'
|
||||
},
|
||||
months: {
|
||||
m1: 'Янв',
|
||||
m2: 'Фев',
|
||||
m3: 'Мар',
|
||||
m4: 'Апр',
|
||||
m5: 'Май',
|
||||
m6: 'Июн',
|
||||
m7: 'Июл',
|
||||
m8: 'Авг',
|
||||
m9: 'Сен',
|
||||
m10: 'Окт',
|
||||
m11: 'Ноя',
|
||||
m12: 'Дек'
|
||||
}
|
||||
},
|
||||
transfer: {
|
||||
titles: {
|
||||
source: 'Источник',
|
||||
target: 'Цель'
|
||||
},
|
||||
filterPlaceholder: 'Искать здесь',
|
||||
notFoundText: 'Не Найдено'
|
||||
},
|
||||
modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Отменить'
|
||||
},
|
||||
poptip: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Отменить'
|
||||
},
|
||||
page: {
|
||||
prev: 'Пред. страница',
|
||||
next: 'След. страница',
|
||||
total: 'Всего',
|
||||
item: 'пункт',
|
||||
items: 'пункты',
|
||||
prev5: 'Пред. 5 страниц',
|
||||
next5: 'След. 5 страниц',
|
||||
page: '/page',
|
||||
goto: 'Идти к',
|
||||
p: ''
|
||||
},
|
||||
rate: {
|
||||
star: 'Звезда',
|
||||
stars: 'Звезды'
|
||||
},
|
||||
tree: {
|
||||
emptyText: 'Нет данных'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -2,7 +2,8 @@ export default {
|
|||
i: {
|
||||
select: {
|
||||
placeholder: 'Seç',
|
||||
noMatch: 'Eşleşen veri yok'
|
||||
noMatch: 'Eşleşen veri yok',
|
||||
loading: 'yükleme'
|
||||
},
|
||||
table: {
|
||||
noDataText: 'Veri Yok',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ export default {
|
|||
i: {
|
||||
select: {
|
||||
placeholder: '请选择',
|
||||
noMatch: '无匹配数据'
|
||||
noMatch: '无匹配数据',
|
||||
loading: '加载中'
|
||||
},
|
||||
table: {
|
||||
noDataText: '暂无数据',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ export default {
|
|||
i: {
|
||||
select: {
|
||||
placeholder: '請選擇',
|
||||
noMatch: '無匹配數據'
|
||||
noMatch: '無匹配數據',
|
||||
loading: '加載中'
|
||||
},
|
||||
table: {
|
||||
noDataText: '暫無數據',
|
||||
|
|
|
|||
|
|
@ -19,6 +19,29 @@
|
|||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
&-label{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 32px;
|
||||
padding: 0 7px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
font-size: @font-size-small;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
&-size-large &-label{
|
||||
line-height: 36px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
&-size-small &-label{
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -48,6 +71,30 @@
|
|||
}
|
||||
|
||||
.select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
|
||||
.ivu-select-item span{
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-dropdown{
|
||||
padding: 5px 0;
|
||||
.@{select-dropdown-prefix-cls}-list{
|
||||
max-height: 190px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-not-found-tip{
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
color: @btn-disable-color;
|
||||
li:not([class^=ivu-]){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-not-found .@{select-dropdown-prefix-cls} {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
&-menu{
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,18 @@
|
|||
vertical-align: middle;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
&-close {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 9px;
|
||||
color: #999;
|
||||
outline: none;
|
||||
|
||||
i.@{icon-prefix-cls}{
|
||||
.close-base(-3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-notice-content {
|
||||
|
|
@ -25,6 +37,15 @@
|
|||
box-shadow: @shadow-base;
|
||||
background: #fff;
|
||||
display: block;
|
||||
&-text{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&-notice-closable{
|
||||
.@{message-prefix-cls}-notice-content-text{
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&-success .@{icon-prefix-cls} {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
&-with-desc &-title{
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-with-desc&-with-icon &-title{
|
||||
|
|
@ -58,7 +59,8 @@
|
|||
|
||||
&-desc {
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
//color: @legend-color;
|
||||
color: @text-color;
|
||||
text-align: justify;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,6 +173,13 @@
|
|||
&-not-found{
|
||||
text-align: center;
|
||||
color: @btn-disable-color;
|
||||
li:not([class^=ivu-]){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-loading{
|
||||
text-align: center;
|
||||
color: @btn-disable-color;
|
||||
}
|
||||
|
||||
&-multiple .@{css-prefix}tag{
|
||||
|
|
|
|||
|
|
@ -145,6 +145,24 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-with-expand{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-expand{
|
||||
cursor: pointer;
|
||||
transition: transform @transition-time @ease-in-out;
|
||||
i{
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
&-expanded{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-hidden{
|
||||
visibility: hidden;
|
||||
|
|
@ -156,6 +174,11 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td&-expanded-cell{
|
||||
padding: 20px 50px;
|
||||
background: @table-thead-bg;
|
||||
}
|
||||
|
||||
&-stripe &-body,
|
||||
&-stripe &-fixed-body
|
||||
{
|
||||
|
|
@ -184,6 +207,13 @@
|
|||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.@{table-prefix-cls}-cell-with-expand{
|
||||
height: 59px;
|
||||
line-height: 59px;
|
||||
i{
|
||||
font-size: @font-size-base+2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-small{
|
||||
|
|
@ -197,6 +227,10 @@
|
|||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.@{table-prefix-cls}-cell-with-expand{
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
&-row-highlight,
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
&-title{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > span{
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,25 @@
|
|||
@css-prefix-iconfont : ivu-icon;
|
||||
|
||||
// Color
|
||||
@primary-color : #3399ff;
|
||||
@primary-color : #2d8cf0;
|
||||
@info-color : #2db7f5;
|
||||
@success-color : #00cc66;
|
||||
@success-color : #19be6b;
|
||||
@warning-color : #ff9900;
|
||||
@error-color : #ff3300;
|
||||
@link-color : #3399ff;
|
||||
@error-color : #ed3f14;
|
||||
@link-color : #2D8cF0;
|
||||
@link-hover-color : tint(@link-color, 20%);
|
||||
@link-active-color : shade(@link-color, 5%);
|
||||
@selected-color : fade(@primary-color, 90%);
|
||||
@tooltip-color : #fff;
|
||||
@subsidiary-color : #9ea7b4;
|
||||
@subsidiary-color : #80848f;
|
||||
@rate-star-color : #f5a623;
|
||||
|
||||
// Base
|
||||
@body-background : #fff;
|
||||
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
@code-family : Consolas,Menlo,Courier,monospace;
|
||||
@title-color : #464c5b;
|
||||
@text-color : #657180;
|
||||
@title-color : #1c2438;
|
||||
@text-color : #495060;
|
||||
@font-size-base : 14px;
|
||||
@font-size-small : 12px;
|
||||
@line-height-base : 1.5;
|
||||
|
|
@ -31,16 +31,16 @@
|
|||
@cursor-disabled : not-allowed;
|
||||
|
||||
// Border color
|
||||
@border-color-base : #d7dde4; // outside
|
||||
@border-color-split : #e3e8ee; // inside
|
||||
@border-color-base : #dddee1; // outside
|
||||
@border-color-split : #e9eaec; // inside
|
||||
|
||||
// Background color
|
||||
@background-color-base : #f7f7f7; // base
|
||||
@background-color-select-hover: @input-disabled-bg;
|
||||
@tooltip-bg : rgba(70, 76, 91, .9);
|
||||
@head-bg : #f9fafc;
|
||||
@table-thead-bg : #f5f7f9;
|
||||
@table-td-stripe-bg : #f5f7f9;
|
||||
@table-thead-bg : #f8f8f9;
|
||||
@table-td-stripe-bg : #f8f8f9;
|
||||
@table-td-hover-bg : #ebf7ff;
|
||||
@table-td-highlight-bg : #ebf7ff;
|
||||
@menu-dark-active-bg : #313540;
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
@btn-border-radius-small: 3px;
|
||||
@btn-group-border : shade(@primary-color, 5%);
|
||||
|
||||
@btn-disable-color : #c3cbd6;
|
||||
@btn-disable-color : #bbbec4;
|
||||
@btn-disable-bg : @background-color-base;
|
||||
@btn-disable-border : @border-color-base;
|
||||
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@
|
|||
line-height: @line-height-base;
|
||||
user-select: none;
|
||||
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
|
||||
transform: translate3d(0, 0, 0);
|
||||
//transform: translate3d(0, 0, 0);
|
||||
//transition: all @transition-time linear;
|
||||
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue