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

最新推荐文章于 2023-07-12 17:45:29 发布

不一于汝

最新推荐文章于 2023-07-12 17:45:29 发布

阅读量620

点赞数 1

分类专栏：前端工作遇到的问题前端 vue 文章标签：前端工作遇到的问题 vue

前端同时被 3 个专栏收录

70 篇文章 0 订阅

订阅专栏

vue

21 篇文章 2 订阅

订阅专栏

前端工作遇到的问题

9 篇文章 0 订阅

订阅专栏

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

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

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

javascript页面刷新的几种方法

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

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

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

效果图如element官网所示：

使用：

<el-scrollbar></el-scrollbar>

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

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

示例使用如下：

vue实现打印：

打印的代码：

参考文章：vue+iframe实现打印效果 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：)

<div ref="print" class="print-content">

方法：

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

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

（注意）：

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

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 cache clean -f

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());
```
结果：
```
var timestamp = (new Date()).valueOf();
```
结果：
```
var timestamp=new Date().getTime()；
```
结果：

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

代码：

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访问配置设置

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

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

改成上一步的ip地址

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

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

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端工作过程遇到的问题总结(六)-Vue篇--(中部)

目录vue element隐藏组件滚动条scrollbar使用vue实现打印：npm清理缓存js获取当天时间0点到24点的时间戳vue项目让局域网ip访问配置设置Vue父子组件如何双向绑定传值vue中配置条形码Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口vue监听页面大小变化重新刷新布局javascript页面刷新的几种方法...
复制链接

扫一扫