prompt_modal.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. {{define "promptModal"}}
  2. <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
  3. :closable="true" @ok="promptModal.ok" :mask-closable="false"
  4. :confirm-loading="promptModal.confirmLoading"
  5. :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
  6. <a-input id="prompt-modal-input" :type="promptModal.type"
  7. v-model="promptModal.value"
  8. :autosize="{minRows: 10, maxRows: 20}"
  9. @keydown.enter.native="promptModal.keyEnter"
  10. @keydown.ctrl.83="promptModal.ctrlS"></a-input>
  11. </a-modal>
  12. <script>
  13. const promptModal = {
  14. title: '',
  15. type: '',
  16. value: '',
  17. okText: '{{ i18n "sure"}}',
  18. visible: false,
  19. confirmLoading: false,
  20. keyEnter(e) {
  21. if (this.type !== 'textarea') {
  22. e.preventDefault();
  23. this.ok();
  24. }
  25. },
  26. ctrlS(e) {
  27. if (this.type === 'textarea') {
  28. e.preventDefault();
  29. promptModal.confirm(promptModal.value);
  30. }
  31. },
  32. ok() {
  33. promptModal.confirm(promptModal.value);
  34. },
  35. confirm() {},
  36. open({
  37. title = '',
  38. type = 'text',
  39. value = '',
  40. okText = '{{ i18n "sure"}}',
  41. confirm = () => {},
  42. }) {
  43. this.title = title;
  44. this.type = type;
  45. this.value = value;
  46. this.okText = okText;
  47. this.confirm = confirm;
  48. this.visible = true;
  49. promptModalApp.$nextTick(() => {
  50. document.querySelector('#prompt-modal-input').focus();
  51. });
  52. },
  53. close() {
  54. this.visible = false;
  55. },
  56. loading(loading=true) {
  57. this.confirmLoading = loading;
  58. },
  59. };
  60. const promptModalApp = new Vue({
  61. el: '#prompt-modal',
  62. data: {
  63. promptModal: promptModal,
  64. },
  65. });
  66. </script>
  67. {{end}}