滑动切换组件

组件说明

滑动切换组件是通过滑动切换触发组件的 显示和隐藏 。从而实现丝滑地控制图片数据的切换展示。

组件演示

组件使用

<template>
  <!-- 内饰切换容器 -->
  <div class="example-container" ref="container">
    <div class="module">
      <img src="/assets/banner1.jpg" alt="" />
    </div>
    <ClipTrigger :container="container" :imgUrls="imgUrls"></ClipTrigger>

    <div class="module">
      <img src="/assets/banner2.jpg" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClipTrigger } from '@design-middle-center/fuse-design-vue'
import '@design-middle-center/fuse-design-vue/dist/style.css'
import { ref, reactive } from 'vue'
const container = ref()
const imgUrls = reactive(['../assets/chair1.jpg', '../assets/chair2.jpg', '../assets/chair3.jpg'])
</script>
<style scoped>
.example-container {
  width: 100%;
  overflow: auto;
  height: 360px;
}
</style>

API说明

参数	说明	类型	默认值
container	容器	Object	NULL
imgUrls	图片列表	string[]	[]