图片旋转来去自由！vue-preview的升级操作

vue-preview 是一个常用的图片查看器，它具有丰富的功能和良好的用户体验，在许多项目中都有使用。但在实际应用中，我们有时会遇到图片旋转的需求，而 vue-preview 默认情况下并不支持图片旋转。

    那么，如何为 vue-preview 添加图片旋转功能呢？其实，实现这个功能并不难，只需要几个简单的步骤即可。

    首先，我们需要安装 vue-preview，可以在项目中使用以下命令进行安装：

    ```bash
    npm install vue-preview --save
    ```

    安装完成后，在组件中引入 vue-preview，并将其注册为全局组件：

    ```javascript
    import VuePreview from 'vue-preview'

    Vue.component('vue-preview', VuePreview)
    ```

    接下来，我们需要在 HTML 中使用 vue-preview 组件来显示图片，代码如下：

    ```html
    <vue-preview :src="imageUrl"></vue-preview>
    ```

    其中，imageUrl 是要显示的图片的 URL。

    然后，我们需要在组件的 methods 方法中添加一个旋转图片的方法，代码如下：

    ```javascript
    methods: {
      rotateImage() {
        // 获取当前图片的旋转角度
        const angle = this.$refs.preview.image.style.transform.match(/rotate\((.*?)deg\)/)[1]

        // 将图片旋转 90 度
        this.$refs.preview.image.style.transform = `rotate(${+angle + 90}deg)`
      }
    }
    ```

    最后，我们需要在组件的模板中添加一个按钮，用于触发旋转图片的方法，代码如下：

    ```html
    <button @click="rotateImage()">旋转图片</button>
    ```

    这样，当我们点击旋转图片按钮时，图片就会旋转 90 度。

    以上就是为 vue-preview 添加图片旋转功能的方法，希望对大家有所帮助。