Vue 修改行内样式 + prefixStyle 样式兼容处理

效果

通过行内样式控制图片的缩放，旋转。

应用：图像预览组件

<template>

  <div class="img-container">

    <div v-if="imageUrl" ref="imgPreview" :class="{'image-preview':true,'image-preview-scale':isScale}">

      <div class="image-wrapper">

        <img ref="img" :src="imageUrl">

      </div>

      <div class="image-action">

        <el-button icon="el-icon-search" circle @click="handleScale" />

        <el-button icon="el-icon-refresh-left" circle @click="handleRotateLeft" />

        <el-button icon="el-icon-refresh-right" circle @click="handleRotateRight" />

        <el-button icon="el-icon-refresh" circle @click="handleReset" />

      </div>

    </div>

    <div v-else><p>相关图片缺失</p></div>

  </div>

</template>

 

<script>

import { prefixStyle } from '@/utils/prefixStyle'

const transformStyle = prefixStyle('transform')

// console.log(transformStyle) //webkitTransform

 

export default {

  name: 'ImgView',

  props: {

    fileUrl: {

      type: String,

      default: ''

    }

  },

  data() {

    return {

      isScale: false,

      loading: false,

      imageUrl: '',

      rotate: 0,

      scale: 1

    }

  },

  watch: {

    fileUrl() {

      this.imageUrl = this.fileUrl

    }

  },

  mounted() {

    this.imageUrl = this.fileUrl

  },

  methods: {

    handleScale() {

      // 图像放大

      this.isScale = true

      this.scale = this.scale + 0.5

      // transform兼容处理

      // style html内嵌入样式

      // 页面审查元素 未见 添加的前缀 但 测试了火狐 Opera 浏览器 可用

      this.$refs.imgPreview.style[transformStyle] = 'scale(' + this.scale + ')'

    },

    handleRotateLeft() {

      // 图像旋转

      this.rotate = (this.rotate - 90) % 360

      this.$refs.img.style[transformStyle] = 'rotate(' + this.rotate + 'deg)'

    },

    handleRotateRight() {

      // 图像旋转

      this.rotate = (this.rotate + 90) % 360

      this.$refs.img.style[transformStyle] = 'rotate(' + this.rotate + 'deg)'

    },

    handleReset() {

      // 图像重置

      this.rotate = 0

      this.scale = 1

      this.isScale = false

      this.$refs.img.style[transformStyle] = 'rotate(0deg)'

      this.$refs.imgPreview.style[transformStyle] = 'scale(1)'

    }

  }

}

</script>

 

<style lang="scss" scoped>

div.img-container{

  width: 100%;

  height:100%;

  background: #f7f7f7;

  .image-preview {

    box-sizing: border-box;

    padding:10px;

    .image-wrapper {

        box-sizing: content-box;

        text-align: center;

        img {

            width: 100%;

            height: auto;

        }

    }

    .image-action {

      text-align: right;

    }

  }

  .image-preview-scale{

    position: absolute;

    top:0;

    left:0;

    background: #f7f7f7;

    z-index: 2000;

  }

}

</style>

 

样式兼容处理：prefixStyle.js

/* jshint esversion: 6 */

export function prefixStyle(style) {

  // 创建一个元素来判断当前浏览器使用的前缀

  const elementStyle = document.createElement('div').style

  // elementStyle 返回的是 CSSStyleDeclaration 对象

  // console.log(elementStyle)

 

  const prefix = (() => {

    const transformNames = {

      webkit: 'webkitTransform',

      Moz: 'MozTransform',

      O: 'OTransform',

      ms: 'msTransform',

      standard: 'transform'

    }

 

    for (const key in transformNames) {

      if (elementStyle[transformNames[key]] !== undefined) {

        return key

      }

    }

 

    return false

  })()

 

  if (prefix === false) {

    return false

  }

  if (prefix === 'standard') {

    return style

  }

  // 拼接：前缀+样式首字母大写+样式剩余字符

  return prefix + style.charAt(0).toUpperCase() + style.substr(1)

}