前端工作过程遇到的问题总结(六)-Vue篇--(中部)

淩亂°似流年 2022-01-29 08:35 265阅读 0赞

**目录**

vue element隐藏组件滚动条scrollbar使用

vue实现打印：

npm清理缓存

js获取当天时间0点到24点的时间戳

vue项目让局域网ip访问配置设置

Vue父子组件如何双向绑定传值

vue中配置条形码

Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口

vue监听页面大小变化重新刷新布局

javascript页面刷新的几种方法

--------------------

### vue element隐藏组件滚动条scrollbar使用 ###

原文：[vue element隐藏组件滚动条scrollbar使用][vue element_scrollbar]

在vue Element UI官方文档上没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，读者查看element源码，就可以查到这个组件[scrollbar][]，至于为什么不放开这个组件就不得而知了。

效果图如element官网所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

使用：

<el-scrollbar></el-scrollbar>

将会出现滚动的内容放到上述标签内就可以了。   
这里要简单的设置一下，将标签的height设为100%，读者查看效果的时候，会出现一个横向的滚动条，如果你不想要横向的滚动条，使用下面css属性设置就可以只显示竖向滚动条。

.el-scrollbar__wrap {
      overflow-x: hidden;
    }

示例使用如下：

![70][]

### vue实现打印： ###

*  打印的代码：

参考文章：[vue+iframe实现打印效果][vue_iframe]   [IE打印控件][IE]

// 打印类属性、方法定义
    /* eslint-disable */
    const Print = function (dom, options) {
      if (!(this instanceof Print)) return new Print(dom, options);
    
      this.options = this.extend({
        'noPrint': '.no-print'
      }, options);
    
      if ((typeof dom) === "string") {
        this.dom = document.querySelector(dom);
      } else {
        this.isDOM(dom)
        this.dom = this.isDOM(dom) ? dom : dom.$el;
      }
    
      this.init();
    };
    Print.prototype = {
      init: function () {
        var content = this.getStyle() + this.getHtml();
        this.writeIframe(content);
      },
      extend: function (obj, obj2) {
        for (var k in obj2) {
          obj[k] = obj2[k];
        }
        return obj;
      },
    
      getStyle: function () {
        var str = "",
          styles = document.querySelectorAll('style,link');
        for (var i = 0; i < styles.length; i++) {
          str += styles[i].outerHTML;
        }
        str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    
        return str;
      },
    
      getHtml: function () {
        var inputs = document.querySelectorAll('input');
        var textareas = document.querySelectorAll('textarea');
        var selects = document.querySelectorAll('select');
    
        for (var k = 0; k < inputs.length; k++) {
          if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
            if (inputs[k].checked == true) {
              inputs[k].setAttribute('checked', "checked")
            } else {
              inputs[k].removeAttribute('checked')
            }
          } else if (inputs[k].type == "text") {
            inputs[k].setAttribute('value', inputs[k].value)
          } else {
            inputs[k].setAttribute('value', inputs[k].value)
          }
        }
    
        for (var k2 = 0; k2 < textareas.length; k2++) {
          if (textareas[k2].type == 'textarea') {
            textareas[k2].innerHTML = textareas[k2].value
          }
        }
    
        for (var k3 = 0; k3 < selects.length; k3++) {
          if (selects[k3].type == 'select-one') {
            var child = selects[k3].children;
            for (var i in child) {
              if (child[i].tagName == 'OPTION') {
                if (child[i].selected == true) {
                  child[i].setAttribute('selected', "selected")
                } else {
                  child[i].removeAttribute('selected')
                }
              }
            }
          }
        }
    
        return this.dom.outerHTML;
      },
    
      writeIframe: function (content) {
        var w, doc, iframe = document.createElement('iframe'),
          f = document.body.appendChild(iframe);
        iframe.id = "myIframe";
        //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
        iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
        w = f.contentWindow || f.contentDocument;
        doc = f.contentDocument || f.contentWindow.document;
        doc.open();
        doc.write(content);
        doc.close();
        var _this = this
        iframe.onload = function(){
          _this.toPrint(w);
          setTimeout(function () {
            document.body.removeChild(iframe)
          }, 100)
        }
      },
    
      toPrint: function (frameWindow) {
        try {
          setTimeout(function () {
            frameWindow.focus();
            try {
              if (!frameWindow.document.execCommand('print', false, null)) {
                frameWindow.print();
              }
            } catch (e) {
              frameWindow.print();
            }
            frameWindow.close();
          }, 10);
        } catch (err) {
          console.log('err', err);
        }
      },
      isDOM: (typeof HTMLElement === 'object') ?
        function (obj) {
          return obj instanceof HTMLElement;
        } :
        function (obj) {
          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
        }
    };
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
      // 4. 添加实例方法
      Vue.prototype.$print = Print
    }
    export default MyPlugin

*   在main.js引入这个代码：

/* 引入打印的插件 */
    
    import Print from './modules_socket/print/print.js' // 引入print.js，这个就是你的print.js在项目的位置
    
    Vue.use(Print)

*  在组件中的使用：(设置需要打印的ref：)

方法：

handlePrint () {
      // alert('handlePrint')
      this.$print(this.$refs.print)
    }

因为我在一个项目中有很多页面需要打印，然后就打印的功能封装成一个组件：

（注意） ：

1.  通过不同的参数来实现打印不同的页面(是否显示(有些不用显示，直接打印，有些是有弹出然后点击按钮实现打印)
2.  在print-page中实现打印的功能（在这里引入需要打印的页面，然后根据得到的参数确定需要打印那个页面【打印的页面的样式用行内样式，并且去请求值的参数】）
3.  对应的代码：(关键的代码)

index.vue：

//html
     <print-page :commonObj="printObj"></print-page>
    
     //vue--data
    <script>
    import printPage from '../../../print-page/print-page';
    export default {
      components: {
        printPage,
      },
      data () {
        return {
             printObj:{
                visible:false,
                dialogTitle:'检查报告',
                btnTitle:'打印报告',
                contentType:'test',
                autoMethod: false,
             },
             defaultPrintList: [
               {
                  visible:true,
                  dialogTitle:'电子处方',
                  btnTitle:'打印处方',
                  contentType:'medication',
                  autoMethod: false,
               },
               {
                  visible:true,
                  dialogTitle:'检查报告',
                  btnTitle:'打印报告',
                  contentType:'check',
                  autoMethod: false,
               },
               {
                  visible:true,
                  dialogTitle:'检验报告',
                  btnTitle:'打印报告',
                  contentType:'test',
                  autoMethod: false,
               }
             ],
         }
      },
      //vue-method
      methods: {
        handleView (index,row) {
          let ordersId = row.id;
          this.$store.commit("SET_ORDERSID", ordersId);
          this.printObj = this.defaultPrintList[1]
        },
      }
    }

print-page.vue:

<template>
       <el-dialog 
        :title="commonObj.dialogTitle" 
        :visible.sync="commonObj.visible"
        width="50%"
        top="35px"
        :show-close="false"
        custom-class="print-dialog"
        style="min-width: 880px"
      >
        <div class="dialog-header" slot="title">
          <span class="title">{
       {commonObj.dialogTitle}}</span>
        </div>
        <div class="dialog-body">
          <div class="report_content_out" style=" width: 80%;height: 540px;overflow: hidden;border:1px solid #BEBEBE;margin: 30px auto;"
          :style="{'height':containerHeight }">
            <el-scrollbar style="height:100%">
              <div  ref="print"  class="print-content">
                <medication v-if="commonObj.contentType == 'medication'"></medication>
                <report-check v-if="commonObj.contentType == 'check'"></report-check>
                <report-test v-if="commonObj.contentType == 'test'"></report-test>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="btn_reset" type="text" @click="commonObj.visible = false"><img src="~@images/work/icon_return.png" alt=""> <span>返回</span> </el-button>
          <el-button type="primary" @click="handlePrint">{
       {commonObj.btnTitle}}</el-button>
        </div>
      </el-dialog>
    </template>
    <script>
    import medication from './components/medication'
    import reportCheck from './components/report-check'
    import reportTest from './components/report-test'
    export default {
      name: 'print',
      components: {
        medication,
        reportCheck,
        reportTest
      },
      props: {
        commonObj: {
          required: true,
          type: Object
        }
      },
      data () {
        return {
          
        }
      },
      computed: {
        containerHeight () {
          const size = this.getViewportSize()
          return (size.height - 300) + 'px'
        },
        visible () {
          return this.commonObj.visible
        }
      },
      methods: {
         handlePrint () {
          // alert('handlePrint')
          this.$print(this.$refs.print)
        }
      }
    }
    </script>
    <style lang="less">

medication.vue:（这里就只写了一个组件)

<template>
      <div class="common-content">
        <div class="report_header" style="position: relative;">
          <span class="title"
            style=" display: block;height: 40px;line-height: 40px;text-align: center;font-size:18px;font-weight:400;color:rgba(15,15,15,1);"
          >{
       {reportInfo.orgName}}</span>
          <span class="remark" style=" display: block;text-align: center;font-size:16px;font-weight:400;color:#666666;">处方笺</span>
          <div class="medication-type"
            style=" position: absolute;width: 56px;height: 56px;top: 0px;right: 30px;padding: 5px 8px;box-sizing: border-box;text-align: center;
            font-size:14px;font-weight:bold;color:rgba(34,34,34,1);line-height:20px;border: 1px solid #BEBEBE;"
          >普通处方</div>
        </div>
        <div class="basic_info"
          style="padding: 15px 0;border-bottom: 1px solid #0F0F0F;"
        >
          <el-row>
            <el-col :span="8"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              处方编号：{
       {reportInfo.prescriptionCode}}
            </div></el-col>
            <el-col :span="6"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              费别：{
       {reportInfo.feeCategory}}
            </div></el-col>
            <el-col :span="10"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              医疗证号：{
       {reportInfo.insuranceCard}}
            </div></el-col>
            <el-col :span="6"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              患者姓名：{
       {reportInfo.patientName}}
            </div></el-col>
            <el-col :span="6"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              性别：{
       {reportInfo.sex == 1 ? '男' : '女'}}
            </div></el-col>
            <el-col :span="6"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              年龄：{
       {reportInfo.age}}
            </div></el-col>
            <el-col :span="6"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              体重：{
       {reportInfo.weight}}kg
            </div></el-col>
            <el-col :span="14"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              家庭住址：{
       {reportInfo.address}}
            </div></el-col>
            <el-col :span="10"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              电话号码：{
       {reportInfo.phone}}
            </div></el-col>
            <el-col :span="8"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              科别：{
       {reportInfo.deptName}}
            </div></el-col>
            <el-col :span="8"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              开具日期：{
       {reportInfo.createDate}}
            </div></el-col>
            <el-col :span="8"><div class="grid-item"
              style=" font-size:14px;font-weight:400;color:rgba(15,15,15,1);line-height:25px;"
            >
              诊断：{
       {reportInfo.diagnosisDesc}}
            </div></el-col>
          </el-row>
        </div>
    
        <div class="report_section" style=" min-height: 465px;">
          <div class="report_section_title" 
            style=" page-break-after: 10px 0;font-size:24px;font-weight:bold;color:rgba(34,34,34,1);"
          >RP</div>
          <div class="report_section_content"
            style="padding: 5px 0;"
          >
            <div class="table">
              <div class="table-th" style=" padding-left: 50px;display: flex;">
                <span class="td"
                  style="width: 40%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(102,102,102,1);"
                >药品</span>
                <span class="td"
                   style="width: 20%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(102,102,102,1);"
                >规格</span>
                <span class="td"
                   style="width: 20%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(102,102,102,1);"
                >总量</span>
                <span class="td"
                   style="width: 20%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(102,102,102,1);"
                >单量</span>
              </div>
    
              <div class="table-tr"
                style=" display: flex;margin-top: 30px;"
                v-for="(item,index) of reportInfo.items"
                :key="index"
              >
                <div class="td_index"
                  style=" line-height: 25px;width: 50px;font-size:14px;font-weight:400;color:rgba(34,34,34,1);"
                >{
       {index}}</div>
                <div class="td_drug_info"
                  style=" flex: 1;display: flex;flex-direction: column;"
                >
                  <ul class="td-content"
                    style=" width: 100%;padding: 0;margin: 0;list-style: none;"
                  >
                    <li style=" display: flex;" v-for="(option,OPindex) of item[index]" :key="OPindex">
                      <span
                        style=" width: 40%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(34,34,34,1);"
                      >{
       {option.projName}}</span>
                      <span
                        style=" width: 20%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(34,34,34,1);"
                      >{
       {option.spec}}</span>
                      <span
                        style=" width: 20%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(34,34,34,1);"
                      >{
       {option.totalQuantity}}</span>
                      <span
                        style=" width: 20%;line-height: 25px;font-size:14px;font-weight:400;color:rgba(34,34,34,1);"
                      >{
       {option.quantity}}</span>
                    </li>
                  </ul>
                  <div class="usage"
                    style=" width: 100%;line-height: 35px;font-size:14px;font-weight:400;color:rgba(34,34,34,1);"
                  >用法：{
       {item.usage}}</div>
                </div>
              </div>
            </div>
          </div>
    
        </div>
    
        <div class="report_footer"
          style=" padding: 15px 0;height: 80px;"
        >
          <el-row>
            <el-col :span="24"><div class="grid-item"
              style="font-size:14px;font-weight:400;color:#666666;line-height:25px;"
            >
              药品金额:{
       {reportInfo.totalMoney}}
            </div></el-col>
            <el-col :span="8"><div class="grid-item"
              style="font-size:14px;font-weight:400;color:#666666;line-height:25px;"
            >
              医生签字：
            </div></el-col>
            <el-col :span="8"><div class="grid-item"
              style="font-size:14px;font-weight:400;color:#666666;line-height:25px;"
            >
              审核药师：
            </div></el-col>
            <el-col :span="8"><div class="grid-item"
              style="font-size:14px;font-weight:400;color:#666666;line-height:25px;"
            >
              调配药师：
            </div></el-col>
          </el-row>
        </div>
      </div>   
    </template>
    <script>
    import { mapGetters } from 'vuex'
    export default {
      name:'report-check',
      data () {
        return {
          reportInfo: {
            address: "",//地址
            age: 0,//
            createDate: "",//开单日期
            deptName: "",//科室
            diagnosisDesc: "",//诊断
            feeCategory: '',//费别
            insuranceCard: "",//医保卡
            isNormal: 0,//是否急诊 0： 否 1：是
            items: [],
            orgName: "",//医院名
            patientName: "",//患者
            phone: "",//
            prescriptionCode: "",//处方编号
            sex: 1,// 1：男 2：女
            totalMoney: '',//统计呢
            weight: ''//
          }
        }
      },
      computed: {
        ...mapGetters([
          'ordersId',
          // ...
        ]),
        visible () {
          return this.commonObj.visible
        }
      },
      watch: {
        ordersId () {
          if(visible == true && this.ordersId != '' && this.ordersId != 'undefined') {
            this.getPrescription();
          }
        }
      },
      methods: {
        getPrescription () {
          let body = {
            "ordersId": this.ordersId,
          }
          this.$http._request('post','/clinic/prescription/detail',body,null,null,null).then((data)=>{
            if(data) {
              this.reportInfo = data;
            }
          });
        }
      }
    }
    </script>

### npm清理缓存 ###

原文文章：[npm清理缓存][npm]

npm cache clean -f

### js获取当天时间0点到24点的时间戳 ###

原文文章：[js获取当天时间0点到24点的时间戳][js_0_24]

var start = new Date(
    new Date(new Date().toLocaleDateString()).getTime()
    ); // 当天0点
    var end = new Date( // 当天23:59
    new Date(new Date().toLocaleDateString()).getTime() +
    24 * 60 * 60 * 1000 -
    1
    );
    var startTime = new Date(new Date().getTime() - 1 * 60 * 60 * 1000); // 当前时间的前一小时
    var endTime = new Date(new Date().getTime()); // 当前时间

//获取格林时间
    var date1 = new Date(new Date(new Date().toLocaleDateString()).getTime());
    var date2 = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
     
     
    //格式化时间  2018-06-06 00:00:00
    //如果只是简单的格式化只变成2018-6-6 0:0:0，需要运用三目运算判断并在适当的地方加上0，完成所需要的格式。
    var startTime = date1.getFullYear() + "-" + ((date1.getMonth() + 1) < 10 ? "0" + (date1.getMonth() + 1):(date1.getMonth() + 1))+ "-" + (date1.getDate() < 10 ? "0" + date1.getDate():date1.getDate()) + " " + (date1.getHours()<10?"0"+date1.getHours():date1.getHours()) + ":" + (date1.getMinutes()<10?"0"+date1.getMinutes():date1.getMinutes()) + ":" + (date1.getSeconds()<10?"0"+date1.getSeconds():date1.getSeconds()),
     
     
    //格式化时间  2018-06-06 23:59:59
     var endTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds()

JavaScript 获取当前时间戳：

*      var timestamp = Date.parse(new Date());
    
     结果：![20190709103307278.png][]
 *      var timestamp = (new Date()).valueOf();
    
    结果： ![20190709103310542.png][]
 *      var timestamp=new Date().getTime()；
    
    结果：![20190709103313619.png][]

我在项目用在element ui的日期时间选择器：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

代码：

export const  pickerOptions = {
      shortcuts: [
        {
          text: '当天',
          onClick(picker) {
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000); // 当天23:59new
            const start = new Date( new Date(new Date().toLocaleDateString()).getTime());  // 当天0点
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近一周',
          onClick(picker) {
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000);
            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000);
            const start = new Date( ); 
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }
      ]
    };

### vue项目让局域网ip访问配置设置 ###

原文文章：[vue项目让局域网ip访问配置设置][vue_ip]

**第一步：修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

**第二步：检查 `package.json `文件里进行配置，scripts.dev配置是否设置 host为‘0.0.0.0’**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

改成上一步的ip地址

**第三步：查看开发机的ip地址，并告诉给其他小伙伴，别忘了端口**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

**第四步：如果通过IP还不能访问，最好是关闭开发机的防火墙，如果你不怕麻烦也可添加放行端口**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

### Vue父子组件如何双向绑定传值 ###

原文文章：[Vue父子组件如何双向绑定传值][Vue]

参考：[使用 v-model 实现 双向绑定.(子组件和父组件.)][v-model _ _._.]

### vue中配置条形码 ###

原文文章：[vue中配置条形码][vue]

参考：[github上相似的条形码插件][github]     [JsBarcode][]

### Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口 ###

原文文章：[Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口][Vue 2.0 _Axios_baseURL]

### vue监听页面大小变化重新刷新布局 ###

原文文章：[vue监听页面大小变化重新刷新布局][vue 1]

### javascript页面刷新的几种方法 ###

原文文章：[javascript页面刷新的几种方法][javascript]

[vue element_scrollbar]: https://blog.csdn.net/zhongguohaoshaonian/article/details/79734787
[scrollbar]: https://github.com/ElemeFE/element/tree/dev/packages/scrollbar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20220129/6da2000eb78c4c4095be5bda04ef5156.png
[70]: /images/20220129/a3fa6b5733c54e3f9081e6600c840709.png
[vue_iframe]: https://www.jianshu.com/p/a824ee4cad6f
[IE]: https://my.oschina.net/Jacker/blog/49228
[npm]: https://blog.csdn.net/taxue1011/article/details/80969317
[js_0_24]: https://blog.csdn.net/qq_38188485/article/details/81012417
[20190709103307278.png]: /images/20220129/443f4c194d5d4d5b86489628eedccc32.png
[20190709103310542.png]: /images/20220129/99c2497bdb144008a287e3fce6442e6a.png
[20190709103313619.png]: /images/20220129/4a795d031a7b4617bfa18e0402b84982.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20220129/352af5b891374d2199d01926ea261029.png
[vue_ip]: https://blog.csdn.net/veloi/article/details/88214866
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20220129/46329f5780d548db85633f44c8a7a806.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20220129/94f9fa8a889e47698e6e87cbbb7d1be0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20220129/ad2d8f74d8154e5b892eeb438e99c48c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5]: /images/20220129/37954ef5e7e14bd4a40084c5c2cbed15.png
[Vue]: https://juejin.im/post/5b5c2d986fb9a04f897840ac
[v-model _ _._.]: https://www.cnblogs.com/whm-blog/p/9436700.html
[vue]: https://blog.csdn.net/qq_43258252/article/details/87601457
[github]: https://github.com/fengyuanchen/vue-barcode
[JsBarcode]: https://github.com/lindell/JsBarcode#options
[Vue 2.0 _Axios_baseURL]: https://blog.csdn.net/qq_42514643/article/details/83827960
[vue 1]: https://www.cnblogs.com/luoxuemei/p/10314221.html
[javascript]: https://www.cnblogs.com/cfinder010/p/3852360.html