BookMarkVue/src/components/AddCardtwo.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <div class="card">
    <div class="square">
      <img :src="newurl" @click="jumpUrl" />
      <div class="close" @click="DelCard()">&times;</div>
    </div>
    <div>{{ NewCard.name }}</div>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRefs, onMounted, computed, compile } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { DelNewBook } from "../http/index";

const emit = defineEmits(["loadNewCar"]);
const props = defineProps({
  NewCard: {
    type: Array,
  },
});
const { NewCard } = toRefs(props);
onMounted(() => {
  console.log(NewCard?.value);
});

//解析url
const newurl = computed(() => {
  try {
    var pattern =
    /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
  return (
    "https://api.iowen.cn/favicon/" +
    (NewCard?.value.url).match(pattern)[0] +
    ".png"
  );
  } catch (error) {
    return null;
  }
});

const jumpUrl = () => {
  window.open(NewCard?.value.url);
};

const DelCard = () => {
  ElMessageBox.confirm(`你要删除${NewCard?.value.name}吗？`, "删除图标", {
    confirmButtonText: "OK",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      var res = (await DelNewBook(NewCard?.value.id)).data;
      console.log(res);
      if (res.statusCode == 200) {
        ElMessage({
          type: "success",
          message: `${res.message}`,
        });
      } else if (res.statusCode == 201) {
        ElMessage({