feat: add file download demo
| | |
| | | - 菜单新增 tag 显示,支持 4 中类型颜色及 dot 圆点显示 |
| | | - 新增菜单及顶栏颜色选择配色 |
| | | - 增加示例结果页 |
| | | - 新增文件下载示例 |
| | | |
| | | ### ⚡ Wip |
| | | |
| | |
| | | |
| | | // Optional |
| | | Select, |
| | | Alert, |
| | | Checkbox, |
| | | DatePicker, |
| | | Radio, |
| | |
| | | // If you don’t need it, you can delete it |
| | | getApp() |
| | | .use(Select) |
| | | .use(Alert) |
| | | .use(Checkbox) |
| | | .use(DatePicker) |
| | | .use(Radio) |
| | |
| | | menu: { |
| | | name: '功能', |
| | | path: '/feat', |
| | | tag: { |
| | | dot: true, |
| | | }, |
| | | children: [ |
| | | { |
| | | path: 'icon', |
| | |
| | | name: '右键菜单', |
| | | }, |
| | | { |
| | | path: 'download', |
| | | name: '文件下载', |
| | | tag: { |
| | | content: 'new', |
| | | }, |
| | | }, |
| | | { |
| | | path: 'click-out-side', |
| | | name: 'ClickOutSide', |
| | | }, |
| | |
| | | }, |
| | | }, |
| | | { |
| | | path: '/download', |
| | | name: 'DownLoadDemo', |
| | | component: () => import('/@/views/demo/feat/download/index.vue'), |
| | | meta: { |
| | | title: '文件下载', |
| | | }, |
| | | }, |
| | | { |
| | | path: '/click-out-side', |
| | | name: 'ClickOutSideDemo', |
| | | component: () => import('/@/views/demo/feat/click-out-side/index.vue'), |
| | |
| | | window.URL.revokeObjectURL(blobURL); |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 根据文件地址下载文件 |
| | | * @param {*} sUrl |
New file |
| | |
| | | <template> |
| | | <div class="m-5 demo-box"> |
| | | <a-alert message="根据后台接口文件流下载" /> |
| | | <a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button> |
| | | |
| | | <a-alert message="根据文件地址下载文件" /> |
| | | |
| | | <a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent } from 'vue'; |
| | | import { downloadByUrl, downloadByData } from '/@/utils/file/FileDownload'; |
| | | |
| | | export default defineComponent({ |
| | | setup() { |
| | | function handleDownByData() { |
| | | downloadByData('text content', 'testName.txt'); |
| | | } |
| | | function handleDownloadByUrl() { |
| | | downloadByUrl({ |
| | | url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master', |
| | | target: '_self', |
| | | }); |
| | | } |
| | | return { |
| | | handleDownloadByUrl, |
| | | handleDownByData, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |