Vue3. 中 hooks 函数封装和使用

1.界面

     <el-table-column label="正面照片"
                       align="center"
                       prop="frontalPhotoList">
        <template #default="scope">
          <span class="hovera"
                @click="
              previewimageMethods(
                item.value,
                scope.row.frontalPhotoList,
                'value'
              )
            "
                v-for="(item, index) in scope.row.frontalPhotoList"
                :key="index">
            <span v-if="index == 0">{{
              scope.row.frontalPhotoList
                ? scope.row.frontalPhotoList.length
                : "0"
            }}</span>
          </span>
        </template>
      </el-table-column>

  <!-- 图片预览 -->
  <el-dialog :title="dialogPic.title"
             v-model="dialogPic.visible"
             :style="{ width: '1200px', height: '800px' }"
             append-to-body>
    <div class="previewimageClass">
      <el-carousel class="zzzzz"
                   indicator-position="outside"
                   autoplay
                   style="width: 100%; height: 600px">
        <el-carousel-item v-for="item in GetpreviewimageList"
                          style="width: 100%; height: 600px"
                          :key="item">
          <img :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="closedialogPic">关闭</el-button> -->
      </div>
    </template>
  </el-dialog>

2.引入

import previewimageBox from "@/hooks/previewimage.js";
const {
  previewimageMethods,
  closedialogPic,

  dialogPic,
  Getpreviewimage,
  GetpreviewimageList,
} = previewimageBox();

3.previewimage.js

import { ref, watch } from "vue";

export default function () {
  // 弹窗相关
  const dialogPic = ref({
    title: "图片预览",
    visible: false,
    width: "1200px",
  });

  const Getpreviewimage = ref("");
  const GetpreviewimageList = ref([]);

  // 图片点击方法 打开弹框并赋值图片url
  function previewimageMethods(url, urlList, key) {
    console.log("url", url, urlList, key);
    Getpreviewimage.value = "";
    GetpreviewimageList.value = [];

    Getpreviewimage.value = url;
    urlList.map((item) => {
      GetpreviewimageList.value.push(item[key]);
    });
    dialogPic.value.visible = true;
  }

  // 关闭图片弹框
  function closedialogPic() {
    dialogPic.value.visible = false;
  }

  return {
    previewimageMethods,
    closedialogPic,

    dialogPic,
    Getpreviewimage,
    GetpreviewimageList,
  };
}