<template>
  <div class="view-container">
    <json-viewer
      :value="value"
      :expand-depth="depth"
      copyable
      theme="my-awesome-json-theme"
      isboxed
    ></json-viewer>
    <el-link
      :underline="false"
      icon="el-icon-document-copy"
      v-clipboard:copy="JSON.stringify(value)"
      v-clipboard:success="clipboardSuccess"
      class="btn"
      >复制</el-link
    >
  </div>
</template>
<script>
import JsonViewer from "vue-json-viewer";
export default {
  name: "LocalJsonViewer",
  components: { JsonViewer },
  data() {
    return {};
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    isboxed: {
      type: Boolean,
      default: true,
    },
    depth: {
      typeof: Number,
      default: 1,
    },
  },
  methods: {
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
  },
};
</script>

<style scoped lang="scss">
.view-container {
  position: relative;

  .btn {
    position: absolute;
    right: 20px;
    top: 10px;
  }
}
</style>