FloatButton

FloatButton wc组件

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/535840/1588055/FloatButton.js

  1. /**
  2. * @extends {HTMLElement}
  3. */
  4. class FloatButton extends HTMLElement {
  5. constructor() {
  6. super();
  7. const shadowRoot = this.attachShadow({ mode: "open" });
  8. const style = document.createElement("style");
  9. style.textContent = `
  10. :host {
  11. /* 避免外部css的影响 */
  12. all: initial;
  13. font-size: normal;
  14. position: fixed;
  15. left: 5px;
  16. top: 20%;
  17. transform: translateY(-50%);
  18. z-index: 1000;
  19. }
  20. .float-button {
  21. width: 35px;
  22. height: 35px;
  23. border-radius: 50%;
  24. background:rgba(251, 114, 153, 0.75);
  25. color: white;
  26. border: none;
  27. cursor: pointer;
  28. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  29. transition: all 0.3s ease;
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. font-size: 20px;
  34. }
  35.  
  36. .float-button:hover {
  37. background: #fb7299;
  38. transform: scale(1.1);
  39. }
  40. .panel {
  41. position: absolute;
  42. display: flex;
  43. left: 50px;
  44. top: 0;
  45. gap: 9px;
  46. justify-content: center;
  47. flex-wrap: wrap;
  48. background: white;
  49. border-radius: 8px;
  50. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  51. width: 200px;
  52. padding: 10px;
  53. opacity: 0;
  54. transform: translateX(-20px);
  55. transition: all 0.3s ease;
  56. pointer-events: none;
  57. }
  58. .panel.open {
  59. opacity: 1;
  60. transform: translateX(0);
  61. pointer-events: all;
  62. }
  63. .close {
  64. transform: rotate(180deg);
  65. }`;
  66. shadowRoot.innerHTML = `
  67. <button class="float-button">+</button>
  68. <div class="panel">
  69. <div class="input-group">
  70. <slot name="interval-faster">Widget Missing</slot>
  71. </div>
  72. <div class="input-group">
  73. <slot name="interval-slower">Widget Missing</slot>
  74. </div>
  75. </div>`;
  76. shadowRoot.append(style);
  77. const floatBtn = shadowRoot.querySelector(".float-button");
  78. const panel = shadowRoot.querySelector(".panel");
  79.  
  80. floatBtn.addEventListener("click", () => {
  81. panel.classList.toggle("open");
  82. floatBtn.classList.toggle("close");
  83. });
  84. }
  85. }
  86. customElements.define("float-button", FloatButton);

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址