图片拖拽对比

图片拖拽对比

注意事项

只能用于Vue CLI项目

安装方法

cnpm i -S zx-comparison

icon 组件 main.js 全局引入

import Vue from 'vue'
import ZxComparison from 'zx-comparison'
Vue.component('byui-comparison', ZxComparison)

template 完整示例

<template>
	<div id="app">
		<byui-comparison :id="comparison.id" :width="comparison.width" :height="comparison.height" :src1="comparison.src1" :src2="comparison.src2"></byui-comparison>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			comparison: {
				id: 'silderA',
				width: '1000px',
				height: 'auto',
				src1: require('@/assets/img/aa.png'),
				src2: require('@/assets/img/bb.png')
			}
		};
	},
	created() {},
	mounted() {},
	methods: {}
};
</script>

<style>
body {
	margin: 0;
	padding: 0;
}
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
</style>