0.1.1 • Published 3 years ago
picenlargesmy v0.1.1
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>