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,110 +1,100 @@ |
||||
<template> |
||||
<div class="avue-contail" |
||||
:class="{'avue--collapse':isCollapse}"> |
||||
<div class="avue-contail" :class="{'avue--collapse':isCollapse}"> |
||||
<div class="avue-header"> |
||||
<!-- 顶部导航栏 --> |
||||
<top /> |
||||
<top/> |
||||
</div> |
||||
|
||||
<div class="avue-layout"> |
||||
<div class="avue-left"> |
||||
<!-- 左侧导航栏 --> |
||||
<sidebar /> |
||||
<sidebar/> |
||||
</div> |
||||
<div class="avue-main"> |
||||
<!-- 顶部标签卡 --> |
||||
<tags /> |
||||
<tags/> |
||||
<!-- 主体视图层 --> |
||||
<el-scrollbar style="height:100%"> |
||||
<div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view"> |
||||
<keep-alive> |
||||
<router-view class="avue-view" |
||||
v-if="$route.meta.keepAlive" /> |
||||
<router-view class="avue-view" v-if="$route.meta.$keepAlive"/> |
||||
</keep-alive> |
||||
<router-view class="avue-view" |
||||
v-if="!$route.meta.keepAlive" /> |
||||
</el-scrollbar> |
||||
|
||||
<router-view class="avue-view" v-if="!$route.meta.$keepAlive"/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- <el-footer class="avue-footer"> |
||||
<img src="/svg/logo.svg" |
||||
alt="" |
||||
class="logo"> |
||||
<p class="copyright">© 2018 Avue designed by smallwei</p> |
||||
</el-footer> --> |
||||
<div class="avue-shade" |
||||
@click="showCollapse"></div> |
||||
<div class="avue-shade" @click="showCollapse"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapGetters } from "vuex"; |
||||
import tags from "./tags"; |
||||
import top from "./top/"; |
||||
import sidebar from "./sidebar/"; |
||||
import admin from "@/util/admin"; |
||||
import { validatenull } from "@/util/validate"; |
||||
import { calcDate } from "@/util/date.js"; |
||||
import { getStore } from "@/util/store.js"; |
||||
export default { |
||||
components: { |
||||
top, |
||||
tags, |
||||
sidebar |
||||
}, |
||||
name: "index", |
||||
data() { |
||||
return { |
||||
//刷新token锁 |
||||
refreshLock: false, |
||||
//刷新token的时间 |
||||
refreshTime: "" |
||||
}; |
||||
}, |
||||
created() { |
||||
//实时检测刷新token |
||||
this.refreshToken(); |
||||
}, |
||||
mounted() { |
||||
this.init(); |
||||
}, |
||||
computed: mapGetters(["isLock", "isCollapse", "website"]), |
||||
props: [], |
||||
methods: { |
||||
showCollapse() { |
||||
this.$store.commit("SET_COLLAPSE"); |
||||
import {mapGetters} from "vuex"; |
||||
import tags from "./tags"; |
||||
import top from "./top/"; |
||||
import sidebar from "./sidebar/"; |
||||
import admin from "@/util/admin"; |
||||
import {validatenull} from "@/util/validate"; |
||||
import {calcDate} from "@/util/date.js"; |
||||
import {getStore} from "@/util/store.js"; |
||||
|
||||
export default { |
||||
components: { |
||||
top, |
||||
tags, |
||||
sidebar |
||||
}, |
||||
// 初始化 |
||||
init() { |
||||
this.$store.commit("SET_SCREEN", admin.getScreen()); |
||||
window.onresize = () => { |
||||
setTimeout(() => { |
||||
this.$store.commit("SET_SCREEN", admin.getScreen()); |
||||
}, 0); |
||||
name: "index", |
||||
data() { |
||||
return { |
||||
//刷新token锁 |
||||
refreshLock: false, |
||||
//刷新token的时间 |
||||
refreshTime: "" |
||||
}; |
||||
this.$store.dispatch("FlowRoutes").then(() => {}); |
||||
}, |
||||
refreshToken() { |
||||
this.refreshTime = setInterval(() => { |
||||
const token = getStore({ |
||||
name: "token", |
||||
debug: true |
||||
created() { |
||||
//实时检测刷新token |
||||
this.refreshToken(); |
||||
}, |
||||
mounted() { |
||||
this.init(); |
||||
}, |
||||
computed: mapGetters(["isLock", "isCollapse", "website"]), |
||||
props: [], |
||||
methods: { |
||||
showCollapse() { |
||||
this.$store.commit("SET_COLLAPSE"); |
||||
}, |
||||
// 初始化 |
||||
init() { |
||||
this.$store.commit("SET_SCREEN", admin.getScreen()); |
||||
window.onresize = () => { |
||||
setTimeout(() => { |
||||
this.$store.commit("SET_SCREEN", admin.getScreen()); |
||||
}, 0); |
||||
}; |
||||
this.$store.dispatch("FlowRoutes").then(() => { |
||||
}); |
||||
const date = calcDate(token.datetime, new Date().getTime()); |
||||
if (validatenull(date)) return; |
||||
if (date.seconds >= this.website.tokenTime && !this.refreshLock) { |
||||
this.refreshLock = true; |
||||
this.$store |
||||
.dispatch("refreshToken") |
||||
.then(() => { |
||||
this.refreshLock = false; |
||||
}) |
||||
.catch(() => { |
||||
this.refreshLock = false; |
||||
}); |
||||
} |
||||
}, 10000); |
||||
}, |
||||
refreshToken() { |
||||
this.refreshTime = setInterval(() => { |
||||
const token = getStore({ |
||||
name: "token", |
||||
debug: true |
||||
}); |
||||
const date = calcDate(token.datetime, new Date().getTime()); |
||||
if (validatenull(date)) return; |
||||
if (date.seconds >= this.website.tokenTime && !this.refreshLock) { |
||||
this.refreshLock = true; |
||||
this.$store |
||||
.dispatch("refreshToken") |
||||
.then(() => { |
||||
this.refreshLock = false; |
||||
}) |
||||
.catch(() => { |
||||
this.refreshLock = false; |
||||
}); |
||||
} |
||||
}, 10000); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
}; |
||||
</script> |
||||
|
||||
@ -1,3 +1,10 @@ |
||||
<template> |
||||
<router-view></router-view> |
||||
</template> |
||||
<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> |
||||
|
||||
@ -1,166 +1,178 @@ |
||||
|
||||
let RouterPlugin = function () { |
||||
this.$router = null; |
||||
this.$store = null; |
||||
this.$router = null; |
||||
this.$store = null; |
||||
|
||||
}; |
||||
RouterPlugin.install = function (vue, router, store, i18n) { |
||||
this.$router = router; |
||||
this.$store = store; |
||||
this.$vue = new vue({ i18n }); |
||||
function isURL(s) { |
||||
return /^http[s]?:\/\/.*/.test(s) |
||||
} |
||||
function objToform(obj) { |
||||
let result = []; |
||||
Object.keys(obj).forEach(ele => { |
||||
result.push(`${ele}=${obj[ele]}`); |
||||
}) |
||||
return result.join('&'); |
||||
} |
||||
this.$router.$avueRouter = { |
||||
//全局配置
|
||||
$website: this.$store.getters.website, |
||||
routerList: [], |
||||
group: '', |
||||
meta: {}, |
||||
safe: this, |
||||
// 设置标题
|
||||
setTitle: (title) => { |
||||
const defaultTitle = this.$vue.$t('title'); |
||||
title = title ? `${title}-${defaultTitle}` : defaultTitle; |
||||
document.title = title; |
||||
}, |
||||
closeTag: (value) => { |
||||
let tag = value || this.$store.getters.tag; |
||||
if (typeof value === 'string') { |
||||
tag = this.$store.getters.tagList.filter(ele => ele.value === value)[0] |
||||
} |
||||
this.$store.commit('DEL_TAG', tag) |
||||
}, |
||||
generateTitle: (title, key) => { |
||||
if (!key) return title; |
||||
const hasKey = this.$vue.$te('route.' + key) |
||||
if (hasKey) { |
||||
// $t :this method from vue-i18n, inject in @/lang/index.js
|
||||
const translatedTitle = this.$vue.$t('route.' + key) |
||||
this.$router = router; |
||||
this.$store = store; |
||||
this.$vue = new vue({i18n}); |
||||
|
||||
return translatedTitle |
||||
} |
||||
return title |
||||
}, |
||||
//处理路由
|
||||
getPath: function (params) { |
||||
let { src } = params; |
||||
let result = src || '/'; |
||||
if (src.includes("http") || src.includes("https")) { |
||||
result = `/myiframe/urlPath?${objToform(params)}`; |
||||
} |
||||
return result; |
||||
}, |
||||
//正则处理路由
|
||||
vaildPath: function (list, path) { |
||||
let result = false; |
||||
list.forEach(ele => { |
||||
if (new RegExp("^" + ele + ".*", "g").test(path)) { |
||||
result = true |
||||
} |
||||
function isURL(s) { |
||||
return /^http[s]?:\/\/.*/.test(s) |
||||
} |
||||
|
||||
function objToform(obj) { |
||||
let result = []; |
||||
Object.keys(obj).forEach(ele => { |
||||
result.push(`${ele}=${obj[ele]}`); |
||||
}) |
||||
return result.join('&'); |
||||
} |
||||
|
||||
this.$router.$avueRouter = { |
||||
//全局配置
|
||||
$website: this.$store.getters.website, |
||||
routerList: [], |
||||
group: '', |
||||
meta: {}, |
||||
safe: this, |
||||
// 设置标题
|
||||
setTitle: (title) => { |
||||
const defaultTitle = this.$vue.$t('title'); |
||||
title = title ? `${title}-${defaultTitle}` : defaultTitle; |
||||
document.title = title; |
||||
}, |
||||
closeTag: (value) => { |
||||
let tag = value || this.$store.getters.tag; |
||||
if (typeof value === 'string') { |
||||
tag = this.$store.getters.tagList.filter(ele => ele.value === value)[0] |
||||
} |
||||
this.$store.commit('DEL_TAG', tag) |
||||
}, |
||||
generateTitle: (title, key) => { |
||||
if (!key) return title; |
||||
const hasKey = this.$vue.$te('route.' + key) |
||||
if (hasKey) { |
||||
// $t :this method from vue-i18n, inject in @/lang/index.js
|
||||
const translatedTitle = this.$vue.$t('route.' + key) |
||||
|
||||
return translatedTitle |
||||
} |
||||
return title |
||||
}, |
||||
//处理路由
|
||||
getPath: function (params) { |
||||
let {src} = params; |
||||
let result = src || '/'; |
||||
if (src.includes("http") || src.includes("https")) { |
||||
result = `/myiframe/urlPath?${objToform(params)}`; |
||||
} |
||||
return result; |
||||
}, |
||||
//正则处理路由
|
||||
vaildPath: function (list, path) { |
||||
let result = false; |
||||
list.forEach(ele => { |
||||
if (new RegExp("^" + ele + ".*", "g").test(path)) { |
||||
result = true |
||||
} |
||||
|
||||
}) |
||||
return result; |
||||
}, |
||||
//设置路由值
|
||||
getValue: function (route) { |
||||
let value = ""; |
||||
if (route.query.src) { |
||||
value = route.query.src; |
||||
}) |
||||
return result; |
||||
}, |
||||
//设置路由值
|
||||
getValue: function (route) { |
||||
let value = ""; |
||||
if (route.query.src) { |
||||
value = route.query.src; |
||||
} else { |
||||
value = route.path; |
||||
} |
||||
return value; |
||||
}, |
||||
//动态路由
|
||||
formatRoutes: function (aMenu = [], first) { |
||||
const aRouter = [] |
||||
const propsConfig = this.$website.menu.props; |
||||
const propsDefault = { |
||||
label: propsConfig.label || 'name', |
||||
path: propsConfig.path || 'path', |
||||
icon: propsConfig.icon || 'icon', |
||||
children: propsConfig.children || 'children', |
||||
meta: propsConfig.meta || 'meta', |
||||
} |
||||
if (aMenu.length === 0) return; |
||||
for (let i = 0; i < aMenu.length; i++) { |
||||
const oMenu = aMenu[i]; |
||||
if (this.routerList.includes(oMenu[propsDefault.path])) return; |
||||
let path = (() => { |
||||
if (first) { |
||||
return oMenu[propsDefault.path].replace('/index', '') |
||||
} else { |
||||
value = route.path; |
||||
} |
||||
return value; |
||||
}, |
||||
//动态路由
|
||||
formatRoutes: function (aMenu = [], first) { |
||||
const aRouter = [] |
||||
const propsConfig = this.$website.menu.props; |
||||
const propsDefault = { |
||||
label: propsConfig.label || 'name', |
||||
path: propsConfig.path || 'path', |
||||
icon: propsConfig.icon || 'icon', |
||||
children: propsConfig.children || 'children', |
||||
meta: propsConfig.meta || 'meta', |
||||
return oMenu[propsDefault.path] |
||||
} |
||||
if (aMenu.length === 0) return; |
||||
for (let i = 0; i < aMenu.length; i++) { |
||||
const oMenu = aMenu[i]; |
||||
if (this.routerList.includes(oMenu[propsDefault.path])) return; |
||||
const path = (() => { |
||||
if (first) { |
||||
return oMenu[propsDefault.path].replace('/index', '') |
||||
} else { |
||||
return oMenu[propsDefault.path] |
||||
} |
||||
})(), |
||||
//特殊处理组件
|
||||
component = 'views' + oMenu.path, |
||||
name = oMenu[propsDefault.label], |
||||
icon = oMenu[propsDefault.icon], |
||||
children = oMenu[propsDefault.children], |
||||
meta = oMenu[propsDefault.meta] || {}; |
||||
})(), |
||||
//特殊处理组件
|
||||
component = 'views' + oMenu.path, |
||||
name = oMenu[propsDefault.label], |
||||
icon = oMenu[propsDefault.icon], |
||||
children = oMenu[propsDefault.children], |
||||
meta = oMenu[propsDefault.meta] || {}; |
||||
|
||||
const isChild = children.length !== 0; |
||||
const oRouter = { |
||||
path: path, |
||||
component(resolve) { |
||||
// 判断是否为首路由
|
||||
if (first) { |
||||
require(['../page/index'], resolve) |
||||
return |
||||
// 判断是否为多层路由
|
||||
} else if (isChild && !first) { |
||||
require(['../page/index/layout'], resolve) |
||||
return |
||||
// 判断是否为最终的页面视图
|
||||
} else { |
||||
require([`../${component}.vue`], resolve) |
||||
} |
||||
}, |
||||
name: name, |
||||
icon: icon, |
||||
meta: meta, |
||||
redirect: (() => { |
||||
if (!isChild && first && !isURL(path)) return `${path}/index` |
||||
else return ''; |
||||
})(), |
||||
// 处理是否为一级路由
|
||||
children: !isChild ? (() => { |
||||
if (first) { |
||||
if (!isURL(path)) oMenu[propsDefault.path] = `${path}/index`; |
||||
return [{ |
||||
component(resolve) { require([`../${component}.vue`], resolve) }, |
||||
icon: icon, |
||||
name: name, |
||||
meta: meta, |
||||
path: 'index' |
||||
}] |
||||
} |
||||
return []; |
||||
})() : (() => { |
||||
return this.formatRoutes(children, false) |
||||
})() |
||||
} |
||||
aRouter.push(oRouter) |
||||
meta = Object.assign(meta, (function () { |
||||
if (meta.keepAlive === true) { |
||||
return { |
||||
$keepAlive: true |
||||
} |
||||
} |
||||
})()); |
||||
|
||||
const isChild = children.length !== 0; |
||||
const oRouter = { |
||||
path: path, |
||||
component(resolve) { |
||||
// 判断是否为首路由
|
||||
if (first) { |
||||
if (!this.routerList.includes(aRouter[0][propsDefault.path])) { |
||||
this.safe.$router.addRoutes(aRouter) |
||||
this.routerList.push(aRouter[0][propsDefault.path]) |
||||
} |
||||
require(['../page/index'], resolve) |
||||
return |
||||
// 判断是否为多层路由
|
||||
} else if (isChild && !first) { |
||||
require(['../page/index/layout'], resolve) |
||||
return |
||||
// 判断是否为最终的页面视图
|
||||
} else { |
||||
return aRouter |
||||
require([`../${component}.vue`], resolve) |
||||
} |
||||
|
||||
}, |
||||
name: name, |
||||
icon: icon, |
||||
meta: meta, |
||||
redirect: (() => { |
||||
if (!isChild && first && !isURL(path)) return `${path}/index` |
||||
else return ''; |
||||
})(), |
||||
// 处理是否为一级路由
|
||||
children: !isChild ? (() => { |
||||
if (first) { |
||||
if (!isURL(path)) oMenu[propsDefault.path] = `${path}/index`; |
||||
return [{ |
||||
component(resolve) { |
||||
require([`../${component}.vue`], resolve) |
||||
}, |
||||
icon: icon, |
||||
name: name, |
||||
meta: meta, |
||||
path: 'index' |
||||
}] |
||||
} |
||||
return []; |
||||
})() : (() => { |
||||
return this.formatRoutes(children, false) |
||||
})() |
||||
} |
||||
aRouter.push(oRouter) |
||||
} |
||||
if (first) { |
||||
if (!this.routerList.includes(aRouter[0][propsDefault.path])) { |
||||
this.safe.$router.addRoutes(aRouter) |
||||
this.routerList.push(aRouter[0][propsDefault.path]) |
||||
} |
||||
} else { |
||||
return aRouter |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
export default RouterPlugin; |
||||
|
||||
@ -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