vue用于比较图像的滑块组件 - img-comparison-slider

vue用于比较图像的滑块组件 - img-comparison-slider
插件名称 img-comparison-slider
版本号 v7.1.3
发布时间 2020年12月1日
插件作者 sneas

响应式,可访问且启用触摸的Vue滑块组件,用于比较应用程序上的图像前后。

如何使用它:

1.导入并注册图像比较滑块。

import Vue from 'vue';
import App from './App.vue';
import {
  applyPolyfills,
  defineCustomElements,
} from 'img-comparison-slider/loader';
Vue.config.productionTip = false;
// Tell Vue to ignore all components defined in the test-components
// package. The regex assumes all components names are prefixed
// 'test'
Vue.config.ignoredElements = [/test-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements(window);
});
new Vue({
  render: (h) => h(App),
}).$mount('#app');

2.将之前/之后的图像添加到图像比较滑块组件。

<img-comparison-slider>
  <img slot="before" width="100%" src="before.jpg">
  <img slot="after" width="100%" src="after.jpg">
</img-comparison-slider>

3.自定义滑块样式,如下所示:

.slider-example {
  --handle-opacity: 0.5;
  --handle-opacity-active: 0.5;
  --handle-size: 60px;
  --divider-width: 4px;
  --divider-color: #ffa658;
  /* ... */ 
}

变更日志:

v7.1.3 (08/01/2021)

  • 避免累积布局偏移

v7.1.2 (08/01/2021)

  • 修复:非被动滚动阻塞事件监听器的铬警告

v7.1.1 (07/14/2021)

  • Bug修复

v7.1.0 (07/03/2021)

  • 壮举:值尊重字符串

v7.0.2 (06/30/2021)

  • 修正了 Chrome 中的 onFocus 轮廓

v7.0.1 (06/29/2021)

  • 修正了元素焦点

v7.0.0 (06/29/2021)

  • 由于组件的性能问题,默认情况下已删除箭头上的阴影

v6.1.3 (06/28/2021)

  • Bug修复

v6.1.1 (06/26/2021)

  • Bug修复

v6.1.0 (06/25/2021)

  • 第一个和第二个插槽中的任意 HTML

v6.0.0 (06/19/2021)

  • 固定:组件对 dir=rtl 的作用相同

v5.0.2 (06/18/2021)

  • Bug修复

v5.0.0/1 (06/14/2021)

  1. 固定手柄中间的分隔线
  2. 添加了任意句柄

v4.0.2 (06/07/2021)

  • 固定:大小:从输出中排除 css 源映射

v4.0.1 (06/06/2021)

  • build: npmignore 不必要的文件和文件夹

v4.0.0 (06/05/2021)

  • 错误修复:尊重动态加载的图像和插槽更改
  • 将资产复制到 dist
  • 用 vanilla js 重写组件
  • 生成类型和导出重置功能
  • CSS 首字母样式从 dist/styles.css 中获取
  • 主要组件文件已更改为 dist/index.js

v3.0.4(05/02/2021)

  • 正确处理组件外的鼠标移动

v3.0.3(03/28/2021)

  • 计算滑块偏移时考虑页面水平scoll位置

v3.0.2(03/13/2021)

  • 将分隔线保持在图像内