mintui 爬坑

1.mint-ui设置图标icon

　　1.https://www.iconfont.cn/随便找几个图标加入购物车，然后下载代码。
　　2.下载的文件叫download.zip，解压后有很多文件css、eot、svg、ttf、woff、woff2、js,将文件复制到项目所在目录，我是vue项目，我复制到src目录下了，新增了一个叫做font的目录
　　3.main.js中import './font/iconfont.css'
　　4.vue文件中<i class="iconfont icon-jinggao"></i>
      this.$toast({
        message:'数据不足', 
        iconClass: 'iconfont icon-jinggao', //'mint-toast-icon mintui mintui-field-warning', 
      })
　　能看到警告图标，toast中也能出现警告图标，但是警告图标太小，
　　5.要想改变图标大小，可以到iconfont.css中修改

　　.iconfont {
  　　font-family: "iconfont" !important;
 　　 font-size: 16px;
 　　 font-style: normal;
 　　 -webkit-font-smoothing: antialiased;
 　　 -moz-osx-font-smoothing: grayscale;
　　}

　　其中font-size修改为想要的大小，也可以使用rem单位，不过这是整体修改，

　　友情链接：

　　阿里巴巴矢量图库，https://www.iconfont.cn/home/index

 

 2.datetime-picker在ios下设置日期失效

　　在ios系统无法使用new Date('2014-1-1')这种格式，安卓和PC是没问题的，ios只能new Date('2014/1/1')这样，这样是所有系统都兼容的写法。

　　将startDate: new Date('2014-1-1') 这种方式，改成： startDate: new Date('2014/1/1') 就可以了。

 3.解决webpack不能编译scss文件中的-webkit-box-orient:vertical问题

　　问题描述：处理多行文本溢出的样式，但是在webpack编译之后，-webkit-box-orient:vertical 这个样式丢失了

　　解决方法：

/*!autoprefixer:off*/
-webkit-box-orient: vertical;
/*autoprefixer:on*/

　　比如：

 overflow:hidden;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:3;
/*!autoprefixer:off*/
-webkit-box-orient: vertical;
/*autoprefixer:on*/

4.vue 事件冒泡

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

 
<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>


<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent="doThat">

 
<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

5.Mint-ui 框架Popup和Datetime Picker组件滚动穿透解决方式

　　我当时是直接一个visible-change方法搞定了：

　　

<mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @confirm="confirm"
    @visible-change=""handleValueChange>
</mt-datetime-picker>

const handler = function(e) {
    e.preventDefault();
}

// vue实例内
methods: {
    handleValueChange: function (val) {
      if(val) {
          document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
      } else {
          document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
      }
    }
}

　　下面附上参考链接：https://blog.csdn.net/u012374026/article/details/83822231

6.mintui三级联动

　　刚开始自己写了个json放地址数据，参考链接：https://www.cnblogs.com/WoAiZmm/p/8413604.html

　　后来发现要去拿后端返回的数据。。。then：

<mt-cell class="checked" title="现居住地">
        <i v-if="myNowProvince">{{myNowProvince}}&nbsp;{{myNowCity}}</i>
        <span v-else style="font-size:14px;color:#999">请选择</span>
        <i class="iconfont icon-go" @click="nowVisible=true"></i>
</mt-cell>
<mt-popup v-model="nowVisible" position="bottom">
        <mt-picker :slots="adressSlots" @change="onmyNowVisibleChange"></mt-picker>
</mt-popup>

 

nowVisible: false,    // 是否显示现居地下弹框

myNowProvince: "",  // 现居住地省份名  

myNowCity: "",   // 现居住地城市名

myNowCityId: null,    // 现居住地城市id

// 现居地数据对象

adressObj: {},

adressSlots: [

　　// 数据slot

　　{

　　　　flex: 1,

　　　　values: "",

　　　　className: "slot1",

　　　　textAlign: "right"

　　},

　　{

　　　　divider: true,

　　　　content: "-",

　　　　className: "slot2"

　　},

　　{

　　　　flex: 1,

　　　　values: "",

　　　　className: "slot3",

　　　　textAlign: "left"

　　}

　],

getInformation() {
      post(getInformation, {
        remark: "1"
      }).then(response => {
        //  下面是设置选项
        //  console.log(response.data.data.userinfo)
        this.alladressArr = response.data.data.option.province;
        this.alladressArr.forEach((item, index) => {
          this.adressObj[item.full_name] = item.child[0].map(i => i.full_name);
        });
        let str = response.data.data.userinfo.current_place;
        if (str) {
          let cityName = str.split(",")[0];
          let regionName = str.split(",")[1];
          this.alladressArr.forEach((el, index) => {
            if (el.full_name === cityName) {
              //  设置现居地省份默认选项
              this.adressSlots[0].defaultIndex = index;
            }
            el.child[0].forEach((ell, idx) => {
              if (ell.full_name === regionName) {
                //  设置现居地城市默认选项
                this.adressSlots[2].defaultIndex = idx;
              }
            });
          });
        }
        this.setadressSlots();
      });
    },

//当选择picker打开的时候
onmyNowVisibleChange(picker, values) {

      picker.setSlotValues(1, this.adressObj[values[0]]);
      this.myNowProvince = values[0];
      this.myNowCity = values[1];
    },



//拿到数据的时候，设置slots

setadressSlots() {

　　this.adressSlots[0].values = Object.keys(this.adressObj);

　　this.adressSlots[2].values = Object.values(this.adressObj)[0];

},

 

 myNowCity(newVal, oldVal) {
      if (this.myNowCity) {
        if (this.alladressArr.length !== 0) {
          let result = this.alladressArr.find(
            (item, index) => item.full_name === this.myNowProvince
          );

          let obj = result.child[0].find(
            item => item.full_name === this.myNowCity
          );
          if (obj) this.myNowCityId = obj.id;
        }
      }
    },
//只回传cityid所以监听

 7.获取相机和本地图片

<template>
  <div class="uploadImage">
    <mt-cell title="获奖证书" class="checked">
      <input
        @change="fileChange($event)"
        accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
        type="file"
        id="upload_file"
        style="display: none"
      />

      <img
        slot="icon"
        class="camera"
        src="../../static/images/resume_camera.png"
        @click="chooseType"
      />
    </mt-cell>
    <div class="imgUpBox">
      <ul>
        <li v-for="(item,index) in imgArr" :key="index" @click="handleSee(index)">
          <img :src="item" alt />
          <span class="delete" v-on:click.stop="handleDeleteUserImg(index)">
            <i class="mint-toast-icon mintui mintui-field-error"></i>
          </span>
        </li>
      </ul>
    </div>
    <mt-popup v-model="popupVisible" position="center">
      <img :src="img" alt />
    </mt-popup>
  </div>
</template>
<script>
import axios from "axios";
import EXIF from "exif-js";  //npm下载一下，解决ios图片反转问题。
import { Toast } from "mint-ui";

export default {
  props: {
    imgArr: Array
  },
  data() {
    return {
      // imgArr:[],
      popupVisible: false,
      img: ""
    };
  },
  methods: {
    //  删除图片
    handleDeleteUserImg(index) {
      this.imgArr.splice(index, 1);
    },
    chooseType() {
      document.getElementById("upload_file").click();
    },
    fileChange(el) {
      if (!el.target.files[0].size) return;
      this.fileList(el.target);
      el.target.value = "";
    },
    fileList(fileList) {
      let files = fileList.files;
      for (let i = 0; i < files.length; i++) {
        if (files[i].type !== "") {
          this.fileAdd(files[i]);
        }
      }
    },
    fileAdd(file) {
      let _this = this;
      if (file.type.indexOf("image") === -1) {
        this.$vux.toast.text("请选择图片文件", "middle");
      } else {
        return new Promise(resolve => {
          _this
            .imageRotate()
            .getOrientation(file)
            .then(orient => {
              let reader = new FileReader();
              let img = new Image();
              reader.onload = e => {
                img.src = e.target.result;
                img.onload = function() {
                  let width = img.width;
                  let height = img.height;
                  file.width = width;
                  file.height = height;
                  const data = _this
                    .imageRotate()
                    .rotateImage(img, img.width, img.height, orient);
                  let newFile = _this
                    .imageRotate()
                    .dataURLtoFile(data, file.name);
                  var formData = new FormData();
                  formData.append("file", newFile);
                  // _this.$vux.loading.show({
                  //     text: '正在上传，请稍等...'
                  // })
                  if (_this.imgArr.length < 2) {
                    axios({
                      method: "post",
                      url: "https://api.zhugexuetang.com/v1/upload/upload2",
                      data: formData
                    }).then(res => {
                      _this.imgArr.push(res.data.data.url);
                    });
                  } else {
                    Toast("最多选择两张图片哦~");
                  }
                };
              };
              reader.readAsDataURL(file);
            });
        });
      }
    },
    imageRotate() {
      return {
        getOrientation: file => {
          return new Promise(resolve => {
            EXIF.getData(file, function() {
              const orient = EXIF.getTag(this, "Orientation");
              resolve(orient);
            });
          });
        },

        dataURLtoFile: (dataurl, filename) => {
          const arr = dataurl.split(",");
          const mime = arr[0].match(/:(.*?);/)[1];
          const bstr = atob(arr[1]);
          let n = bstr.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new File([u8arr], filename, { type: mime });
        },

        rotateImage: (image, width, height, orient) => {
          let canvas = document.createElement("canvas");
          let degree = (90 * Math.PI) / 180;
          let ctx = canvas.getContext("2d");
          if (orient) {
            switch (orient) {
              case 1:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(image, 0, 0, width, height);
                break;
              case 6:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(image, 0, -height, width, height);
                break;
              case 8:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree * 3);
                ctx.drawImage(image, -height, 0, height, width);
                break;
              case 3:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree * 2);
                ctx.drawImage(image, -width, -height, width, height);
                break;
              default:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(image, 0, 0, width, height);
                break;
            }
          } else {
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(image, 0, 0, width, height);
          }
          ctx.restore();
          return canvas.toDataURL("image/jpeg");
        }
      };
    },
    handleSee(index) {
      this.popupVisible = true;
      this.img = this.imgArr[index];
    }
  },
  watch: {
    imgArr(newValue, oldValue) {
      this.$emit("childByValue", newValue);
    }
  }
};
</script>
<style scoped lang="scss">
@import "../util/common.scss";
.uploadImage {
  .camera {
    display: block;
    float: right;
    margin-top: size(30);
    @include wh(37, 29);
    padding-left: size(710);
        margin-left: size(-700);
  }
  .imgUpBox {
    padding-top: size(20);
    ul {
      display: flex;
      li {
        position: relative;
        img {
          @include wh(200, 200);
          margin-left: size(20);
        }
        .delete {
          i {
            @include font(40, #bbb, 40);
            position: absolute;
            top: size(-10);
            right: size(-8);
          }
        }
      }
    }
  }
  .mint-popup{
    img{
       size(550);
    }
  }
}
</style>