各路道友们,在使用this.$notify 的时候,其中一个页面出现位置偏移的情况,在我本地的电脑上,提示信息的位置是正确的,右上角,但是在测试的电脑上,位置就偏移了,展示不全。但是其他页面的类似提示信息位置是正常的
改用this.$message依然在测试的电脑上展示不全
给$message设置offset属性依然展示不全,现在看来,不是$message的问题,应该是其他地方的问题,也许是其他地方的样式影响了,但是在我本地电脑位置就正确,还有可能是什么问题影响的呢,迷惑迷惑
代码如下
//html代码
<template>
<div class="app-container calendar-list-container">
<basic-container>
<template>
//这是一个tab切换的页面
//现在测试出现的问题是第二个tab密码管理页面的提示信息位置不正确
<el-tabs v-model="activeTab" @tab-click="switchTab">
<el-tab-pane label='信息管理' name='userManager'>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form :model="ruleForm1"
:rules="rules1"
ref="ruleForm1"
label-width="100px"
v-if="switchStatus==='userManager'"
class="demo-ruleForm">
<el-form-item label="用户名"
prop="username">
<el-input type="text"
v-model="ruleForm1.username"
disabled></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="ruleForm1.phone" placeholder="验证码登录使用"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="/file/upload"
:headers="headers"
:show-file-list="false"
:on-success="handleAvatarSuccess">
<img id="avatar" v-if="ruleForm1.avatar" :src="avatarUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<!-- <el-form-item label="社交登录"
prop="social">
<a href="#"
style="color: blue"
@click="handleClick('wechat')">绑定微信</a>
</el-form-item> -->
<el-form-item>
<el-button type="primary"
@click="submitForm('ruleForm1')">提交
</el-button>
<el-button @click="resetForm('ruleForm1')">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</el-tab-pane>
//这个页面写了$notify
//我本地电脑的显示位置是正常的,但是测试那边是不正常的,位置有偏移
<el-tab-pane label='密码管理' name='passwordManager'>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form :model="ruleForm2"
:rules="rules2"
ref="ruleForm2"
label-width="100px"
v-if="switchStatus==='passwordManager'"
class="demo-ruleForm">
<el-form-item label="原密码"
prop="password">
<el-input type="password"
v-model="ruleForm2.password"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="newpassword1">
<el-input type="password"
v-model="ruleForm2.newpassword1"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码"
prop="newpassword2">
<el-input type="password"
v-model="ruleForm2.newpassword2"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="submitForm('ruleForm2')">提交
</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</template>
</basic-container>
</div>
</template>
//js代码
//两个tab切换的提交调用了同一个方法,只是传进去的form数据不一样,但是 密码管理 的提示信息位置就跑偏了
submitForm(formName) {
// console.log(formName)
this.$refs[formName].validate(valid => {
if (valid) {
request({
url: '/admin/user/edit',
method: 'put',
data: this.ruleForm2
}).then(response => {
if (response.data.data) {
this.$notify({
title: '成功',
message: '修改成功',
type: 'success',
duration: 2000,
position:top-right,
})
// 修改密码之后强制重新登录
if (this.switchStatus === 'passwordManager') {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
}
} else {
this.$notify({
title: '失败',
message: response.data.msg,
type: 'error',
duration: 2000
})
}
}).catch(() => {
this.$notify({
title: '失败',
message: '修改失败',
type: 'error',
duration: 2000
})
})
} else {
return false
}
})
},
这是测试看到的
这是我本地电脑上的
这是什么原因造成的a