text_modal.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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" @click="txtModal.copy(txtModal.content)">{{ 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. visible: false,
  22. show: function (title = '', content = '', fileName = '') {
  23. this.title = title;
  24. this.content = content;
  25. this.fileName = fileName;
  26. this.visible = true;
  27. },
  28. copy: function (content = '') {
  29. ClipboardManager
  30. .copyText(content)
  31. .then(() => {
  32. app.$message.success('{{ i18n "copied" }}')
  33. this.close();
  34. })
  35. },
  36. close: function () {
  37. this.visible = false;
  38. },
  39. };
  40. const textModalApp = new Vue({
  41. delimiters: ['[[', ']]'],
  42. el: '#text-modal',
  43. data: {
  44. txtModal: txtModal,
  45. },
  46. });
  47. </script>
  48. {{end}}