text_modal.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. {{define "textModal"}}
  2. <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
  3. :closable="true"
  4. :class="themeSwitcher.currentTheme">
  5. <template slot="footer">
  6. <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
  7. :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
  8. :download="txtModal.fileName">[[ txtModal.fileName ]]
  9. </a-button>
  10. <a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
  11. </template>
  12. <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
  13. :autosize="{ minRows: 10, maxRows: 20}"></a-input>
  14. </a-modal>
  15. <script>
  16. const txtModal = {
  17. title: '',
  18. content: '',
  19. fileName: '',
  20. qrcode: null,
  21. clipboard: 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. textModalApp.$nextTick(() => {
  29. if (this.clipboard === null) {
  30. this.clipboard = new ClipboardJS('#copy-btn', {
  31. text: () => this.content,
  32. });
  33. this.clipboard.on('success', () => {
  34. app.$message.success('{{ i18n "copied" }}')
  35. this.close();
  36. });
  37. }
  38. });
  39. },
  40. close: function () {
  41. this.visible = false;
  42. },
  43. };
  44. const textModalApp = new Vue({
  45. delimiters: ['[[', ']]'],
  46. el: '#text-modal',
  47. data: {
  48. txtModal: txtModal,
  49. },
  50. });
  51. </script>
  52. {{end}}