在 element ui 自定義的道路上越走越遠

 從上往下 分別都是 

1 提示箭頭放在下面， 並且顏色變成自定義顏色

2 step 進度條 先是把is process改成is wait  然後index+1

然後 更改進度條顏色 和樣式

3 element ui 在表單校驗的時候

成功後爲綠色 其他爲藍色 所以都改成藍色了

竟然要：hover  難怪用火狐找半天找不到在哪！

最後那個rgb  就是餓了麼 總體ui  的color~

<style rel="stylesheet/scss" lang="scss">
/*  加scoped會限制style的作用域 下面這樣才能改組件裏面label的屬性  */

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: rgba(180, 208, 255, 1);
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
  border-bottom-color: rgba(247, 249, 253, 1);
}

.mytooltip {
  background: rgba(247, 249, 253, 1) !important;
  border: 1px solid rgba(180, 208, 255, 1) !important;
  width: 230px !important;
  span {
    color: #3d5afe;
  }
  div {
    color: #797d84;
  }
}

.is-finish {
  color: #489afb;
  .el-step__icon {
    background-color: #489afb;
  }
  .el-step__icon-inner {
    color: white;
  }
}

.el-step__line-inner {
  border-width: 1.5px !important;
}

.el-form-item.is-success .el-input__inner {
  border-color: #c0c4cc;
}

.el-form-item.is-success .el-input__inner:focus {
  border-color: rgb(64,158,255);
  transition-duration: .5s;
}
</style>

select 也真的好坑啊
icon 只要<i> 就可以
發現自從有了火狐的  查看元素 我如有神助  直接查看元素強制改類名就可以了  我愛火狐

1  select

 <div class="chooseDiv">
              <el-select v-model="provinceValue" placeholder="請選擇省">
                <el-option
                  v-for="item in provinceData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select v-model="cityValue" placeholder="請選擇市">
                <el-option
                  v-for="item in cityData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>

下面要加這個 
   /*
      provinceValue: "",
      cityValue: "",
      areaValue: "",
      provinceData: [
        {
          provinceValue: "選項4",
          label: "444"
        },
        {
          provinceValue: "選項5",
          label: "555"
        }
      ],
      cityData: [
        {
          cityValue: "選項4444",
          label: "44444444"
        },
        {
          cityValue: "選項54444",
          label: "55544444"
        }
      ],
      areaData: [
        {
          areaValue: "選項11111111111",
          label: "111111111111111111111"
        }
      ],
      */

2 主動獲取子組件的零食
  this.childDate = this.$refs.typeDate.infoForm;

綁定的時候  <component :is="switchAttest" ref="typeDate" class="statusattest-conter"></component>
  
子組件裏面
 computed: {
    authInfo() {
      return this.$parent.authInfo;
    }
  },
  watch: {
    authInfo(val, oldVal) {
      // console.log(val, oldVal)

3 另: 想實現  點擊後再step往前的方法  就要放到  callback裏.
      this.$alert('已經xxxx', {
          confirmButtonText: '確定',
          callback: action => {
             this.active++;
          }
        });

4 正則校驗通過後再進行下一步. 

事實證明  clear valid（具體不是這個） 是有效的
這樣 綠色的框框也不會帶去下一步了~ qwq  好

5 使用svg
這也太容易了吧  天啊 直接用。。。直接用就好了qwq  直接下載svg文件  矢量圖 可以用font-size來調控。width的不用qwq

     <svg-icon icon-class="checkfail" 

             class-name="checkfailIcon"></svg-icon>

      注意  前面是文件名 後面是自定義的類名

哎 不會用搜索引擎 不會表達出自己的意思 代碼到用時方恨少啊

6 發現 隱藏密碼 show-password不能用

自己定義：  https://www.jianshu.com/p/62e8c9e57f99