xinkeaboard/xinkeaboard-web/components/SliderStoreAbout.vue

<template>
    <div class="sld_store_list_about">
        <div class="sld_vendor_goods clearfix">
          <div class="hd">
            <a href="javascript:;" class="next" @click="slideWin(1)" ref="next">
              <i class="iconfont"></i>
            </a>
            <a href="javascript:;" class="prev" @click="slideWin(0)" ref="prev">
              <i class="iconfont"></i>
            </a>
          </div>
          <div class="slide_wrap_about">
            <ul class="bd_about clearfix">
              <li
                class="new_goods_about"
                v-for="(item, index) in itemData"
                :key="index"
              >
                <div class="sld_img sld-img-center" >
                  <div
                    class="img"
                    :style="{
                      backgroundImage: 'url(' + item.imgUrl + ')',
                    }"
                  ></div>
                  <div class="magnifier_icon flex_row_center_center" @click="toggleBigImg(item.imgUrl)"><i class="iconfont icon-sousuo"></i></div>

                </div>

              </li>
              <div class="empty" v-show="itemData.length == 0">
                <img src="/goods/empty_data.png" alt="" />
                <p>{{L['暂无展示']}}</p>
            </div>
            </ul>
          </div>
        </div>

        <el-dialog
          v-if="showModel"
          align-center
          width="100%"
          class="self_modal"
          :model-value="modalVisible"
          :show-close="true"
          @close="toggleBigImg('')"
        >
          <img :src="imgBig"/>
      </el-dialog>

    </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh.js";
import { getCurLanguage } from '@/composables/common.js';
import {ElDialog} from 'element-plus';
// const L = lang_zn;
const L = getCurLanguage();
const props = defineProps(["itemData", "itemIndex"]);
const { proxy } = getCurrentInstance();
const showModel = ref(false)
const modalVisible = ref(true)
const imgBig = ref()
//查看大图
const toggleBigImg = (val) => {
  showModel.value = !showModel.value
  imgBig.value = val
}


//滑动
const notClickQuick = ref(true); //防止快速点击造成dom混乱
const slideWin = (ltr) => {
  let ul = document.getElementsByClassName("bd_about")[props.itemIndex];
  let liLength =ul.getElementsByClassName("new_goods_about").length;
  let max =
    liLength % 1 == 0
      ? liLength * 380
      : (Math.floor(liLength / 6) + 1) * 1 * 380;
  let nowMg = parseInt(getComputedStyle(ul, null).marginLeft);
  let slide_wrap_width = max - document.getElementsByClassName("slide_wrap_about")[props.itemIndex].offsetWidth;
  ul.style.width = max + "px";
  if (notClickQuick.value) {
    notClickQuick.value = false;
    if (slide_wrap_width < 0) return;
    let n = 380;
    if (ltr) {
      nowMg = nowMg - n * 1;
      ul.style.marginLeft =
        (slide_wrap_width >= Math.abs(nowMg) ? nowMg : nowMg + n * 1) + "px";
    } else {
      nowMg = nowMg + n * 1;
      ul.style.marginLeft = (nowMg <= 0 ? nowMg : 0) + "px";
    }
    proxy.$refs.next.style.backgroundColor =  slide_wrap_width > Math.abs(nowMg) + 1 * 380 ? "#8d8b8b" : "#ccc";
    proxy.$refs.prev.style.backgroundColor = nowMg >= 0 ? "#ccc" : "#8d8b8b";

    setTimeout(function () {
      notClickQuick.value = true;
    }, 500);
  }
};

onMounted(() => {
    setTimeout(function () {
      if (props.itemData.length < 2) {
          proxy.$refs.next.style.backgroundColor = "#ccc";
          proxy.$refs.prev.style.backgroundColor = "#ccc";
      }
    }, 1000);
});

</script>

<style lang="scss">
.self_modal{
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  header,.el-dialog__body{
    padding: 0;
  }
  img{
    display: block;
    margin: 0 auto;
    height: 95vh;
  }
  .el-dialog__headerbtn{
    background: #fff;
  }


}
</style>

<style lang="scss" scoped>
@import "@/assets/style/storeListAbout.scss";
@import "@/assets/style/store/contac-about.scss";
</style>