Vue 和CSS 图片展示和旋转-CSDN博客

js代码

<script>
    $(function () {
        Vue.config.delimiters = ['${', '}'];
        var v = new Vue({
            el: 'body',
            data: {
                images: {{ images | json_encode }},
                show_img: false,
                show_img_url: null,
                deg: 0,
            },
            methods: {
                show_image: function (url) {
                    v.img_deg = 0;
                    $("#show_image").css('transform', 'rotate(0deg)');

                    this.show_img = true;
                    this.show_img_url = url;
                },
                none: function () {
                    this.show_img = false;
                },
                left: function () {
                    var v = this;
                    v.deg += 90;
                },
                right: function () {
                    var v = this;
                    v.deg -= 90;
                }
            }
        });


    });

</script>
html:

<div class="ibox float-e-margins">
    <div class="ibox-title">
        <h5>图片查看</h5>
    </div>

    <div class="ibox-content">
        <div class="row">

            <div class="col-sm-12" id="gallery-image">
                <table class="table table-bordered table-hover">
                    <tbody>
                    <tr>
                        <td>
                            <a v-for="image in images" @click="show_image(image.url)">
                                <img src="${image.url}?imageView2/1/w/300/h/200"/>
                            </a>
                        </td>


                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
        <div style="text-align: center;position: fixed;width: 100%;height: 100%;top:0;left:0;z-index:999;background-color: rgba(0,0,0,0.8)"
             v-show="show_img" @click="none">
            <div style="width: 100%;height: 100%;">
                <img :src="show_img_url" id="show_image"
                    v-bind:style="'width: 50%;margin-top:5%;transform-origin:50% 50%;transform:rotate('+deg+'deg)'"
                     @click.stop="">

                <div style="position: fixed;width: 100%;width: 100%;text-align: center;bottom: 5%">
                    <button class="btn" @click.stop="left">左转90度</button>
                    <button class="btn" @click.stop="right">右转90度</button>
                </div>

            </div>

        </div>

    </div>

</div>