{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\views\\components-demo\\avatar-upload.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\views\\components-demo\\avatar-upload.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBJbWFnZUNyb3BwZXIgZnJvbSAnQC9jb21wb25lbnRzL0ltYWdlQ3JvcHBlcicKaW1wb3J0IFBhblRodW1iIGZyb20gJ0AvY29tcG9uZW50cy9QYW5UaHVtYicKCmV4cG9ydCBkZWZhdWx0IHsKICBuYW1lOiAnQXZhdGFyVXBsb2FkRGVtbycsCiAgY29tcG9uZW50czogeyBJbWFnZUNyb3BwZXIsIFBhblRodW1iIH0sCiAgZGF0YSgpIHsKICAgIHJldHVybiB7CiAgICAgIGltYWdlY3JvcHBlclNob3c6IGZhbHNlLAogICAgICBpbWFnZWNyb3BwZXJLZXk6IDAsCiAgICAgIGltYWdlOiAnaHR0cHM6Ly93cGltZy53YWxsc3Rjbi5jb20vNTc3OTY1YjktYmI5ZS00ZTAyLTlmMGMtMDk1YjQxNDE3MTkxJwogICAgfQogIH0sCiAgbWV0aG9kczogewogICAgY3JvcFN1Y2Nlc3MocmVzRGF0YSkgewogICAgICB0aGlzLmltYWdlY3JvcHBlclNob3cgPSBmYWxzZQogICAgICB0aGlzLmltYWdlY3JvcHBlcktleSA9IHRoaXMuaW1hZ2Vjcm9wcGVyS2V5ICsgMQogICAgICB0aGlzLmltYWdlID0gcmVzRGF0YS5maWxlcy5hdmF0YXIKICAgIH0sCiAgICBjbG9zZSgpIHsKICAgICAgdGhpcy5pbWFnZWNyb3BwZXJTaG93ID0gZmFsc2UKICAgIH0KICB9Cn0K"},{"version":3,"sources":["avatar-upload.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"avatar-upload.vue","sourceRoot":"src/views/components-demo","sourcesContent":["<template>\n  <div class=\"components-container\">\n    <aside>This is based on\n      <a class=\"link-type\" href=\"//github.com/dai-siki/vue-image-crop-upload\"> vue-image-crop-upload</a>.\n      Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.\n    </aside>\n\n    <pan-thumb :image=\"image\" />\n\n    <el-button type=\"primary\" icon=\"el-icon-upload\" style=\"position: absolute;bottom: 15px;margin-left: 40px;\" @click=\"imagecropperShow=true\">\n      Change Avatar\n    </el-button>\n\n    <image-cropper\n      v-show=\"imagecropperShow\"\n      :key=\"imagecropperKey\"\n      :width=\"300\"\n      :height=\"300\"\n      url=\"https://httpbin.org/post\"\n      lang-type=\"en\"\n      @close=\"close\"\n      @crop-upload-success=\"cropSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport ImageCropper from '@/components/ImageCropper'\nimport PanThumb from '@/components/PanThumb'\n\nexport default {\n  name: 'AvatarUploadDemo',\n  components: { ImageCropper, PanThumb },\n  data() {\n    return {\n      imagecropperShow: false,\n      imagecropperKey: 0,\n      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'\n    }\n  },\n  methods: {\n    cropSuccess(resData) {\n      this.imagecropperShow = false\n      this.imagecropperKey = this.imagecropperKey + 1\n      this.image = resData.files.avatar\n    },\n    close() {\n      this.imagecropperShow = false\n    }\n  }\n}\n</script>\n\n<style scoped>\n  .avatar{\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n  }\n</style>\n\n"]}]}