well_kk
well_kk
采纳率33.3%
2019-09-10 14:47

提示信息位置偏移 $notify $message 是什么原因造成的

各路道友们,在使用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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

相关推荐