vue的简单运用

最新推荐文章于 2024-07-04 15:06:45 发布

sunflower(*^ω^*)

最新推荐文章于 2024-07-04 15:06:45 发布

阅读量225

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45744011/article/details/137008278

版权

一个初次使用vue的菜鸟，结合自己实际需求，使用C#结合vue实现的一些小功能，写的不好，希望能和大家一起互相探讨学习！

一、下拉框查询事件

首先了解一下vue前端写法的一些规范和格式，如下所示：

 var app = new Vue({
        el: '#app',
        data: {

        },
        computed: {

        },
        mounted() {
            
        },
        destroyed() {
            
        },
        methods: {
      
        },

        mounted: function () {
  
        },
    })

知道这个写法框架之后，就可以往里面添加你自己写的方法了，比如我这个下拉框事件，先把页面写好，然后给你写好的下拉框加事件，就可以实现信息联动查询了。

<div class="col-md-12" id="app">
     <form onsubmit="return false;" id="form">
           <div class="form-group">总装订单号
                <select id="zzOrder" asp-for="ZzOrder" asp-items="ViewBag.ZzOrder" class="form-control" v-on:change="selectFn($event)" required>
                         <option value="">--选择订单号--</option>
                </select>
            </div>
      </form>
 </div>

//将下面的方法加到vue的methods方法里
selectFn: function (event) {
                var planDate = $("#planDate").val();
                var zzOrder = event.target.value;
                axios.get("/HeliumDetection/GetMaterials/?planDate=" + planDate + "&zzOrder=" + zzOrder).then(response => {
                    console.log(response.data);
                    var data = response.data;
                    if (data.result) {
                        $('#xianTi').val(data.linebody);
                        $('#shift').val(data.shift);
                        $('#team').val(data.team);
                        $('#modelCode').val(data.modelCode);
                        $('#modelName').val(data.modelName);
                        $('#partCode').val(data.partCode);
                        $('#componentCode').val(data.componentCode);
                        $('#planNumber').val(data.planNumber);
                        this.materials = data.materialslist;
                    } else {
                        console.log(data.result);
                    }
                }).catch(error => {
                    console.log(error.toString());
                });
            }

二、文本框点击事件

同样地，我们先把文本框放好，给它加click事件，如下所示：

<div class="form-group">
     组件编码
     <input id="componentCode" autocomplete="off" class="form-control" style="width:95%" asp-for="ComponentCode" readonly="readonly" v-on:click="GetABstandard" required />
</div>

//同样将下面的方法加到methods方法里即可
 GetABstandard() {
                var componentCode = $("#componentCode").val();
                axios.get("/HeliumDetection/GetABstandards/?componentCode=" + componentCode).then(response => {
                    console.log(response.data);
                    var data = response.data;
                    if (data.result) {
                        $('#twoComponentsAstandard').val(data.twoComponentsAstandard);
                        $('#twoComponentsBstandard').val(data.twoComponentsBstandard);
                        $('#remark').val(data.remark);
                    } else {
                        console.log(data.result);
                    }
                }).catch(error => {
                    console.log(error.toString());
                });
            }

三、动态增加节点并显示相关内容

 <div class="form-group">
      <button type="button" class="btn btn-success" id="Add"><i class="glyphicon glyphicon-plus-sign"></i>增加装配尺寸记录</button>
       <input autocomplete="off" asp-for="AssemblingDimensions" class="form-control" type="hidden" />
  </div>

//<script>里面写这几个方法，包括增加节点、显示节点内容
 $(document).ready(function () {
        if (assemblingDimensions !== undefined && assemblingDimensions !== '') {
            assemblingDimensions = JSON.parse(assemblingDimensions);
            showDetail(assemblingDimensions, 'assemblingDimensions');
        }
        $("#Add").click(function () {
            addCheckResultNode('assemblingDimensions', assemblingCount + 1);
        })
    })
 @** 检查结果赋值
     * @param obj
     * @param name*@
    function showDetail(obj, name) {
        var node = '';
        var value = '';
        if (obj !== undefined && obj !== ''){
            for (var i = 1; i < 100; i++){

                node = name + "_" + i;
                value = obj[node];
                // 结束遍历赋值
                if (value == undefined) {
                    break;
                }
                // 超出1个之后需要新建<tr>
                if (i > 1) {
                    addCheckResultNode(name, i);
                }
                $("#" + node).val(value);
                assemblingCount = i;
            }
        }
    }
    ///
    ///增加检查节点
    ///
    function addCheckResultNode(chekcType, i) {
        var nodeText = " <tr> "
            + " <td colspan = '2'> "
            + " <label asp-for='" + "AssemblingDimensions" + "' class='" + "control-label" + "'>装配尺寸" + '_' + i+"</label> "
            + " </td> "
            + " <td colspan = '7'> "
            + "     <div class='form-group'> "
            + "    <input autocomplete='off' class='form-control' style='text-transform: uppercase; width: 95%' id='" + chekcType + '_' + i + "' required='" + "required" + "'/> "
            + "   </div> "
            + " </td> "
            + "</tr >";
        $("#Add").parent().parent().parent().after(nodeText);
        assemblingCount++;

        if (readyonlyassembling == 'readonly') {
            var idLabelFirst = '#assemblingDimensions_' + i
            $(idLabelFirst).attr('readonly', 'readonly')
        }
    }
  function addFormParam(name, count) {
        var contentFir = {};
        var node = name;
        for (var i = 1; i <= count; i++) {
            var n;
            n = "#" + node + i;
            contentFir[node + i] = $(n).val();
        }
        return contentFir;
    }

四、调用摄像头拍照上传

//HTML代码
<td colspan="7">
                                @*照相机拍照弹窗*@
                                <div class="public-mask mask-grey-bg" v-show="cameraOpen">
                                    <div class="mask-main camera-main">
                                        <div class="camera-box">
                                            <div class="camera-left">
                                                @*这里就是摄像头显示的画面*@
                                                <video id="videoCamera" width="75%" height="75%"></video>
                                                <input autocomplete="off" type="hidden" asp-for="CheckImage" id="checkImage" required />
                                            </div>
                                            <div class="camera-right">
                                                <div class="camera-img-box">
                                                    <div>
                                                        @*点击拍照和保存按钮*@
                                                        <button class="btn btn-danger" icon="el-icon-camera" v-on:click="clearImage" style="margin-top: 10px;">移除</button>
                                                        <button class="btn btn-warning" icon="el-icon-camera" v-on:click="drawImage" style="margin-top: 10px;">拍照</button>
                                                        <button class="btn btn-info" icon="el-icon-check" v-on:click="uploadPicture" style="margin-top: 10px;">上传</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td colspan="2">
                                <div class="small-img" style="margin:5px">
                                    @*这里是点击拍照显示的图片画面*@
                                    <img v-for="image in imgSrc" :src="image" :key="image" style="width: 200px;height: 150px;float:left" />
                                    <canvas id="canvasCamera" class="canvas" :width='videoWidth' :height='videoHeight' style="display: none;"></canvas>
                                </div>
                            </td>
//JS代码
 /** 调用摄像头拍照-start*/
            // 打开照相机弹窗
            handleOpen() {
                this.cameraOpen = true;
                this.getCompetence();
            },
            // 调用摄像头权限
            getCompetence() {
                //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点
                this.$nextTick(() => {
                    const _this = this;
                    this.os = false;//切换成关闭摄像头
                    this.thisCancas = document.getElementById('canvasCamera');//这里是需要截取的canvas的Id名称
                    this.thisContext = this.thisCancas.getContext('2d');
                    this.thisVideo = document.getElementById('videoCamera');
                    // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
                    if (navigator.mediaDevices === undefined) {
                        navigator.menavigatordiaDevices = {}
                    }
                    // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
                    // 使用getUserMedia，因为它会覆盖现有的属性。
                    // 这里，如果缺少getUserMedia属性，就添加它。
                    if (navigator.mediaDevices.getUserMedia === undefined) {
                        navigator.mediaDevices.getUserMedia = function (constraints) {
                            // 首先获取现存的getUserMedia(如果存在)
                            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
                            // 有些浏览器不支持，会返回错误信息
                            // 保持接口一致
                            if (!getUserMedia) {
                                return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
                            }
                            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
                            return new Promise(function (resolve, reject) {
                                getUserMedia.call(navigator, constraints, resolve, reject)
                            })
                        }
                    }
                    const constraints = {
                        audio: false,
                        video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)', facingMode: this.facingMode }
                    };
                    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                        console.log(constraints);
                        // 旧的浏览器可能没有srcObject
                        if ('srcObject' in _this.thisVideo) {
                            _this.thisVideo.srcObject = stream
                        } else {
                            // 避免在新的浏览器中使用它，因为它正在被弃用。
                            _this.thisVideo.src = window.URL.createObjectURL(stream)
                        }
                        _this.thisVideo.onloadedmetadata = function (e) {
                            _this.thisVideo.play()
                        }
                    }).catch(err => {
                        this.$notify({
                            title: '警告',
                            message: '没有开启摄像头权限或浏览器版本不兼容.',
                            type: 'warning'
                        });
                    });
                });
            },
            //清空图片
            clearImage() {
                this.imgSrc.pop();
                console.log(this.imgSrc);
            },
            //绘制图片
            drawImage() {
                // 点击，canvas画图
                this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
                // 获取图片base64链接，展示到界面中的也是这个url地址
                if (this.imgSrc.length<4) {
                    this.imgSrc.push(this.thisCancas.toDataURL('image/png'));
                }
                console.log(this.imgSrc);
            },
            // 上传照相机图片
            uploadPicture() {
                 // 这里就调用上传图片接口即可
                var picture = {
                    dataURL1: this.imgSrc[0],
                    dataURL2: this.imgSrc[1],
                    dataURL3: this.imgSrc[2],
                    dataURL4: this.imgSrc[3]
                }
                /*console.log(picture);*/
                axios.post('/HeliumDetection/decodeBase64ToImage', picture).then(response => {
                    console.log(response.data);
                    var result = response.data;
                    if (result.result) {
                        $('#checkImage').val(result.checkImage);
                        sweetAlert("成功了！", "图片上传成功!", "success");
                        this.stopNavigator();
                    } else {
                        if (result.checkImage != "") {
                            swal("出错了：", "上传图片失败,请勿重复上传图片！", "error");
                        }
                        else {
                            swal("出错了：", "上传图片失败,请重新拍照上传！", "error");
                        }
                        /*this.stopNavigator();*/
                    }
                }).catch(error => {
                    swal("出错了：", error.toString(), "error");
                    /*this.stopNavigator();*/
                });
            },
            //清空画布
            clearCanvas(id) {
                let c = document.getElementById(id);
                let cxt = c.getContext("2d");
                cxt.clearRect(0, 0, c.width, c.height);
            },
            //重置画布
            resetCanvas() {
                this.imgSrc = [];
                this.clearCanvas('canvasCamera');
            },
            //关闭摄像头
            stopNavigator() {
                if (this.thisVideo && this.thisVideo !== null) {
                    this.thisVideo.srcObject.getTracks()[0].stop();
                    this.os = true;//切换成打开摄像头
                }
            },
            // 关闭照相机弹窗
            closeCameraMask() {
                this.cameraOpen = false; // 关闭照相机弹窗
                this.resetCanvas(); // 重置画布
                this.stopNavigator(); // 关闭摄像头
            //this.getDetailList(); // 重新获取一下List，此方法不再书写
            },
            /** 调用摄像头拍照-end*/

            // 部件拍照效验
            verifyCheckImage: function () {
                const checkImage = $("#checkImage").val().trim();
                if (checkImage == "" || checkImage == null || checkImage == undefined) {
                    return "部件未拍照，请先拍照上传后提交数据！";
                }
                return "pass";
            },