vue项目问题总结

漆黑骑士

已于 2022-06-23 13:46:25 修改

阅读量552

点赞数 1

分类专栏：开发经验总结文章标签： vue.js

于 2022-04-12 11:26:26 首次发布

本文链接：https://blog.csdn.net/weixin_50902154/article/details/124117742

版权

开发经验总结专栏收录该内容

18 篇文章 1 订阅

订阅专栏

这应该是一个长期会修改更新的文章，不可能就这么点问题...

利用节流解决多次请求的问题

 handleAddSubmit() {
      let that = this;
      let time = 2000;
      if (this.timer==null) {
      this.timer = setTimeout(() => {
        request({
          url: "/api-device/device/add",
          method: "POST",
          data: that.formData,
        })
          .then((res) => {
            that.addDialogVisible.show = false;
            console.log("/api-device/device/add");
            console.log(res);
            if (res.success) {
              that.addDialogVisible.show = false;
              that.handleRequestData();
              this.timer=null;
            }
          })
          .catch((err) => {
            console.log(err);
            this.timer=null;
          });
      },time);

重写路由push方法

跳转同一个路由时防止报错，需要重写push方法来抛出异常

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);  //抛出异常
};

vue-router的一些方法

this.$route.matched  //存放每一级的路径
this.$route.path //保存了完整路径
this.$router.push("/" + index);
let routers = this.$router.options.routes; //获取全局路由表

对象转变为数组的方法

Object.entries(obj)

用伪元素给关闭按钮设置样式

 .el-icon-close {
      position: relative;
      top: 2px;
      width: 16px;
      height: 16px;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      &:before {
        transform-origin: center center;
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -1px;
      }

      &:hover {
        background-color: #cacaca;
        color: rgb(255, 255, 255);
      }
    }

vue elementui 的多重表单一次验证（重难点！！）

   //表单组件进行验证并触发父级提交事件 
   async validateAllform() {
        let formA = await this.$refs.items1.validate();
        let formB = await this.$refs.items2.validate();
        let formC = await this.$refs.items3.validate();
        if (formA && formB && formC) {
            return true
        } else {
            return false
        }
    },
    async handleAddSubmit() {
        try {
            let isValid = await this.validateAllform();
            isValid && this.$emit("handleAddSubmit",{see:false});
        } catch (error) {
          console.log(error);
        }  
    },

    //父组件 监听提交事件并发送请求
     handleAddSubmit(val) {
      this.addDialogVisible.show = val.see;
      var that = this;
      request({
        url: "/api-car/car/add",
        method: "POST",
        data: that.formData,
      })
        .then((res) => {

        })
        .catch((err) => {

        });
    },

纯前端实现模糊查询按钮点击式

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0-beta.2/vue.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>Element Plus demo</title>
</head>

<body>
  <div id="app">
    <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
      <el-button slot="append" @click="handleClick" icon="el-icon-search">搜索</el-button>
    </el-input>
    <el-table :data="tempData" border style="width: 100%; margin-top: 50px">
      <el-table-column fixed prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
    </el-table>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          input: "",
          tempData:[
          ],
          tableData: [{
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",},
              ...
          ],};
      },
      created() {
        this.tempData=this.tableData
      },
      methods: {
        handleClick() {
          let Arr_nata = [];
          this.tableData.filter((data) => {
            if (data.address.includes(this.input)) {
              //数组去重后在输出
              Arr_nata.push(data);
            }
          });
          this.tempData = Arr_nata;
        },
      },
    });
  </script>
</body>

</html>

漆黑骑士

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue项目问题总结

重写路由push方法跳转同一个路由时防止报错，需要重写push方法来抛出异常const originalPush = Router.prototype.push;Router.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); //抛出异常};vue-router的一些方法this.$route.matched /
复制链接

扫一扫