fs-dropdown.vue 604 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="fs-dropdown">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script setup>
  7. import { provide, reactive } from 'vue'
  8. const state = reactive({
  9. children: []
  10. })
  11. const updateChildren = child => {
  12. state.children.push(child)
  13. }
  14. const toggle = () => {
  15. state.children.forEach(child => {
  16. child.updateState()
  17. })
  18. }
  19. const close = () => {
  20. toggle()
  21. }
  22. provide('dropdownGroup', {
  23. updateChildren,
  24. toggle
  25. })
  26. defineExpose({
  27. close
  28. })
  29. </script>
  30. <style lang="scss" scoped>
  31. .fs-dropdown{
  32. display: flex;
  33. align-items: center;
  34. background-color: #fff;
  35. position: relative;
  36. z-index: 100;
  37. }
  38. </style>