modal.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. Component({
  2. externalClasses: ['tui-modal-class'],
  3. properties: {
  4. //是否显示
  5. show:{
  6. type:Boolean,
  7. value:false
  8. },
  9. width: {
  10. type: String,
  11. value: "84%"
  12. },
  13. padding: {
  14. type: String,
  15. value: "40rpx 64rpx"
  16. },
  17. radius: {
  18. type: String,
  19. value: "24rpx"
  20. },
  21. //标题
  22. title: {
  23. type: String,
  24. value: ""
  25. },
  26. //内容
  27. content: {
  28. type: String,
  29. value: ""
  30. },
  31. //内容字体颜色
  32. color: {
  33. type: String,
  34. value: "#999"
  35. },
  36. //内容字体大小
  37. size: {
  38. type: Number,
  39. value: 28
  40. },
  41. //形状 circle, square
  42. shape: {
  43. type: String,
  44. value: 'square'
  45. },
  46. button: {
  47. type: Array,
  48. value: [{
  49. text: "取消",
  50. type: "red",
  51. plain: true //是否空心
  52. }, {
  53. text: "确定",
  54. type: "red",
  55. plain: false
  56. }]
  57. },
  58. //点击遮罩 是否可关闭
  59. maskClosable: {
  60. type: Boolean,
  61. value: true
  62. },
  63. //自定义弹窗内容
  64. custom:{
  65. type:Boolean,
  66. value:false
  67. },
  68. //淡入效果,自定义弹框插入input输入框时传true
  69. fadein: {
  70. type: Boolean,
  71. value: false
  72. }
  73. },
  74. data: {
  75. },
  76. methods: {
  77. handleClick(e) {
  78. if (!this.data.show) return;
  79. const dataset = e.currentTarget.dataset;
  80. this.triggerEvent('click', {
  81. index: Number(dataset.index)
  82. });
  83. },
  84. handleClickCancel() {
  85. if(!this.data.maskClosable) return;
  86. this.triggerEvent('cancel');
  87. },
  88. forbid(){}
  89. }
  90. })