JS实现页面打印,Vue组件实例间的直接访问实现代码

 手提式有线电话机的屏幕有大有小,移动web最棒做成响应式布局,也正是自适应显示屏,未有牢固宽高,那样的话,在享有手提式有线电话机上都得以寻常展现。关于移动端页面按手提式有线话机显示器分辨率自动缩放的js,先附上代码

大家在网页开荒进度中时时会有打字与印刷页面包车型大巴须求,通过JS来促成的办法有十分的多,这里笔者做了3个收十,供大家参谋。

眼下的话

<script>
 var phoneWidth = parseInt(window.screen.width);
 var phoneHeight = parseInt(window.screen.height);
 var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
 var ua = navigator.userAgent;
 if (/Android (\d+\.\d+)/.test(ua)) {
 var version = parseFloat(RegExp.$1);
 // andriod 2.3
 if (version > 2.3) {
 document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
 // andriod 2.3以上
 } else {
 document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
 }
 // 其他系统
 } else {
 document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
 }
</script>      

方式一:window.print()

  一时候需求父组件访问子组件,子组件访问父组件,只怕是子组件访问根组件。
在组件实例中,Vue提供了对应的习性,包涵$parent、$children、$refs和$root,那些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的一直访问

做手提式有线电话机端页面最头疼的正是物理分辨率和逻辑分辨率的调换了,当获得设计图的时候,图基本都以按物理分辨率来统一希图的,一般常用的为640(iphone5/五s)、750(iphone6/陆s),而Google等浏览器选取小手提式有线电话机方式浏览页面包车型客车时候,下面的值为逻辑分辨率,调节和测试的时候很难把控页面样式,在手提式有线电话机端的样式也会为此大乱,在页面尾部参与上述壹段js之后,在手机端就能够平常显示了,

总体打印

$parent 

var phoneScale = phoneWidth/750;

<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>

  $parent表示父组件的实例,该属性只读

除以的为宏图图设计的页面宽度,750是按iphone6来设计(依照本身使用须要来修改),即让页面的放大比率=显示屏的逻辑分辨率/物理分辨率,从而到达适应手提式有线电话机的效应。

明日就轻巧实现了页面包车型大巴打字与印刷,不过这种艺术会将整个页面打字与印刷,若是想要完毕钦点区域的打字与印刷必要经过上边包车型地铁安装

  上面是贰个简练实例

(注意,有的时候候页面加了这段代码在调解的时候,切记刷新,刷新之后就能够按手提式有线话机缩放比例彰显)

有个别打字与印刷

<div id="example">
 <parent-component></parent-component>
</div>
<template id="parent-component">
 <div class="parent">
 <h3>我是父组件</h3>
 <input v-model="parentMsg">
 <p>{{parentMsg}}</p>
 <child-component></child-component> 
 </div>
</template>
<template id="child-component">
 <div class="child">
 <h3>我是子组件</h3>
 <p>{{msg}}</p>
 <button v-on:click="showData">显示父组件数据</button> 
 </div>
</template>


<script>
// 注册
Vue.component('parent-component', {
 template: '#parent-component',
 data(){
 return{
  parentMsg:'我是父组件的数据'
 }
 },
 components:{
 'child-component':{
  template:'#child-component',
  data(){
  return{
   msg:''
  }
  },
  methods:{
  showData(){
   this.msg = this.$parent.parentMsg;
  }
  }
 }
 }
})
// 创建根实例
new Vue({
 el: '#example'
})
</script>

概念分析:

先是,在html中,通过star和end来标志打字与印刷区域

$root 

phys.width:一般大家所指的肥瘦width即为phys.width,物理宽度(物理分辨率)

<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">
  这里是需要打印的内容
    .....
</div>
<!--endprint-->
<h1>这块内容不需要打印</h1>

  $root表示近来组件树的根 Vue
实例。假如当前实例未有父实例,此实例将会是其和睦。该属性只读

device-width:又称之为css-width,设备宽度(逻辑分辨率)

接下来,在点击事件中增多如下代码

<div id="example">
 <h3>我是根组件</h3>
 <input v-model="rootMsg">
 <p>{{rootMsg}}</p> 
 <parent-component></parent-component>
</div>
<template id="parent-component">
 <div class="parent">
 <h3>我是父组件</h3>
 <input v-model="parentMsg">
 <p>{{parentMsg}}</p>
 <child-component></child-component> 
 </div>
</template>
<template id="child-component">
 <div class="child">
 <h3>我是子组件</h3>
 <p>
  <button v-on:click="showRootData">显示根组件数据</button>{{rootMsg}}
 </p>  
 <p>
  <button v-on:click="showParentData">显示父组件数据</button>{{parentMsg}}
 </p>
 </div>
</template>


<script>
// 注册
Vue.component('parent-component', {
 template: '#parent-component',
 data(){
 return{
  parentMsg:'我是父组件的数据'
 }
 },
 components:{
 'child-component':{
  template:'#child-component',
  data(){
  return{
   parentMsg:'',
   rootMsg:''
  }
  },
  methods:{
  showParentData(){
   this.parentMsg = this.$parent.parentMsg;
  },
  showRootData(){
   this.rootMsg = this.$root.rootMsg;
  },  
  }
 }
 }
})
// 创建根实例
new Vue({
 el: '#example',
 data:{
 rootMsg:'我是根组件数据'
 }
})
</script>

中间大家可以猎取phys.width通过document.documentElement.clientWidth;

function doPrint() {   
    bdhtml=window.document.body.innerHTML;   
    sprnstr="<!--startprint-->";   
    eprnstr="<!--endprint-->";   
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
    window.document.body.innerHTML=prnhtml;  
    window.print();   
}  

$children 

而获取css-width通过 window.screen.width获取。

过滤打字与印刷区域的剧情

  $children表示近期实例的直接子组件。必要专注$children并不保险顺序,也不是响应式的。借使正在品尝利用$children来进展数量绑定,思索使用多个数组同盟v-for来生成子组件,并且选用Array作为真正的来源

因此这里  phoneWidth(逻辑分辨率) = parseInt(window.screen.width);

例如

<div id="example">
 <parent-component></parent-component>
</div>
<template id="parent-component">
 <div class="parent">
 <h3>我是父组件</h3>
 <button @click="getData">获取子组件数据</button>
 <br>
 <div v-html="msg"></div>
 <child-component1></child-component1> 
 <child-component2></child-component2> 
 </div>
</template>
<template id="child-component1">
 <div class="child">
 <h3>我是子组件1</h3>
 <input v-model="msg">
 <p>{{msg}}</p>
 </div>
</template>
<template id="child-component2">
 <div class="child">
 <h3>我是子组件2</h3>
 <input v-model="msg">
 <p>{{msg}}</p>
 </div>
</template>


<script>
// 注册
Vue.component('parent-component', {
 template: '#parent-component',
 data(){
 return{
  msg:'',
 }
 },
 methods:{
 getData(){
  let html = '';
  let children = this.$children;
  for(var i = 0; i < children.length;i++){
  html+= '<div>' + children[i].msg + '</div>';
  }
  this.msg = html;
 }
 },
 components:{
 'child-component1':{
  template:'#child-component1',
  data(){
  return{
   msg:'',
  }
  },
 },
 'child-component2':{
  template:'#child-component2',
  data(){
  return{
   msg:'',
  }
  },
 }, 
 } 
})
// 创建根实例
new Vue({
 el: '#example',
})
</script>

如iphone6的phys.width为750px,而css-width为375px。

<!--startprint-->
<div class="content">
  <button class="noprint">预览</button>
  <button class="noprint">打印</button>
   这里是需要打印的内容
    .....
  </div>
<!--endprint-->

$refs

发表评论

电子邮件地址不会被公开。 必填项已用*标注