vue项目中预览功能-组件封装及使用

项目中预览功能-组件封装

1、预览组件

<template>
  <el-link target="_blank" @click="onlinePreview(path)" :underline="false">
    <el-button
      type="text"
      class="button-text-orange"
    >
      {{ text }}
    </el-button>
  </el-link>
</template>

<script>
import { onlinePreview } from '@/api/common/common'
export default {
  name: "previewBtn",
  props: {
    path: {
      type: String,
      require: true
    },
    text: {
      type: String,
      require: false,
      default: ()=>{
        return '查看'
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    onlinePreview(path) {
      // 这里onlinePreview是接口，返回的是一个预览地址
      // 如：http://192.9.102.145:8012/onlinePreview?url=aHR0cDovLzE5Mi45LjEwMi41OTozMDk5Ni9kb2NzLzIwMjIwNTE4LzE2NTI4NDQ2MDkzNjAuanBn
      onlinePreview({path: path}).then(res=>{
        const dataObj = res.data || {}
        if (dataObj.code === 200) {
          window.open(dataObj.data, '_blank')
        } else {
          this.$message.error(dataObj.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.el-link:not(:last-child) {
  margin-right: 10px;
}
</style>

2、使用预览组件

直接引入使用即可

  <previewBtn :path="item.path" />

<script>
import previewBtn from '@/components/common/previewBtn'
export default {
  name: 'BaseInfo',
  components: {
    previewBtn
  },
}
</script>