modal.js 1.7 KB

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