Vue实现悬浮框自由移动+录音功能的示例代码

下面我将给出详细的攻略，讲解如何实现Vue实现悬浮框自由移动和录音功能的示例代码。

实现悬浮框自由移动

要实现悬浮框自由移动，我们可以使用Vue的自定义指令。首先，在Vue实例的directives属性中，新建一个名为drag的指令，并设置它的bind、update以及unbind方法，代码如下：

Vue.directive('drag', {
  bind(el, binding, vnode) {
    let oDiv = el;  // 获取当前元素
    let self = this;  // 缓存当前指令对象
    oDiv.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      let disX = e.clientX - oDiv.offsetLeft;
      let disY = e.clientY - oDiv.offsetTop;

      // 计算并缓存最大可移动距离
      let maxL = document.documentElement.clientWidth - oDiv.offsetWidth;
      let maxT = document.documentElement.clientHeight - oDiv.offsetHeight;

      // 绑定移动事件
      document.onmousemove = function(e) {
        // 计算移动距离
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        // 控制移动距离不超过最大可移动距离
        if(left < 0) left = 0;
        if(top < 0) top = 0;
        if(left > maxL) left = maxL;
        if(top > maxT) top = maxT;

        // 移动当前元素
        oDiv.style.left = left + 'px';
        oDiv.style.top = top + 'px';
      };

      // 绑定鼠标松开事件
      document.onmouseup = function() {
        // 解绑移动事件
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  update(el, binding, vnode) { },
  unbind(el, binding, vnode) { }
});

然后，在需要实现悬浮框自由移动的元素上，使用v-drag指令即可，如下：

<template>
  <div v-drag>悬浮框内容</div>
</template>

实现录音功能

要实现录音功能，我们可以使用Navigator.getUserMedia()方法获取用户媒体，以及使用MediaRecorder对象进行录音。首先，在Vue实例的data属性中，定义一个名为stream的属性，用于存储用户媒体流，以及定义一个名为isRecording的属性，用于表示当前是否正在录音。代码如下：

export default {
  data() {
    return {
      stream: null,
      isRecording: false
    };
  },
  // ...
}

然后，在需要录音的地方，使用以下代码获取用户媒体流，以及使用MediaRecorder对象进行录音：

this.isRecording = true;

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 获取用户媒体流
    this.stream = stream;

    // 创建MediaRecorder对象
    let recorder = new MediaRecorder(stream);

    // 监听数据可用事件，在数据可用时将数据存储到数组中
    let chunks = [];
    recorder.ondataavailable = e => chunks.push(e.data);

    // 监听录音结束事件，在录音结束时将数据拼接并生成录音文件下载链接
    recorder.onstop = e => {
      this.isRecording = false;
      let blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' });
      let url = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = url;
      a.download = 'record.ogg';
      a.click();
    };

    // 开始录音
    recorder.start();
  })
  .catch(err => console.log(err));

录音结束后，将数据拼接并生成录音文件下载链接，用户可以点击链接下载录音文件。

示例说明

接下来，我将分别给出两个使用示例：

示例一：悬浮框自由移动

在模板中，实现一个悬浮框，其中包含消息和关闭按钮：

<template>
  <div class="float-box" v-drag>
    <div class="float-box-msg">这是一条重要消息</div>
    <span class="float-box-close" @click="close">x</span>
  </div>
</template>

然后，在<script>标签中注册v-drag指令：

<template>
  <div class="float-box" v-drag>
    ...
  </div>
</template>

<script>
export default {
  directives: {
    drag: {
      bind(el, binding, vnode) {
        ...
      },
      update(el, binding, vnode) { },
      unbind(el, binding, vnode) { }
    }
  },
  methods: {
    close() { }
  }
};
</script>

通过这些步骤，就可以实现一个可以自由移动的悬浮框了。

示例二：录音功能

在模板中，实现一个录音按钮和一个显示录音状态的标签：

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <span v-if="isRecording">正在录音</span>
  </div>
</template>

然后，在<script>标签中实现录音功能：

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null,
      isRecording: false
    };
  },
  methods: {
    startRecording() {
      this.isRecording = true;

      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          this.stream = stream;

          let recorder = new MediaRecorder(stream);
          let chunks = [];
          recorder.ondataavailable = e => chunks.push(e.data);
          recorder.onstop = e => {
            this.isRecording = false;
            let blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' });
            let url = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = 'record.ogg';
            a.click();
          };

          recorder.start();
        })
        .catch(err => console.log(err));
    }
  }
};
</script>

通过这些步骤，就可以实现一个简单的录音功能了。当用户点击“开始录音”按钮时，将开始录音，当录音结束时，将生成录音文件下载链接，并提示用户可以点击链接下载录音文件。