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

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

使用vue的自定义指令来实现input的打印功能
由于打印是浏览器重新打开一个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：姓名2：// 自定义指令全局指令,引用就自行引用了 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隐藏起来，但是这样子很麻烦
【html|浏览器打印解决input框内容无法获取值得问题 print()】ps：觉得有用的就点个赞呗，感谢各位大佬，嘻嘻嘻