3x-ui/web/html/modals/text_modal.html

{{define "modals/textModal"}}
<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" :closable="true"
    :class="themeSwitcher.currentTheme">
    <a-input :style="{ overflowY: 'auto' }" type="textarea" v-model="txtModal.content"
        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
    <template slot="footer">
        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
            @click="txtModal.download(txtModal.content, txtModal.fileName)">
            <span>[[ txtModal.fileName ]]</span>
        </a-button>
        <a-button type="primary" icon="copy" @click="txtModal.copy(txtModal.content)">
            <span>{{ i18n "copy" }}</span>
        </a-button>
    </template>
</a-modal>

<script>
    const txtModal = {
        title: '',
        content: '',
        fileName: '',
        qrcode: null,
        visible: false,
        show: function (title = '', content = '', fileName = '') {
            this.title = title;
            this.content = content;
            this.fileName = fileName;
            this.visible = true;
        },
        copy: function (content = '') {
            ClipboardManager
                .copyText(content)
                .then(() => {
                    app.$message.success('{{ i18n "copied" }}')
                    this.close();
                })
        },
        download: function (content = '', fileName = '') {
            let link = document.createElement('a');

            link.download = fileName;
            link.href = URL.createObjectURL(new Blob([content], { type: 'text/plain' }));
            link.click();

            URL.revokeObjectURL(link.href);

            link.remove();
        },
        close: function () {
            this.visible = false;
        },
    };

    const textModalApp = new Vue({
        delimiters: ['[[', ']]'],
        el: '#text-modal',
        data: {
            txtModal: txtModal,
        },
    });
</script>
{{end}}