vue小技巧记录(持续更新)

原创已于 2022-07-25 10:39:44 修改 · 505 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-07-25 10:38:21 首次发布

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

本文介绍了如何在Vue组件中使用props传递数据，详细展示了金额和百分比的处理函数，以及模拟链接跳转和图片错误检测的技巧。核心内容包括组件二次封装、数据初始化和常见处理逻辑的实现。

<template>
  <Table v-bind="$props" v-on="$listeners" stripe>
    <template v-for="(i, name) in $scopedSlots" :slot="name" slot-scope="{ row, column,index }">
      <slot :name="name" v-bind="{ row, column , index }" />
    </template>
  </Table>
</template>
<script>
import { Table } from "view-design";
export default {
  props: {
    ...Table.props,
    num:{
        type:Boolean
    },
  },
  data() {
    return {};
  },
  mounted() {
    console.log("$props", this.$props);
    console.log("$slots", this.$slots);
    console.log("$scopedSlots", this.$scopedSlots);
  },
};
</script>

常用处理函数

金额处理

    /**
     * @description 前端过滤处理展示金额为”万“或”亿
     * @param val 为需要处理的金额
     * @returns
     */
    unit(val) {
      val = Number(val);
      if (val > 9999 && val < 100000000) {
        val = (val / 10000).toFixed(2) + "万";
      } else if (val > 99999999) {
        val = (val / 100000000).toFixed(2) + "亿";
      } else if (val < 9999) {
        val = val.toFixed(2) + '元'
      }
      return val;
    },

百分比处理

    /**
     * @description 前端过滤处理保留两位小数并添加%
     * @param val 为需要处理的数
     * @returns
     */
   unitBaif(val) {
      val = Number(val);
      return (val * 100).toFixed(2) + "%";
    },

模拟链接跳转

       /**
         * @description 新建窗口进行跳转
         * @param 
         */
        newPageSkit(url, type) {
            var a = document.createElement("a");
            let appDom = document.getElementById(type);
            a.setAttribute("href", url);
            a.setAttribute("target", "_blank");
            a.setAttribute("id", "js_a");
            //防止反复添加
            if (document.getElementById("js_a")) {
                appDom.removeChild(document.getElementById("js_a"));
            }
            appDom.appendChild(a);
            a.click();
        }

img错误处理函数

    <div class="item-logo">
          <img v-if="checkImg(item.pictureUrlPc)" :src="item.pictureUrlPc" alt="图片加载失败" class="item-strip">
          <p v-else class="item-logo-text">{{item[config.logoNmae].slice(0,4)}}</p>
        </div>
  methods: {
    /**
     * @description 检验图片链接是否能正常显示
     * @param imgSrc 图片地址
     */
    checkImg(imgSrc) {
      console.log("图片加载失败");
      new Promise((resolve, reject) => {
        var ImgObj = new Image();
        ImgObj.src = imgSrc;
        ImgObj.onload = function (res) {
          resolve(res);
        };
        ImgObj.onerror = function (err) {
          reject(err);
        };
      })
        .then(() => {
          return false;
        })
        .catch(() => {
          return true;
        });
    },
  },