vue项目开发遇到的问题总结(1)

2018-05-08  本文已影响0人  Simple_Learn

1.在vue框架中使用axios获取数据中有16位的数字,精度丢失,导致错误问题。

如果想获取原来的值的方式,后台改字符串传到前端。

比如下面的例子

后台给的数字: 990062752457637888

前端获取到的数字:990062752457637900

那么我们使用  parseFloat(value).toPrecision(18)的方式,18是总位数,可使前端获取的

parseFloat(990062752457637900).toPrecision(18) = 990062752457637888

2.vue模板Element UI中组件scoped属性问题

因为element Ui自动生成的标签没有scoped的id,所以就不生效了,去掉scoped,就会发现样式生效了。

3.压缩js文件,比如压缩UEditor中的某一个js文件

首先安装uglifyJs:

用NPM安装CLI:

npm install uglify-js -g

用NPM下载给程序使用:

npm install uglify-js -D

或者使用

yarn add uglify-js -D

然后可以在命令行运行,比如在我的项目路径:

uglifyjs --output ./static/ueditor/ueditor.all.min.js ./static/ueditor/ueditor.all.js

命令行

这样就会生成一个ueditor.all.min.js文件。

4、组件之间传值

1.如果是父子组件:

      直接使用props传值


2.非父子组件:

     2.1 如果两个组件都存在,可以使用eventBus。

     2.2 如果两个组件不是同时都被渲染。就使用vuex,状态管理机。

5.axios文件上传

let formData = new FormData();

formData.append("file", fileObject);

传到后台为FormData,这里fileObject document.getElementById("file").files[0]  原生的input[type='file']。

需要设置 { headers: { 'Content-Type': 'multipart/form-data' } } header头部为这个。 具体可参见:【文件上传与下载】

6.element-ui 给页面上的DOM元素加loading效果

如下:

const loading = this.$loading({

      lock: true,

      text: 'Loading',

      spinner: 'el-icon-loading',

      background: 'rgba(0, 0, 0, 0.7)',

      target: document.querySelector('.div')

    });

    setTimeout(() => {      loading.close();    },2000);

7.vue中使用v-html渲染出来的数据不会换行问题

有可能需要设置class属性 外层添加class,或者添加样式如下:

 white-space: pre-wrap;

未完待续。。。

上一篇 下一篇

猜你喜欢

热点阅读