captcha.vue 926 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <div class="common-captcha" @click="refresh">
  3. <div class="svg" v-html="svg" v-if="svg"></div>
  4. <img class="base64" :src="base64" alt="" v-else />
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. svg: "",
  12. base64: ""
  13. };
  14. },
  15. mounted() {
  16. this.refresh();
  17. },
  18. methods: {
  19. refresh() {
  20. this.$service.open
  21. .captcha({
  22. height: 36,
  23. width: 110
  24. })
  25. .then(({ captchaId, data }) => {
  26. if (data.includes(";base64,")) {
  27. this.base64 = data;
  28. } else {
  29. this.svg = data;
  30. }
  31. this.$emit("input", captchaId);
  32. this.$emit("change", {
  33. base64: this.base64,
  34. svg: this.svg,
  35. captchaId
  36. });
  37. })
  38. .catch((err) => {
  39. this.$message.error(err);
  40. });
  41. }
  42. }
  43. };
  44. </script>
  45. <style lang="scss" scoped>
  46. .common-captcha {
  47. height: 36px;
  48. cursor: pointer;
  49. .svg {
  50. height: 100%;
  51. }
  52. .base64 {
  53. height: 100%;
  54. }
  55. }
  56. </style>