【vue】项目开发常见问题目录

原创已于 2025-01-03 14:48:41 修改

· 463 阅读

0 ·

版权

文章标签：

#vue.js #javascript #前端

于 2023-06-25 17:00:51 首次发布

【Vue2】专栏收录该内容

17 篇文章

订阅专栏

问题目录（持续更新！）

0，页面初始化

<template>
    <div class="book">

    </div>
</template>

<script>
    export default {
        name: "book",
        data(){
            return{

            }
        },
        mounted() {

        },
        methods:{

        }
    }
</script>

<style scoped lang="less">
    .book{
        
    }
</style>

1， v-if 与 v-for 同时使用报错的问题

1.当在一个标签中,同时出现v-for和v-if的时候,会极大的消耗性能,并且vue会报错
2.使用v-for的时候，key缺少也会报错

解决方法：多加一个层级标签

 <div v-for="(item, index) in boxlist" :key="index">
     <div class="nevbox" v-if="index < 3">
     </div>
  </div>

2，页面传参注意事项

params 传参注意事项，当页面刷新了是获取不到参数值

//前提：这个组件对应的路由配置
{
　　//组件路径
  path: '/admin',
　　//组件别名
  name: 'admin',
　　//组件名
  component: Admin,
}

//传参
 this.$router.push({name:"Admin",params:{ nevId: type}});
//接收参
let nevId = this.$route.params.nevId;

query 传参，用 query 传参可以解决页面刷新参数消失问题

//传参
this.$router.push({name:"/admin",query:{nevId：type, name：item.name}})
//或者
this.$router.push(`/admin?nevId=${type}&orderId=${id}`);
//接收参
let nevId = this.$route.query.nevId;

3， Vue路由this.$router.push转跳同一个页面不刷新

可以在父组件中对标签(路由视图)绑定一个key，来给每个节点做一个唯一标识，这样就会更新DOM

<el-container>
      <header></header>
    <el-main >
        <router-view :key="$route.fullPath"></router-view>
    </el-main>
      <footer></footer>
</el-container>

4，NavigationDuplicated: Avoided redundant navigation to current location(路由跳转到当前页面报错)

不影响使用，但属于警告
只需要在你的router.js也就是路由配置文件下,添加上即可
注意Router是你实例化的路由对象，版本不同有可能是VueRouter

//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

5，vue富文本图片超出

将拿到的富文本做一下处理

this.richText = res.data.data.replace(/\<img/gi,`<img style="width:100%;" mode="widthFix"`);

6，css背景图片变量使用

 background-image: url("~@/assets/img/ic_image7.png");
 background-size: 100% 100%;

7，css中数值计算

 height:  calc(100vh - 78px);

8，行内样式多个动态变量书写，逗号隔开

keybottonm和Keydibu是data中设置的变量

:style="{'padding-bottom':keybottonm+'rpx','bottom':Keydibu+'px'}"

9，监听游览器最大化和最小化

  onLoad(){
     window.onresize = function () {
            // 浏览器变化时todo
            that.isnum = that.isFullScreen();
            //全屏
            if (that.isnum) {
              history.go(0);
            } else {
            	//如果不是最大化，且开关开启的情况下执行代码
              if (that.isbig == 1) {
                
                return;
              } else {
                history.go(0);
              }
            }
     };
	},
  methods: {
    isFullScreen() {
      console.log(window.outerHeight, screen.availHeight);
      if (window.outerHeight === screen.availHeight) {
        if (window.outerWidth === screen.availWidth) {
          return true; // 全屏
        }
      }
      return false; // 不是全屏
    },
  }

10. 刷新当前页面会弹出提示框怎样将这个提示框去掉

window.onbeforeunload = function() {
    var n = window.event.screenX - window.screenLeft;
    var b = n > document.documentElement.scrollWidth-20;
    if(b && window.event.clientY < 0 || window.event.altKey){

    }else{
        location.href=location.href;  //当前页面等于当前页面
    }
 }

11. element 的轮播图左右箭头自定义

第一步：ref=“cardShow”，定义一个ref

<div class="blockall">
      <el-carousel height="154px" :interval="3000" arrow="never" ref="cardShow" :autoplay="false">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="services_allbar">
            <div class="services_bar" v-for="e in 7" :key="e">
              <img src="./assets/Ellipse 5.png">
              <p>嘻嘻嘻嘻嘻嘻嘻嘻</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="design__left" @click="arrowClick('prev')">
        <img src="./assets/left.png">
      </div>
      <div class="design__right " @click="arrowClick('next')">
        <img src="./assets/right.png">
      </div>
  </div>

.blockall {
  width: 100%;
  position: relative;
  .design__left {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: -54px;
    width: 38px;
    height: 38px;
  }

  .design__right {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: -54px;
    width: 38px;
    height: 38px;
  }
}

步骤二 js

// 下一页
arrowClick(val) {
      if (val === 'next') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
},

12. 更换本页面所有的img图片，替换域名

 if (process.env.NODE_ENV === 'development') {
      setTimeout(() => {
        document.querySelectorAll('img').forEach((img) => {
          if (/https/.test(img.src)) {
            img.src = img.src.replace('https://xxxxxx.cn', '');
          }
        });
      }, 500);
    }

13. element 的表单部分校验

<el-form-item label="姓名" prop="name">
  <el-input v-model.trim="formValue.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="idcard">
  <el-input v-model.trim="formValue.idcard" placeholder="请输入身份证号"></el-input>
</el-form-item>

    handlebtn() {
      this.$refs['ruleForm'].validateField(['name', 'idcard'], async (valid) => {
        if (valid) {
        }
      });
    },

14. vant 的表单部分校验

html的name值必须是和校验写的一样，不然部分校验不生效

<van-field
  v-model="formValue.name"  
  required
  name="name"
  label="姓名"
  placeholder="请输入姓名"
  :rules="rules.name"
/>
<van-field
  v-model="formValue.idcard"
  required
  name="idcard"
  label="身份证号"
  placeholder="请输入身份证号"
  :rules="rules.idcard"
/>

async handlebtn() {
      try {
        await this.$refs['ruleForm'].validate(['name', 'idcard']);
        console.log('11');
      } catch (error) {}
    },

element 的el-drawer层级过低导致el-table高于遮罩

append-to-body=‘true’

    <el-drawer
        v-model="showdrawer"
        title="主题设置"
        direction="rtl"
        append-to-body='true'
        size="200px"
        z-index='9999'
        modal-class="select_popper"
      >
        <el-form :model="form" label-width="80px">
          <el-form-item label="暗黑模式">
            <el-switch
              v-model="form.delivery"
              inline-prompt
              size="small"
              active-icon="MoonNight"
              inactive-icon="Sunny"
              @change="changedark"
            ></el-switch>
          </el-form-item>
          <el-form-item label="主题颜色">
            <el-color-picker
              show-alpha
              size="small"
              v-model="form.color"
              @change="changeColor"
              :predefine="predefineColors"
            />
          </el-form-item>
        </el-form>
        <template #reference></template>
      </el-drawer>