美文网首页
vue项目开发遇到的问题总结(1)

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

作者: Simple_Learn | 来源:发表于2018-05-08 22:32 被阅读0次

    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;

    未完待续。。。

    相关文章

      网友评论

          本文标题:vue项目开发遇到的问题总结(1)

          本文链接:https://www.haomeiwen.com/subject/ijkgrftx.html