text_modal.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. {{define "modals/textModal"}}
  2. <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" :closable="true"
  3. :class="themeSwitcher.currentTheme">
  4. <a-input :style="{ overflowY: 'auto' }" type="textarea" v-model="txtModal.content"
  5. :autosize="{ minRows: 10, maxRows: 20}"></a-input>
  6. <template slot="footer">
  7. <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
  8. @click="txtModal.download(txtModal.content, txtModal.fileName)">
  9. <span>[[ txtModal.fileName ]]</span>
  10. </a-button>
  11. <a-button type="primary" icon="copy" @click="txtModal.copy(txtModal.content)">
  12. <span>{{ i18n "copy" }}</span>
  13. </a-button>
  14. </template>
  15. </a-modal>
  16. <script>
  17. const txtModal = {
  18. title: '',
  19. content: '',
  20. fileName: '',
  21. qrcode: null,
  22. visible: false,
  23. show: function (title = '', content = '', fileName = '') {
  24. this.title = title;
  25. this.content = content;
  26. this.fileName = fileName;
  27. this.visible = true;
  28. },
  29. copy: function (content = '') {
  30. ClipboardManager
  31. .copyText(content)
  32. .then(() => {
  33. app.$message.success('{{ i18n "copied" }}')
  34. this.close();
  35. })
  36. },
  37. download: function (content = '', fileName = '') {
  38. let link = document.createElement('a');
  39. link.download = fileName;
  40. link.href = URL.createObjectURL(new Blob([content], { type: 'text/plain' }));
  41. link.click();
  42. URL.revokeObjectURL(link.href);
  43. link.remove();
  44. },
  45. close: function () {
  46. this.visible = false;
  47. },
  48. };
  49. const textModalApp = new Vue({
  50. delimiters: ['[[', ']]'],
  51. el: '#text-modal',
  52. data: {
  53. txtModal: txtModal,
  54. },
  55. });
  56. </script>
  57. {{end}}