前端项目集（踩坑）

小程序

三目运算符：

<view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>

要给轮播图设置圆角，不滚动的时候还好，一但滚动圆角就无效了。

• 给最外面盒子加上“overflow: hidden” 就好了

vue element-ui 后台管理

element-ui dialog弹窗

默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭。它本身自带该功能

也就是**“:close-on-click-modal”** 这个属性设置成false 就可以了

<el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal="false"></el-dialog>

vue项目打包

• npm run build:prod --report

VUE中页面F5刷新空白并报错报错：Uncaught SyntaxError: Unexpected token < 解决方法

修改vue.config.js:

module.exports = {
    publicPath: '/',
}

注意不是"./"

组件内导航 beforeRouteUpdate 的使用

使用的场景：组件服用，路由跳转
例如：使用 组件进行跳转时，在create()方法中进行获取路由传递的参数值，并且根据参数值调用接口查询不同的参数，但是在create方法中只执行一次这个方法，无法实现 显示不同的内容？ 那现在如何解决？
（第一次跳转，会执行，第二次跳转，组件会被重用，所以不会再执行生命周期中的某些过程，同样mounted也不会执行，也就是说，不会执行第二次赋值）
那我们应该如何获取值？

解决方法有两种；

1. 通过beforeRouteUpdate()方法来实现

beforeRouteUpdate(to,from,next){
    this.id = to.query.id;
    //执行要调用的方法
    this.getList(this.id); //此时就会改变要显示的值
    next();
}

2. 监听、

watch:{
    '$route'(to,form){
        this.id = to.query.id;
        this.getList(this.id); //此时就会改变要显示的值
    }
}

两个方法起到一样的效果

element-ui 中的图片上传时首先进行压缩后再往服务器端上传

template

<el-form-item label="封面图片" prop="coverImage">
    <el-upload
      class="avatar-uploader" 
        action="#" 
        :http-request="requestUpload" 
        :show-file-list="false" 
        :before-upload="beforeUpload">
      <img v-if="form.coverImage" :src="form.coverImage" class="avatar" >
      <el-button  v-else size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form-item>

js

requestUpload(res, file) {
  let formData = new FormData();
   formData.append("avatarfile", res.file);
   uploadAvatar(formData).then(response => {
     this.form.coverImage = url.url+response.imgUrl;
   });
 },
 //图片上传前进行的操作
 beforeUpload(file) {
   return new Promise((resolve, reject) => {
     let _URL = window.URL || window.webkitURL
     let isLt2M = file.size / 1024 / 1024 > 1 // 判定图片大小是否小于4MB
     // 这里需要计算出图片的长宽
     let img = new Image()
     img.onload = function () {
       file.width = img.width // 获取到width放在了file属性上
       file.height = img.height // 获取到height放在了file属性上
       let valid = img.width > 300 // 图片宽度大于1280
       // compressAccurately有多个参数时传入对象
       if (valid) {
         imageConversion.compressAccurately(file, {
           size: 300, //图片大小压缩到1024kb
           // width:1280 //宽度压缩到1280
         }).then(res => {
           resolve(res)
         })
       } else resolve(file)
     }
     // 需要把图片赋值
     img.src = _URL.createObjectURL(file)
   })
 },

注： url.url 的 js 是外部引入的

import url from ‘@/utils/base’;

// base.js  文件 
export default {
    url:"http://xxxxxxxxx"
}

js遍历对象

for(var key in json){
   console.log(key+":"+json[key]); //json对象中属性的名字：对象中属性的值
}

不断更新中 …