vue-cropper的unsafe-inline

`vue-cropper`是一个基于`vue.js`的图片裁剪组件，`unsafe-inline`是一种`CSP`（内容安全策略）的设置，用于指定允许在页面中执行的脚本来源。在`vue-cropper`中，如果你的`CSP`策略中不包含`unsafe-inline`，则会出现无法加载裁剪组件的问题。

具体来说，`unsafe-inline`是指允许在页面中执行内联脚本，而内联脚本是指直接在`HTML`标签中使用`<script>`标签或者在标签的`onclick`、`onload`等事件中使用`javascript:`伪协议的脚本。如果不允许使用`unsafe-inline`，则需要使用其他方式来加载脚本，例如使用外部脚本文件或者使用`nonce`或`hash`等方式来指定允许执行的脚本。

在`vue-cropper`中，如果你的`CSP`策略中不包含`unsafe-inline`，则需要使用`nonce`或`hash`等方式来指定允许执行的脚本。具体来说，你需要在`vue`组件中的`<script>`标签中添加`nonce`或`hash`属性，例如：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :guides="false"
      :view-mode="1"
      :drag-mode="cropType"
      :auto-crop-area="0.8"
      :background="false"
      :min-container-width="200"
      :min-container-height="200"
      :min-crop-box-width="100"
      :min-crop-box-height="100"
      :crop-box-movable="false"
      :crop-box-resizable="false"
      :toggle-drag-mode-on-dblclick="false"
    ></vue-cropper>
  </div>
</template>

<script nonce="xxxxxxxxxxxxxx">
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imgSrc: '',
      cropType: 'crop',
    };
  },
  methods: {
    // ...
  },
};
</script>

其中，`nonce`属性的值需要与`CSP`策略中的`nonce`值相同，或者使用`hash`属性来指定允许执行的脚本的哈希值。这样就可以在不使用`unsafe-inline`的情况下加载`vue-cropper`组件了。