vue-bottom-sheet是一个基于Vue.js的底部弹窗组件，它提供了丰富的功能，包括支持拖拽、半屏/全屏切换等。以下是一个简单的示例代码：

1. 首先，在`src/components`目录下创建一个名为`BottomSheet.vue`的文件，并添加以下代码：

  

    

  







import { ref, reactive } from 'vue'



export default {

  setup() {

    const bottomSheet = ref(null)

    const isDragging = ref(false)



    function startDrag() {

      isDragging.value = true

    }



    function stopDrag() {

      isDragging.value = false

    }



    function handleMouseDown(event) {

      if (isDragging.value) {

        event.stopPropagation()

        return

      }

      bottomSheet.value.nativeElement.style.display = 'block'

      bottomSheet.value.nativeElement.style.position = 'absolute'

      bottomSheet.value.nativeElement.style.top = `${bottomSheet.value.nativeElement.scrollHeight - window.innerHeight}px`

      bottomSheet.value.nativeElement.style.left = `50`

      bottomSheet.value.nativeElement.style.transform = 'translateX(-50)'

      bottomSheet.value.nativeElement.style.zIndex = '999'

    }



    function handleMouseMove(event) {

      if (isDragging.value) {

        event.stopPropagation()

        return

      }

      bottomSheet.value.nativeElement.style.left = `${event.clientX}px`

    }



    function handleMouseUp() {

      isDragging.value = false

    }



    return { bottomSheet, isDragging, startDrag, stopDrag, handleMouseDown, handleMouseMove, handleMouseUp }

  }

}

2. 接下来，在`src/App.vue`文件中引入并使用`BottomSheet`组件：

  

    

      

    

  







import BottomSheet from './components/BottomSheet'



export default {

  components: {

    BottomSheet

  },

  setup() {

    // ...

  }

}

在这个示例中，我们创建了一个底部弹窗组件，当用户按下鼠标时，弹窗会显示并允许拖拽；当用户释放鼠标时，弹窗会隐藏。你可以根据需要自定义弹窗的内容和样式。一个功能完整的移动端底部弹窗组件，支持拖拽、半屏/全屏切换