picEnlarge

注意事项

只能用于Vue CLI项目

实现功能

1.实现了图片放大镜功能

安装方法

npm i picenlargesmy

count组件main.js全局引入

import Vue from 'vue'
Vue.component('picEnlarge', picEnlarge)
Vue.component('picEnlarge', picEnlarge)

template完整示例

<template>
	<div id="app">
		<div v-if="changeImgPosition" style="width:100px;display:inline-block"></div>
		<div style="width:60%;display:inline-block"><pic-Enlarge :width="width" :url="url" :type="type" :scale="scale" /></div>
		<p>当前放大倍数：{{ scale }}</p>
		<p>当前放大镜宽度：{{ width }}</p>
		<button @click="addSelectorWidth">增加放大器宽度(add width of magnifying glass)</button>
		<button @click="subSelectorWidth">减小放大器宽度(cut width of magnifying glass)</button>
		<button @click="changeImgPosition = !changeImgPosition">改变图片位置(change position of image)</button>
		<button @click="addScale">增加放大倍数(add scale)</button>
		<button @click="subScale">减小放大倍数(cut scale)</button>
		<button @click="changeType">更换放大镜类型(change type of magnifying glass)</button>
		<button @click="changeShowType">更换放大方式(change type of scale)</button>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			scale: 3,
			type: 'circle',
			showType: false,
			changeImgPosition: false,
			width: 268,
			url:
				'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/'
		};
	},
	methods: {
		addSelectorWidth() {
			this.width += 20;
		},
		subSelectorWidth() {
			this.width -= 20;
		},
		addScale() {
			this.scale += 0.5;
		},
		subScale() {
			this.scale -= 0.5;
		},
		changeType() {
			this.type = this.type === 'circle' ? 'square' : 'circle';
		},
		changeShowType() {
			this.showType = !this.showType;
		}
	}
};
</script>

<style></style>