首页在html直接引入unpkg.com_vue3-print-nb@0.1.4_dist_vue3-print-nb.umd.js怎么使用

在html直接引入unpkg.com_vue3-print-nb@0.1.4_dist_vue3-print-nb.umd.js怎么使用

时间: 2023-11-15 17:01:09 浏览: 113

利用vue+print打印的js文件

在网页直接打印，vue+print

在html直接引入unpkg.com_vue3-print-nb@0.1.4_dist_vue3-print-nb.umd.js后，你可以通过以下步骤来使用它： 1. 在html文件中添加一个div元素，用于挂载Vue实例。 2. 创建Vue实例，并将其挂载到上一步中创建的div元素上。 3. 在Vue实例中引入Vue3PrintNb组件。 4. 在Vue实例的template中使用Vue3PrintNb组件。下面是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue3PrintNb Example</title> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vue3-print-nb@0.1.4/dist/vue3-print-nb.umd.js"></script> </head> <body> <div id="app"></div> <script> const app = Vue.createApp({ components: { Vue3PrintNb: window.Vue3PrintNb.default }, template: ` <div> <Vue3PrintNb :print-content="'Hello, Vue3PrintNb!'"> <button>Print</button> </Vue3PrintNb> </div> ` }) app.mount('#app') </script> </body> </html> ``` 在这个示例中，我们创建了一个Vue实例，并在其中引入了Vue3PrintNb组件。在Vue实例的template中，我们使用了Vue3PrintNb组件，并将其包裹在一个button元素中。当用户点击这个按钮时，Vue3PrintNb组件会将print-content属性中的内容打印出来。

阅读全文