Merge branch '2.0' into 2.0
This commit is contained in:
commit
c86d77fcef
31 changed files with 804 additions and 726 deletions
13
.github/ISSUE_TEMPLATE.md
vendored
13
.github/ISSUE_TEMPLATE.md
vendored
|
@ -4,19 +4,22 @@ issue 仅用于提交 bug 或 feature 及 文档错误,其余疑问恕不作
|
|||
<!--
|
||||
我们十分感谢有价值的 issue 贡献者,所以请填写以下内容。如果提问不符要求、在文档中已有解答、已有相同 issue,我们将直接 close,感谢理解。
|
||||
-->
|
||||
<!--
|
||||
点击 Preview 按钮预览,无误后再提交 issue
|
||||
-->
|
||||
|
||||
### iView 版本号
|
||||
<!-- 0.9.10 -->
|
||||
<!-- 2.0.0-rc.5 -->
|
||||
|
||||
### 操作系统/浏览器 版本号
|
||||
<!-- macOS/Chrome 54 -->
|
||||
<!-- macOS/Chrome 56 -->
|
||||
|
||||
### Vue 版本号
|
||||
<!-- 1.0.26 -->
|
||||
<!-- 2.2.1 -->
|
||||
|
||||
### 能够复现问题的在线示例
|
||||
### 能够复现问题的在线示例(重要)
|
||||
<!-- 使用下面的在线链接快速创建示例 -->
|
||||
<!-- https://codepen.io/anon/pen/NbEbja -->
|
||||
<!-- https://codepen.io/anon/pen/BWwVoy -->
|
||||
|
||||
### 复现步骤
|
||||
|
||||
|
|
115
LICENSE
115
LICENSE
|
@ -1,6 +1,6 @@
|
|||
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
|
||||
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
|
||||
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)
|
||||
|
||||
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
|
||||
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.
|
||||
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
11
README.md
|
@ -83,10 +83,7 @@ Normal browsers and Internet Explorer 9+.
|
|||
- [ionicons](https://github.com/driftyco/ionicons)
|
||||
- [Ant Design](https://github.com/ant-design/ant-design)
|
||||
|
||||
## Related open source projects
|
||||
In iView, Some of the components and style codes refer to the following projects:
|
||||
- [AntDesign](https://github.com/ant-design/ant-design)
|
||||
- [Element](https://github.com/ElemeFE/element)
|
||||
- [vue-antd](https://github.com/okoala/vue-antd)
|
||||
- [vue-beauty](https://github.com/FE-Driver/vue-beauty)
|
||||
- [Vux](https://github.com/airyland/vux)
|
||||
## License
|
||||
[MIT](http://opensource.org/licenses/MIT)
|
||||
|
||||
Copyright (c) 2016-present, iView
|
|
@ -2,7 +2,9 @@
|
|||
<div>
|
||||
<Carousel v-model="v1" dots="inside" trigger="hover">
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">1</div>
|
||||
<Card>
|
||||
<div class="demo-carousel">1</div>
|
||||
</Card>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">2</div>
|
||||
|
|
|
@ -27,9 +27,17 @@
|
|||
<div @click="c">修改1</div>
|
||||
{{ fruit }}
|
||||
<Checkbox-group v-model="fruit">
|
||||
<Checkbox label="香蕉"></Checkbox>
|
||||
<Checkbox label="苹果"></Checkbox>
|
||||
<Checkbox label="西瓜"></Checkbox>
|
||||
<Row>
|
||||
<i-col span="8">
|
||||
<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>
|
||||
<br><br>
|
||||
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
|
||||
|
|
|
@ -11,6 +11,14 @@
|
|||
<Form-item prop="user">
|
||||
<Input v-model="formInline.user"></Input>
|
||||
</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>
|
||||
<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
|
||||
</Form-item>
|
||||
|
@ -22,6 +30,8 @@
|
|||
data () {
|
||||
return {
|
||||
formInline: {
|
||||
data1: this.getMockData(),
|
||||
targetKeys1: this.getTargetKeys(),
|
||||
date: new Date(),
|
||||
user: '',
|
||||
value2: [],
|
||||
|
@ -102,6 +112,15 @@
|
|||
message: '请输入',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
targetKeys1: [
|
||||
{
|
||||
required: true,
|
||||
type: 'array',
|
||||
max: 2,
|
||||
message: '太多了',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -118,6 +137,32 @@
|
|||
},
|
||||
handleInput (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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
<Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="s">
|
||||
<Row type="flex" justify="center" align="middle">
|
||||
<i-col span="12">
|
||||
<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>
|
||||
|
@ -91,86 +26,19 @@
|
|||
<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>
|
||||
<Menu-item name="4">
|
||||
<Icon type="settings"></Icon>
|
||||
综合设置
|
||||
</Menu-item>
|
||||
</i-col>
|
||||
</Row>
|
||||
</Menu>
|
||||
<br>
|
||||
<p>切换主题</p>
|
||||
<Radio-group v-model="theme2">
|
||||
<Radio-group v-model="theme1">
|
||||
<Radio label="light"></Radio>
|
||||
<Radio label="dark"></Radio>
|
||||
<Radio label="primary"></Radio>
|
||||
</Radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -178,13 +46,149 @@
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme2: 'light'
|
||||
theme1: 'light'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
s (s) {
|
||||
console.log(s);
|
||||
console.log(s)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,94 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-button @click.native="instance('info')">消息</i-button>
|
||||
<i-button @click.native="instance('success')">成功</i-button>
|
||||
<i-button @click.native="instance('warning')">警告</i-button>
|
||||
<i-button @click.native="instance('error')">错误</i-button>
|
||||
<i-button @click.native="modal2 = true">自定义页头和页脚</i-button>
|
||||
<Modal v-model="modal2" width="360">
|
||||
<p slot="header" style="color:#f60;text-align:center">
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal2: false,
|
||||
modal_loading: false,
|
||||
modal3: false,
|
||||
modal4: false,
|
||||
modal5: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
instance (type) {
|
||||
const title = '对话框的标题';
|
||||
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
|
||||
switch (type) {
|
||||
case 'info':
|
||||
this.$Modal.info({
|
||||
title: title,
|
||||
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;
|
||||
}
|
||||
del () {
|
||||
this.modal_loading = true;
|
||||
setTimeout(() => {
|
||||
this.modal_loading = false;
|
||||
this.modal2 = false;
|
||||
this.$Message.success('删除成功');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>-->
|
||||
|
|
|
@ -1,28 +1,27 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio v-model="single" @on-change="c">Radio</Radio>
|
||||
<Radio-group v-model="phone" type="button" @on-change="c">
|
||||
<Radio label="apple">
|
||||
<Icon type="social-apple"></Icon>
|
||||
<span>Apple</span>
|
||||
</Radio>
|
||||
<Radio label="android">
|
||||
<Icon type="social-android"></Icon>
|
||||
<span>Android</span>
|
||||
</Radio>
|
||||
<Radio label="windows">
|
||||
<Icon type="social-windows"></Icon>
|
||||
<span>Windows</span>
|
||||
</Radio>
|
||||
<Radio-group v-model="phone">
|
||||
<Row>
|
||||
<i-col span="8">
|
||||
<Radio label="apple">
|
||||
<Icon type="social-apple"></Icon>
|
||||
<span>Apple</span>
|
||||
</Radio>
|
||||
</i-col>
|
||||
<i-col span="8">
|
||||
<Radio label="android">
|
||||
<Icon type="social-android"></Icon>
|
||||
<span>Android</span>
|
||||
</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 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>
|
||||
</template>
|
||||
<script>
|
||||
|
@ -30,13 +29,7 @@
|
|||
data () {
|
||||
return {
|
||||
phone: 'apple',
|
||||
animal: '爪哇犀牛',
|
||||
single: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
c (data) {
|
||||
console.log(data)
|
||||
animal: '爪哇犀牛'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
{{ value1 }}{{value2}}
|
||||
<div @click="value1 = 13">change value1</div>
|
||||
<br>
|
||||
<Slider :value="value9" :tip-format="format"></Slider>
|
||||
<Slider :value="value10" :tip-format="hideFormat"></Slider>
|
||||
<Slider v-model="value9" :tip-format="format"></Slider>
|
||||
<Slider v-model="value10" :tip-format="hideFormat"></Slider>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
@ -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>
|
||||
<div>
|
||||
<i-table border :columns="columns6" :data="data5"></i-table>
|
||||
</div>
|
||||
<i-table border :content="self" :columns="columns7" :data="data6"></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns6: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
info: '123',
|
||||
self: this,
|
||||
columns7: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
key: 'name',
|
||||
// render (row, column, index) {
|
||||
// return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
|
||||
// }
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
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;
|
||||
}
|
||||
}
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
filters: [
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海'
|
||||
},
|
||||
{
|
||||
label: '深圳',
|
||||
value: '深圳'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.address.indexOf(value) > -1;
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
render (row, column, index) {
|
||||
return `<i-button type="primary" size="small" @click="show(${index})">{{ info }}查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
data5: [
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
date: '2016-10-03'
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
date: '2016-10-01'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
date: '2016-10-02'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
date: '2016-10-04'
|
||||
}
|
||||
// {
|
||||
// name: '张小刚',
|
||||
// age: 25,
|
||||
// address: '北京市海淀区西二旗'
|
||||
// },
|
||||
// {
|
||||
// name: '李小红',
|
||||
// age: 30,
|
||||
// address: '上海市浦东新区世纪大道'
|
||||
// },
|
||||
// {
|
||||
// name: '周小伟',
|
||||
// age: 26,
|
||||
// address: '深圳市南山区深南大道'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
<div>
|
||||
<Transfer
|
||||
:data="data1"
|
||||
filterable
|
||||
:target-keys="targetKeys1"
|
||||
:render-format="render1"
|
||||
@on-change="handleChange1"></Transfer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data3: this.getMockData(),
|
||||
targetKeys3: this.getTargetKeys(),
|
||||
listStyle: {
|
||||
width: '250px',
|
||||
height: '300px'
|
||||
}
|
||||
data1: this.getMockData(),
|
||||
targetKeys1: this.getTargetKeys()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -92,20 +34,78 @@
|
|||
.filter(() => Math.random() * 2 > 1)
|
||||
.map(item => item.key);
|
||||
},
|
||||
handleChange3 (newTargetKeys) {
|
||||
this.targetKeys3 = newTargetKeys;
|
||||
render1 (item) {
|
||||
return item.label;
|
||||
},
|
||||
render3 (item) {
|
||||
return item.label + ' - ' + item.description;
|
||||
},
|
||||
reloadMockData () {
|
||||
this.data3 = this.getMockData();
|
||||
this.targetKeys3 = this.getTargetKeys();
|
||||
handleChange1 (newTargetKeys, direction, moveKeys) {
|
||||
console.log(newTargetKeys);
|
||||
console.log(direction);
|
||||
console.log(moveKeys);
|
||||
this.targetKeys1 = newTargetKeys;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>-->
|
||||
<!--<Transfer-->
|
||||
<!--:data="data4"-->
|
||||
|
|
|
@ -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>
|
||||
<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 action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
|
||||
<i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
|
||||
</Upload>
|
||||
{{ visible }}
|
||||
<i-button @click.native="handleUpload">上传</i-button>
|
||||
</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: []
|
||||
file: null
|
||||
}
|
||||
},
|
||||
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;
|
||||
handleBeforeUpload (file) {
|
||||
this.file = file;
|
||||
return false;
|
||||
},
|
||||
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)
|
||||
handleUpload () {
|
||||
this.$refs.file.post(this.file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "2.0.0-rc.4",
|
||||
"version": "2.0.0-rc.5",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<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 :type="icon" v-if="icon && !loading"></Icon>
|
||||
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
||||
|
@ -64,8 +64,13 @@
|
|||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (event) {
|
||||
this.$emit('click', event);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showSlot = this.$refs.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
|
||||
this.showSlot = this.$slots.default !== undefined;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -25,11 +25,9 @@
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
// todo while
|
||||
this.$parent.slotChange();
|
||||
},
|
||||
beforeDestroy () {
|
||||
// todo while
|
||||
this.$parent.slotChange();
|
||||
}
|
||||
};
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { findComponentsDownward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
const prefixCls = 'ivu-checkbox-group';
|
||||
|
||||
|
@ -20,7 +21,8 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
currentValue: this.value
|
||||
currentValue: this.value,
|
||||
childrens: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -34,15 +36,18 @@
|
|||
methods: {
|
||||
updateModel (update) {
|
||||
const value = this.value;
|
||||
this.childrens = findComponentsDownward(this, 'Checkbox');
|
||||
|
||||
this.$children.forEach((child) => {
|
||||
child.model = value;
|
||||
if (this.childrens) {
|
||||
this.childrens.forEach(child => {
|
||||
child.model = value;
|
||||
|
||||
if (update) {
|
||||
child.currentValue = value.indexOf(child.label) >= 0;
|
||||
child.group = true;
|
||||
}
|
||||
});
|
||||
if (update) {
|
||||
child.currentValue = value.indexOf(child.label) >= 0;
|
||||
child.group = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
change (data) {
|
||||
this.currentValue = data;
|
||||
|
|
|
@ -18,10 +18,11 @@
|
|||
:checked="currentValue"
|
||||
@change="change">
|
||||
</span>
|
||||
<slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot>
|
||||
<slot><span v-if="showSlot">{{ label }}</span></slot>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
import { findComponentUpward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-checkbox';
|
||||
|
@ -51,7 +52,8 @@
|
|||
model: [],
|
||||
currentValue: this.value,
|
||||
group: false,
|
||||
showSlot: true
|
||||
showSlot: true,
|
||||
parent: findComponentUpward(this, 'CheckboxGroup')
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -83,16 +85,11 @@
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
// todo 使用 while向上查找
|
||||
if (this.$parent && this.$parent.$options.name === 'CheckboxGroup') this.group = true;
|
||||
this.parent = findComponentUpward(this, 'CheckboxGroup');
|
||||
if (this.parent) this.group = true;
|
||||
if (!this.group) {
|
||||
this.updateModel();
|
||||
// if (this.$refs.slot && this.$refs.slot.innerHTML === '') {
|
||||
// this.showSlot = false;
|
||||
// }
|
||||
if (this.$slots.default === undefined) {
|
||||
this.showSlot = false;
|
||||
}
|
||||
this.showSlot = this.$slots.default !== undefined;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -48,7 +48,6 @@
|
|||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
// todo while向上查找
|
||||
this.$parent.toggle({
|
||||
name: this.name || this.index,
|
||||
isActive: this.isActive
|
||||
|
|
|
@ -151,8 +151,8 @@
|
|||
this.$emit('on-focus', event);
|
||||
},
|
||||
handleBlur (event) {
|
||||
this.$emit('on-blur', event);
|
||||
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader'])) {
|
||||
this.$emit('on-blur', envent);
|
||||
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
|
||||
this.dispatch('FormItem', 'on-form-blur', this.currentValue);
|
||||
}
|
||||
},
|
||||
|
@ -171,7 +171,7 @@
|
|||
this.resizeTextarea();
|
||||
});
|
||||
this.currentValue = value;
|
||||
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader'])) {
|
||||
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
|
||||
this.dispatch('FormItem', 'on-form-change', value);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<ul :class="classes" :style="styles"><slot></slot></ul>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { oneOf, findComponentsDownward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
@ -84,11 +84,13 @@
|
|||
}
|
||||
},
|
||||
updateOpened () {
|
||||
this.$children.forEach(item => {
|
||||
if (item.$options.name === 'Submenu') {
|
||||
const items = findComponentsDownward(this, 'Submenu');
|
||||
|
||||
if (items.length) {
|
||||
items.forEach(item => {
|
||||
if (this.openNames.indexOf(item.name) > -1) item.opened = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import { getStyle } from '../../utils/assist';
|
||||
import { getStyle, findComponentUpward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
@ -41,7 +41,8 @@
|
|||
prefixCls: prefixCls,
|
||||
active: false,
|
||||
opened: false,
|
||||
dropWidth: parseFloat(getStyle(this.$el, 'width'))
|
||||
dropWidth: parseFloat(getStyle(this.$el, 'width')),
|
||||
parent: findComponentUpward(this, 'Menu')
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -56,12 +57,10 @@
|
|||
];
|
||||
},
|
||||
mode () {
|
||||
// todo while
|
||||
return this.$parent.mode;
|
||||
return this.parent.mode;
|
||||
},
|
||||
accordion () {
|
||||
// todo while
|
||||
return this.$parent.accordion;
|
||||
return this.parent.accordion;
|
||||
},
|
||||
dropStyle () {
|
||||
let style = {};
|
||||
|
@ -77,8 +76,7 @@
|
|||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
// todo while
|
||||
this.$parent.updateOpenKeys(this.name);
|
||||
this.parent.updateOpenKeys(this.name);
|
||||
this.opened = true;
|
||||
}, 250);
|
||||
},
|
||||
|
@ -88,8 +86,7 @@
|
|||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
// todo while
|
||||
this.$parent.updateOpenKeys(this.name);
|
||||
this.parent.updateOpenKeys(this.name);
|
||||
this.opened = false;
|
||||
}, 150);
|
||||
},
|
||||
|
@ -98,14 +95,12 @@
|
|||
if (this.mode === 'horizontal') return;
|
||||
const opened = this.opened;
|
||||
if (this.accordion) {
|
||||
// todo while
|
||||
this.$parent.$children.forEach(item => {
|
||||
this.parent.$children.forEach(item => {
|
||||
if (item.$options.name === 'Submenu') item.opened = false;
|
||||
});
|
||||
}
|
||||
this.opened = !opened;
|
||||
// todo while
|
||||
this.$parent.updateOpenKeys(this.name);
|
||||
this.parent.updateOpenKeys(this.name);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
@ -198,7 +198,7 @@
|
|||
|
||||
let showHead = true;
|
||||
|
||||
if (this.$slots.head === undefined && !this.title) {
|
||||
if (this.$slots.header === undefined && !this.title) {
|
||||
showHead = false;
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { oneOf, findComponentsDownward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-radio-group';
|
||||
|
@ -34,7 +34,8 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
currentValue: this.value
|
||||
currentValue: this.value,
|
||||
childrens: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -55,10 +56,14 @@
|
|||
methods: {
|
||||
updateValue () {
|
||||
const value = this.value;
|
||||
this.$children.forEach((child) => {
|
||||
child.currentValue = value == child.label;
|
||||
child.group = true;
|
||||
});
|
||||
this.childrens = findComponentsDownward(this, 'Radio');
|
||||
|
||||
if (this.childrens) {
|
||||
this.childrens.forEach(child => {
|
||||
child.currentValue = value == child.label;
|
||||
child.group = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
change (data) {
|
||||
this.currentValue = data.value;
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
</label>
|
||||
</template>
|
||||
<script>
|
||||
import { findComponentUpward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-radio';
|
||||
|
@ -35,7 +36,8 @@
|
|||
data () {
|
||||
return {
|
||||
currentValue: this.value,
|
||||
group: false
|
||||
group: false,
|
||||
parent: findComponentUpward(this, 'RadioGroup')
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -66,8 +68,7 @@
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
// todo 使用 while向上查找
|
||||
if (this.$parent && this.$parent.$options.name === 'RadioGroup') this.group = true;
|
||||
if (this.parent) this.group = true;
|
||||
if (!this.group) {
|
||||
this.updateValue();
|
||||
}
|
||||
|
@ -83,7 +84,7 @@
|
|||
this.$emit('input', checked);
|
||||
|
||||
if (this.group && this.label) {
|
||||
this.$parent.change({
|
||||
this.parent.change({
|
||||
value: this.label,
|
||||
checked: this.value
|
||||
});
|
||||
|
|
|
@ -52,36 +52,32 @@
|
|||
const template = this.column.render(this.row, this.column, this.index);
|
||||
const cell = document.createElement('div');
|
||||
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 = '';
|
||||
let methods = {};
|
||||
Object.keys($parent).forEach(key => {
|
||||
const func = $parent[`${key}`];
|
||||
const func = $parent[key];
|
||||
if (typeof(func) === 'function' && func.name === 'boundFn') {
|
||||
methods[`${key}`] = func;
|
||||
methods[key] = func;
|
||||
}
|
||||
});
|
||||
const res = Vue.compile(cell.outerHTML);
|
||||
// todo 临时解决方案
|
||||
const component = new Vue({
|
||||
render: res.render,
|
||||
staticRenderFns: res.staticRenderFns,
|
||||
methods: methods
|
||||
methods: methods,
|
||||
data () {
|
||||
return $parent._data;
|
||||
}
|
||||
});
|
||||
|
||||
const Cell = component.$mount();
|
||||
this.$refs.cell.appendChild(Cell.$el);
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
this.$parent.$parent.toggleSelect(this.index);
|
||||
|
|
|
@ -173,7 +173,8 @@
|
|||
bodyHeight: 0,
|
||||
bodyRealHeight: 0,
|
||||
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: {
|
||||
|
@ -357,16 +358,16 @@
|
|||
}
|
||||
}
|
||||
this.objData[_index]._isHighlight = true;
|
||||
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
|
||||
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData);
|
||||
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.cloneData[oldIndex]));
|
||||
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.cloneData[_index])), oldData);
|
||||
},
|
||||
clickCurrentRow (_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) {
|
||||
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 () {
|
||||
let selectionIndexes = [];
|
||||
|
@ -663,6 +664,10 @@
|
|||
this.objData = this.makeObjData();
|
||||
this.rebuildData = this.makeDataWithSortAndFilter();
|
||||
this.handleResize();
|
||||
// here will trigger before clickCurrentRow, so use async
|
||||
setTimeout(() => {
|
||||
this.cloneData = deepCopy(this.data);
|
||||
}, 0);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
|
|
@ -44,14 +44,5 @@
|
|||
this.$emit('on-query-clear');
|
||||
}
|
||||
}
|
||||
// todo 事件
|
||||
// events: {
|
||||
// 'on-form-blur' () {
|
||||
// return false;
|
||||
// },
|
||||
// 'on-form-change' () {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -67,8 +67,8 @@
|
|||
return cloned;
|
||||
}
|
||||
|
||||
const vNodes = this.$slots.default;
|
||||
const clonedVNodes = vNodes.map(vnode => cloneVNode(vnode));
|
||||
const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
|
||||
const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
|
||||
|
||||
return createElement('div', {
|
||||
'class': this.classes
|
||||
|
@ -120,7 +120,7 @@
|
|||
on: {
|
||||
'on-checked-keys-change': this.handleRightCheckedKeysChange
|
||||
}
|
||||
}, clonedVNodes),
|
||||
}, clonedVNodes)
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
|
@ -58,6 +58,14 @@
|
|||
.@{input-prefix-cls}-group{
|
||||
.input-group-error;
|
||||
}
|
||||
.@{transfer-prefix-cls} {
|
||||
.@{input-prefix-cls} {
|
||||
.input;
|
||||
&-icon{
|
||||
color: @subsidiary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{form-item-prefix-cls}-validating{
|
||||
.@{input-prefix-cls}{
|
||||
|
|
|
@ -185,9 +185,9 @@ function findComponentUpward (content, componentName, componentNames) {
|
|||
}
|
||||
export {findComponentUpward};
|
||||
|
||||
// Find components downward
|
||||
// Find component downward
|
||||
function findComponentDownward (content, componentName) {
|
||||
let childrens = content.$children;
|
||||
const childrens = content.$children;
|
||||
let children = null;
|
||||
|
||||
if (childrens.length) {
|
||||
|
@ -212,4 +212,24 @@ function findComponentDownward (content, componentName) {
|
|||
}
|
||||
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};
|
Loading…
Add table
Reference in a new issue