index.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. import computeOffset from '../behaviors/computeOffset';
  2. import zIndex from '../behaviors/zIndex';
  3. import hover from '../behaviors/hover';
  4. Component({
  5. /**
  6. * 组件的属性列表
  7. */
  8. behaviors: [computeOffset,zIndex,hover],
  9. externalClasses: ['l-class', 'l-title-class', 'l-content-class', 'l-confirm-class', 'l-cancel-class', 'l-bg-class'],
  10. properties: {
  11. // 显示与隐藏
  12. show: {
  13. type: Boolean,
  14. value: false
  15. },
  16. // 类型 【 alert: 提示框, confrim: 确认框 】
  17. type: {
  18. type: String,
  19. value: 'alert'
  20. },
  21. // 标题文字
  22. title: {
  23. type: String,
  24. value: '提示'
  25. },
  26. // 是否显示标题
  27. showTitle: {
  28. type: Boolean,
  29. value: true
  30. },
  31. // 内容
  32. content: {
  33. type: String,
  34. value: ''
  35. },
  36. // 锁定
  37. locked: {
  38. type: Boolean,
  39. value: true
  40. },
  41. // 确定按钮的文本
  42. confirmText: {
  43. type: String,
  44. value: '确定'
  45. },
  46. // 确定按钮的颜色
  47. confirmColor: {
  48. type: String,
  49. value: '#3683d6'
  50. },
  51. // 取消按钮的文本
  52. cancelText: {
  53. type: String,
  54. value: '取消'
  55. },
  56. cancelColor: {
  57. type: String,
  58. value: '#45526b'
  59. },
  60. titleColor: String,
  61. contentColor: {
  62. type: String,
  63. value: 'rgba(89,108,142,1)'
  64. },
  65. openApi: {
  66. type: Boolean,
  67. value: true
  68. }
  69. },
  70. data: {
  71. success: null,
  72. fail: null,
  73. },
  74. /**
  75. * 组件的初始数据
  76. */
  77. attached() {
  78. if (this.data.openApi) {
  79. this.initDialog();
  80. }
  81. },
  82. pageLifetimes: {
  83. show() {
  84. if (this.data.openApi) {
  85. this.initDialog();
  86. }
  87. },
  88. },
  89. /**
  90. * 组件的方法列表
  91. */
  92. methods: {
  93. initDialog() {
  94. wx.lin = wx.lin || {};
  95. wx.lin.showDialog = (options) => {
  96. const {
  97. type = 'alert',
  98. title = '提示',
  99. showTitle = true,
  100. content = '',
  101. locked = true,
  102. confirmText = '确定',
  103. contentColor = 'rgba(89,108,142,1)',
  104. cancelColor = '#45526b',
  105. cancelText = '取消',
  106. confirmColor = '#3683d6',
  107. success = null,
  108. fail = null,
  109. } = options;
  110. this.setData({
  111. type,
  112. title,
  113. showTitle,
  114. content,
  115. locked,
  116. confirmText,
  117. cancelColor,
  118. cancelText,
  119. confirmColor,
  120. contentColor,
  121. show: true,
  122. fail,
  123. success
  124. });
  125. return this;
  126. };
  127. },
  128. // 确定按钮
  129. onConfirmTap() {
  130. let detail = 'confirm';
  131. let option = { bubbles: true, composed: true };
  132. const {
  133. success
  134. } = this.data;
  135. success && success({
  136. confirm: true,
  137. cancel: false,
  138. errMsg: 'showDialog: success'
  139. });
  140. this.setData({
  141. show: !this.data.show
  142. });
  143. this.triggerEvent('linconfirm', detail, option);
  144. },
  145. // 取消按钮
  146. onCancelTap() {
  147. let detail = 'cancel';
  148. let option = { bubbles: true, composed: true };
  149. const {
  150. success
  151. } = this.data;
  152. success && success({
  153. confirm: false,
  154. cancel: true,
  155. errMsg: 'showDialog: success'
  156. });
  157. this.setData({
  158. show: !this.data.show
  159. });
  160. this.triggerEvent('lincancel', detail, option);
  161. },
  162. // 背景点击事件
  163. onDialogTap() {
  164. let detail = true;
  165. let option = { bubbles: true, composed: true };
  166. if (this.data.locked !== true) {
  167. this.setData({
  168. show: !this.data.show
  169. });
  170. }
  171. this.triggerEvent('lintap', detail, option);
  172. }
  173. }
  174. });