vue如何使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢?/h1>

 更新時(shí)間：2023年03月08日 15:13:26   作者：凱小默  

driver.js 是一個(gè)輕量級(jí)、無(wú)依賴的原生JavaScript引擎，在整個(gè)頁(yè)面中驅(qū)動(dòng)用戶的注意力，強(qiáng)大的、高度可定制的原生JavaScript引擎，無(wú)外部依賴，支持所有主流瀏覽器，這篇文章主要介紹了vue如何使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢?需要的朋友可以參考下

目錄

• 介紹
• 安裝
• 使用
• 突出顯示單個(gè)元素
• 高亮和彈出窗口
• 定位彈出窗口
• 創(chuàng)建功能介紹
• 異步操作
• 配置
• 定義步驟
• API方法
• 實(shí)戰(zhàn)
• 效果

介紹

https://github.com/kamranahmedse/driver.js

driver.js 是一個(gè)輕量級(jí)、無(wú)依賴的原生JavaScript引擎，在整個(gè)頁(yè)面中驅(qū)動(dòng)用戶的注意力，強(qiáng)大的、高度可定制的原生JavaScript引擎，無(wú)外部依賴，支持所有主流瀏覽器。

安裝

npm install driver.js

使用

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

突出顯示單個(gè)元素

const driver = new Driver();
driver.highlight('#create-post');

高亮和彈出窗口

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

定位彈出窗口

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

還可以使用offset屬性為彈窗位置添加偏移量

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'bottom',
    // Will show it 20 pixels away from the actual position of popover
    // You may also provide the negative values
    offset: 20,
  }
});

創(chuàng)建功能介紹

功能介紹在新用戶入門時(shí)很有用，可以讓他們了解應(yīng)用程序的不同部分。您可以使用驅(qū)動(dòng)程序無(wú)縫創(chuàng)建它們。定義步驟，并在你想開(kāi)始展示時(shí)調(diào)用start。用戶將能夠使用鍵盤或使用彈出窗口上的按鈕來(lái)控制步驟。

const driver = new Driver();

// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);

// Start the introduction
driver.start();

異步操作

對(duì)于轉(zhuǎn)換步驟之間的任何異步操作，可以將執(zhí)行延遲到操作完成。你所要做的就是在 onNext 或 onPrevious 回調(diào)函數(shù)中使用driver.preventMove() 停止過(guò)渡，并使用 driver.moveNext() 手動(dòng)初始化它。這是一個(gè)示例實(shí)現(xiàn)，它將在第二步停止4秒鐘，然后進(jìn)入下一步。

const driver = new Driver();

// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    },
    onNext: () => {
      // Prevent moving to the next step
      driver.preventMove();
      
      // Perform some action or create the element to move to
      // And then move to that element
      setTimeout(() => {
        driver.moveNext();
      }, 4000);
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);

// Start the introduction
driver.start();

配置

const driver = new Driver({
  className: 'scoped-class',        // 封裝driver.js彈窗的類名
  animate: true,                    // 是否進(jìn)行動(dòng)畫
  opacity: 0.75,                    // 背景不透明度(0表示只有彈窗，沒(méi)有覆蓋層)
  padding: 10,                      // 元素到邊緣的距離
  allowClose: true,                 // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉
  overlayClickNext: false,          // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動(dòng)
  doneBtnText: 'Done',              // final按鈕文本
  closeBtnText: 'Close',            // 關(guān)閉按鈕文本
  stageBackground: '#ffffff',       // 高亮元素背后的舞臺(tái)背景顏色
  nextBtnText: 'Next',              // 下一步按鈕文本
  prevBtnText: 'Previous',          // 前一步按鈕文本
  showButtons: false,               // 在頁(yè)腳不顯示控制按鈕
  keyboardControl: true,            // 允許通過(guò)鍵盤控制(esc鍵關(guān)閉，箭頭鍵移動(dòng))
  scrollIntoViewOptions: {},        // 如果可能的話，我們使用`scrollIntoView()`，如果你想要任何選項(xiàng)，在這里傳遞
  onHighlightStarted: (Element) => {}, // 當(dāng)元素將要高亮?xí)r調(diào)用
  onHighlighted: (Element) => {},      // 當(dāng)元素完全高亮?xí)r調(diào)用
  onDeselected: (Element) => {},       // 當(dāng)元素被取消選擇時(shí)調(diào)用
  onReset: (Element) => {},            // 當(dāng)覆蓋層即將被清除時(shí)調(diào)用
  onNext: (Element) => {},             // 當(dāng)移動(dòng)到下一個(gè)步驟時(shí)調(diào)用
  onPrevious: (Element) => {},         // 在任何步驟中移動(dòng)到上一步時(shí)調(diào)用
});

定義步驟

定義步驟時(shí)可以傳遞的一組選項(xiàng) defineSteps 或傳遞給 highlight 方法的對(duì)象:

const stepDefinition = {
  element: '#some-item',        // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
  stageBackground: '#ffffff',   // 這將覆蓋在驅(qū)動(dòng)程序中設(shè)置的
  popover: {                    // 如果為空或未指定彈窗，則不會(huì)有彈窗
    className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
    title: 'Title',             // popover 標(biāo)題
    description: 'Description', // popover 描述
    showButtons: false,         // 在頁(yè)腳不顯示控制按鈕
    doneBtnText: 'Done',        // 最后一個(gè)按鈕文本
    closeBtnText: 'Close',      // 關(guān)閉按鈕文本
    nextBtnText: 'Next',        // 下一個(gè)按鈕文本
    prevBtnText: 'Previous',    // 上一個(gè)按鈕文本
  },
  onNext: () => {},             // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
  onPrevious: () => {},         // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
};

突出顯示單個(gè)元素時(shí)的效果

const driver = new Driver(driverOptions);
driver.highlight(stepDefinition);

創(chuàng)建一個(gè)分步指南:

const driver = new Driver(driverOptions);
driver.defineSteps([
    stepDefinition1,
    stepDefinition2,
    stepDefinition3,
    stepDefinition4,
]);

API方法

下面是可用的方法集:

const driver = new Driver(driverOptions);

// 檢查driver是否激活
if (driver.isActivated) {
    console.log('Driver is active');
}

// 在步驟指南中，可以調(diào)用以下方法
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
driver.start(stepNumber = 0);  // 定義開(kāi)始步驟
driver.moveNext();             // 移動(dòng)到“步驟”列表中的下一步
driver.movePrevious();         // 移動(dòng)到“步驟”列表中的上一步
driver.hasNextStep();          // 檢查是否有下一步要移動(dòng)
driver.hasPreviousStep();      // 檢查是否有要移動(dòng)到的上一個(gè)步驟

// 阻止當(dāng)前移動(dòng)，如果你想，可以在`onNext`或`onPrevious`中使用，執(zhí)行一些異步任務(wù)，然后手動(dòng)切換到下一步
driver.preventMove();

// 使用查詢選擇器或步驟定義突出顯示元素
driver.highlight(string|stepDefinition);

// 重新定位彈出窗口并突出顯示元素
driver.refresh();

// 重置覆蓋層并清空屏幕
driver.reset();

// 另外，你可以傳遞一個(gè)布爾參數(shù)
// 立即清除，不做動(dòng)畫等
// 在你運(yùn)行的時(shí)候可能有用
// driver程序運(yùn)行時(shí)的不同實(shí)例
driver.reset(clearImmediately = false);

// 檢查是否有高亮的元素
if(driver.hasHighlightedElement()) {
    console.log('There is an element highlighted');
}

// 獲取屏幕上當(dāng)前高亮顯示的元素，would be an instance of `/src/core/element.js`
const activeElement = driver.getHighlightedElement();

// 獲取最后一個(gè)高亮顯示的元素, would be an instance of `/src/core/element.js`
const lastActiveElement = driver.getLastHighlightedElement();

activeElement.getCalculatedPosition(); // 獲取活動(dòng)元素的屏幕坐標(biāo)
activeElement.hidePopover();           // 隱藏彈出窗口
activeElement.showPopover();           // 顯示彈出窗口

activeElement.getNode();  // 獲取這個(gè)元素后面的DOM元素

別忘了給觸發(fā) driver 的 click 綁定添加 e.stopPropagation()。

實(shí)戰(zhàn)

下面是我實(shí)現(xiàn)的一個(gè) vue 的 demo，用的 driver.js 是 0.9.8。

<template>
    <div class='driver-demo'>
        <div class="btn" @click="handleClick">向?qū)е敢?lt;/div>
        <!-- 上 -->
        <div id="step-item-1" class="top">
            <h2>上面部分</h2>
            <section>生活不過(guò)是一片混亂，充滿了各種可笑的、齷齪的事情，它只能給人們提供笑料，但是他笑的時(shí)候卻禁不住滿心哀傷。</section>
        </div>
        <!-- 右 -->
        <div id="step-item-2" class="right">
            <h2>右邊部分</h2>
            <section>
                月亮是那崇高而不可企及的夢(mèng)想，六便士是為了生存不得不賺取的卑微收入 。多少人只是膽怯地抬頭看一眼月亮，又繼續(xù)低頭追逐賴以溫飽的六便士?
            </section>
        </div>
        <!-- 下 -->
        <div id="step-item-3" class="bottom">
            <h2>下邊部分</h2>
            <section>我用盡了全力，過(guò)著平凡的一生。</section>
        </div>
        <!-- 左 -->
        <div id="step-item-4" class="left">
            <h2>左邊部分</h2>
            <section>夢(mèng)想什么時(shí)候開(kāi)始都不晚。</section>
        </div>
        <!-- 中 -->
        <div id="step-item-5" class="center">
            <h2>中間部分</h2>
            <section>
                我們每個(gè)人生在世界上都是孤獨(dú)的……盡管身體互相依傍卻并不在一起，既不了解別人也不能為別人所了解。
            </section>
        </div>
    </div>
</template>

<script>
// 引入資源
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

export default {
    name: 'DriverDemo',
    data () {
        return {
            driverOptions: {
                className: 'kaimo-driver',        // 封裝driver.js彈窗的類名
                animate: true,                    // 是否進(jìn)行動(dòng)畫
                opacity: 0.5,                    // 背景不透明度(0表示只有彈窗，沒(méi)有覆蓋層)
                padding: 20,                      // 元素到邊緣的距離
                allowClose: true,                 // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉
                overlayClickNext: false,          // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動(dòng)
                doneBtnText: '確定',              // final按鈕文本
                closeBtnText: '我知道了',            // 關(guān)閉按鈕文本
                stageBackground: '#fff',       // 高亮元素背后的舞臺(tái)背景顏色
                nextBtnText: '下一步',              // 下一步按鈕文本
                prevBtnText: '上一步',          // 前一步按鈕文本
                showButtons: true,               // 在頁(yè)腳不顯示控制按鈕
                keyboardControl: true,            // 允許通過(guò)鍵盤控制(esc鍵關(guān)閉，箭頭鍵移動(dòng))
                scrollIntoViewOptions: {},        // 如果可能的話，我們使用`scrollIntoView()`，如果你想要任何選項(xiàng)，在這里傳遞
                onHighlightStarted: (Element) => {}, // 當(dāng)元素將要高亮?xí)r調(diào)用
                onHighlighted: (Element) => {},      // 當(dāng)元素完全高亮?xí)r調(diào)用
                onDeselected: (Element) => {},       // 當(dāng)元素被取消選擇時(shí)調(diào)用
                onReset: (Element) => {},            // 當(dāng)覆蓋層即將被清除時(shí)調(diào)用
                onNext: (Element) => {},             // 當(dāng)移動(dòng)到下一個(gè)步驟時(shí)調(diào)用
                onPrevious: (Element) => {},         // 在任何步驟中移動(dòng)到上一步時(shí)調(diào)用
            }
        };
    },
    methods: {
        handleClick(e) {
            // 阻止點(diǎn)擊事件進(jìn)一步傳播，不加的話指引打開(kāi)會(huì)關(guān)閉
            e.stopPropagation();

            // 初始化
            const driver = new Driver(this.driverOptions);
            // 自定義幾個(gè)步驟
            driver.defineSteps([
                this.stepDefinition1(),
                this.stepDefinition2(),
                this.stepDefinition3(),
                this.stepDefinition4(),
                this.stepDefinition5(),
            ]);
            // 開(kāi)始進(jìn)行向?qū)?，默認(rèn)從0開(kāi)始也就是步驟1，也可以自己調(diào)整其他步驟（0可以不寫）
            driver.start(0);
        },
        stepDefinition1() {
            return {
                element: '#step-item-1',        // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
                // stageBackground: '#ffffff',   // 這將覆蓋在驅(qū)動(dòng)程序中設(shè)置的
                popover: {                    // 如果為空或未指定彈窗，則不會(huì)有彈窗
                    className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
                    title: '步驟1',             // popover 標(biāo)題
                    description: '這是步驟1的向?qū)枋?, // popover 描述
                    // showButtons: true,         // 在頁(yè)腳不顯示控制按鈕
                    // doneBtnText: 'Done',        // 最后一個(gè)按鈕文本
                    // closeBtnText: 'Close',      // 關(guān)閉按鈕文本
                    // nextBtnText: 'Next',        // 下一個(gè)按鈕文本
                    // prevBtnText: 'Previous',    // 上一個(gè)按鈕文本
                },
                onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
                    console.log("步驟1:onNext");
                },             
                onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
                    console.log("步驟1:onPrevious");
                },     
            };
        },
        stepDefinition2() {
            return {
                element: '#step-item-2',        // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
                popover: {                    // 如果為空或未指定彈窗，則不會(huì)有彈窗
                    className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
                    title: '步驟2',             // popover 標(biāo)題
                    description: '這是步驟2的向?qū)枋?, // popover 描述
                    position: 'left-center'
                },
                onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
                    console.log("步驟2:onNext");
                },             
                onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
                    console.log("步驟2:onPrevious");
                }, 
            };
        },
        stepDefinition3() {
            return {
                element: '#step-item-3',        // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
                popover: {                    // 如果為空或未指定彈窗，則不會(huì)有彈窗
                    className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
                    title: '步驟3',             // popover 標(biāo)題
                    description: '這是步驟3的向?qū)枋?, // popover 描述
                },
                onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
                    console.log("步驟3:onNext");
                },             
                onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
                    console.log("步驟3:onPrevious");
                }, 
            };
        },
        stepDefinition4() {
            return {
                element: '#step-item-4',        // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
                popover: {                    // 如果為空或未指定彈窗，則不會(huì)有彈窗
                    className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
                    title: '步驟4',             // popover 標(biāo)題
                    description: '這是步驟4的向?qū)枋?, // popover 描述
                    position: 'right-center'
                },
                onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
                    console.log("步驟4:onNext");
                },             
                onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
                    console.log("步驟4:onPrevious");
                }, 
            };
        },
        stepDefinition5() {
            return {
                element: '#step-item-5',        // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
                popover: {                    // 如果為空或未指定彈窗，則不會(huì)有彈窗
                    className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
                    title: '步驟5',             // popover 標(biāo)題
                    description: '這是步驟5的向?qū)枋?, // popover 描述
                },
                onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
                    console.log("步驟5:onNext");
                },             
                onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
                    console.log("步驟5:onPrevious");
                }, 
            };
        }
    },
};
</script>

<style lang="scss" scoped>
.driver-demo {
    position: relative;
    text-align: center;
    background-color: #eee;
    padding: 40px;
    .btn {
        width: 100px;
        height: 48px;
        line-height: 48px;
        border: 1px solid purple;
        background-color: plum;
        border-radius: 4px;
        cursor: pointer;
    }
    .top {
        position: absolute;
        top: 0;
        left: 400px;
        width: 300px;
        height: 140px;
        background-color: silver;
    }
    .right {
        position: absolute;
        top: 60px;
        right: 0;
        width: 200px;
        height: 300px;
        background-color: salmon;
    }
    .bottom {
        position: absolute;
        bottom: 200px;
        left: 400px;
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }
    .left {
        position: absolute;
        top: 50%;
        left: 0;
        width: 300px;
        height: 70px;
        background-color: seagreen;
    }
    .center {
        margin: 330px auto;
        width: 400px;
        height: 100px;
        background-color: sandybrown;
    }
}
</style>

效果

實(shí)現(xiàn)的功能向?qū)е敢Ч缦拢?/p>

到此這篇關(guān)于vue里使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢奈恼戮徒榻B到這了,更多相關(guān)vue項(xiàng)目功能向?qū)е敢齼?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

• Vue使用driver.js做引導(dǎo)頁(yè)
• Driver.js前端引導(dǎo)頁(yè)組件的具體使用
• vue3項(xiàng)目新用戶引導(dǎo)組件driver.js示例詳解
• vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解
• 用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法

• vue
• driver.js
• 向?qū)е敢?/a>

相關(guān)文章

• 

  vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程之table組件源碼分析

  這篇文章主要介紹了vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程——table組件源碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

  2023-04-04
• 

  el-select 下拉框全選、多選的幾種方式組件示例詳解

  這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

  2023-12-12
• 

  vue中的inject學(xué)習(xí)教程

  本文通過(guò)實(shí)例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

  2019-04-04
• 

  Vue實(shí)現(xiàn)步驟條效果

  這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2022-03-03
• 

  vue異步加載高德地圖的實(shí)現(xiàn)

  這篇文章主要介紹了vue異步加載高德地圖的實(shí)現(xiàn)，詳細(xì)的介紹了異步加載的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2018-06-06
• 

  Vue infinite update loop的問(wèn)題解決

  這篇文章主要介紹了Vue "...infinite update loop..."的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2019-04-04
• 

  詳解使用vue實(shí)現(xiàn)tab 切換操作

  這篇文章主要介紹了詳解使用vue實(shí)現(xiàn)tab操作,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2017-07-07
• 

  vue.js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車功能

  這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2020-05-05
• 

  Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例

  本文主要介紹了Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2023-07-07
• 

  Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境

  這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

  2022-08-08

最新評(píng)論