赞
踩
需求:
点击弹出的消息链接,跳转到对应的界面,并触发对应界面的刷新。
1.首先找到弹出层界面的代码:
- <template>
- <j-modal
- :title="title"
- :width="modelStyle.width"
- :visible="visible"
- :bodyStyle ="bodyStyle"
- :switchFullscreen="switchFullscreen"
- @cancel="handleCancel"
- >
- <template slot="footer">
- <a-button key="back" @click="handleCancel">关闭</a-button>
- <a-button v-if="record.openType==='url'" type="primary" @click="toHandle">去处理</a-button>
- </template>
- <a-card class="daily-article" :loading="loading">
- <a-card-meta
- :title="record.titile"
- :description="'发布人:'+record.sender + ' 发布时间: ' + record.sendTime">
- </a-card-meta>
- <a-divider />
- <span v-html="record.msgContent" class="article-content"></span>
- </a-card>
- </j-modal>
- </template>
-
- <script>
- export default {
- name: "SysAnnouncementModal",
- components: {
- },
- data () {
- return {
- title:"通知消息",
- record: {},
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- visible: false,
- switchFullscreen: true,
- loading: false,
- bodyStyle:{
- padding: "0",
- height:(window.innerHeight*0.8)+"px",
- "overflow-y":"auto",
-
- },
- modelStyle:{
- width: '60%',
- style: { top: '20px' },
- fullScreen: false
- }
- }
- },
- inject:['reload'],
- created () {
- },
- methods: {
- detail (record) {
- this.visible = true;
- this.record = record;
- },
- handleCancel () {
- this.visible = false;
- },
- /** 切换全屏显示 */
- handleClickToggleFullScreen() {
- let mode = !this.modelStyle.fullScreen
- if (mode) {
- this.modelStyle.width = '100%'
- this.modelStyle.style.top = '20px'
- } else {
- this.modelStyle.width = '60%'
- this.modelStyle.style.top = '50px'
- }
- this.modelStyle.fullScreen = mode
- },
- toHandle(){
- if(this.record.openType==='url'){
- this.visible = false;
- //链接跳转
- this.$router.push({path: this.record.openPage})
- }
- },
- JumpTo: function(e){
- this.visible = false;
- if(e.target.nodeName === 'A') {
- this.reload();
- this.$router.push('/custom/zz_duty_reason/vue/ZzInconformityItemListList')
- }
- }
- }
- }
- </script>
-
- <style lang="less">
- .announcementCustomModal{
- .ant-modal-header {
- border: none;
- display: inline-block;
- position: absolute;
- z-index: 1;
- right: 56px;
- padding: 0;
- .ant-modal-title{
- .custom-btn{
- width: 56px;
- height: 56px;
- border: none;
- box-shadow: none;
- }
- }
- }
- .daily-article{
- border-bottom: 0;
- }
- }
- </style>
- <style scoped lang="less">
- .daily-article {
- .article-button {
- font-size: 1.2rem !important;
- }
- .ant-card-body {
- padding: 18px !important;
- }
- .ant-card-head {
- padding: 0 1rem;
- }
- .ant-card-meta {
- margin-bottom: 1rem;
- }
- .article-content {
- p {
- word-wrap: break-word;
- word-break: break-all;
- text-overflow: initial;
- white-space: normal;
- font-size: .9rem !important;
- margin-bottom: .8rem;
- }
- }
- }
- </style>
主要看v-html这一块:
<span v-html="record.msgContent" class="article-content"></span>
后台返回的信息为:
sysUtil.sendMsgToResp(entity.getResponsibleDepartment(),"您收到一条'不符合事项报告',报告编号为:<a>"+zzInconformityItem.getReportNo() +"</a>");可以
可以看到返回的消息带a标签,之后要根据a标签的内容去跳转页面。因此需要在前端代码页加上一个动作:
<span v-html="record.msgContent" class="article-content" @click="JumpTo($event)"></span>
这个@click即表示要点击触发的动作。
JumpTo: function(e){ this.visible = false;//关闭当前弹出层 if(e.target.nodeName === 'A') { this.reload();//刷新对应页面 this.$router.push('/custom/zz_duty_reason/vue/ZzInconformityItemListList')//页面跳转 } }
至此已经实现页面跳转和当前弹出层的关闭。还差一个刷新对应的页面。
2.App.Vue中的代码增加:
- <template>
- <a-config-provider :locale="locale">
- <div id="app" v-if="isRouterAlive">
- <router-view/>
- </div>
- </a-config-provider>
- </template>
- <script>
- import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
- import enquireScreen from '@/utils/device'
-
- export default {
- data () {
- return {
- locale: zhCN,
- isRouterAlive: true
- }
- },
- provide() {
- return {
- reload: this.reload
- }
- },
- created () {
- let that = this
- enquireScreen(deviceType => {
- // tablet
- if (deviceType === 0) {
- that.$store.commit('TOGGLE_DEVICE', 'mobile')
- that.$store.dispatch('setSidebar', false)
- }
- // mobile
- else if (deviceType === 1) {
- that.$store.commit('TOGGLE_DEVICE', 'mobile')
- that.$store.dispatch('setSidebar', false)
- }
- else {
- that.$store.commit('TOGGLE_DEVICE', 'desktop')
- that.$store.dispatch('setSidebar', true)
- }
-
- })
- },
- methods: {
- reload() {
- this.isRouterAlive = false
- this.$nextTick(() => {
- this.isRouterAlive = true
- })
- }
- }
- }
- </script>
- <style>
- #app {
- height: 100%;
- }
- </style>
3.在对应界面加上:
这些代码加载消息弹出层本界面,而不是对应的被跳转的页面。
参考:
vue router跳转页面后刷新 跳转后的页面_曾令胜的博客-CSDN博客_vue 刷新跳转后的页面
vue在v-html中绑定事件_fangdengfu123的博客-CSDN博客_v-html 事件
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。