最近遇到一个问题，希望弹出列表然后点击列表去下载文件。听上去很简单吧，一起来尝试一下吧?

效果图

数据列表

数据列表

附件列表

附件列表

思路

先写个弹框,罗列出后台返回的附件列表
给所罗列出的文件列表添加点击事件 (重点)
完善点击事件(文件下载方法)

解题

1. 创建一个的功能插件viewAttachments.js

先写弹出弹框的方法

element使用HTML片段的使用方法

弹出弹框

this.$alert(this.$createElement('div', {}, htmlStr), '附件', {
  dangerouslyUseHTMLString: true,
  confirmButtonText: '关闭'
})
复制代码

添加附件列表并绑定点击事件

了解vue.$createElement

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',
 
  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见下一节)
  },
 
  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)
复制代码

有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML 特性，也允许绑定如 innerHTML 这样的 DOM 属性 (这会覆盖 v-html 指令)。

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}
复制代码

注意
组件树中的所有 VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的：

var myParagraphVNode = this.$createElement('p', '多个' )
return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
])
复制代码

如果真的想每次创建的都是一模一样的元素的话,摘自网上的建议,使用工厂函数

return createElement('div',
  //apply方法把第二个类数组对象转化为长度为20的数组,相当于Array(20)但是每一位都是空的，利用apply的特性,可以把这个数组拆分成多个参数传给Array的构造函数，最后转化为长度为20并且每一位都被初始化为undefined的对象，这样可以被map方法遍历，依次创建出带段落标签并返回，实现了用渲染函数创建段落了20个完全相同的段落,如下图
  
  // 使用数组的map方法,返回一个新的数组,返回的每条的内容是return出来的内容,覆盖上面的undefined字段
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
)
复制代码

有了这些知识，我们现在可以完成我们最开始想实现的组件：

let htmlStr = []
fileList.forEach(element => {
    htmlStr.push(this.$createElement('p', {
        style: {
          'cursor': 'pointer',
          'text-decoration': 'underline'
        },
        attrs: {
          data: JSON.stringify(element),
          title: '点击下载'
        },
        on: {
          click: downFile
        }
    }, element.name))
})
复制代码

下载文件的方法

function downFile (e) {
  if (e.target.tagName !== 'P') {
    return
  }
  let element = JSON.parse(e.target.getAttribute('data'))
  // element.msg是文件在服务器上的地址
  if (!element.msg) {
    Message.error('找不到地址~')
  }
  // 文件的后台地址
  let fileName = element.msg.replace(/\[|]/g, '')
  // 文件名
  let downName = fileName.split('$')[1]
  let data = {
    fileName: fileName,
    type: 2
  }
  httpRequest({
    url: httpRequest.adornUrl(`/sys/file/down`),// 封装http的时候,封装的用以拼接地址的方法
    method: 'post',
    params: data,
    responseType: 'blob' // 声明返回blob格式
  }).then(res => {
    if (res.data) {
      var blod = new Blob([res.data])
      var a = document.createElement('a')
      a.href = URL.createObjectURL(blod)
      a.style.display = 'none'
      document.body.appendChild(a)
      a.download = downName
      a.click()
      document.body.removeChild(a)
    }
  })
}
复制代码

使用

如果不是大范围使用可以在组件内引入

import { viewAttachments } from '@/utils/viewAttachments'
复制代码

如果像我一样是大范围使用,则在全局引入

在main.js引入公共方法

import { viewAttachments } from '@/utils/viewAttachments'
Vue.prototype.viewAttachments = viewAttachments // ajax请求方法
复制代码

在数据列表中去调用写好的公共方法

<el-table-column
    fixed="right"
    header-align="center"
    align="center"
    width="150"
    label="操作">
    <template slot-scope="scope">
      <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="modificationContract(scope.row.contractId)">修改</el-button>
      <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.contractId)">删除</el-button>
      <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="viewAttachments(scope.row.contractFile)">查看附件</el-button>
    </template>
</el-table-column>
复制代码

viewAttachments的完整代码

import { Message } from 'element-ui'
import httpRequest from '@/utils/httpRequest'
function downFile (e) {
  if (e.target.tagName !== 'P') {
    return
  }
  let element = JSON.parse(e.target.getAttribute('data'))
  if (!element.msg) {
    Message.error('找不到地址~')
  }
  // 文件的后台地址
  let fileName = element.msg.replace(/\[|]/g, '')
  // 文件名
  let downName = fileName.split('$')[1]
  let data = {
    fileName: fileName
  }
  httpRequest({
    url: httpRequest.adornUrl(`/sys/file/down`),
    method: 'post',
    params: data,
    responseType: 'blob' // 声明返回blob格式
  }).then(res => {
    if (res.data) {
      var blod = new Blob([res.data])
      var a = document.createElement('a')
      a.href = URL.createObjectURL(blod)
      a.style.display = 'none'
      document.body.appendChild(a)
      a.download = downName
      a.click()
      document.body.removeChild(a)
    }
  })
}
export function viewAttachments (file) {
  if (!file || file === 'string') {
    Message.error('暂无附件~')
  } else {
    let fileList = JSON.parse(file)
    let htmlStr = []
    fileList.forEach(element => {
      htmlStr.push(this.$createElement('p', {
        style: {
          'cursor': 'pointer',
          'text-decoration': 'underline'
        },
        attrs: {
          data: JSON.stringify(element),
          title: '点击下载'
        },
        on: {
          click: downFile
        }
      }, element.name))
    })
    this.$alert(this.$createElement('div', {}, htmlStr), '附件', {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭'
    })
  }
}

复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端