Merge branch '2.0' into table_render
This commit is contained in:
anykno
GitHub
commit
8e9002b970
36 changed files with 874 additions and 512 deletions
|
|
@ -4,7 +4,14 @@
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</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://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.
|
### A high quality UI Toolkit built on Vue.js.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,8 @@ module.exports = merge(webpackBaseConfig, {
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
iview: '../../src/index',
|
iview: '../../src/index',
|
||||||
vue: 'vue/dist/vue.js'
|
// vue: 'vue/dist/vue.js'
|
||||||
|
vue: 'vue/dist/vue.runtime.js'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
|
|
||||||
|
|
@ -14,37 +14,24 @@
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Badge count="3">
|
<Badge dot :count="count">
|
||||||
<a href="#" class="demo-badge"></a>
|
<a href="#" class="demo-badge"></a>
|
||||||
</Badge>
|
</Badge>
|
||||||
<Badge dot>
|
<Button @click="setCount">set count</Button>
|
||||||
<a href="#" class="demo-badge"></a>
|
|
||||||
</Badge>
|
|
||||||
<Badge dot>
|
|
||||||
<Icon type="ios-bell-outline" size="26"></Icon>
|
|
||||||
</Badge>
|
|
||||||
<Badge dot>
|
|
||||||
<a href="#">可以是一个链接</a>
|
|
||||||
</Badge>
|
|
||||||
<Badge count="100">
|
|
||||||
<a href="#" class="demo-badge"></a>
|
|
||||||
</Badge>
|
|
||||||
<Badge count="1000" overflow-count="999">
|
|
||||||
<a href="#" class="demo-badge"></a>
|
|
||||||
</Badge>
|
|
||||||
<br>
|
|
||||||
<Badge count="10"></Badge>
|
|
||||||
<br><br>
|
|
||||||
<Badge count="20" class-name="demo-badge-alone"></Badge>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {},
|
props: {},
|
||||||
data () {
|
data () {
|
||||||
return {};
|
return {
|
||||||
|
count: 50
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
methods: {
|
||||||
methods: {}
|
setCount () {
|
||||||
|
this.count = 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -2,12 +2,7 @@
|
||||||
<div style="width: 300px;">
|
<div style="width: 300px;">
|
||||||
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||||
<Form-item label="爱好" prop="interest">
|
<Form-item label="爱好" prop="interest">
|
||||||
<Checkbox-group v-model="formValidate.interest">
|
<Input v-model="formValidate.interest" number></Input>
|
||||||
<Checkbox label="吃饭"></Checkbox>
|
|
||||||
<Checkbox label="睡觉"></Checkbox>
|
|
||||||
<Checkbox label="跑步"></Checkbox>
|
|
||||||
<Checkbox label="看电影"></Checkbox>
|
|
||||||
</Checkbox-group>
|
|
||||||
</Form-item>
|
</Form-item>
|
||||||
<Form-item>
|
<Form-item>
|
||||||
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
||||||
|
|
@ -21,12 +16,15 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
formValidate: {
|
formValidate: {
|
||||||
interest: ['吃饭', '跑步']
|
interest: ''
|
||||||
},
|
},
|
||||||
ruleValidate: {
|
ruleValidate: {
|
||||||
interest: [
|
interest: [
|
||||||
{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
|
{
|
||||||
{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
|
required: true,
|
||||||
|
type: 'number',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Menu mode="horizontal" :theme="theme1" @on-select="s">
|
<Row>
|
||||||
<Row type="flex" justify="center" align="middle">
|
<i-col span="8">
|
||||||
<i-col span="12">
|
<Menu :theme="theme2">
|
||||||
<Menu-item name="1">
|
<Submenu name="1">
|
||||||
|
<template slot="title">
|
||||||
<Icon type="ios-paper"></Icon>
|
<Icon type="ios-paper"></Icon>
|
||||||
内容管理
|
内容管理
|
||||||
</Menu-item>
|
</template>
|
||||||
<Menu-item name="2">
|
<Menu-item name="1-1">文章管理</Menu-item>
|
||||||
|
<Menu-item name="1-2">评论管理</Menu-item>
|
||||||
|
<Menu-item name="1-3">举报管理</Menu-item>
|
||||||
|
</Submenu>
|
||||||
|
<Submenu name="2">
|
||||||
|
<template slot="title">
|
||||||
<Icon type="ios-people"></Icon>
|
<Icon type="ios-people"></Icon>
|
||||||
用户管理
|
用户管理
|
||||||
</Menu-item>
|
</template>
|
||||||
|
<Menu-item name="2-1">新增用户</Menu-item>
|
||||||
|
<Menu-item name="2-2">活跃用户</Menu-item>
|
||||||
|
</Submenu>
|
||||||
<Submenu name="3">
|
<Submenu name="3">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<Icon type="stats-bars"></Icon>
|
<Icon type="stats-bars"></Icon>
|
||||||
|
|
@ -26,19 +35,14 @@
|
||||||
<Menu-item name="3-5">流失用户</Menu-item>
|
<Menu-item name="3-5">流失用户</Menu-item>
|
||||||
</Menu-group>
|
</Menu-group>
|
||||||
</Submenu>
|
</Submenu>
|
||||||
<Menu-item name="4">
|
</Menu>
|
||||||
<Icon type="settings"></Icon>
|
|
||||||
综合设置
|
|
||||||
</Menu-item>
|
|
||||||
</i-col>
|
</i-col>
|
||||||
</Row>
|
</Row>
|
||||||
</Menu>
|
|
||||||
<br>
|
<br>
|
||||||
<p>切换主题</p>
|
<p>切换主题</p>
|
||||||
<Radio-group v-model="theme1">
|
<Radio-group v-model="theme2">
|
||||||
<Radio label="light"></Radio>
|
<Radio label="light"></Radio>
|
||||||
<Radio label="dark"></Radio>
|
<Radio label="dark"></Radio>
|
||||||
<Radio label="primary"></Radio>
|
|
||||||
</Radio-group>
|
</Radio-group>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -46,149 +50,8 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
theme1: 'light'
|
theme2: 'light'
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
s (s) {
|
|
||||||
console.log(s)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--<Row>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<Menu :theme="theme2" @on-select="s">-->
|
|
||||||
<!--<Submenu name="1">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-paper"></Icon>-->
|
|
||||||
<!--内容管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="2">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-people"></Icon>-->
|
|
||||||
<!--用户管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
|
|
||||||
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="3">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="stats-bars"></Icon>-->
|
|
||||||
<!--统计分析-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-group title="使用">-->
|
|
||||||
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--<Menu-group title="留存">-->
|
|
||||||
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--</Menu>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">-->
|
|
||||||
<!--<Submenu name="1">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-paper"></Icon>-->
|
|
||||||
<!--内容管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="2">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-people"></Icon>-->
|
|
||||||
<!--用户管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
|
|
||||||
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="3">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="stats-bars"></Icon>-->
|
|
||||||
<!--统计分析-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-group title="使用">-->
|
|
||||||
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--<Menu-group title="留存">-->
|
|
||||||
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--</Menu>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">-->
|
|
||||||
<!--<Submenu name="1">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-paper"></Icon>-->
|
|
||||||
<!--内容管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="2">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-people"></Icon>-->
|
|
||||||
<!--用户管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
|
|
||||||
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="3">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="stats-bars"></Icon>-->
|
|
||||||
<!--统计分析-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-group title="使用">-->
|
|
||||||
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--<Menu-group title="留存">-->
|
|
||||||
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--</Menu>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--</Row>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<p>切换主题</p>-->
|
|
||||||
<!--<Radio-group v-model="theme2">-->
|
|
||||||
<!--<Radio label="light"></Radio>-->
|
|
||||||
<!--<Radio label="dark"></Radio>-->
|
|
||||||
<!--</Radio-group>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data () {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--theme2: 'light'-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--s (s) {-->
|
|
||||||
<!--console.log(s);-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<i-button @click.native="info">显示普通提示</i-button>
|
||||||
<i-button @click.native="success">显示成功提示</i-button>
|
<i-button @click.native="success">显示成功提示</i-button>
|
||||||
<i-button @click.native="warning">显示警告提示</i-button>
|
<i-button @click.native="warning">显示警告提示</i-button>
|
||||||
<i-button @click.native="error">显示错误提示</i-button>
|
<i-button @click.native="error">显示错误提示</i-button>
|
||||||
|
|
@ -9,6 +10,17 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
|
info () {
|
||||||
|
// this.$Message.info('这是一条普通提示');
|
||||||
|
this.$Message.success({
|
||||||
|
content: '这是一条普通提示2',
|
||||||
|
duration: 500,
|
||||||
|
onClose () {
|
||||||
|
console.log(123)
|
||||||
|
},
|
||||||
|
closable: true
|
||||||
|
})
|
||||||
|
},
|
||||||
success () {
|
success () {
|
||||||
this.$Message.success('这是一条成功的提示');
|
this.$Message.success('这是一条成功的提示');
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
{{ val }}
|
||||||
|
<Button @click="confirm">标准</Button>
|
||||||
|
<Button @click="custom">自定义按钮文字</Button>
|
||||||
|
<Button @click="async">异步关闭</Button>
|
||||||
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
v-model="modal1"
|
v-model="modal1"
|
||||||
:title="title"
|
title="普通的Modal对话框标题"
|
||||||
@on-ok="ok"
|
@on-ok="ok"
|
||||||
:mask-closable="false"
|
|
||||||
@on-cancel="cancel">
|
@on-cancel="cancel">
|
||||||
<p><Button type="ghost" @click="title = '这是标题'">设置标题</Button> {{title}}</p>
|
<p>对话框内容</p>
|
||||||
<p>对话框内容</p>
|
<p>对话框内容</p>
|
||||||
<p>对话框内容</p>
|
<p>对话框内容</p>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
@ -18,8 +20,8 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
modal1: true,
|
modal1: false,
|
||||||
title:''
|
val: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -28,6 +30,52 @@
|
||||||
},
|
},
|
||||||
cancel () {
|
cancel () {
|
||||||
this.$Message.info('点击了取消');
|
this.$Message.info('点击了取消');
|
||||||
|
},
|
||||||
|
confirm () {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: '确认对话框标题',
|
||||||
|
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||||
|
render: (h) => {
|
||||||
|
return h('Input', {
|
||||||
|
props: {
|
||||||
|
value: this.val,
|
||||||
|
autofocus: true
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
input: (val) => {
|
||||||
|
this.val = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, '一个按钮')
|
||||||
|
},
|
||||||
|
onOk: () => {
|
||||||
|
this.$Message.info('点击了确定');
|
||||||
|
},
|
||||||
|
onCancel: () => {
|
||||||
|
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,48 @@
|
||||||
<template>
|
<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>
|
||||||
|
<Button @click="destroy()">销毁</Button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
time () {
|
info (nodesc) {
|
||||||
this.$Notice.open({
|
this.$Notice.info({
|
||||||
title: '这是通知标题',
|
title: '这是通知标题',
|
||||||
desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。'
|
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||||
});
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mounted () {
|
success (nodesc) {
|
||||||
this.$Notice.config({
|
this.$Notice.success({
|
||||||
top: 150,
|
title: '这是通知标题',
|
||||||
duration: 30
|
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
warning (nodesc) {
|
||||||
|
this.$Notice.warning({
|
||||||
|
title: '这是通知标题',
|
||||||
|
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error (nodesc) {
|
||||||
|
this.$Notice.error({
|
||||||
|
title: '这是通知标题',
|
||||||
|
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
destroy () {
|
||||||
|
this.$Notice.destroy();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,166 +1,166 @@
|
||||||
<!--<template>-->
|
|
||||||
<!--<Row>-->
|
|
||||||
<!--<i-col span="4">{{model}}</i-col>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<i-select v-model="model" :label="['L Alabama', 'L Hawaii']" 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 {-->
|
|
||||||
<!--// 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>
|
<template>
|
||||||
<div>
|
<Row>
|
||||||
<Row style="width: 400px;">
|
<i-col span="4">{{model}}</i-col>
|
||||||
<i-col span="12" style="padding-right:10px">
|
<i-col span="8">
|
||||||
<Select v-model="model11" filterable>
|
<i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
|
||||||
<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
|
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
|
||||||
</Select>
|
</i-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>
|
</i-col>
|
||||||
</Row>
|
</Row>
|
||||||
<Button @click="handleSet">set</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cityList: [
|
// model: 'Alabama',
|
||||||
{
|
model: ['Alabama', 'Hawaii'],
|
||||||
value: 'beijing',
|
options: [
|
||||||
label: '北京市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shanghai',
|
|
||||||
label: '上海市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shenzhen',
|
|
||||||
label: '深圳市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'hangzhou',
|
|
||||||
label: '杭州市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'nanjing',
|
|
||||||
label: '南京市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'chongqing',
|
|
||||||
label: '重庆市'
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
model11: '',
|
list: [],
|
||||||
model12: []
|
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: {
|
methods: {
|
||||||
handleSet () {
|
handleAdd () {
|
||||||
this.model11 = 'shanghai';
|
this.options = [
|
||||||
// this.model12 = ['beijing'];
|
{
|
||||||
|
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>
|
</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>-->
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,8 @@
|
||||||
{
|
{
|
||||||
name: '张小刚',
|
name: '张小刚',
|
||||||
age: 25,
|
age: 25,
|
||||||
address: '北京市海淀区西二旗'
|
address: '北京市海淀区西二旗',
|
||||||
|
_disableExpand: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '李小红',
|
name: '李小红',
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<Tabs value="name1" :animated="false">
|
<Tabs value="name1" :animated="true">
|
||||||
<Tab-pane label="标签一" name="name1">
|
<Tab-pane :label="label1" name="name1">
|
||||||
<Table :columns="columns1" :data="data1"></Table>
|
<Table :columns="columns1" :data="data1"></Table>
|
||||||
</Tab-pane>
|
</Tab-pane>
|
||||||
<Tab-pane label="标签二" name="name2">
|
<Tab-pane label="标签二" name="name2">
|
||||||
|
|
@ -15,6 +15,12 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
label1: (h) => {
|
||||||
|
return h('div', [
|
||||||
|
h('span', '标签一'),
|
||||||
|
h('Button', 'button')
|
||||||
|
]);
|
||||||
|
},
|
||||||
columns1: [
|
columns1: [
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '姓名',
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iview",
|
"name": "iview",
|
||||||
"version": "2.0.0-rc.14",
|
"version": "2.0.0-rc.15",
|
||||||
"title": "iView",
|
"title": "iView",
|
||||||
"description": "A high quality UI components Library with Vue.js",
|
"description": "A high quality UI components Library with Vue.js",
|
||||||
"homepage": "http://www.iviewui.com",
|
"homepage": "http://www.iviewui.com",
|
||||||
|
|
|
||||||
|
|
@ -61,17 +61,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return status;
|
return status;
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data () {
|
alone () {
|
||||||
return {
|
return this.$slots.default === undefined;
|
||||||
alone: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const child_length = this.$refs.badge.children.length;
|
|
||||||
if (child_length === 1) {
|
|
||||||
this.alone = true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
79
src/components/base/collapse-transition.js
Normal file
79
src/components/base/collapse-transition.js
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
// Thanks to https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js
|
||||||
|
|
||||||
|
import { addClass, removeClass } from '../../utils/assist';
|
||||||
|
|
||||||
|
const Transition = {
|
||||||
|
beforeEnter(el) {
|
||||||
|
addClass(el, 'collapse-transition');
|
||||||
|
if (!el.dataset) el.dataset = {};
|
||||||
|
|
||||||
|
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||||
|
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||||
|
|
||||||
|
el.style.height = '0';
|
||||||
|
el.style.paddingTop = 0;
|
||||||
|
el.style.paddingBottom = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
enter(el) {
|
||||||
|
el.dataset.oldOverflow = el.style.overflow;
|
||||||
|
if (el.scrollHeight !== 0) {
|
||||||
|
el.style.height = el.scrollHeight + 'px';
|
||||||
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||||
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||||
|
} else {
|
||||||
|
el.style.height = '';
|
||||||
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||||
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
el.style.overflow = 'hidden';
|
||||||
|
},
|
||||||
|
|
||||||
|
afterEnter(el) {
|
||||||
|
// for safari: remove class then reset height is necessary
|
||||||
|
removeClass(el, 'collapse-transition');
|
||||||
|
el.style.height = '';
|
||||||
|
el.style.overflow = el.dataset.oldOverflow;
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeLeave(el) {
|
||||||
|
if (!el.dataset) el.dataset = {};
|
||||||
|
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||||
|
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||||
|
el.dataset.oldOverflow = el.style.overflow;
|
||||||
|
|
||||||
|
el.style.height = el.scrollHeight + 'px';
|
||||||
|
el.style.overflow = 'hidden';
|
||||||
|
},
|
||||||
|
|
||||||
|
leave(el) {
|
||||||
|
if (el.scrollHeight !== 0) {
|
||||||
|
// for safari: add class after set height, or it will jump to zero height suddenly, weired
|
||||||
|
addClass(el, 'collapse-transition');
|
||||||
|
el.style.height = 0;
|
||||||
|
el.style.paddingTop = 0;
|
||||||
|
el.style.paddingBottom = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
afterLeave(el) {
|
||||||
|
removeClass(el, 'collapse-transition');
|
||||||
|
el.style.height = '';
|
||||||
|
el.style.overflow = el.dataset.oldOverflow;
|
||||||
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||||
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CollapseTransition',
|
||||||
|
functional: true,
|
||||||
|
render(h, { children }) {
|
||||||
|
const data = {
|
||||||
|
on: Transition
|
||||||
|
};
|
||||||
|
|
||||||
|
return h('transition', data, children);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -1,24 +1,21 @@
|
||||||
import Notification from './notification.vue';
|
import Notification from './notification.vue';
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { camelcaseToHyphen } from '../../../utils/assist';
|
|
||||||
|
|
||||||
Notification.newInstance = properties => {
|
Notification.newInstance = properties => {
|
||||||
const _props = properties || {};
|
const _props = properties || {};
|
||||||
|
|
||||||
let props = '';
|
const Instance = new Vue({
|
||||||
Object.keys(_props).forEach(prop => {
|
data: _props,
|
||||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
render (h) {
|
||||||
|
return h(Notification, {
|
||||||
|
props: _props
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const div = document.createElement('div');
|
const component = Instance.$mount();
|
||||||
div.innerHTML = `<notification${props}></notification>`;
|
document.body.appendChild(component.$el);
|
||||||
document.body.appendChild(div);
|
const notification = Instance.$children[0];
|
||||||
|
|
||||||
const notification = new Vue({
|
|
||||||
el: div,
|
|
||||||
data: _props,
|
|
||||||
components: { Notification }
|
|
||||||
}).$children[0];
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
notice (noticeProps) {
|
notice (noticeProps) {
|
||||||
|
|
@ -28,10 +25,10 @@ Notification.newInstance = properties => {
|
||||||
notification.close(name);
|
notification.close(name);
|
||||||
},
|
},
|
||||||
component: notification,
|
component: notification,
|
||||||
destroy () {
|
destroy (element) {
|
||||||
notification.closeAll();
|
notification.closeAll();
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
document.body.removeChild(document.getElementsByClassName('ivu-message')[0].parentElement);
|
document.body.removeChild(document.getElementsByClassName(element)[0]);
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<transition :name="transitionName">
|
<transition :name="transitionName">
|
||||||
<div :class="classes" :style="styles">
|
<div :class="classes" :style="styles">
|
||||||
|
<template v-if="type === 'notice'">
|
||||||
<div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
|
<div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
|
||||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||||
</a>
|
</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>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -19,6 +29,9 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 1.5
|
default: 1.5
|
||||||
},
|
},
|
||||||
|
type: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
content: {
|
content: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
:key="notice.name"
|
:key="notice.name"
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
:styles="notice.styles"
|
:styles="notice.styles"
|
||||||
|
:type="notice.type"
|
||||||
:content="notice.content"
|
:content="notice.content"
|
||||||
:duration="notice.duration"
|
:duration="notice.duration"
|
||||||
:closable="notice.closable"
|
:closable="notice.closable"
|
||||||
|
|
|
||||||
30
src/components/base/render.vue
Normal file
30
src/components/base/render.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div ref="cell"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue';
|
||||||
|
export default {
|
||||||
|
name: 'RenderCell',
|
||||||
|
props: {
|
||||||
|
render: Function
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
compile () {
|
||||||
|
if (this.render) {
|
||||||
|
this.$el.innerHTML = '';
|
||||||
|
const component = new Vue({
|
||||||
|
functional: true,
|
||||||
|
render: (h) => {
|
||||||
|
return this.render(h);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const Cell = component.$mount();
|
||||||
|
this.$refs.cell.appendChild(Cell.$el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.compile();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -4,18 +4,21 @@
|
||||||
<Icon type="arrow-right-b"></Icon>
|
<Icon type="arrow-right-b"></Icon>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
<collapse-transition>
|
||||||
<div :class="contentClasses" v-show="isActive">
|
<div :class="contentClasses" v-show="isActive">
|
||||||
<div :class="boxClasses"><slot name="content"></slot></div>
|
<div :class="boxClasses"><slot name="content"></slot></div>
|
||||||
</div>
|
</div>
|
||||||
|
</collapse-transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Icon from '../icon/icon.vue';
|
import Icon from '../icon/icon.vue';
|
||||||
|
import CollapseTransition from '../base/collapse-transition';
|
||||||
const prefixCls = 'ivu-collapse';
|
const prefixCls = 'ivu-collapse';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Panel',
|
name: 'Panel',
|
||||||
components: { Icon },
|
components: { Icon, CollapseTransition },
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: {
|
||||||
type: String
|
type: String
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,21 @@
|
||||||
import LoadingBar from './loading-bar.vue';
|
import LoadingBar from './loading-bar.vue';
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { camelcaseToHyphen } from '../../utils/assist';
|
|
||||||
|
|
||||||
LoadingBar.newInstance = properties => {
|
LoadingBar.newInstance = properties => {
|
||||||
const _props = properties || {};
|
const _props = properties || {};
|
||||||
|
|
||||||
let props = '';
|
const Instance = new Vue({
|
||||||
Object.keys(_props).forEach(prop => {
|
data: _props,
|
||||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
render (h) {
|
||||||
|
return h(LoadingBar, {
|
||||||
|
props: _props
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const div = document.createElement('div');
|
const component = Instance.$mount();
|
||||||
div.innerHTML = `<loading-bar${props}></loading-bar>`;
|
document.body.appendChild(component.$el);
|
||||||
document.body.appendChild(div);
|
const loading_bar = Instance.$children[0];
|
||||||
|
|
||||||
const loading_bar = new Vue({
|
|
||||||
el: div,
|
|
||||||
data: _props,
|
|
||||||
components: { LoadingBar }
|
|
||||||
}).$children[0];
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
update (options) {
|
update (options) {
|
||||||
|
|
@ -34,7 +31,7 @@ LoadingBar.newInstance = properties => {
|
||||||
},
|
},
|
||||||
component: loading_bar,
|
component: loading_bar,
|
||||||
destroy () {
|
destroy () {
|
||||||
document.body.removeChild(div);
|
document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,9 @@
|
||||||
<slot name="title"></slot>
|
<slot name="title"></slot>
|
||||||
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
|
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
|
||||||
</div>
|
</div>
|
||||||
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
|
<collapse-transition v-if="mode === 'vertical'">
|
||||||
|
<ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
|
||||||
|
</collapse-transition>
|
||||||
<transition name="slide-up" v-else>
|
<transition name="slide-up" v-else>
|
||||||
<Drop
|
<Drop
|
||||||
v-show="opened"
|
v-show="opened"
|
||||||
|
|
@ -17,6 +19,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Drop from '../select/dropdown.vue';
|
import Drop from '../select/dropdown.vue';
|
||||||
import Icon from '../icon/icon.vue';
|
import Icon from '../icon/icon.vue';
|
||||||
|
import CollapseTransition from '../base/collapse-transition';
|
||||||
import { getStyle, findComponentUpward } from '../../utils/assist';
|
import { getStyle, findComponentUpward } from '../../utils/assist';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
|
|
||||||
|
|
@ -25,7 +28,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'Submenu',
|
name: 'Submenu',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
components: { Icon, Drop },
|
components: { Icon, Drop, CollapseTransition },
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
|
|
|
||||||
|
|
@ -28,12 +28,7 @@ function getMessageInstance () {
|
||||||
return messageInstance;
|
return messageInstance;
|
||||||
}
|
}
|
||||||
|
|
||||||
function notice (content, duration = defaultDuration, type, onClose) {
|
function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
|
||||||
if (!onClose) {
|
|
||||||
onClose = function () {
|
|
||||||
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const iconType = iconTypes[type];
|
const iconType = iconTypes[type];
|
||||||
|
|
||||||
// if loading
|
// if loading
|
||||||
|
|
@ -52,7 +47,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
|
||||||
<span>${content}</span>
|
<span>${content}</span>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
onClose: onClose
|
onClose: onClose,
|
||||||
|
closable: closable,
|
||||||
|
type: 'message'
|
||||||
});
|
});
|
||||||
|
|
||||||
// 用于手动消除
|
// 用于手动消除
|
||||||
|
|
@ -66,20 +63,50 @@ function notice (content, duration = defaultDuration, type, onClose) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
info (content, duration, onClose) {
|
info (options) {
|
||||||
return notice(content, duration, 'info', onClose);
|
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) {
|
success (options) {
|
||||||
return notice(content, duration, 'success', onClose);
|
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) {
|
warning (options) {
|
||||||
return notice(content, duration, 'warning', onClose);
|
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) {
|
error (options) {
|
||||||
return notice(content, duration, 'error', onClose);
|
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) {
|
loading (options) {
|
||||||
return notice(content, duration, 'loading', onClose);
|
const type = typeof options;
|
||||||
|
if (type === 'string') {
|
||||||
|
options = {
|
||||||
|
content: options
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
|
||||||
},
|
},
|
||||||
config (options) {
|
config (options) {
|
||||||
if (options.top) {
|
if (options.top) {
|
||||||
|
|
@ -92,6 +119,6 @@ export default {
|
||||||
destroy () {
|
destroy () {
|
||||||
let instance = getMessageInstance();
|
let instance = getMessageInstance();
|
||||||
messageInstance = null;
|
messageInstance = null;
|
||||||
instance.destroy();
|
instance.destroy('ivu-message');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Modal from './modal.vue';
|
import Modal from './modal.vue';
|
||||||
import Icon from '../icon/icon.vue';
|
import Button from '../button/button.vue';
|
||||||
import iButton from '../button/button.vue';
|
|
||||||
import { camelcaseToHyphen } from '../../utils/assist';
|
|
||||||
import Locale from '../../mixins/locale';
|
import Locale from '../../mixins/locale';
|
||||||
|
|
||||||
const prefixCls = 'ivu-modal-confirm';
|
const prefixCls = 'ivu-modal-confirm';
|
||||||
|
|
@ -10,36 +8,9 @@ const prefixCls = 'ivu-modal-confirm';
|
||||||
Modal.newInstance = properties => {
|
Modal.newInstance = properties => {
|
||||||
const _props = properties || {};
|
const _props = properties || {};
|
||||||
|
|
||||||
let props = '';
|
const Instance = new Vue({
|
||||||
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 modal = new Vue({
|
|
||||||
el: div,
|
|
||||||
mixins: [ Locale ],
|
mixins: [ Locale ],
|
||||||
components: { Modal, iButton, Icon },
|
data: Object.assign({}, _props, {
|
||||||
data: Object.assign(_props, {
|
|
||||||
visible: false,
|
visible: false,
|
||||||
width: 416,
|
width: 416,
|
||||||
title: '',
|
title: '',
|
||||||
|
|
@ -53,6 +24,101 @@ Modal.newInstance = properties => {
|
||||||
buttonLoading: false,
|
buttonLoading: false,
|
||||||
scrollable: 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));
|
||||||
|
|
||||||
|
// render content
|
||||||
|
let body_render;
|
||||||
|
if (this.render) {
|
||||||
|
body_render = h('div', {
|
||||||
|
attrs: {
|
||||||
|
class: `${prefixCls}-body ${prefixCls}-body-render`
|
||||||
|
}
|
||||||
|
}, [this.render(h)]);
|
||||||
|
} else {
|
||||||
|
body_render = h('div', {
|
||||||
|
attrs: {
|
||||||
|
class: `${prefixCls}-body`
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('div', {
|
||||||
|
class: this.iconTypeCls
|
||||||
|
}, [
|
||||||
|
h('i', {
|
||||||
|
class: this.iconNameCls
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
h('div', {
|
||||||
|
domProps: {
|
||||||
|
innerHTML: this.body
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
body_render,
|
||||||
|
h('div', {
|
||||||
|
attrs: {
|
||||||
|
class: `${prefixCls}-footer`
|
||||||
|
}
|
||||||
|
}, footerVNodes)
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
iconTypeCls () {
|
iconTypeCls () {
|
||||||
return [
|
return [
|
||||||
|
|
@ -111,7 +177,11 @@ Modal.newInstance = properties => {
|
||||||
onCancel () {},
|
onCancel () {},
|
||||||
onRemove () {}
|
onRemove () {}
|
||||||
}
|
}
|
||||||
}).$children[0];
|
});
|
||||||
|
|
||||||
|
const component = Instance.$mount();
|
||||||
|
document.body.appendChild(component.$el);
|
||||||
|
const modal = Instance.$children[0];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
show (props) {
|
show (props) {
|
||||||
|
|
|
||||||
|
|
@ -2,18 +2,20 @@ import Modal from './confirm';
|
||||||
|
|
||||||
let modalInstance;
|
let modalInstance;
|
||||||
|
|
||||||
function getModalInstance () {
|
function getModalInstance (render = undefined) {
|
||||||
modalInstance = modalInstance || Modal.newInstance({
|
modalInstance = modalInstance || Modal.newInstance({
|
||||||
closable: false,
|
closable: false,
|
||||||
maskClosable: false,
|
maskClosable: false,
|
||||||
footerHide: true
|
footerHide: true,
|
||||||
|
render: render
|
||||||
});
|
});
|
||||||
|
|
||||||
return modalInstance;
|
return modalInstance;
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirm (options) {
|
function confirm (options) {
|
||||||
let instance = getModalInstance();
|
const render = ('render' in options) ? options.render : undefined;
|
||||||
|
let instance = getModalInstance(render);
|
||||||
|
|
||||||
options.onRemove = function () {
|
options.onRemove = function () {
|
||||||
modalInstance = null;
|
modalInstance = null;
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,8 @@ function notice (type, options) {
|
||||||
transitionName: 'move-notice',
|
transitionName: 'move-notice',
|
||||||
content: content,
|
content: content,
|
||||||
onClose: onClose,
|
onClose: onClose,
|
||||||
closable: true
|
closable: true,
|
||||||
|
type: 'notice'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -112,6 +113,6 @@ export default {
|
||||||
destroy () {
|
destroy () {
|
||||||
let instance = getNoticeInstance();
|
let instance = getNoticeInstance();
|
||||||
noticeInstance = null;
|
noticeInstance = null;
|
||||||
instance.destroy();
|
instance.destroy('ivu-notice');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -127,7 +127,8 @@
|
||||||
inputLength: 20,
|
inputLength: 20,
|
||||||
notFound: false,
|
notFound: false,
|
||||||
slotChangeDuration: false, // if slot change duration and in multiple, set true and after slot change, set 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: {
|
computed: {
|
||||||
|
|
@ -593,15 +594,15 @@
|
||||||
if (this.remote) {
|
if (this.remote) {
|
||||||
if (!this.multiple && this.model !== '') {
|
if (!this.multiple && this.model !== '') {
|
||||||
this.selectToChangeQuery = true;
|
this.selectToChangeQuery = true;
|
||||||
if (this.label === '') this.label = this.model;
|
if (this.currentLabel === '') this.currentLabel = this.model;
|
||||||
this.lastQuery = this.label;
|
this.lastQuery = this.currentLabel;
|
||||||
this.query = this.label;
|
this.query = this.currentLabel;
|
||||||
} else if (this.multiple && this.model.length) {
|
} else if (this.multiple && this.model.length) {
|
||||||
if (this.label.length !== this.model.length) this.label = this.model;
|
if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
|
||||||
this.selectedMultiple = this.model.map((item, index) => {
|
this.selectedMultiple = this.model.map((item, index) => {
|
||||||
return {
|
return {
|
||||||
value: item,
|
value: item,
|
||||||
label: this.label[index]
|
label: this.currentLabel[index]
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</template>
|
</template>
|
||||||
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
|
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
|
||||||
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
|
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
|
||||||
<template v-if="renderType === 'expand'">
|
<template v-if="renderType === 'expand' && !row._disableExpand">
|
||||||
<div :class="expandCls" @click="toggleExpand">
|
<div :class="expandCls" @click="toggleExpand">
|
||||||
<Icon type="ios-arrow-right"></Icon>
|
<Icon type="ios-arrow-right"></Icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
type: String,
|
type: [String, Function],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,8 @@
|
||||||
<div :class="barClasses" :style="barStyle"></div>
|
<div :class="barClasses" :style="barStyle"></div>
|
||||||
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
|
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
|
||||||
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
|
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
|
||||||
{{ item.label }}
|
<Render v-if="item.labelType === 'function'" :render="item.label"></Render>
|
||||||
|
<template v-else>{{ item.label }}</template>
|
||||||
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
|
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -22,6 +23,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Icon from '../icon/icon.vue';
|
import Icon from '../icon/icon.vue';
|
||||||
|
import Render from '../base/render.vue';
|
||||||
import { oneOf, getStyle } from '../../utils/assist';
|
import { oneOf, getStyle } from '../../utils/assist';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
|
|
||||||
|
|
@ -30,7 +32,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'Tabs',
|
name: 'Tabs',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
components: { Icon },
|
components: { Icon, Render },
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: [String, Number]
|
type: [String, Number]
|
||||||
|
|
@ -128,6 +130,7 @@
|
||||||
this.navList = [];
|
this.navList = [];
|
||||||
this.getTabs().forEach((pane, index) => {
|
this.getTabs().forEach((pane, index) => {
|
||||||
this.navList.push({
|
this.navList.push({
|
||||||
|
labelType: typeof pane.label,
|
||||||
label: pane.label,
|
label: pane.label,
|
||||||
icon: pane.icon || '',
|
icon: pane.icon || '',
|
||||||
name: pane.currentName || index,
|
name: pane.currentName || index,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="slide-up">
|
<collapse-transition>
|
||||||
<ul :class="classes" v-show="visible">
|
<ul :class="classes" v-show="visible">
|
||||||
<li>
|
<li>
|
||||||
<span :class="arrowClasses" @click="handleExpand">
|
<span :class="arrowClasses" @click="handleExpand">
|
||||||
|
|
@ -22,11 +22,12 @@
|
||||||
</Tree-node>
|
</Tree-node>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</transition>
|
</collapse-transition>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Checkbox from '../checkbox/checkbox.vue';
|
import Checkbox from '../checkbox/checkbox.vue';
|
||||||
import Icon from '../icon/icon.vue';
|
import Icon from '../icon/icon.vue';
|
||||||
|
import CollapseTransition from '../base/collapse-transition';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
import { findComponentsDownward } from '../../utils/assist';
|
import { findComponentsDownward } from '../../utils/assist';
|
||||||
|
|
||||||
|
|
@ -35,7 +36,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'TreeNode',
|
name: 'TreeNode',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
components: { Checkbox, Icon },
|
components: { Checkbox, Icon, CollapseTransition },
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ const directive = {
|
||||||
inserted (el, { value }, vnode) {
|
inserted (el, { value }, vnode) {
|
||||||
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
|
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
|
||||||
const parentNode = el.parentNode;
|
const parentNode = el.parentNode;
|
||||||
|
if (!parentNode) return;
|
||||||
const home = document.createComment('');
|
const home = document.createComment('');
|
||||||
let hasMovedOut = false;
|
let hasMovedOut = false;
|
||||||
|
|
||||||
|
|
@ -38,6 +39,7 @@ const directive = {
|
||||||
componentUpdated (el, { value }) {
|
componentUpdated (el, { value }) {
|
||||||
// need to make sure children are done updating (vs. `update`)
|
// need to make sure children are done updating (vs. `update`)
|
||||||
const ref$1 = el.__transferDomData;
|
const ref$1 = el.__transferDomData;
|
||||||
|
if (!ref$1) return;
|
||||||
// homes.get(el)
|
// homes.get(el)
|
||||||
const parentNode = ref$1.parentNode;
|
const parentNode = ref$1.parentNode;
|
||||||
const home = ref$1.home;
|
const home = ref$1.home;
|
||||||
|
|
@ -59,7 +61,9 @@ const directive = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
unbind: function unbind (el, binding) {
|
unbind: function unbind (el, binding) {
|
||||||
el.className = el.className.replace('v-transfer-dom', '')
|
el.className = el.className.replace('v-transfer-dom', '');
|
||||||
|
const ref$1 = el.__transferDomData;
|
||||||
|
if (!ref$1) return;
|
||||||
if (el.__transferDomData.hasMovedOut === true) {
|
if (el.__transferDomData.hasMovedOut === true) {
|
||||||
el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
|
el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
96
src/locale/lang/fr-FR.js
Normal file
96
src/locale/lang/fr-FR.js
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
export default {
|
||||||
|
i: {
|
||||||
|
select: {
|
||||||
|
placeholder: 'Sélectionnez',
|
||||||
|
noMatch: 'Aucun résultat',
|
||||||
|
loading: 'Chargement'
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
noDataText: 'Aucune donnée',
|
||||||
|
noFilteredDataText: 'No filter data',
|
||||||
|
confirmFilter: 'Confirmez',
|
||||||
|
resetFilter: 'Reset',
|
||||||
|
clearFilter: 'Tout'
|
||||||
|
},
|
||||||
|
datepicker: {
|
||||||
|
selectDate: 'Sélectionnez une date',
|
||||||
|
selectTime: 'Sélectionnez une heure',
|
||||||
|
startTime: 'Heure de début',
|
||||||
|
endTime: 'Heure de fin',
|
||||||
|
clear: 'Annuler',
|
||||||
|
ok: 'OK',
|
||||||
|
month: '',
|
||||||
|
month1: 'Janvier',
|
||||||
|
month2: 'Février',
|
||||||
|
month3: 'Mars',
|
||||||
|
month4: 'Avril',
|
||||||
|
month5: 'Mai',
|
||||||
|
month6: 'Juin',
|
||||||
|
month7: 'Juillet',
|
||||||
|
month8: 'Août',
|
||||||
|
month9: 'Septembre',
|
||||||
|
month10: 'Octobre',
|
||||||
|
month11: 'Novembre',
|
||||||
|
month12: 'Decembre',
|
||||||
|
year: '',
|
||||||
|
weeks: {
|
||||||
|
sun: 'Dim',
|
||||||
|
mon: 'Lun',
|
||||||
|
tue: 'Mar',
|
||||||
|
wed: 'Mer',
|
||||||
|
thu: 'Jeu',
|
||||||
|
fri: 'Ven',
|
||||||
|
sat: 'Sam'
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
m1: 'Jan',
|
||||||
|
m2: 'Fev',
|
||||||
|
m3: 'Mar',
|
||||||
|
m4: 'Avr',
|
||||||
|
m5: 'Mai',
|
||||||
|
m6: 'Jun',
|
||||||
|
m7: 'Jul',
|
||||||
|
m8: 'Aoû',
|
||||||
|
m9: 'Sep',
|
||||||
|
m10: 'Oct',
|
||||||
|
m11: 'Nov',
|
||||||
|
m12: 'Déc'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transfer: {
|
||||||
|
titles: {
|
||||||
|
source: 'Source',
|
||||||
|
target: 'Cible'
|
||||||
|
},
|
||||||
|
filterPlaceholder: 'Recherche',
|
||||||
|
notFoundText: 'Pas de résultat'
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
okText: 'OK',
|
||||||
|
cancelText: 'Annuler'
|
||||||
|
},
|
||||||
|
poptip: {
|
||||||
|
okText: 'OK',
|
||||||
|
cancelText: 'Annuler'
|
||||||
|
},
|
||||||
|
page: {
|
||||||
|
prev: 'Page Précédente',
|
||||||
|
next: 'Page Suivante',
|
||||||
|
total: 'Total',
|
||||||
|
item: 'élément',
|
||||||
|
items: 'éléments',
|
||||||
|
prev5: '5 Pages en Avant',
|
||||||
|
next5: '5 Pages en Arrière',
|
||||||
|
page: '/page',
|
||||||
|
goto: 'Aller à',
|
||||||
|
p: ''
|
||||||
|
},
|
||||||
|
rate: {
|
||||||
|
star: 'Étoile',
|
||||||
|
stars: 'Étoiles'
|
||||||
|
},
|
||||||
|
tree: {
|
||||||
|
emptyText: 'Aucune donnée'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -26,3 +26,7 @@
|
||||||
@import "move";
|
@import "move";
|
||||||
@import "ease";
|
@import "ease";
|
||||||
@import "slide";
|
@import "slide";
|
||||||
|
|
||||||
|
.collapse-transition {
|
||||||
|
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
|
||||||
|
}
|
||||||
|
|
@ -14,6 +14,18 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
||||||
|
&-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: 9px;
|
||||||
|
color: #999;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
i.@{icon-prefix-cls}{
|
||||||
|
.close-base(-3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-notice-content {
|
&-notice-content {
|
||||||
|
|
@ -25,6 +37,15 @@
|
||||||
box-shadow: @shadow-base;
|
box-shadow: @shadow-base;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
display: block;
|
display: block;
|
||||||
|
&-text{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-notice-closable{
|
||||||
|
.@{message-prefix-cls}-notice-content-text{
|
||||||
|
padding-right: 32px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-success .@{icon-prefix-cls} {
|
&-success .@{icon-prefix-cls} {
|
||||||
|
|
|
||||||
|
|
@ -98,6 +98,11 @@
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&-render{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -233,3 +233,65 @@ function findComponentsDownward (context, componentName, components = []) {
|
||||||
return components;
|
return components;
|
||||||
}
|
}
|
||||||
export {findComponentsDownward};
|
export {findComponentsDownward};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
const trim = function(string) {
|
||||||
|
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function hasClass(el, cls) {
|
||||||
|
if (!el || !cls) return false;
|
||||||
|
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||||||
|
if (el.classList) {
|
||||||
|
return el.classList.contains(cls);
|
||||||
|
} else {
|
||||||
|
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function addClass(el, cls) {
|
||||||
|
if (!el) return;
|
||||||
|
let curClass = el.className;
|
||||||
|
const classes = (cls || '').split(' ');
|
||||||
|
|
||||||
|
for (let i = 0, j = classes.length; i < j; i++) {
|
||||||
|
const clsName = classes[i];
|
||||||
|
if (!clsName) continue;
|
||||||
|
|
||||||
|
if (el.classList) {
|
||||||
|
el.classList.add(clsName);
|
||||||
|
} else {
|
||||||
|
if (!hasClass(el, clsName)) {
|
||||||
|
curClass += ' ' + clsName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!el.classList) {
|
||||||
|
el.className = curClass;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function removeClass(el, cls) {
|
||||||
|
if (!el || !cls) return;
|
||||||
|
const classes = cls.split(' ');
|
||||||
|
let curClass = ' ' + el.className + ' ';
|
||||||
|
|
||||||
|
for (let i = 0, j = classes.length; i < j; i++) {
|
||||||
|
const clsName = classes[i];
|
||||||
|
if (!clsName) continue;
|
||||||
|
|
||||||
|
if (el.classList) {
|
||||||
|
el.classList.remove(clsName);
|
||||||
|
} else {
|
||||||
|
if (hasClass(el, clsName)) {
|
||||||
|
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!el.classList) {
|
||||||
|
el.className = trim(curClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue