问题归集

桃子的游泳圈
485 阅读3分钟

theme: smartblue highlight: a11y-dark

归集一：大数字问题、可嵌入代码编辑器的使用（vue3项目）

image.png

一、使用json.parse将后端数据deviceProperty解析为js对象时，当connectId是大数字时，解析会出现问题，最后几位数字变成0000

解决方案：
 1、安装json-bigint：npm i json-bigint
2、项目使用位置引入：import jsonBig from "json-bigint";
3、解析对象：jsonBig.parse(response.data?.deviceProperty)
4、还成字符串： jsonBig.stringify(）

二、使用可嵌入代码编辑器实现

1、安装：vue3-ace-editor
2、引入：import { VAceEditor } from "vue3-ace-editor";

3、使用：

<template>
       <v-ace-editor
            v-model:value="dataForm.textareashow"
            lang="json"
            :theme="aceConfig.theme"
            :options="aceConfig.options"
            :readonly="aceConfig.readOnly"
            style="height: 386px"
       />
</template>

4、配置json

 // json配置
const aceConfig = reactive({
  lang: "json", //解析json
  theme: "chrome", //主题
  readOnly: true, //是否只读
  options: {
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
    tabSize: 2,
    showPrintMargin: false,
    fontSize: 12,
  },
});

5、配置绑定数据

//form
const dataForm = ref({
  content: {},
  textareashow: "",
});

6、调用接口，获取数据解析，赋值给配置的绑定数据

// 下发参数内容显示
    if (response.data?.deviceProperty) {
      dataForm.value.content = jsonBig.parse(response.data?.deviceProperty);
      // 将json数据格式化，不然显示在一行
      dataForm.value.textareashow = jsonBig.stringify(
        dataForm.value.content,
        null,
        2
      );
    }

归集二、路由带参数跳转，获取参数值使用ref声明变量接值，多次切换后无变化

后端返回数据展示 image.png

问题展示：从列表点击跳转到对应的发起审批页面，来回切换多点几下还是最开先访问那个审批名称

f6cedfe06b51141fb1d96fc40e27a176.jpg 代码演示：

主页面

image.png

跳转发起页面
错误写法及相关解决方案：
错误代码写法：通过ref声明变量，将获取到的路由参数赋值到value上，value只是一个值，不是响应式的，第一次加载赋值之后就不会变了，而且项目里面有keepalive。这种做法在最外层作用域下直接赋值是只有初始化才执行一次

64dd895c41d92df99741aa0ed70587ba.jpg

解决方案:实在要自己定义一个变量要通过computed出来，通过get函数和set函数去进行数据的双向绑定

aa59eaeeb542098216a011870f016c93.jpg

最佳代码写法：

image.png

归集三、通过useRouter和useRoute方式进行的路由跳转及传参时，调用的接口数据只在初始化的时候进行了展示，退出再次进去时不调取接口

解决方案：在onMounted和onActivated钩子函数中都调用接口

归集四、vue3父子通信，父组件使用子组件的方法或数据

父组件使用子组件的数据

方法一：defineExpose 子组件 image.png 父组件

  <div class="form">
        <detail-form
          :record="record"
          :chooseType="chooseType"
          :classify="classify"
          :isHistory="isHistory"
          ref="formDom"
        ></detail-form>
      </div>

 let formDom = ref(null);

image.png 方法二、emit 子组件：

image.png 父组件

image.png

归集五、一键复制功能（vue3）和导出下发功能

image.png

vue3一键复制 vue-clipboard3插件的使用

 npm i vue-clipboard3
 import useClipboard from "vue-clipboard3";
// 复制
const { toClipboard } = useClipboard();
const handlerCopy = async () => {
  let obj = {
    CmdName: name,
    CmdCode: cmdCode,
    PropertyList: data.value,
  };
  try {
    await toClipboard(`${JSON.stringify(obj)}`);
    Message.success("复制成功");
  } catch (e) {
    Message.error("复制失败");
  }
};

使用file-saver导出文件

npm i file-saver --save
import FileSaver from "file-saver";
//导出下发参数
const handleLeadingOut = () => {
  let obj = {
    CmdName: name,
    CmdCode: cmdCode,
    PropertyList: data.value,
  };
  const blob = new Blob([JSON.stringify(obj, null, 2)], {
    type: "application/json",
  });
  FileSaver.saveAs(blob, `${name}_OPC数据下发参数`);
};

image.png

生成指定长度的随机大小写字母

function getRandomString(number) {
  let temp = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  let maxLen = temp.length;
  let pwd = "";
  for (let i = 0; i < number + 1; i++) {
    pwd += temp.charAt(Math.floor(Math.random() * maxLen));
  }
  return pwd;
}
console.log(getRandomString(32))//32位

生成指定长度的随机小写字母

function getRandomString(number) {
 let randomString = "";
    for (let i = 0; i < number; i++) {
      let range = Math.floor(Math.random() * 26);
      let start = "a".charCodeAt(0);
      randomString += String.fromCharCode(start + range);
    }
    return randomString;
}
console.log(getRandomString(32))//32位

# JS数组置顶元素（将数组某个元素排到第一位）

1.    
    let data = ['cat', 'pig', 'dog']
1.
1.  data.map((item,index) => {
1.  if(index == 2){
1.  data.unshift(data.splice(index , 1)[0]);
1.  }
1.  })
1.
1.
1.  console.log(data) // ['dog', 'cat', 'pig']

表格下拉数据禁选

image.png

//设置禁用
function setOptionsDisabled(tableData) {//整个表格值
  let appIdArr = [];
  tableData.forEach((item) => {
    appIdArr.push(item.appId);
  });
  setTimeout(() => {
    appListData.value.map((item) => {//appListData下拉数据
      if (appIdArr.indexOf(item.value) > -1) {
        item.disabled = true;
      } else {
        item.disabled = false;
      }
      return item;
    });
  }, 0);
}

//  删除时
function handlerDelete(index) {
  tableData.value.splice(index, 1);
  setOptionsDisabled(tableData.value);
}

控制有空数据时不允许保存
function handleOk() {
  let rules = true; //是否通过
  tableData.value.forEach((item) => {
    if (!item.appId || !item.roleIds) {
      rules = false;
      Message.warning("请完善用户应用权限！");
      return;
    }
  });
  }

回显计算单位时间

选择单位前端写死，后端只需要输入值，且单位固定秒，前端换算成秒传字符串给后端，后端返回时还是秒值，回显时，前端再处理成对应的天时分秒 image.png

function countUnit(time) {
  // 天
  if ((time / 24 / 60) % 60 == 0) {
    let d = time / (24 * 60 * 60);
    return { time: d, unit: "day" };
  }
  // 小时
  if ((time / 60) % 60 == 0) {
    let h = time / (60 * 60);
    return { time: h, unit: "hour" };
  }
  // 分钟
  if (time % 60 == 0) {
    let m = time / 60;
    return { time: m, unit: "minute" };
  }
  // 秒
  return { time, unit: "second" };
}

image.png

甘特图

image.png 文档连接：dlhsoft.com/GanttChartH…

扩展了解

image.png 项目无故报此错

Compiled with problems:
×ERROR
ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

699efbce55aba3bddcce3144911a3293.jpg

f83ed924bb818aae81df3d9397c04f1f.jpg webpack dev server 里面的resizeobserver 包和浏览器版本结合出现的问题。不会影响生产环境，不屏蔽报错也没关系。

avatar
文章
阅读
粉丝