介绍

特性

演示

快速开始

原生JS

必须有一个dom来装载卡片,在这里是useBox，并且创建实例前传入id。

<divid="useBox"></div><scriptsrc="./js/classMain.js"></script><script>window.onload=function(){constfanBoxCardFun=newfanBoxCard({entry:"useBox",image:"./images/card-image.jpeg"})}</script>

在vue中使用(--vue3)

#vue3项目npm i vue-fanbox-card

//全局引入import{createApp}from'vue'importAppfrom'./App.vue'importfanboxCardfrom"vue-fanbox-card";//引入核心import"vue-fanbox-card/lib/fanboxCard.css"//引入fanbox的css样式constapp=createApp(App);app.use(fanboxCard);//全局使用fanboxCardapp.mount('#app');

<template><button@click="miao = true">打开模态框</button><fanboxCard:show="miao":image="require('../card-image.jpeg')"@click="miao = false"></fanboxCard></template><script>exportdefault {data(){return{      miao:false    }  },}</script>

exportdefaultdefineComponent({setup(){constmiaomiao=ref(false);return()=>(<div><buttononClick={()=>openMiao()}>打开模态框</button><fanboxCardshow={miaomiao.value}image={require('../card-image.jpeg')}onClick={()=>{miaomiao.value=false}}></fanboxCard></div>)},});

参数简介：

License