<template>
	<div id="app">
		<button v-print='printObj'>Print the entire page</button>
		<div id="printMe" style="background:red;">
			<div ref="qrcode"></div>

			<input type="number">
			<input type="time">
			<input type="checkbox">
			<input type="radio">
			<select>
				<option value="volvo">Volvo</option>
				<option value="saab">Saab</option>
				<option value="mercedes">Mercedes</option>
				<option value="audi">Audi</option>
			</select>

			<select>
				<option value="volvo">Volvo</option>
				<option value="saab">Saab</option>
				<option value="mercedes">Mercedes</option>
				<option value="audi">Audi</option>
			</select>
			<textarea name="" id="" cols="30" rows="10"></textarea>
			<p>钁姦濞冿紝钁姦濞�</p>
			<p style="background:yellow;">涓€鏍硅棨涓婁竷鏈佃姳 </p>
			<p>灏忓皬鏍戣棨鏄垜瀹� 鍟﹀暒鍟﹀暒 </p>
			<p>鍙綋褰撳挌鍜氬綋褰撱€€娴囦笉澶�</p>
			<p> 鍙綋褰撳挌鍜氬綋褰� 鏄垜瀹�</p>
			<p> 鍟﹀暒鍟﹀暒</p>
			<p>...</p>
		</div>
	</div>
</template>
<style type="text/css">
	p {
		color: blue;
	}
</style>
<script>
	import QRCode from 'qrcodejs2';
	export default {
		name: 'app',
		data() {
			return {
				printObj: {
					id: "printMe",
					popTitle: 'good print',
					extraCss: 'https://www.baidu.com/,https://www.baidu.com/',
					extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
				}
			};
		},

		mounted() {
			this.$nextTick(() => {
				new QRCode(this.$refs.qrcode, {
					width: 100,
					height: 100, 
					text: 'https://www.baidu.com/'
				})
			})
		}
	}
</script>

<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>