<a>标签的取消跳转和恢复

一、取消<a>的跳转,可以绑定click事件,在click里return false;(此时就算a有一个href跳转地址也没用了)

$("#previewbtn").click(function(){return false});

二、恢复<a>的跳转,可以取消绑定的click,这时<a>就可以跳转到指定链接了。

 $("#previewbtn").unbind('click'); 

<!-- 修改后的模板结构 --> <template> <div class="form-container"> <div class="profile-wrapper"> <!-- 标题部分 --> <el-card class="profile-header"> <h2 class="header-title">个人资料中心</h2> </el-card> <!-- 主体内容 --> <el-card class="profile-body"> <div class="info-grid"> <!-- 左侧信息列 --> <div class="info-section"> <!-- 每个信息项使用统一样式 --> <div v-for="(item, index) in infoItems" :key="index" class="info-item"> <span class="info-label">{{ item.label }}</span> <span class="info-value">{{ item.value }}</span> </div> <el-button type="primary" class="edit-btn" @click="toEditInfo"> <i class="el-icon-edit"></i> 编辑资料 </el-button> </div> <!-- <!– 右侧头像区 –>--> <!-- <div class="avatar-section">--> <!-- <el-avatar :size="200" :src="require('../../assets/info.jpg')"></el-avatar>--> <!-- <div class="upload-tip">点击上传新头像</div>--> <!-- </div>--> </div> </el-card> </div> </div> </template> <script> export default { name: "MyDetail", // 数据部分优化 data() { return { infoItems: [ { label: '昵称', value: this.passenger.nickName }, { label: '姓名', value: this.passenger.passengerName }, { label: '所在城市', value: this.passenger.city }, { label: '身份证号', value: this.passenger.cardId }, { label: '手机号码', value: this.passenger.phone }, { label: '电子邮箱', value: this.passenger.email }, { label: '社交账号', value: this.passenger.wechat } ] } }, created() { const _this = this this.passenger = JSON.parse(sessionStorage.getItem('passenger')) }, methods: { toEditInfo() { this.$router.replace('/passenger/editInfo') }, getFiles: function(event) { var files = event.target.files; for (var i = 0; i < files.length; i++) { ths.files.push(files[i]); } }, upload: function() { let formData = new FormData(); for (let i = 0; i < this.files.length; i++) { formData.append('files', this.files[i]); } this.$axios.post("/upload", formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(function(response) { // 请求成功 }, function(err) { }) } } } </script> <style scoped> .form-container { padding: 30px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; .profile-wrapper { max-width: 1200px; margin: 0 auto; .profile-header { margin-bottom: 20px; background: rgba(255,255,255,0.9); border-radius: 12px; .header-title { color: #2c3e50; font-size: 24px; text-align: center; margin: 0; padding: 20px 0; } } .profile-body { background: rgba(255,255,255,0.95); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); .info-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 30px; .info-section { .info-item { padding: 18px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; transition: background 0.3s; &:hover { background: #f8f9fa; } .info-label { width: 150px; color: #7f8c8d; font-weight: 500; font-size: 16px; } .info-value { flex: 1; color: #2c3e50; font-size: 16px; font-weight: 600; } } } .avatar-section { text-align: center; padding: 30px; .el-avatar { border: 3px solid #e0e6ed; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 20px; } .upload-tip { color: #909399; font-size: 14px; margin-top: 10px; } } } .edit-btn { margin-top: 30px; width: 100%; padding: 15px; font-size: 16px; transition: transform 0.2s; &:hover { transform: translateY(-2px); } } } } } </style> 帮我把这些字段直接展示出来,但是不能编辑,点击编辑按钮后,进入编辑页面,把之前头像的图片设置为页面背景
最新发布
04-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值