96db9287 by 任超

style:路由跳转

1 parent 0f132bd5
<template>
<el-image-viewer
:on-close="closeViewer"
:url-list="urlList">
<el-image-viewer :on-close="closeViewer" :url-list="urlList">
</el-image-viewer>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer,
},
props: {
urlList: {
type: Array,
default: function () {
return []
},
},
},
data () {
return {
wrapperElem: null,
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer,
},
props: {
urlList: {
type: Array,
default: function () {
return []
}
}
},
data () {
return {
wrapperElem: null
}
},
mounted () {
this.$nextTick(() => {
let wrapper = document.getElementsByClassName(
'el-image-viewer__actions__inner'
)
let downImg = document.createElement('i')
downImg.setAttribute('class', 'el-icon-download')
wrapper[0].appendChild(downImg)
if (wrapper.length > 0) {
this.wrapperElem = wrapper[0]
this.wrapperElem.addEventListener('click', this.hideCusBtn)
}
})
},
methods: {
closeViewer () {
this.$emit('close-viewer')
},
mounted () {
this.$nextTick(() => {
let wrapper = document.getElementsByClassName(
'el-image-viewer__actions__inner'
)
let downImg = document.createElement('i')
downImg.setAttribute('class', 'el-icon-download')
wrapper[0].appendChild(downImg)
if (wrapper.length > 0) {
this.wrapperElem = wrapper[0]
this.wrapperElem.addEventListener('click', this.hideCusBtn)
}
})
hideCusBtn (e) {
let className = e.target.className
if (className === 'el-icon-download') {
let imgUrl = document.getElementsByClassName(
'el-image-viewer__canvas'
)[0].children[0].src
this.downloadImage(imgUrl)
}
},
methods: {
closeViewer () {
this.$emit('close-viewer')
},
hideCusBtn (e) {
let className = e.target.className
if (className === 'el-icon-download') {
let imgUrl = document.getElementsByClassName(
'el-image-viewer__canvas'
)[0].children[0].src
this.downloadImage(imgUrl)
}
},
downloadImage (imgUrl) {
let tmpArr = imgUrl.split('/')
let fileName = tmpArr[tmpArr.length - 1]
window.URL = window.URL || window.webkitURL
let xhr = new XMLHttpRequest()
xhr.open('get', imgUrl, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
let blob = this.response
let fileUrl = window.URL.createObjectURL(blob)
let a = document.createElement('a')
; (document.body || document.documentElement).appendChild(a)
a.href = fileUrl
if ('download' in a) {
a.download = fileName
} else {
a.setAttribute('download', fileName)
}
a.target = '_self'
a.click()
a.remove()
downloadImage (imgUrl) {
let tmpArr = imgUrl.split('/')
let fileName = tmpArr[tmpArr.length - 1]
window.URL = window.URL || window.webkitURL
let xhr = new XMLHttpRequest()
xhr.open('get', imgUrl, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
let blob = this.response
let fileUrl = window.URL.createObjectURL(blob)
let a = document.createElement('a')
; (document.body || document.documentElement).appendChild(a)
a.href = fileUrl
if ('download' in a) {
a.download = fileName
} else {
a.setAttribute('download', fileName)
}
a.target = '_self'
a.click()
a.remove()
}
xhr.send()
},
}
xhr.send()
},
}
},
}
</script>
<style lang="scss" scoped>
/deep/ .el-image-viewer__close {
color: #ffffff;
}
/deep/ .el-image-viewer__close {
color: #ffffff;
}
</style>
\ No newline at end of file
......
......@@ -9,7 +9,6 @@
</div>
<svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
</div>
<div class="ls-mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
<component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' />
</div>
......@@ -27,7 +26,7 @@ export default {
data () {
return {
btnShow: false,
title: '提示',
title: '标题',
cancelText: '取消',
confirmText: '确认',
isSync: false,
......
弹窗封装
1.在main.js中引入 import Popup from './components/tanchuang/index'
1.在main.js中引入 import Popup from './components/tanchuang/index'
Vue.prototype.$popup = Popup.install
2.用法以及参数:
this.$popup({
title: '提示', // 弹窗标题
titleStyle:"", //标题存在的位置 center left
width:"", //弹窗的宽度
height:"", //弹窗的高度
editItem: 'ywbl/dbx/aa', // 子组件的路径 相当于你平时img取的路径
formData:this.formData, //父组件传给子组件的参数
btnShow:false,//按钮显隐 false隐藏 true显示
confirmText:"" // 确认按钮的文字
cancelText:"" //取消按钮的文字
cancel: function () {}, //取消事件的回调
confirm: function () {}, //确认事件的回调
iconClass:"",//标题前面icon图标名称
})
this.$popup({
title: '提示', // 弹窗标题
titleStyle:"", //标题存在的位置 center left
editItem: 'ywbl/dbx/aa', // 子组件的路径 相当于你平时img取的路径
formData:this.formData, //父组件传给子组件的参数
cancel: function () {}, //取消事件的回调
confirm: function () {}, //确认事件的回调
iconClass:"",//标题前面icon图标名称
})
3.子组件的方法名字必须统一为 childFn()
4.子组件切记props接收 父组件传参formData
以及在使用结束后传loading状态给父组件
......
......@@ -2,8 +2,8 @@
<div>
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" @open="handleOpen" :active-text-color="variables.menuActiveText"
:collapse-transition="false" mode="vertical">
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
mode="vertical">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
<!-- 菜单全部展示 -->
......@@ -36,17 +36,7 @@ export default {
},
asyncRoutes () {
return asyncRoutes
},
},
methods: {
handleOpen (key, keyPath) {
let that = this
this.permission_routes.forEach(element => {
if (element.path == key) {
that.$router.push({ path: element.redirect })
}
})
}
},
}
}
</script>
......
......@@ -21,15 +21,20 @@ router.beforeEach(async (to, from, next) => {
} else {
const { result: getMenuData } = await getMenuInfo()
const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
console.log(accessRoutes);
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
const routeTo = Cookies.get('routerTo')
if (routeTo) {
next(routeTo)
} else {
next({ ...to, replace: true })
}
}
NProgress.done()
})
router.afterEach(to => {
// 解决刷新页面报404问题
console.log(to.fullPath);
Cookies.set("routerTo", to.fullPath)
NProgress.done()
})
......
......@@ -3,6 +3,8 @@ export default function filterAsyncRouter (routers) {
routers.forEach(item => {
if (!item.children) {
delete item.children
} else {
item.children = filterAsyncRouter(item.children)
}
item.path = JSON.parse(item.metadata).path
if (!item.parentId) {
......@@ -14,14 +16,6 @@ export default function filterAsyncRouter (routers) {
title: item.name,
icon: item.icon
}
if (item.children) {
item.children = filterAsyncRouter(item.children)
if (item.path !== '/') {
item.redirect = item.path + '/' + item.children[0].path
} else {
item.redirect = '/' + item.children[0].path
}
}
})
return routers
}
......