浏览器打印解决input框内容无法获取值得问题 print()

在使用浏览器的打印功能时，在DOM上，input中的值没有在元素内，只有纯文本的才可以被print();可以动态设置input的value值，实现input也可以打印出来

1. 使用vue的自定义指令来实现input的打印功能
2. 由于打印是浏览器重新打开一个html文件来实现的，所以在原页面使用的样式都是无效的，要编写打印html的时候要把css文件引入进去，或者在打印的html文件里直接写style样式，或者通过vue的data设置样式变量，在文件中引用，

方法一：使用vue的自定义指令，给input绑定，在自定义指令中设置addEventListener监听事件，通过改变动态设置input中value的值
例如

// 设置style的意思是在打印跟展示的时候input框都是100px，其他样式也是一样设置，
//也可以写class，但是在写打印的html的时候要把class的css文件引入,
//设置name的原因是，如果多个input的name值都是一样的话就可以实现改一处多处同步打印，
//不然的话只能改修改的input，不能改其他一样绑定v-model= 'name'的input框，即姓名1姓名2同步修改
姓名1：<input type='text' style='width:100px;' v-set-input-value v-model= 'name' name='name'>
姓名2：<input type='text' style='width:100px;' v-set-input-value v-model= 'name' name='name'>

// 自定义指令 全局指令,引用就自行引用了
import Vue form 'vue'
Vue.directive('setInputValue', {
	bind(el) {
		// 一挂载input先绑定value值，解决不修改input值时input无法打印
		el.setAttribute('value',el.value)
	},
	inserted(el) {
		//监听每次改变input的值时动态绑定进value
		el.addEventListener('change', (val) => {
			// 要给对应的input绑定相同的name值，表示是一致的元素，改变其中一个，其他的也会跟着改动
			if (el.name) {
				let name = document.getElementsByName(el.name)
				name.forEach(item => {
					item.setAttribute('value',val,target.value)
				})
			} else {
				el.setAttribute('value',val,target.value)
			}
		})
	}
})


// 打印的html我就不写啦，自行百度吧，很多的

方法二：就是可以直接把input里面的值设置为v-text，但是这样的话input是无法动态修改的
方法三：就是重新定位div标签，当input改变值的时候把div显示起来，把input隐藏起来，但是这样子很麻烦

ps：觉得有用的就点个赞呗，感谢各位大佬，嘻嘻嘻