zoukankan      html  css  js  c++  java
  • 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.指向项目中要解析的文件路径

  • 相关阅读:
    BZOJ 3744 Gty的妹子序列
    BZOJ 3872 Ant colony
    BZOJ 1087 互不侵犯
    BZOJ 1070 修车
    BZOJ 2654 tree
    BZOJ 3243 向量内积
    1003 NOIP 模拟赛Day2 城市建设
    CF865D Buy Low Sell High
    CF444A DZY Loves Physics
    Luogu 4310 绝世好题
  • 原文地址:https://www.cnblogs.com/linm/p/13501118.html
Copyright © 2011-2022 走看看