s-float-menu.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <!-- 模态背景:展开时显示,点击后折叠 -->
  3. <view class="modal-bg" v-if="fabRef?.isShow" @click="handleCollapseFab"></view>
  4. <!-- 悬浮按钮 -->
  5. <uni-fab
  6. ref="fabRef"
  7. horizontal="right"
  8. vertical="bottom"
  9. :direction="state.direction"
  10. :pattern="state.pattern"
  11. :content="state.content"
  12. @trigger="handleOpenLink"
  13. />
  14. </template>
  15. <script setup>
  16. /**
  17. * 悬浮按钮
  18. */
  19. import sheep from '@/sheep';
  20. import { reactive, ref, unref } from 'vue';
  21. import { onBackPress } from '@dcloudio/uni-app';
  22. // 定义属性
  23. const props = defineProps({
  24. data: {
  25. type: Object,
  26. default() {
  27. return {
  28. // horizontal vertical
  29. direction: 'vertical',
  30. showText: true,
  31. list: [{
  32. imgUrl: 'http://localhost/logo.gif',
  33. url: '',
  34. text: '客服',
  35. textColor: '',
  36. }],
  37. }
  38. },
  39. }
  40. })
  41. // 悬浮按钮配置: https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html#fab-props
  42. const state = reactive({
  43. // 可选样式配置项
  44. pattern: [],
  45. // 展开菜单内容配置项
  46. content: [],
  47. // 展开菜单显示方式:horizontal-水平显示,vertical-垂直显示
  48. direction: '',
  49. });
  50. // 悬浮按钮引用
  51. const fabRef = ref(null);
  52. // 按钮方向
  53. state.direction = props.data.direction;
  54. props.data?.list.forEach((item) => {
  55. // 按钮文字
  56. const text = props.data?.showText ? item.text : ''
  57. // 生成内容配置项
  58. state.content.push({ iconPath: sheep.$url.cdn(item.imgUrl), url: item.url, text });
  59. // 生成样式配置项
  60. state.pattern.push({ color: item.textColor });
  61. });
  62. // 处理链接跳转
  63. function handleOpenLink(e) {
  64. sheep.$router.go(e.item.url);
  65. }
  66. // 折叠
  67. function handleCollapseFab() {
  68. if (unref(fabRef)?.isShow) {
  69. unref(fabRef)?.close();
  70. }
  71. }
  72. // 按返回值后,折叠悬浮按钮
  73. onBackPress(() => {
  74. if (unref(fabRef)?.isShow) {
  75. unref(fabRef)?.close();
  76. return true;
  77. }
  78. return false;
  79. });
  80. </script>
  81. <style lang="scss" scoped>
  82. /* 模态背景 */
  83. .modal-bg {
  84. position: fixed;
  85. left: 0;
  86. top: 0;
  87. z-index: 11;
  88. width: 100%;
  89. height: 100%;
  90. background-color: rgba(#000000, 0.4);
  91. }
  92. </style>