/vue-auth-image

一个展示带权限图片的组件，自定义请求header, 使用原生请求方法,不依赖axios

Primary LanguageVue

vue-auth-image

一个基于vue的显示带权限图片的组件

特点

  • 可自定义header字段，无限制数量
  • 简单易用，结构简单，只有一个img标签
  • 可根据业务快速修改，代码简单
  • 提供以 npm 的形式安装提供全局组件 vauthimage

安装

git clone

  git clone git@github.com:chenchenwuai/vue-auth-image.git 
  cd vue-auth-image
  npm i
  npm run lib // 在dist文件夹生成可通过script标签引入的js文件
  npm run serve // 本地运行
  npm run build // 打包demo

npm 安装

  npm i vauthimage -S

使用

在 main.js 文件中引入插件并注册

  import vauthimage from 'vauthimage'
  Vue.use(vauthimage)

在项目中使用 vauthimage

  <template>
    <authImage :src="imageUrl" :headers="headers" />
  </template>
  <script>
    export default {
      data () {
        return {
          imageUrl: 'http://xxx.xxx.png',
          headers: [
            {
              key:'Authorization',
              value:'bearer tokenxxxxxx'
            },
            {
              key:'x-token',
              value:'asdasasdad'
            }
          ]
        }
      }
    }
  </script>

事件

load加载成功触发 error加载失败触发

  <authImage v-on:load="headleloaded" v-on:error="headleLoadError" >