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

Merge branch '2.0' into 2.0

Browse source
This commit is contained in:
muei 2017-03-16 11:14:41 +08:00 • committed by GitHub
commit c86d77fcef
31 changed files with 804 additions and 726 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.github/ISSUE_TEMPLATE.md vendored
View file

@ -4,19 +4,22 @@ issue 仅用于提交 bug 或 feature 及 文档错误，其余疑问恕不作
<!-- <!--
我们十分感谢有价值的 issue 贡献者，所以请填写以下内容。如果提问不符要求、在文档中已有解答、已有相同 issue，我们将直接 close，感谢理解。 我们十分感谢有价值的 issue 贡献者，所以请填写以下内容。如果提问不符要求、在文档中已有解答、已有相同 issue，我们将直接 close，感谢理解。
--> -->
<!--
点击 Preview 按钮预览，无误后再提交 issue
-->
### iView 版本号 ### iView 版本号
<!-- 0.9.10 --> <!-- 2.0.0-rc.5 -->
### 操作系统/浏览器 版本号 ### 操作系统/浏览器 版本号
<!-- macOS/Chrome 54 --> <!-- macOS/Chrome 56 -->
### Vue 版本号 ### Vue 版本号
<!-- 1.0.26 --> <!-- 2.2.1 -->
### 能够复现问题的在线示例 ### 能够复现问题的在线示例（重要）
<!-- 使用下面的在线链接快速创建示例 --> <!-- 使用下面的在线链接快速创建示例 -->
<!-- https://codepen.io/anon/pen/NbEbja --> <!-- https://codepen.io/anon/pen/BWwVoy -->
### 复现步骤 ### 复现步骤

115
LICENSE
View file

@ -1,6 +1,6 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2016 iView Copyright (c) 2016-present iView
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
@ -20,6 +20,29 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
MIT LICENSE
Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2016 ElemeFE Copyright (c) 2016 ElemeFE
@ -40,4 +63,92 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
The MIT License (MIT)
Copyright (c) 2015 Koala
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
The MIT License (MIT)
Copyright (c) 2016 vue-beauty
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
MIT License
Copyright (c) 2016-present, Airyland
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
The MIT License (MIT)
Copyright (c) 2016 Drifty (http://drifty.com/)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

11
README.md
View file

@ -83,10 +83,7 @@ Normal browsers and Internet Explorer 9+.
- [ionicons](https://github.com/driftyco/ionicons) - [ionicons](https://github.com/driftyco/ionicons)
- [Ant Design](https://github.com/ant-design/ant-design) - [Ant Design](https://github.com/ant-design/ant-design)
## Related open source projects ## License
In iView, Some of the components and style codes refer to the following projects: [MIT](http://opensource.org/licenses/MIT)
- [AntDesign](https://github.com/ant-design/ant-design)
- [Element](https://github.com/ElemeFE/element) Copyright (c) 2016-present, iView
- [vue-antd](https://github.com/okoala/vue-antd)
- [vue-beauty](https://github.com/FE-Driver/vue-beauty)
- [Vux](https://github.com/airyland/vux)

4
examples/routers/carousel.vue
View file

@ -2,7 +2,9 @@
<div> <div>
<Carousel v-model="v1" dots="inside" trigger="hover"> <Carousel v-model="v1" dots="inside" trigger="hover">
<Carousel-item> <Carousel-item>
<div class="demo-carousel">1</div> <Card>
<div class="demo-carousel">1</div>
</Card>
</Carousel-item> </Carousel-item>
<Carousel-item> <Carousel-item>
<div class="demo-carousel">2</div> <div class="demo-carousel">2</div>

14
examples/routers/checkbox.vue
View file

@ -27,9 +27,17 @@
<div @click="c">修改1</div> <div @click="c">修改1</div>
{{ fruit }} {{ fruit }}
<Checkbox-group v-model="fruit"> <Checkbox-group v-model="fruit">
<Checkbox label="香蕉"></Checkbox> <Row>
<Checkbox label="苹果"></Checkbox> <i-col span="8">
<Checkbox label="西瓜"></Checkbox> <Checkbox label="香蕉"></Checkbox>
</i-col>
<i-col span="8">
<Checkbox label="苹果"></Checkbox>
</i-col>
<i-col span="8">
<Checkbox label="西瓜"></Checkbox>
</i-col>
</Row>
</Checkbox-group> </Checkbox-group>
<br><br> <br><br>
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">

45
examples/routers/form.vue
View file

@ -11,6 +11,14 @@
<Form-item prop="user"> <Form-item prop="user">
<Input v-model="formInline.user"></Input> <Input v-model="formInline.user"></Input>
</Form-item> </Form-item>
<Form-item prop="targetKeys1">
<Transfer
filterable
:data="formInline.data1"
:target-keys="formInline.targetKeys1"
:render-format="render1"
@on-change="handleChange1"></Transfer>
</Form-item>
<Form-item> <Form-item>
<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button> <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
</Form-item> </Form-item>
@ -22,6 +30,8 @@
data () { data () {
return { return {
formInline: { formInline: {
data1: this.getMockData(),
targetKeys1: this.getTargetKeys(),
date: new Date(), date: new Date(),
user: '', user: '',
value2: [], value2: [],
@ -102,6 +112,15 @@
message: '请输入', message: '请输入',
trigger: 'change' trigger: 'change'
} }
],
targetKeys1: [
{
required: true,
type: 'array',
max: 2,
message: '太多了',
trigger: 'change'
}
] ]
} }
} }
@ -118,6 +137,32 @@
}, },
handleInput (val) { handleInput (val) {
console.log(val) console.log(val)
},
getMockData () {
let mockData = [];
for (let i = 1; i <= 20; i++) {
mockData.push({
key: i.toString(),
label: '内容' + i,
description: '内容' + i + '的描述信息',
disabled: Math.random() * 3 < 1
});
}
return mockData;
},
getTargetKeys () {
return this.getMockData()
.filter(() => Math.random() * 2 > 1)
.map(item => item.key);
},
render1 (item) {
return item.label;
},
handleChange1 (newTargetKeys, direction, moveKeys) {
console.log(newTargetKeys);
console.log(direction);
console.log(moveKeys);
this.formInline.targetKeys1 = newTargetKeys;
} }
} }
} }

312
examples/routers/menu.vue
View file

@ -1,81 +1,16 @@
<!--<template>-->
<!--<div>-->
<!--<Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="s">-->
<!--<Menu-item name="1">-->
<!--<Icon type="ios-paper"></Icon>-->
<!--内容管理-->
<!--</Menu-item>-->
<!--<Menu-item name="2">-->
<!--<Icon type="ios-people"></Icon>-->
<!--用户管理-->
<!--</Menu-item>-->
<!--<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-item name="4">-->
<!--<Icon type="settings"></Icon>-->
<!--综合设置-->
<!--</Menu-item>-->
<!--</Menu>-->
<!--<br>-->
<!--<p>切换主题</p>-->
<!--<Radio-group v-model="theme1">-->
<!--<Radio label="light"></Radio>-->
<!--<Radio label="dark"></Radio>-->
<!--<Radio label="primary"></Radio>-->
<!--</Radio-group>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--theme1: 'light'-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--s (s) {-->
<!--console.log(s)-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<div> <div>
<Row> <Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="s">
<i-col span="8"> <Row type="flex" justify="center" align="middle">
<Menu :theme="theme2" @on-select="s"> <i-col span="12">
<Submenu name="1"> <Menu-item 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> <Icon type="ios-people"></Icon>
<Menu-item name="1-2">评论管理</Menu-item> 用户管理
<Menu-item name="1-3">举报管理</Menu-item> </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"> <Submenu name="3">
<template slot="title"> <template slot="title">
<Icon type="stats-bars"></Icon> <Icon type="stats-bars"></Icon>
@ -91,86 +26,19 @@
<Menu-item name="3-5">流失用户</Menu-item> <Menu-item name="3-5">流失用户</Menu-item>
</Menu-group> </Menu-group>
</Submenu> </Submenu>
</Menu> <Menu-item name="4">
</i-col> <Icon type="settings"></Icon>
<i-col span="8"> 综合设置
<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s"> </Menu-item>
<Submenu name="1"> </i-col>
<template slot="title"> </Row>
<Icon type="ios-paper"></Icon> </Menu>
内容管理
</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> <br>
<p>切换主题</p> <p>切换主题</p>
<Radio-group v-model="theme2"> <Radio-group v-model="theme1">
<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>
@ -178,13 +46,149 @@
export default { export default {
data () { data () {
return { return {
theme2: 'light' theme1: 'light'
} }
}, },
methods: { methods: {
s (s) { s (s) {
console.log(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>-->

113
examples/routers/modal.vue
View file

@ -1,94 +1,41 @@
<template> <template>
<div> <div>
<i-button @click.native="instance('info')">消息</i-button> <i-button @click.native="modal2 = true">自定义页头和页脚</i-button>
<i-button @click.native="instance('success')">成功</i-button> <Modal v-model="modal2" width="360">
<i-button @click.native="instance('warning')">警告</i-button> <p slot="header" style="color:#f60;text-align:center">
<i-button @click.native="instance('error')">错误</i-button> <Icon type="information-circled"></Icon>
<span>删除确认</span>
</p>
<div style="text-align:center">
<p>此任务删除后，下游 10 个任务将无法执行。</p>
<p>是否继续删除？</p>
</div>
<div slot="footer">
<i-button type="error" size="large" long :loading="modal_loading" @click.native="del">删除</i-button>
</div>
</Modal>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
modal2: false,
modal_loading: false,
modal3: false,
modal4: false,
modal5: false
}
},
methods: { methods: {
instance (type) { del () {
const title = '对话框的标题'; this.modal_loading = true;
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>'; setTimeout(() => {
switch (type) { this.modal_loading = false;
case 'info': this.modal2 = false;
this.$Modal.info({ this.$Message.success('删除成功');
title: title, }, 2000);
content: content
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'error':
this.$Modal.error({
title: title,
content: content
});
break;
}
} }
} }
} }
</script> </script>
<!--<template>-->
<!--<div>-->
<!--<i-button @click.native="confirm">标准</i-button>-->
<!--<i-button @click.native="custom">自定义按钮文字</i-button>-->
<!--<i-button @click.native="async">异步关闭</i-button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--methods: {-->
<!--confirm () {-->
<!--this.$Modal.confirm({-->
<!--title: '确认对话框标题',-->
<!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',-->
<!--onOk: () => {-->
<!--console.log('确定');-->
<!--// this.$Message.info('点击了确定');-->
<!--},-->
<!--onCancel: () => {-->
<!--console.log('取消');-->
<!--// 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);-->
<!--}-->
<!--});-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->

51
examples/routers/radio.vue
View file

@ -1,28 +1,27 @@
<template> <template>
<div> <div>
<Radio v-model="single" @on-change="c">Radio</Radio> <Radio-group v-model="phone">
<Radio-group v-model="phone" type="button" @on-change="c"> <Row>
<Radio label="apple"> <i-col span="8">
<Icon type="social-apple"></Icon> <Radio label="apple">
<span>Apple</span> <Icon type="social-apple"></Icon>
</Radio> <span>Apple</span>
<Radio label="android"> </Radio>
<Icon type="social-android"></Icon> </i-col>
<span>Android</span> <i-col span="8">
</Radio> <Radio label="android">
<Radio label="windows"> <Icon type="social-android"></Icon>
<Icon type="social-windows"></Icon> <span>Android</span>
<span>Windows</span> </Radio>
</Radio> </i-col>
<i-col span="8">
<Radio label="windows">
<Icon type="social-windows"></Icon>
<span>Windows</span>
</Radio>
</i-col>
</Row>
</Radio-group> </Radio-group>
<Radio-group v-model="animal">
<Radio label="金斑蝶"></Radio>
<Radio label="爪哇犀牛"></Radio>
<Radio label="印度黑羚"></Radio>
</Radio-group>
{{ phone }}
<div @click="phone = 'apple'">apple</div>
<div @click="single = true"> single</div>{{ single }}
</div> </div>
</template> </template>
<script> <script>
@ -30,13 +29,7 @@
data () { data () {
return { return {
phone: 'apple', phone: 'apple',
animal: '爪哇犀牛', animal: '爪哇犀牛'
single: false
}
},
methods: {
c (data) {
console.log(data)
} }
} }
} }

4
examples/routers/slider.vue
View file

@ -6,8 +6,8 @@
{{ value1 }}{{value2}} {{ value1 }}{{value2}}
<div @click="value1 = 13">change value1</div> <div @click="value1 = 13">change value1</div>
<br> <br>
<Slider :value="value9" :tip-format="format"></Slider> <Slider v-model="value9" :tip-format="format"></Slider>
<Slider :value="value10" :tip-format="hideFormat"></Slider> <Slider v-model="value10" :tip-format="hideFormat"></Slider>
</div> </div>
</template> </template>
<script> <script>

199
examples/routers/table.vue
View file

@ -1,169 +1,82 @@
<!--<template>-->
<!--<Card>-->
<!--<Table border :content="self" :columns="columns7" :data="data6"></Table>-->
<!--</Card>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--self: this,-->
<!--columns7: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name',-->
<!--render (row, column, index) {-->
<!--return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;-->
<!--}-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--},-->
<!--{-->
<!--title: '操作',-->
<!--key: 'action',-->
<!--width: 150,-->
<!--align: 'center',-->
<!--render (row, column, index) {-->
<!--return `<i-button type="primary" size="small" @click.native="show(${index})">查看</i-button> <i-button type="error" size="small" @click.native="remove(${index})">删除</i-button>`;-->
<!--}-->
<!--}-->
<!--],-->
<!--data6: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--show (index) {-->
<!--console.log(`姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`)-->
<!--},-->
<!--remove (index) {-->
<!--this.data6.splice(index, 1);-->
<!--}-->
<!--},-->
<!--mounted () {-->
<!--setTimeout(() => {-->
<!--// this.data6.splice(2, 1);-->
<!--}, 3000)-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<div> <i-table border :content="self" :columns="columns7" :data="data6"></i-table>
<i-table border :columns="columns6" :data="data5"></i-table>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
columns6: [ info: '123',
{ self: this,
title: '日期', columns7: [
key: 'date'
},
{ {
title: '姓名', title: '姓名',
key: 'name' key: 'name',
// render (row, column, index) {
// return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
// }
}, },
{ {
title: '年龄', title: '年龄',
key: 'age', key: 'age'
filters: [
{
label: '大于25岁',
value: 1
},
{
label: '小于25岁',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
}, },
{ {
title: '地址', title: '地址',
key: 'address', key: 'address'
filters: [ },
{ {
label: '北京', title: '操作',
value: '北京' key: 'action',
}, width: 150,
{ align: 'center',
label: '上海', render (row, column, index) {
value: '上海' return `<i-button type="primary" size="small" @click="show(${index})">{{ info }}查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
},
{
label: '深圳',
value: '深圳'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
} }
} }
], ],
data5: [ data6: [
{ {
name: '王小明', name: '王小明',
age: 18, age: 18,
address: '北京市朝阳区芍药居', address: '北京市朝阳区芍药居'
date: '2016-10-03'
}, },
{ // {
name: '张小刚', // name: '张小刚',
age: 25, // age: 25,
address: '北京市海淀区西二旗', // address: '北京市海淀区西二旗'
date: '2016-10-01' // },
}, // {
{ // name: '李小红',
name: '李小红', // age: 30,
age: 30, // address: '上海市浦东新区世纪大道'
address: '上海市浦东新区世纪大道', // },
date: '2016-10-02' // {
}, // name: '周小伟',
{ // age: 26,
name: '周小伟', // address: '深圳市南山区深南大道'
age: 26, // }
address: '深圳市南山区深南大道',
date: '2016-10-04'
}
] ]
} }
},
computed: {
dddfff () {
return this.info
}
},
methods: {
show (index) {
this.$Modal.info({
title: '用户信息',
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
},
mounted () {
setTimeout(() => {
this.info = '444';
}, 3000);
} }
} }
</script> </script>

152
examples/routers/transfer.vue
View file

@ -1,77 +1,19 @@
<!--<template>-->
<!--<div>-->
<!--<Transfer-->
<!--:data="data1"-->
<!--filterable-->
<!--:target-keys="targetKeys1"-->
<!--:render-format="render1"-->
<!--@on-change="handleChange1"></Transfer>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data1: this.getMockData(),-->
<!--targetKeys1: this.getTargetKeys()-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--getMockData () {-->
<!--let mockData = [];-->
<!--for (let i = 1; i <= 20; i++) {-->
<!--mockData.push({-->
<!--key: i.toString(),-->
<!--label: '内容' + i,-->
<!--description: '内容' + i + '的描述信息',-->
<!--disabled: Math.random() * 3 < 1-->
<!--});-->
<!--}-->
<!--return mockData;-->
<!--},-->
<!--getTargetKeys () {-->
<!--return this.getMockData()-->
<!--.filter(() => Math.random() * 2 > 1)-->
<!--.map(item => item.key);-->
<!--},-->
<!--render1 (item) {-->
<!--return item.label;-->
<!--},-->
<!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
<!--console.log(newTargetKeys);-->
<!--console.log(direction);-->
<!--console.log(moveKeys);-->
<!--this.targetKeys1 = newTargetKeys;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Transfer <div>
:data="data3" <Transfer
:target-keys="targetKeys3" :data="data1"
:list-style="listStyle" filterable
:render-format="render3" :target-keys="targetKeys1"
:operations="['向左移动','向右移动']" :render-format="render1"
filterable @on-change="handleChange1"></Transfer>
@on-change="handleChange3"> </div>
<div :style="{float: 'right', margin: '5px'}">
<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>
</div>
</Transfer>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data3: this.getMockData(), data1: this.getMockData(),
targetKeys3: this.getTargetKeys(), targetKeys1: this.getTargetKeys()
listStyle: {
width: '250px',
height: '300px'
}
} }
}, },
methods: { methods: {
@ -92,20 +34,78 @@
.filter(() => Math.random() * 2 > 1) .filter(() => Math.random() * 2 > 1)
.map(item => item.key); .map(item => item.key);
}, },
handleChange3 (newTargetKeys) { render1 (item) {
this.targetKeys3 = newTargetKeys; return item.label;
}, },
render3 (item) { handleChange1 (newTargetKeys, direction, moveKeys) {
return item.label + ' - ' + item.description; console.log(newTargetKeys);
}, console.log(direction);
reloadMockData () { console.log(moveKeys);
this.data3 = this.getMockData(); this.targetKeys1 = newTargetKeys;
this.targetKeys3 = this.getTargetKeys();
} }
} }
} }
</script> </script>
<!--<template>-->
<!--<Transfer-->
<!--:data="data3"-->
<!--:target-keys="targetKeys3"-->
<!--:list-style="listStyle"-->
<!--:render-format="render3"-->
<!--:operations="['向左移动','向右移动']"-->
<!--filterable-->
<!--@on-change="handleChange3">-->
<!--<div :style="{float: 'right', margin: '5px'}">-->
<!--<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>-->
<!--</div>-->
<!--</Transfer>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data3: this.getMockData(),-->
<!--targetKeys3: this.getTargetKeys(),-->
<!--listStyle: {-->
<!--width: '250px',-->
<!--height: '300px'-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--getMockData () {-->
<!--let mockData = [];-->
<!--for (let i = 1; i <= 20; i++) {-->
<!--mockData.push({-->
<!--key: i.toString(),-->
<!--label: '内容' + i,-->
<!--description: '内容' + i + '的描述信息',-->
<!--disabled: Math.random() * 3 < 1-->
<!--});-->
<!--}-->
<!--return mockData;-->
<!--},-->
<!--getTargetKeys () {-->
<!--return this.getMockData()-->
<!--.filter(() => Math.random() * 2 > 1)-->
<!--.map(item => item.key);-->
<!--},-->
<!--handleChange3 (newTargetKeys) {-->
<!--this.targetKeys3 = newTargetKeys;-->
<!--},-->
<!--render3 (item) {-->
<!--return item.label + ' - ' + item.description;-->
<!--},-->
<!--reloadMockData () {-->
<!--this.data3 = this.getMockData();-->
<!--this.targetKeys3 = this.getTargetKeys();-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>--> <!--<template>-->
<!--<Transfer--> <!--<Transfer-->
<!--:data="data4"--> <!--:data="data4"-->

288
examples/routers/upload.vue
View file

@ -1,147 +1,175 @@
<!--<template>-->
<!--<div>-->
<!--<div class="demo-upload-list" v-for="item in uploadList">-->
<!--<template v-if="item.status === 'finished'">-->
<!--<img :src="item.url">-->
<!--<div class="demo-upload-list-cover">-->
<!--<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>-->
<!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
<!--</div>-->
<!--</template>-->
<!--<template v-else>-->
<!--<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>-->
<!--</template>-->
<!--</div>-->
<!--<Upload-->
<!--ref="upload"-->
<!--:show-upload-list="false"-->
<!--:default-file-list="defaultList"-->
<!--:on-success="handleSuccess"-->
<!--:format="['jpg','jpeg','png']"-->
<!--:max-size="2048"-->
<!--:on-format-error="handleFormatError"-->
<!--:on-exceeded-size="handleMaxSize"-->
<!--@on-progress="handleProgress"-->
<!--:before-upload="handleBeforeUpload"-->
<!--multiple-->
<!--type="drag"-->
<!--action="//jsonplaceholder.typicode.com/posts/"-->
<!--style="display: inline-block;width:58px;">-->
<!--<div style="width: 58px;height:58px;line-height: 58px;">-->
<!--<Icon type="camera" size="20"></Icon>-->
<!--</div>-->
<!--</Upload>-->
<!--{{ visible }}-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--defaultList: [-->
<!--{-->
<!--'name': 'a42bdcc1178e62b4694c830f028db5c0',-->
<!--'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'-->
<!--},-->
<!--{-->
<!--'name': 'bc7521e033abdd1e92222d733590f104',-->
<!--'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'-->
<!--}-->
<!--],-->
<!--imgName: '',-->
<!--visible: false,-->
<!--uploadList: []-->
<!--}-->
<!--},-->
<!--computed: {-->
<!--// uploadList () {-->
<!--// return this.$refs.upload ? this.$refs.upload.fileList : [];-->
<!--// }-->
<!--},-->
<!--watch: {-->
<!--},-->
<!--mounted () {-->
<!--this.uploadList = this.$refs.upload.fileList;-->
<!--// console.log(this.$refs.upload.fileList)-->
<!--},-->
<!--methods: {-->
<!--handleView (name) {-->
<!--this.imgName = name;-->
<!--this.visible = true;-->
<!--},-->
<!--handleRemove (file) {-->
<!--// 从 upload 实例删除数据-->
<!--const fileList = this.$refs.upload.fileList;-->
<!--this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);-->
<!--},-->
<!--handleSuccess (res, file) {-->
<!--// 因为上传过程为实例，这里模拟添加 url-->
<!--file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';-->
<!--file.name = '7eb99afb9d5f317c912f08b5212fd69a';-->
<!--},-->
<!--handleFormatError (file) {-->
<!--this.$Notice.warning({-->
<!--title: '文件格式不正确',-->
<!--desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'-->
<!--});-->
<!--},-->
<!--handleMaxSize (file) {-->
<!--this.$Notice.warning({-->
<!--title: '超出文件大小限制',-->
<!--desc: '文件 ' + file.name + ' 太大，不能超过 2M。'-->
<!--});-->
<!--},-->
<!--handleBeforeUpload () {-->
<!--const check = this.uploadList.length < 5;-->
<!--if (!check) {-->
<!--this.$Notice.warning({-->
<!--title: '最多只能上传 5 张图片。'-->
<!--});-->
<!--}-->
<!--return check;-->
<!--},-->
<!--handleProgress (s) {-->
<!--console.log(s)-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<style>-->
<!--.demo-upload-list{-->
<!--display: inline-block;-->
<!--width: 60px;-->
<!--height: 60px;-->
<!--text-align: center;-->
<!--line-height: 60px;-->
<!--border: 1px solid transparent;-->
<!--border-radius: 4px;-->
<!--overflow: hidden;-->
<!--background: #fff;-->
<!--position: relative;-->
<!--box-shadow: 0 1px 1px rgba(0,0,0,.2);-->
<!--margin-right: 4px;-->
<!--}-->
<!--.demo-upload-list img{-->
<!--width: 100%;-->
<!--height: 100%;-->
<!--}-->
<!--.demo-upload-list-cover{-->
<!--display: none;-->
<!--position: absolute;-->
<!--top: 0;-->
<!--bottom: 0;-->
<!--left: 0;-->
<!--right: 0;-->
<!--background: rgba(0,0,0,.6);-->
<!--}-->
<!--.demo-upload-list:hover .demo-upload-list-cover{-->
<!--display: block;-->
<!--}-->
<!--.demo-upload-list-cover i{-->
<!--color: #fff;-->
<!--font-size: 20px;-->
<!--cursor: pointer;-->
<!--margin: 0 2px;-->
<!--}-->
<!--</style>-->
<template> <template>
<div> <div>
<div class="demo-upload-list" v-for="item in uploadList"> <Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
<template v-if="item.status === 'finished'"> <i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
<img :src="item.url">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
</template>
</div>
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
@on-progress="handleProgress"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="//jsonplaceholder.typicode.com/posts/"
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="camera" size="20"></Icon>
</div>
</Upload> </Upload>
{{ visible }} <i-button @click.native="handleUpload">上传</i-button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
defaultList: [ file: null
{
'name': 'a42bdcc1178e62b4694c830f028db5c0',
'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
},
{
'name': 'bc7521e033abdd1e92222d733590f104',
'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
}
],
imgName: '',
visible: false,
uploadList: []
} }
}, },
computed: {
// uploadList () {
// return this.$refs.upload ? this.$refs.upload.fileList : [];
// }
},
watch: {
},
mounted () {
this.uploadList = this.$refs.upload.fileList;
// console.log(this.$refs.upload.fileList)
},
methods: { methods: {
handleView (name) { handleBeforeUpload (file) {
this.imgName = name; this.file = file;
this.visible = true; return false;
}, },
handleRemove (file) { handleUpload () {
// 从 upload 实例删除数据 this.$refs.file.post(this.file);
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
},
handleSuccess (res, file) {
// 因为上传过程为实例，这里模拟添加 url
file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
file.name = '7eb99afb9d5f317c912f08b5212fd69a';
},
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
});
},
handleBeforeUpload () {
const check = this.uploadList.length < 5;
if (!check) {
this.$Notice.warning({
title: '最多只能上传 5 张图片。'
});
}
return check;
},
handleProgress (s) {
console.log(s)
} }
} }
} }
</script> </script>
<style>
.demo-upload-list{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list img{
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
display: block;
}
.demo-upload-list-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "2.0.0-rc.4", "version": "2.0.0-rc.5",
"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",

9
src/components/button/button.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<button :type="htmlType" :class="classes" :disabled="disabled"> <button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick">
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
<Icon :type="icon" v-if="icon && !loading"></Icon> <Icon :type="icon" v-if="icon && !loading"></Icon>
<span v-if="showSlot" ref="slot"><slot></slot></span> <span v-if="showSlot" ref="slot"><slot></slot></span>
@ -64,8 +64,13 @@
]; ];
} }
}, },
methods: {
handleClick (event) {
this.$emit('click', event);
}
},
mounted () { mounted () {
this.showSlot = this.$refs.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; this.showSlot = this.$slots.default !== undefined;
} }
}; };
</script> </script>

2
src/components/carousel/carousel-item.vue
View file

@ -25,11 +25,9 @@
} }
}, },
mounted () { mounted () {
// todo while
this.$parent.slotChange(); this.$parent.slotChange();
}, },
beforeDestroy () { beforeDestroy () {
// todo while
this.$parent.slotChange(); this.$parent.slotChange();
} }
}; };

21
src/components/checkbox/checkbox-group.vue
View file

@ -4,6 +4,7 @@
</div> </div>
</template> </template>
<script> <script>
import { findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-checkbox-group'; const prefixCls = 'ivu-checkbox-group';
@ -20,7 +21,8 @@
}, },
data () { data () {
return { return {
currentValue: this.value currentValue: this.value,
childrens: []
}; };
}, },
computed: { computed: {
@ -34,15 +36,18 @@
methods: { methods: {
updateModel (update) { updateModel (update) {
const value = this.value; const value = this.value;
this.childrens = findComponentsDownward(this, 'Checkbox');
this.$children.forEach((child) => { if (this.childrens) {
child.model = value; this.childrens.forEach(child => {
child.model = value;
if (update) { if (update) {
child.currentValue = value.indexOf(child.label) >= 0; child.currentValue = value.indexOf(child.label) >= 0;
child.group = true; child.group = true;
} }
}); });
}
}, },
change (data) { change (data) {
this.currentValue = data; this.currentValue = data;

17
src/components/checkbox/checkbox.vue
View file

@ -18,10 +18,11 @@
:checked="currentValue" :checked="currentValue"
@change="change"> @change="change">
</span> </span>
<slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot> <slot><span v-if="showSlot">{{ label }}</span></slot>
</label> </label>
</template> </template>
<script> <script>
import { findComponentUpward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-checkbox'; const prefixCls = 'ivu-checkbox';
@ -51,7 +52,8 @@
model: [], model: [],
currentValue: this.value, currentValue: this.value,
group: false, group: false,
showSlot: true showSlot: true,
parent: findComponentUpward(this, 'CheckboxGroup')
}; };
}, },
computed: { computed: {
@ -83,16 +85,11 @@
} }
}, },
mounted () { mounted () {
// todo 使用 while向上查找 this.parent = findComponentUpward(this, 'CheckboxGroup');
if (this.$parent && this.$parent.$options.name === 'CheckboxGroup') this.group = true; if (this.parent) this.group = true;
if (!this.group) { if (!this.group) {
this.updateModel(); this.updateModel();
// if (this.$refs.slot && this.$refs.slot.innerHTML === '') { this.showSlot = this.$slots.default !== undefined;
// this.showSlot = false;
// }
if (this.$slots.default === undefined) {
this.showSlot = false;
}
} }
}, },
methods: { methods: {

1
src/components/collapse/panel.vue
View file

@ -48,7 +48,6 @@
}, },
methods: { methods: {
toggle () { toggle () {
// todo while向上查找
this.$parent.toggle({ this.$parent.toggle({
name: this.name || this.index, name: this.name || this.index,
isActive: this.isActive isActive: this.isActive

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

@ -151,8 +151,8 @@
this.$emit('on-focus', event); this.$emit('on-focus', event);
}, },
handleBlur (event) { handleBlur (event) {
this.$emit('on-blur', event); this.$emit('on-blur', envent);
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader'])) { if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
this.dispatch('FormItem', 'on-form-blur', this.currentValue); this.dispatch('FormItem', 'on-form-blur', this.currentValue);
} }
}, },
@ -171,7 +171,7 @@
this.resizeTextarea(); this.resizeTextarea();
}); });
this.currentValue = value; this.currentValue = value;
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader'])) { if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
this.dispatch('FormItem', 'on-form-change', value); this.dispatch('FormItem', 'on-form-change', value);
} }
}, },

12
src/components/menu/menu.vue
View file

@ -2,7 +2,7 @@
<ul :class="classes" :style="styles"><slot></slot></ul> <ul :class="classes" :style="styles"><slot></slot></ul>
</template> </template>
<script> <script>
import { oneOf } from '../../utils/assist'; import { oneOf, findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-menu'; const prefixCls = 'ivu-menu';
@ -84,11 +84,13 @@
} }
}, },
updateOpened () { updateOpened () {
this.$children.forEach(item => { const items = findComponentsDownward(this, 'Submenu');
if (item.$options.name === 'Submenu') {
if (items.length) {
items.forEach(item => {
if (this.openNames.indexOf(item.name) > -1) item.opened = true; if (this.openNames.indexOf(item.name) > -1) item.opened = true;
} });
}); }
} }
}, },
mounted () { mounted () {

23
src/components/menu/submenu.vue
View file

@ -17,7 +17,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 { getStyle } from '../../utils/assist'; import { getStyle, findComponentUpward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-menu'; const prefixCls = 'ivu-menu';
@ -41,7 +41,8 @@
prefixCls: prefixCls, prefixCls: prefixCls,
active: false, active: false,
opened: false, opened: false,
dropWidth: parseFloat(getStyle(this.$el, 'width')) dropWidth: parseFloat(getStyle(this.$el, 'width')),
parent: findComponentUpward(this, 'Menu')
}; };
}, },
computed: { computed: {
@ -56,12 +57,10 @@
]; ];
}, },
mode () { mode () {
// todo while return this.parent.mode;
return this.$parent.mode;
}, },
accordion () { accordion () {
// todo while return this.parent.accordion;
return this.$parent.accordion;
}, },
dropStyle () { dropStyle () {
let style = {}; let style = {};
@ -77,8 +76,7 @@
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
// todo while this.parent.updateOpenKeys(this.name);
this.$parent.updateOpenKeys(this.name);
this.opened = true; this.opened = true;
}, 250); }, 250);
}, },
@ -88,8 +86,7 @@
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
// todo while this.parent.updateOpenKeys(this.name);
this.$parent.updateOpenKeys(this.name);
this.opened = false; this.opened = false;
}, 150); }, 150);
}, },
@ -98,14 +95,12 @@
if (this.mode === 'horizontal') return; if (this.mode === 'horizontal') return;
const opened = this.opened; const opened = this.opened;
if (this.accordion) { if (this.accordion) {
// todo while this.parent.$children.forEach(item => {
this.$parent.$children.forEach(item => {
if (item.$options.name === 'Submenu') item.opened = false; if (item.$options.name === 'Submenu') item.opened = false;
}); });
} }
this.opened = !opened; this.opened = !opened;
// todo while this.parent.updateOpenKeys(this.name);
this.$parent.updateOpenKeys(this.name);
} }
}, },
watch: { watch: {

2
src/components/modal/modal.vue
View file

@ -198,7 +198,7 @@
let showHead = true; let showHead = true;
if (this.$slots.head === undefined && !this.title) { if (this.$slots.header === undefined && !this.title) {
showHead = false; showHead = false;
} }

17
src/components/radio/radio-group.vue
View file

@ -4,7 +4,7 @@
</div> </div>
</template> </template>
<script> <script>
import { oneOf } from '../../utils/assist'; import { oneOf, findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-radio-group'; const prefixCls = 'ivu-radio-group';
@ -34,7 +34,8 @@
}, },
data () { data () {
return { return {
currentValue: this.value currentValue: this.value,
childrens: []
}; };
}, },
computed: { computed: {
@ -55,10 +56,14 @@
methods: { methods: {
updateValue () { updateValue () {
const value = this.value; const value = this.value;
this.$children.forEach((child) => { this.childrens = findComponentsDownward(this, 'Radio');
child.currentValue = value == child.label;
child.group = true; if (this.childrens) {
}); this.childrens.forEach(child => {
child.currentValue = value == child.label;
child.group = true;
});
}
}, },
change (data) { change (data) {
this.currentValue = data.value; this.currentValue = data.value;

9
src/components/radio/radio.vue
View file

@ -12,6 +12,7 @@
</label> </label>
</template> </template>
<script> <script>
import { findComponentUpward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-radio'; const prefixCls = 'ivu-radio';
@ -35,7 +36,8 @@
data () { data () {
return { return {
currentValue: this.value, currentValue: this.value,
group: false group: false,
parent: findComponentUpward(this, 'RadioGroup')
}; };
}, },
computed: { computed: {
@ -66,8 +68,7 @@
} }
}, },
mounted () { mounted () {
// todo 使用 while向上查找 if (this.parent) this.group = true;
if (this.$parent && this.$parent.$options.name === 'RadioGroup') this.group = true;
if (!this.group) { if (!this.group) {
this.updateValue(); this.updateValue();
} }
@ -83,7 +84,7 @@
this.$emit('input', checked); this.$emit('input', checked);
if (this.group && this.label) { if (this.group && this.label) {
this.$parent.change({ this.parent.change({
value: this.label, value: this.label,
checked: this.value checked: this.value
}); });

24
src/components/table/cell.vue
View file

@ -52,36 +52,32 @@
const template = this.column.render(this.row, this.column, this.index); const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div'); const cell = document.createElement('div');
cell.innerHTML = template; cell.innerHTML = template;
// const _oldParentChildLen = $parent.$children.length;
// const _newParentChildLen = $parent.$children.length;
// if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag
// this.uid = $parent.$children[$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update
// }
this.$el.innerHTML = ''; this.$el.innerHTML = '';
let methods = {}; let methods = {};
Object.keys($parent).forEach(key => { Object.keys($parent).forEach(key => {
const func = $parent[`${key}`]; const func = $parent[key];
if (typeof(func) === 'function' && func.name === 'boundFn') { if (typeof(func) === 'function' && func.name === 'boundFn') {
methods[`${key}`] = func; methods[key] = func;
} }
}); });
const res = Vue.compile(cell.outerHTML); const res = Vue.compile(cell.outerHTML);
// todo 临时解决方案
const component = new Vue({ const component = new Vue({
render: res.render, render: res.render,
staticRenderFns: res.staticRenderFns, staticRenderFns: res.staticRenderFns,
methods: methods methods: methods,
data () {
return $parent._data;
}
}); });
const Cell = component.$mount(); const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el); this.$refs.cell.appendChild(Cell.$el);
} }
}, },
destroy () { destroy () {
const $parent = this.content;
for (let i = 0; i < $parent.$children.length; i++) {
if ($parent.$children[i]._uid === this.uid) {
$parent.$children[i].$destroy();
}
}
}, },
toggleSelect () { toggleSelect () {
this.$parent.$parent.toggleSelect(this.index); this.$parent.$parent.toggleSelect(this.index);

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

@ -173,7 +173,8 @@
bodyHeight: 0, bodyHeight: 0,
bodyRealHeight: 0, bodyRealHeight: 0,
scrollBarWidth: getScrollBarSize(), scrollBarWidth: getScrollBarSize(),
currentContent: this.content currentContent: this.content,
cloneData: deepCopy(this.data) // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
}; };
}, },
computed: { computed: {
@ -357,16 +358,16 @@
} }
} }
this.objData[_index]._isHighlight = true; this.objData[_index]._isHighlight = true;
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex])); const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.cloneData[oldIndex]));
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData); this.$emit('on-current-change', JSON.parse(JSON.stringify(this.cloneData[_index])), oldData);
}, },
clickCurrentRow (_index) { clickCurrentRow (_index) {
this.highlightCurrentRow (_index); this.highlightCurrentRow (_index);
this.$emit('on-row-click', JSON.parse(JSON.stringify(this.data[_index]))); this.$emit('on-row-click', JSON.parse(JSON.stringify(this.cloneData[_index])));
}, },
dblclickCurrentRow (_index) { dblclickCurrentRow (_index) {
this.highlightCurrentRow (_index); this.highlightCurrentRow (_index);
this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.data[_index]))); this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.cloneData[_index])));
}, },
getSelection () { getSelection () {
let selectionIndexes = []; let selectionIndexes = [];
@ -663,6 +664,10 @@
this.objData = this.makeObjData(); this.objData = this.makeObjData();
this.rebuildData = this.makeDataWithSortAndFilter(); this.rebuildData = this.makeDataWithSortAndFilter();
this.handleResize(); this.handleResize();
// here will trigger before clickCurrentRow, so use async
setTimeout(() => {
this.cloneData = deepCopy(this.data);
}, 0);
}, },
deep: true deep: true
}, },

9
src/components/transfer/search.vue
View file

@ -44,14 +44,5 @@
this.$emit('on-query-clear'); this.$emit('on-query-clear');
} }
} }
// todo 事件
// events: {
// 'on-form-blur' () {
// return false;
// },
// 'on-form-change' () {
// return false;
// }
// }
}; };
</script> </script>

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

@ -67,8 +67,8 @@
return cloned; return cloned;
} }
const vNodes = this.$slots.default; const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
const clonedVNodes = vNodes.map(vnode => cloneVNode(vnode)); const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
return createElement('div', { return createElement('div', {
'class': this.classes 'class': this.classes
@ -120,7 +120,7 @@
on: { on: {
'on-checked-keys-change': this.handleRightCheckedKeysChange 'on-checked-keys-change': this.handleRightCheckedKeysChange
} }
}, clonedVNodes), }, clonedVNodes)
]); ]);
}, },

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

@ -58,6 +58,14 @@
.@{input-prefix-cls}-group{ .@{input-prefix-cls}-group{
.input-group-error; .input-group-error;
} }
.@{transfer-prefix-cls} {
.@{input-prefix-cls} {
.input;
&-icon{
color: @subsidiary-color;
}
}
}
} }
.@{form-item-prefix-cls}-validating{ .@{form-item-prefix-cls}-validating{
.@{input-prefix-cls}{ .@{input-prefix-cls}{

26
src/utils/assist.js
View file

@ -185,9 +185,9 @@ function findComponentUpward (content, componentName, componentNames) {
} }
export {findComponentUpward}; export {findComponentUpward};
// Find components downward // Find component downward
function findComponentDownward (content, componentName) { function findComponentDownward (content, componentName) {
let childrens = content.$children; const childrens = content.$children;
let children = null; let children = null;
if (childrens.length) { if (childrens.length) {
@ -212,4 +212,24 @@ function findComponentDownward (content, componentName) {
} }
return children; return children;
} }
export {findComponentDownward}; export {findComponentDownward};
// Find components downward
function findComponentsDownward (content, componentName, components = []) {
const childrens = content.$children;
if (childrens.length) {
childrens.forEach(child => {
const name = child.$options.name;
const childs = child.$children;
if (name === componentName) components.push(child);
if (childs.length) {
const findChilds = findComponentsDownward(child, componentName, components);
if (findChilds) components.concat(findChilds);
}
});
}
return components;
}
export {findComponentsDownward};