tui-fab.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. Component({
  2. properties: {
  3. //rpx 为0时值为auto
  4. left: {
  5. type: Number,
  6. value: 0
  7. },
  8. //rpx 当为0时且left不为0,值为auto
  9. right: {
  10. type: Number,
  11. value: 80
  12. },
  13. //rpx bottom值
  14. bottom: {
  15. type: Number,
  16. value: 100
  17. },
  18. //默认按钮 宽度 rpx
  19. width: {
  20. type: Number,
  21. value: 108
  22. },
  23. //默认按钮 高度 rpx
  24. height: {
  25. type: Number,
  26. value: 108
  27. },
  28. //圆角值
  29. radius: {
  30. type: String,
  31. value: "50%"
  32. },
  33. //默认按钮背景颜色
  34. bgColor: {
  35. type: String,
  36. value: "#5677fc"
  37. },
  38. //字体颜色
  39. color: {
  40. type: String,
  41. value: "#fff"
  42. },
  43. //拓展按钮
  44. // bgColor: "#5677fc",
  45. // //图标/图片地址
  46. // imgUrl: "/static/images/fab/fab_reward.png",
  47. // //图片高度 rpx
  48. // imgHeight: 60,
  49. // //图片宽度 rpx
  50. // imgWidth: 60,
  51. // //名称
  52. // text: "名称",
  53. // //字体大小
  54. // fontSize: 30,
  55. // //字体颜色
  56. // color: "#fff"
  57. btnList: {
  58. type: Array,
  59. value: []
  60. },
  61. //点击遮罩 是否可关闭
  62. maskClosable: {
  63. type: Boolean,
  64. value: false
  65. }
  66. },
  67. data: {
  68. isOpen: false,
  69. hidden: true,
  70. timer: null
  71. },
  72. methods: {
  73. stop() {},
  74. handleClick: function(e) {
  75. let index = e.currentTarget.dataset.index
  76. this.setData({
  77. hidden: false
  78. })
  79. clearTimeout(this.data.timer)
  80. if (index == -1 && this.data.btnList.length) {
  81. this.setData({
  82. isOpen: !this.data.isOpen
  83. })
  84. } else {
  85. this.triggerEvent("click", {
  86. index: Number(index)
  87. })
  88. this.setData({
  89. isOpen: false
  90. })
  91. }
  92. if (!this.data.isOpen) {
  93. this.setData({
  94. timer: setTimeout(() => {
  95. this.setData({
  96. hidden: true
  97. })
  98. }, 200)
  99. })
  100. }
  101. },
  102. handleClickCancel: function() {
  103. if (!this.data.maskClosable) return;
  104. this.setData({
  105. isOpen: false
  106. })
  107. }
  108. }
  109. })