新增单个列表导入/导出功能

2021-09-30 14:27:32 +08:00
parent 51be62bc29
commit ce7bca5b36
17 changed files with 411 additions and 116 deletions
@@ -0,0 +1,73 @@
+<template>
+  <Modal :show="visible" @close="handleCancel" @after-leave="afterLeave" :closeBtn="false">
+    <main :class="$style.main">{{message}}</main>
+    <footer :class="$style.footer">
+      <Btn :class="$style.btn" v-if="showCancel" @click="handleCancel">{{cancelBtnText}}</Btn>
+      <Btn :class="$style.btn" @click="handleComfirm">{{confirmBtnText}}</Btn>
+    </footer>
+  </Modal>
+</template>
+
+<script>
+import Modal from '@renderer/components/material/Modal'
+import Btn from '@renderer/components/material/Btn'
+export default {
+  components: {
+    Modal,
+    Btn,
+  },
+  data() {
+    return {
+      visible: false,
+      message: '',
+      showCancel: false,
+      cancelButtonText: '',
+      confirmButtonText: '',
+    }
+  },
+  computed: {
+    cancelBtnText() {
+      return this.cancelButtonText || this.$t('base.cancel_button_text')
+    },
+    confirmBtnText() {
+      return this.confirmButtonText || this.$t('base.confirm_button_text')
+    },
+  },
+  beforeDestroy() {
+    const el = this.$el
+    el.parentNode.removeChild(el)
+  },
+  methods: {
+    afterLeave(el, done) {
+      this.$destroy()
+    },
+    handleCancel() {
+
+    },
+    handleComfirm() {
+
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+
+.main {
+  flex: auto;
+  min-height: 50px;
+  padding: 15px;
+  font-size: 14px;
+  max-width: 320px;
+  line-height: 1.5;
+}
+
+.footer {
+  flex: none;
+  padding: 0 15px 15px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  gap: 15px;
+}
+</style>