efecto
Controle el zoom y la rotación de la imagen a través del estilo en línea.
Aplicación: componente de vista previa de la imagen
<plantilla>
<div class = "img-container">
<div v-if = "imageUrl" ref = "imgPreview": class = "{'image-preview': true, 'image-preview-scale': isScale}">
<div class = "envoltorio de imagen">
<img ref = "img": src = "imageUrl">
</div>
<div class = "imagen-acción">
<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> Faltan imágenes relacionadas </p> </div>
</div>
</template>
<script>
importar {prefixStyle} de '@ / utils / prefixStyle'
const transformStyle = prefixStyle ('transformar')
// console.log (transformStyle) // webkitTransform
exportar predeterminado {
nombre: 'ImgView',
apoyos: {
fileUrl: {
tipo: Cadena,
defecto: ''
}
},
datos() {
regreso {
isScale: false,
cargando: falso,
URL de la imagen: '',
rotar: 0,
escala: 1
}
},
reloj: {
fileUrl () {
this.imageUrl = this.fileUrl
}
},
montado () {
this.imageUrl = this.fileUrl
},
métodos: {
handleScale () {
// zoom de imagen
this.isScale = true
this.scale = this.scale + 0.5
// transformar procesamiento compatible
// Estilo incrustado en estilo html
// El elemento de revisión de la página no se ve El prefijo agregado pero probado en el navegador Firefox y Opera está disponible
this. $ refs.imgPreview.style [transformStyle] = 'scale (' + this.scale + ')'
},
handleRotateLeft () {
// rotacion de imagen
this.rotate = (this.rotate - 90)% 360
this. $ refs.img.style [transformStyle] = 'rotar (' + this.rotate + 'deg)'
},
handleRotateRight () {
// rotacion de imagen
this.rotate = (this.rotate + 90)% 360
this. $ refs.img.style [transformStyle] = 'rotar (' + this.rotate + 'deg)'
},
handleReset () {
// Restablecimiento de imagen
this.rotate = 0
this.scale = 1
this.isScale = falso
this. $ refs.img.style [transformStyle] = 'rotar (0deg)'
this. $ refs.imgPreview.style [transformStyle] = 'scale (1)'
}
}
}
</script>
<style lang = "scss" con alcance>
div.img-container {
ancho: 100%;
altura: 100%;
fondo: # f7f7f7;
.image-preview {
tamaño de caja: caja de borde;
relleno: 10px;
.image-wrapper {
tamaño de caja: caja de contenido;
alineación de texto: centro;
img {
ancho: 100%;
altura: auto;
}
}
.image-action {
alineación de texto: derecha;
}
}
.image-preview-scale {
posición: absoluta;
arriba: 0;
izquierda: 0;
fondo: # f7f7f7;
índice z: 2000;
}
}
</style>
Procesamiento compatible con estilos: prefixStyle.js
/ * jshint esversion: 6 * /
función de exportación prefixStyle (estilo) {
// Crea un elemento para determinar el prefijo utilizado por el navegador actual
const elementStyle = document.createElement ('div'). style
// elementStyle devuelve un objeto CSSStyleDeclaration
// console.log (elementStyle)
prefijo const = (() => {
const transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
estándar: 'transformar'
}
for (clave constante en transformNames) {
if (elementStyle [transformNames [key]]! == undefined) {
tecla de retorno
}
}
falso retorno
}) ()
si (prefijo === falso) {
falso retorno
}
if (prefijo === 'estándar') {
estilo de retorno
}
// Empalme: Prefijo + mayúscula de la primera letra del estilo + caracteres restantes del estilo
return prefijo + style.charAt (0) .toUpperCase () + style.substr (1)
}