smallchill
7 years ago
parent
35a396c654
commit
51e9429930
15 changed files with 551 additions and 314 deletions
@ -0,0 +1,33 @@ |
||||
import Vue from 'vue' |
||||
import store from './store'; |
||||
Vue.mixin({ |
||||
beforeRouteLeave: function (to, from, next) { |
||||
if (this.$route.meta.keepAlive === true) { |
||||
const result = this.$route.meta.keepAlive === true && store.state.tags.tagList.some(ele => { |
||||
return ele.value === this.$route.fullPath; |
||||
}) |
||||
if (this.$vnode && !result) { |
||||
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) { |
||||
if (this.$vnode.componentOptions) { |
||||
var key = this.$vnode.key == null |
||||
? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') |
||||
: this.$vnode.key; |
||||
var cache = this.$vnode.parent.componentInstance.cache; |
||||
var keys = this.$vnode.parent.componentInstance.keys; |
||||
if (cache[key]) { |
||||
if (keys.length) { |
||||
var index = keys.indexOf(key); |
||||
if (index > -1) { |
||||
keys.splice(index, 1); |
||||
} |
||||
} |
||||
delete cache[key]; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
next(); |
||||
}, |
||||
}); |
||||
@ -1,3 +1,10 @@ |
||||
<template> |
||||
<router-view></router-view> |
||||
<div> |
||||
<keep-alive> |
||||
<router-view class="avue-view" |
||||
v-if="$route.meta.$keepAlive" /> |
||||
</keep-alive> |
||||
<router-view class="avue-view" |
||||
v-if="!$route.meta.$keepAlive" /> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,46 @@ |
||||
<template> |
||||
<div class="affix"> |
||||
<avue-affix id="avue-view"> |
||||
<span class="affix-affix">固定在最顶部</span> |
||||
</avue-affix> |
||||
<div class="affix-line"></div> |
||||
<avue-affix id="avue-view" |
||||
:offset-top="50"> |
||||
<span class="affix-affix">固定在距离顶部 50px 的位置</span> |
||||
</avue-affix> |
||||
<div class="affix-line"></div> |
||||
<avue-affix id="avue-view" |
||||
:offset-top="100"> |
||||
<span class="affix-affix">固定在距离顶部 100px 的位置</span> |
||||
</avue-affix> |
||||
<div class="affix-line"></div> |
||||
<avue-affix id="avue-view" |
||||
:offset-top="150"> |
||||
<span class="affix-affix">固定在距离顶部 150px 的位置</span> |
||||
</avue-affix> |
||||
<div style="height:2000px;"> |
||||
<div style="padding:15px 20px;font-size:18px;">往下拉就会出现图钉</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default {}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.affix { |
||||
position: relative; |
||||
background-color: #fff; |
||||
&-affix { |
||||
display: inline-block; |
||||
color: #fff; |
||||
padding: 10px 30px; |
||||
text-align: center; |
||||
background: rgba(0, 153, 229, 0.9); |
||||
} |
||||
&-line { |
||||
height: 100px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<basic-container> |
||||
<h3>这个页面会被 keep-alive</h3> |
||||
<el-tag>在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</el-tag> |
||||
<br /> <br /> |
||||
<el-tag>同时滚动下拉，返回时还会保持滚动条所在的位置</el-tag> |
||||
<br /> <br /> |
||||
<el-input v-model="value" placeholder="input here"></el-input> |
||||
|
||||
<div style="height:1000px;"></div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
value: "" |
||||
}; |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,59 @@ |
||||
<template> |
||||
<basic-container> |
||||
<h3>点击新增或编辑跳转到新的页面</h3> |
||||
<avue-crud :option="option" |
||||
:data="data"> |
||||
<template slot="menuLeft"> |
||||
<el-button type="primary" |
||||
size="small" |
||||
@click="handleForm()" |
||||
icon="el-icon-plus">add</el-button> |
||||
</template> |
||||
<template slot="menu" |
||||
slot-scope="{row}"> |
||||
<el-button size="small" |
||||
type="text" |
||||
@click="handleForm(row.id)" |
||||
icon="el-icon-edit">edit</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
option: { |
||||
addBtn: false, |
||||
editBtn: false, |
||||
column: [ |
||||
{ |
||||
label: "姓名", |
||||
prop: "name" |
||||
} |
||||
] |
||||
}, |
||||
data: [ |
||||
{ |
||||
id: 1, |
||||
name: "small" |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleForm(id) { |
||||
this.$router.push({ |
||||
path: "/form-detail/index", |
||||
query: { |
||||
id: id |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<basic-container> |
||||
<h3>{{$route.query.id?'编辑':'新增'}}</h3> |
||||
<avue-form :option="option" |
||||
v-model="form"> |
||||
<template slot="menuForm"> |
||||
<el-button icon="el-icon-back" |
||||
@click="handleBack()">返 回</el-button> |
||||
</template> |
||||
</avue-form> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
option: { |
||||
labelWidth: 110, |
||||
column: [ |
||||
{ |
||||
label: "姓名", |
||||
prop: "name" |
||||
} |
||||
] |
||||
} |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleBack() { |
||||
this.$router.$avueRouter.closeTag(); |
||||
this.$router.back(); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
@ -0,0 +1,28 @@ |
||||
<template> |
||||
<div> |
||||
<div style="height:2000px;background-color:#fff;"> |
||||
<div style="padding:15px 20px;font-size:18px;">往下拉就会出现返回菜单</div> |
||||
</div> |
||||
<avue-back-top id="avue-view"></avue-back-top> |
||||
<avue-back-top id="avue-view" |
||||
:height="100" |
||||
:bottom="200"> |
||||
<div class="top">返回顶端</div> |
||||
</avue-back-top> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default {}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.top { |
||||
padding: 10px; |
||||
font-size: 14px; |
||||
background: rgba(0, 153, 229, 0.7); |
||||
color: #fff; |
||||
text-align: center; |
||||
border-radius: 2px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue