项目作者: fudiwei

项目描述 :
A component for displaying a dialog based on wepy.js 1.x.
高级语言:
项目地址: git://github.com/fudiwei/wepy-com-dialog.git
创建时间: 2019-11-02T08:00:42Z
项目社区:https://github.com/fudiwei/wepy-com-dialog

开源协议:MIT License

下载


wepy-com-dialog

一个对话框组件。

此组件依赖 wepy 1.7.0+。

如果你正在使用 wepy 2.x,请移步 wepy2-com-dialog


用法

安装:

  1. npm install @skit/wepy-com-dialog --save

导入:

  1. <template>
  2. <ui-dialog ></ui-dialog>
  3. </template>
  4. <script>
  5. import Wepy from 'wepy';
  6. import UIDialog from '@skit/wepy-com-dialog';
  7. export default class DemoPage extends Wepy.page {
  8. components = {
  9. 'ui-dialog': UIDialog
  10. };
  11. }
  12. </script>

可配置项

属性

参数项 说明 类型 是否必填 默认值
primaryTextColor 确认按钮文字颜色
(支持 16 进制色或 RGB/RGBA 色)
String #90241a

方法

  1. /**
  2. * 显示提示对话框。
  3. * @param {Object} options 配置项。
  4. * @param {String} options.title 提示标题。
  5. * @param {String} options.content 提示文本。
  6. * @param {String} options.confirmText 确定按钮的文字,默认为"好的"。
  7. * @param {String} options.confirmTextColor 确定按钮的文字颜色(会覆盖 primaryTextColor 属性)。
  8. * @param {String} options.textAlign 提示文本的对齐方式,支持“left”、“center”、“right”,默认值为“center”。
  9. * @param {Function} options.success 点击按钮后的回调方法。
  10. */
  11. this.$invoke('ui-dialog', 'alert', {
  12. title: '这是标题',
  13. content: '这是内容',
  14. confirmText: '确认',
  15. confirmTextColor: '#1fb8ca',
  16. textAlign: 'left',
  17. success: (res) => {
  18. // 点击确定按钮后执行操作
  19. }
  20. });
  21. /**
  22. * 显示提示对话框。
  23. * @param {String} content 提示文本。
  24. */
  25. this.$invoke('ui-dialog', 'alert', '这是内容');
  26. /**
  27. * 显示确认对话框。
  28. * @param {Object} options 配置项。
  29. * @param {String} options.title 提示标题。
  30. * @param {String} options.content 提示文本。
  31. * @param {String} options.confirmText 确定按钮的文字,默认为"好的"。
  32. * @param {String} options.confirmTextColor 确定按钮的文字颜色(会覆盖 primaryTextColor 属性)。
  33. * @param {String} options.cancelText 取消按钮的文字,默认为"取消"。
  34. * @param {String} options.textAlign 提示文本的对齐方式,支持“left”、“center”、“right”,默认值为“center”。
  35. * @param {Function} options.success 点击按钮后的回调方法,该方法将接收一个表示被点击按钮索引的参数。
  36. */
  37. this.$invoke('ui-dialog', 'confirm', {
  38. title: '这是标题',
  39. content: '这是内容',
  40. confirmText: '确认',
  41. confirmTextColor: '#1fb8ca',
  42. cancelText: '取消',
  43. textAlign: 'left',
  44. success: (res) => {
  45. switch (res.index) {
  46. case 0:
  47. // 点击取消按钮后执行操作
  48. break;
  49. case 1:
  50. // 点击确定按钮后执行操作
  51. break;
  52. }
  53. }
  54. });
  55. /**
  56. * 显示确认对话框。
  57. * @param {String} content 提示文本。
  58. */
  59. this.$invoke('ui-dialog', 'confirm', '这是内容');