异步vue-print-nb

// 异步引入vue-print-nb
// 在需要使用的地方，使用import()动态引入vue-print-nb
import('@/lib/vue-print-nb/print.umd.min').then(Print => {
  Vue.use(Print)
})

// 异步引入vue-print-nb的自定义指令
// 在需要使用的地方，使用import()动态引入vue-print-nb的自定义指令
import('vue-print-nb').then(print => {
  Vue.directive('print', print)
})

相关问题

vue2 使用vue-print-nb实现打印功能_vue-print-nb插件在手机上没有效果

以下是使用vue-print-nb插件实现打印功能的示例代码：

1. 首先，安装vue-print-nb插件：

npm install vue-print-nb --save

2. 在Vue项目的入口文件中引入vue-print-nb插件：

import Vue from 'vue'
import Print from 'vue-print-nb'

Vue.use(Print)

3. 在需要打印的组件中，使用v-print指令来触发打印功能：

<template>
  <div>
    <!-- 打印按钮 -->
    <button v-print="'printArea'">打印</button>

    <!-- 需要打印的内容 -->
    <div id="printArea">
      <!-- 这里是需要打印的内容 -->
    </div>
  </div>
</template>

请注意，为了使打印功能在手机上生效，你需要确保以下几点：
- 确保你的手机浏览器支持打印功能。
- 确保你的打印内容在手机上可见，不会被隐藏或溢出屏幕。
- 确保你的打印内容的样式在手机上正常显示。

vue-print-nb 用v-print方式使用

如果你已经在项目中使用了v-print，但是想使用vue-print-nb的打印功能，也是可以实现的。具体步骤如下：

1. 安装vue-print-nb

首先需要安装vue-print-nb：

npm install vue-print-nb --save

2. 注册vue-print-nb

在Vue项目中引入vue-print-nb，并将其注册为Vue插件：

import Vue from 'vue'
import Print from 'vue-print-nb'

Vue.use(Print);

3. 在v-print中使用vue-print-nb

在需要打印的组件中，将需要打印的内容放在一个`v-print`标签中，并添加一个`print`属性，该属性可以是一个函数或一个字符串，表示要打印的元素的选择器或选择器数组。然后在该组件中添加一个按钮，当点击该按钮时，会触发打印事件，如下所示：

<template>
  <div>
    <!-- 打印按钮 -->
    <button @click="print">打印</button>
    
    <!-- 打印内容 -->
    <v-print :print="printSelector">
      <!-- 内容 -->
    </v-print>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      printSelector: '.print-content' // 要打印的元素的选择器
    }
  },
  methods: {
    print() {
      // 打印内容
      this.$print(this.$refs.print.$el);
    }
  }
}
</script>

在上面的示例中，我们在组件的模板中添加了一个打印按钮，并在点击该按钮时触发了`print`方法，该方法会将我们需要打印的内容，即`<v-print>`标签中的内容打印出来。同时，我们将要打印的元素的选择器设置为了`.print-content`。

以上就是在v-print中使用vue-print-nb的方法，可以通过这种方式来方便地使用vue-print-nb的打印功能。