vue2首页面设置一个按钮，点击按钮打开一个悬浮框，悬浮框可以永久显示在页面上方，且不影响其他操作，悬浮框里内容为操作说明，是一个pdf格式的文档，可以点击翻页，可以输入页码点击跳转，具体代码实现

在 Vue2 中，你可以使用 `v-if` 和 `v-show` 来控制浮动框的显示隐藏，以及 Vue 的事件系统来处理用户的交互。这里有一个简单的实现思路：

首先，你需要创建一个组件来表示浮动框，包含PDF预览、翻页功能和页码输入。例如，你可以使用vue-pdf这个库来预览PDF。

<template>
  <div ref="floatingBox" v-if="showFloatingBox">
    <pdf-preview :src="pdfSrc" @page-change="onPageChange"></pdf-preview>
    <input type="number" v-model.number="currentPage" @input="jumpToPage">
    <button @click="toggleFloatingBox">关闭浮框</button>
  </div>
</template>

<script>
import PdfPreview from 'vue-pdf';

export default {
  components: { PdfPreview },
  data() {
    return {
      showFloatingBox: false,
      pdfSrc: 'path/to/your/pdf/document.pdf',
      currentPage: 1,
    };
  },
  methods: {
    toggleFloatingBox() {
      this.showFloatingBox = !this.showFloatingBox;
    },
    onPageChange(page) {
      this.currentPage = page;
    },
    jumpToPage(e) {
      const inputValue = parseInt(e.target.value);
      if (!isNaN(inputValue)) {
        this.currentPage = inputValue;
      }
    },
  },
};
</script>

然后，在你的主组件（如App.vue）中初始化并添加点击按钮的事件：

<template>
  <div id="app">
    <!-- 其他内容 -->
    <button @click="openFloatingBox">打开悬浮框</button>
    <FloatingBox />
  </div>
</template>

<script>
import FloatingBox from '@/components/FloatingBox.vue';

export default {
  components: {
    FloatingBox,
  },
  methods: {
    openFloatingBox() {
      this.$refs.floatingBox.style.position = 'fixed'; // 设置浮动位置
      this.$refs.floatingBox.style.top = '0';
      this.$refs.floatingBox.style.left = '0';
      this.showFloatingBox = true; // 显示浮动框
    },
  },
};
</script>

这只是一个基础示例，实际项目中可能需要考虑更多细节，比如CSS样式调整、错误处理等。同时，确保在Vue应用实例渲染完成后才尝试修改DOM元素的样式。