目录
Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口
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还不能访问,最好是关闭开发机的防火墙,如果你不怕麻烦也可添加放行端口
Vue父子组件如何双向绑定传值
原文文章:Vue父子组件如何双向绑定传值
参考:使用 v-model 实现 双向绑定.(子组件和父组件.)
vue中配置条形码
原文文章:vue中配置条形码
Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口
原文文章:Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口
vue监听页面大小变化重新刷新布局
原文文章:vue监听页面大小变化重新刷新布局
javascript页面刷新的几种方法
原文文章:javascript页面刷新的几种方法