update Vue

This commit is contained in:
梁灏 2018-03-13 18:37:16 +08:00
parent 5ddf1bcf4f
commit 444907c4ca
5 changed files with 60 additions and 107 deletions

View file

@ -1,11 +1,14 @@
<style lang="less"> <style lang="less">
@import "../src/styles/index.less"; @import "../src/styles/index.less";
</style> </style>
<style scoped> <style lang="less" scoped>
nav { margin-bottom: 40px; } nav {
ul { display: flex; flex-wrap: wrap; } margin-bottom: 40px;
li { display: inline-block; }
li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } ul { display: flex; flex-wrap: wrap; }
li { display: inline-block; }
li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
}
.container{ padding: 10px 40px 0; } .container{ padding: 10px 40px 0; }
.v-link-active { color: #bbb; } .v-link-active { color: #bbb; }
</style> </style>

View file

@ -1,97 +1,46 @@
<template> <template>
<div> <Menu active-name="1-2" :open-names="['1']">
<Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr"> <Submenu name="1">
<Menu-item name="1">
<Icon type="ios-paper"></Icon>
一级1
</Menu-item>
<Menu-item name="2">
<Icon type="ios-people"></Icon>
一级2
</Menu-item>
<Submenu name="3">
<template slot="title"> <template slot="title">
<Icon type="ios-people"></Icon> <Icon type="ios-analytics"></Icon>
一级3 Navigation One
</template> </template>
<Menu-item name="3-1">二级1</Menu-item> <MenuGroup title="Item 1">
<Menu-item name="3-2">二级2</Menu-item> <MenuItem name="1-1">Option 1</MenuItem>
<Submenu name="3-3"> <MenuItem name="1-2">Option 2</MenuItem>
<template slot="title"> </MenuGroup>
<Icon type="stats-bars"></Icon> <MenuGroup title="Item 2">
二级3 <MenuItem name="1-3">Option 3</MenuItem>
</template> <MenuItem name="1-4">Option 4</MenuItem>
<Menu-item name="3-3-1">三级1</Menu-item>
<Menu-item name="3-3-2">三级2</Menu-item>
<Submenu name="3-3-3">
<template slot="title">
<Icon type="stats-bars"></Icon>
三级3
</template>
<Menu-item name="3-3-3-1">四级1</Menu-item>
<Menu-item name="3-3-3-2">四级2</Menu-item>
<MenuGroup title="Menu-Group">
<MenuItem name="3-3-3-3-1">
<Icon type="document-text"></Icon>
Group-item1
</MenuItem>
<MenuItem name="3-3-3-3-2">
<Icon type="chatbubbles"></Icon>
Group-item2
</MenuItem>
</MenuGroup> </MenuGroup>
</Submenu> </Submenu>
<Submenu name="3-3-4"> <Submenu name="2">
<template slot="title"> <template slot="title">
<Icon type="stats-bars"></Icon> <Icon type="ios-filing"></Icon>
三级4 Navigation Two
</template> </template>
<Menu-item name="3-3-4-1">四级1</Menu-item> <MenuItem name="2-1">Option 5</MenuItem>
<Menu-item name="3-3-4-2">四级2</Menu-item> <MenuItem name="2-2">Option 6</MenuItem>
<Submenu name="3">
<template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem>
<MenuItem name="3-2">Option 8</MenuItem>
</Submenu> </Submenu>
</Submenu> </Submenu>
<Submenu name="3-4"> <Submenu name="4">
<template slot="title"> <template slot="title">
<Icon type="stats-bars"></Icon> <Icon type="ios-gear"></Icon>
二级4 Navigation Three
</template> </template>
<Menu-item name="3-4-1">三级1</Menu-item> <MenuItem name="4-1">Option 9</MenuItem>
<Menu-item name="3-4-2">三级2</Menu-item> <MenuItem name="4-2">Option 10</MenuItem>
<MenuItem name="4-3">Option 11</MenuItem>
<MenuItem name="4-4">Option 12</MenuItem>
</Submenu> </Submenu>
</Submenu>
<Menu-item name="4">
<Icon type="settings"></Icon>
一级4
</Menu-item>
</Menu> </Menu>
<br>
<p>切换主题</p>
<Radio-group v-model="theme1">
<Radio label="light"></Radio>
<Radio label="dark"></Radio>
<Radio label="primary"></Radio>
</Radio-group>
<Input v-model="value4" icon="ios-clock-outline" placeholder="请输入..." style="width: 200px"></Input>
</div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
theme1: 'dark',
value4: '',
openArr: ['3', '3-3', '3-3-3']
};
},
methods: {
handleSelect (name) {
// console.log(name);
return name;
},
handleOpen (openArr) {
// console.log(openArr);
return openArr;
} }
}
};
</script> </script>

14
package-lock.json generated
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "2.10.0", "version": "2.10.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -14025,9 +14025,9 @@
"dev": true "dev": true
}, },
"vue": { "vue": {
"version": "2.5.13", "version": "2.5.15",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.15.tgz",
"integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw==", "integrity": "sha512-uUcDI147VCQYA/9AqoEECddWdTQgrhnwAd6KDsl0pF1hiLpxqaYqIgArhnegU+QZ18DQrKvZNcR3x2QM1iaroQ==",
"dev": true "dev": true
}, },
"vue-hot-reload-api": { "vue-hot-reload-api": {
@ -14258,9 +14258,9 @@
} }
}, },
"vue-template-compiler": { "vue-template-compiler": {
"version": "2.5.13", "version": "2.5.15",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.13.tgz", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.15.tgz",
"integrity": "sha512-15HWSgIxrGUcV0v7QRen2Y3fQsbgxXwMvjT/5XKMO0ANmaCcNh7y2OeIDTAuSGeosjb9+E1Pn2PHZ61VQWEgBQ==", "integrity": "sha512-v3GRVovW8fWO01SAJ+1MbdzbCN+hVBusoqUOBE5FR9dVMGo3p/WDO2gRS/+gEgAALtL7i5pxi+V2l6EauM3XDA==",
"dev": true, "dev": true,
"requires": { "requires": {
"de-indent": "1.0.2", "de-indent": "1.0.2",

View file

@ -99,13 +99,13 @@
"sinon-chai": "^3.0.0", "sinon-chai": "^3.0.0",
"style-loader": "^0.20.2", "style-loader": "^0.20.2",
"url-loader": "^1.0.1", "url-loader": "^1.0.1",
"vue": "^2.5.13", "vue": "^2.5.15",
"vue-hot-reload-api": "^2.3.0", "vue-hot-reload-api": "^2.3.0",
"vue-html-loader": "^1.2.4", "vue-html-loader": "^1.2.4",
"vue-loader": "^14.2.1", "vue-loader": "^14.2.1",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-style-loader": "^4.0.2", "vue-style-loader": "^4.0.2",
"vue-template-compiler": "^2.5.13", "vue-template-compiler": "^2.5.15",
"webpack": "^3.11.0", "webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1", "webpack-dev-server": "^2.11.1",
"webpack-merge": "^3.0.0" "webpack-merge": "^3.0.0"

View file

@ -220,9 +220,10 @@ export function findComponentsDownward (context, componentName) {
// Find components upward // Find components upward
export function findComponentsUpward (context, componentName) { export function findComponentsUpward (context, componentName) {
let parents = []; let parents = [];
if (context.$parent) { const parent = context.$parent;
if (context.$parent.$options.name === componentName) parents.push(context.$parent); if (parent) {
return parents.concat(findComponentsUpward(context.$parent, componentName)); if (parent.$options.name === componentName) parents.push(parent);
return parents.concat(findComponentsUpward(parent, componentName));
} else { } else {
return []; return [];
} }