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{
      width: size(550);
    }
  }
}
</style>