我正在使用 intro.js 的 CDN 链接，我想实现“不再在 Intro.js 弹出窗口上显示复选框”，我们该怎么做？

发布于 2025-01-12 22:45:41 字数 1482 浏览 0 评论 0原文

我们有一个要求，我必须在 intro.js 弹出窗口中添加一个复选框，
所以我使用了 intro.js min 和 CSS 文件 CDN 链接来使用 Intro.js，
目前，我收到带有 intro 和 checkbox 的 intro.js 弹出窗口，

我面临的问题是：

如果我在多个步骤然后我无法获取复选框值，它在一步的情况下有效
是否有任何其他方式 添加一个复选框 intro.js
当我单击复选框并单击完成按钮时，复选框的值应传递到后端

我尝试过类似的操作。

Reactjs 代码

    const HomePage: React.FunctionComponent<Props> = ({ id }: Props) => {
    const [checkTour, setCheckTour] = React.useState(false);
    
            React.useEffect(() => {
                if ((window as any).introJs) {
                    (window as any)
                        .introJs()
                        .setOptions({
                            disableInteraction: true,
                            exitOnEsc: false,
                            exitOnOverlyClicking: false,
                            overlayOpacity: 0.7,
                            showBullets: false,
                            showProgress: false,
                            showStepNumbers: false,
                            tooltipClass: "customTooltip",
                            steps: [
                                {
                                    title: "Welcome",
                                    intro: `Hello World!

原文

We have a requirement where I have to add a checkbox on the intro.js pop-up,

so I have used intro.js min and CSS files CDN links to use the Intro.js,
currently, I'm getting intro.js pop-up with the intro and checkbox,

Issues I am facing are:

If I am using checkboxes on multiple steps then I am not able to fetch the checkbox value, its works in the case of one step
Is there any other way to add a checkbox in intro.js
when I click the checkbox and click on the done button the value of the checkbox should be passed to the backend

I Have tried something like.

Reactjs code

    const HomePage: React.FunctionComponent<Props> = ({ id }: Props) => {
    const [checkTour, setCheckTour] = React.useState(false);
    
            React.useEffect(() => {
                if ((window as any).introJs) {
                    (window as any)
                        .introJs()
                        .setOptions({
                            disableInteraction: true,
                            exitOnEsc: false,
                            exitOnOverlyClicking: false,
                            overlayOpacity: 0.7,
                            showBullets: false,
                            showProgress: false,
                            showStepNumbers: false,
                            tooltipClass: "customTooltip",
                            steps: [
                                {
                                    title: "Welcome",
                                    intro: `Hello World! ???? `,
                                    element: document.querySelector("#logoHeighlight"),
                                    tooltipClass: "welcomeTooltip",
                                },
                                {
                                    intro: "<style>{color: 'red';};</style>step 1"! ???? `,
                                    element: document.querySelector("#cart"),
                                },
                                {
                                    intro: `Go to plp page <label for='donotShowMeAgain'> Do Not Show Me Again </label><input type='checkbox' id='donotShowMeAgain'>`,
                                    element: document.querySelector("#HeaderSignIn"),
                                },
                            ],
                        })
                        .onbeforeexit(function () {
                            // eslint-disable-next-line no-console
                            console.log("before Done Calling");
                        })
                        .start();
                    const doneTour = document.getElementById("donotShowMeAgain");
        
                    doneTour?.addEventListener("click", donotShowMeAgainClicked);
        
                    return () => {
                        doneTour?.removeEventListener("click", donotShowMeAgainClicked);
                    };
                }
            }, []);
        
            const donotShowMeAgainClicked = (e: any) => {
                setCheckTour(e.target.checked);
            };
            // eslint-disable-next-line no-console
            console.log("checkTour", checkTour);
         return (
                <Page data-test-selector="homePage" {...styles.homePageContainer} className="homePageContainer">
                    <Zone contentId={id} zoneName="Content" requireRows />
                    <AddToListModal />
                </Page>
            );
        };

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>

分享到QQ

分享到微博