帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue图像对比滑块组件(img-comparison-slider)

帝国模板之家 2021-01-01 网页特效 评论

介绍

一个响应迅速、可访问、支持触摸的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;
  /* ... */ 
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言