Vue---图形二维码、rules校验规则、el-dialog展示图片

序言----最近临时抽调到另一个项目小组，接手一个PC端支付平台（暂做银行卡支付，后期更新移动端的微信，支付宝支付）的需求。这个项目是刚刚搭建起来的，接手时前辈已离职，加上本人第一次接触支付全流程，还是比较困难的。天天加班的付出终于还是让排期顺利的进行，这会抽空来总结一下这段时间的所学，若有不足之处，恳请不吝赐教。

所学1 ：从之前项目（职域通）将插件拿过来，插件就是一般网上都能找到的那种，现在主要说问题。

职域通：插件gVerify.js的整体架构和在组件用的引用方式如下

/* eslint-disabled*/

!(function(window,document){

    ............

 window.GVerify =GVerify

})(window,document)

js:
<script>
　　require("@utils/gVerify/gVerify.js")
　　methods：{
　　　　checkCode(){
 　　　　　　var isSame=new GVerify("v_container").validate(this.payForm.verifyCode)
　　　　　}

  }
</script>

<el-input size="mini" placeholder="请输入验证码" v-model="payForm.verify" @blur="checkCode">  </el-input>
<div id="v_container"></div>

　　支付平台：

/* eslint-disabled*/

!(function(window,document){

    ............
    window.GVerify =GVerify
})(window,document)

export const GVerify =window.GVerify

js:
<script>
　　import{GVerify} from"@utils/gVerify/gVerify.js"
//初始化绘画页面
mounted(){
　　this.$nextTick(()=>{
    this.GVerify=new GVerify("v_container")
　　})
}

</script>

注意：引入方式和导入方式与上面不一样；
    这样就可以调用GVerify里面的fefresh方法
至此，这个GVerify里的所有方法都可以按照此方式调用

　　支付平台这个项目与上个项目引起引用方式的不同我也没搞明白，只是实现了功能。

所学2：el-input 的校验规则 rules

<el-form ref="payForm" :model="payForm" :rules="rulePayForm" :label-position="'right'" label-"200px">

    <el-row>
          <el-col> 
               <el-form-item label="验证码:"  prop="verifyCode">
                     <el-input size="mini" v-model="payForm.verifyCode"></el-input>
               </el-form-item>
          </el-col>
    </el-row>
</el-form>    


dadta(){
    const validateVerifyCode=(rule,value,callback){
    
        if(!value){
          returncallback(new error("请输入验证码"))
       }
         if(value.length){
          returncallback(new error("有误，请检查"))
       }
       callback();
    }

    rulePayForm:{
       verifyCode:[{require:true,validator:validateVerifyCode,trigger:blur}],
        ............
或者  只有一条校验规则时
          verifyCode:[{require:true,message:'请输入验证码！',trigger:blur}],
     }
}    
//这样就能在释焦时自动校验

　　所学3 ：el-dialog 展示pdf图片

<el-dialog :visible.sync="isShowZxLetter" model center :show-close="false" :close-on-press-escape="true" :close-on-click-modal="false" width="50%">
   <img  src="../assets/image/zxLetter.png" style="100%" />   
<div>
<el-button type="primary" center  @click="isShowZxLetter=false">确认</el-button>
</div>
</el-dialog>


//可以加载出图片，，，，也是展示pdf的一种方式

　　注：加载Pdf目前我还了解到另外两种途径

1----将pdf文件放在测试服务器上，让后端给我们一个静态资源的地址，前端封装的方法去请求接口解析数据流，再利用插件中的canvas绘画技术展示到页面上。

2-----官方下载pdf.js插件。在页面中用iframe标签去引用插件中的viewer.html,在viewer.html中去修改default-url.指向项目中要解析的文件路径