日本XXXX高清色视频,韩韩韩韩韩韩日日日日

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

如何實(shí)現(xiàn)前端新手引導(dǎo)功能？

大家好，我是 CUGGZ。

在產(chǎn)品發(fā)布新版本或者有新功能上線時(shí)，經(jīng)常需要新手引導(dǎo)功能來(lái)引導(dǎo)用戶了解應(yīng)用。下面就來(lái)分享幾個(gè)開箱即用的新手引導(dǎo)組件庫(kù)，幫你快速實(shí)現(xiàn)新手引導(dǎo)功能！

Intro.js

Intro.js 是一個(gè)使用廣泛的產(chǎn)品引導(dǎo)庫(kù)，它在 Github 上擁有 21.6k Star。其具有以下特點(diǎn)：

無(wú)依賴：它不需要任何其他依賴。
小而快：庫(kù)文件較小使得引導(dǎo)過(guò)程流暢直觀。JavaScript 文件的整體大小為 10KB，CSS 為 2.5KB。
用戶友好：提供可以根據(jù)喜好選擇的各種主題。
瀏覽器兼容性：適用于所有主流瀏覽器，如 Google Chrome、Mozilla Firefox、Opera、Safari 等。
文檔完善：文檔包含要介紹的每個(gè)元素的樣本和示例。

可以通過(guò)以下命令來(lái)安裝 Intro.js：

npm install intro.js - save

安裝完成后，只需三個(gè)簡(jiǎn)單的步驟即可將其添加到項(xiàng)目中：

將 JavaScript 和 CSS 文件（intro.js 和 introjs.css）添加到項(xiàng)目中。
將 data-intro 和 data-step 屬性添加到相關(guān)的 HTML 元素。這將為特定元素啟用 intro.js。
調(diào)用以下 JavaScript 函數(shù)：

introJs().start();

可以使用以下附加參數(shù)在特定元素或類上調(diào)用 Intro.js：

introJs(".introduction-farm").start();

Github：https://github.com/usablica/intro.js。

shepherd

Shepherd 在 Github 上擁有 10.7k GitHub Star。它支持在多個(gè)前端框架中開箱即用，包括 React、Vue、Angular 等。其具有以下特點(diǎn)：

輔助功能：提供鍵盤導(dǎo)航支持，遵循 a11y 規(guī)范，還可以使用 JavaScript 啟用 DOM 元素內(nèi)的焦點(diǎn)捕獲。
高度可定制：允許在不影響性能的情況下更改外觀。
框架支持：隨時(shí)融入項(xiàng)目的前端框架。
文檔完善：文檔涵蓋安裝和自定義，包括項(xiàng)目的主題和樣式。

可以使用以下命令來(lái)安裝 shepherd.js：

npm install shepherd.js -save
npm install react-shepherd --save
npm install vue-shepherd --save
npm install angular-shepherd --save

安裝完成之后，可以按如下方式來(lái)使用 shepherd（以 React 為例）：

import React, { Component, useContext } from 'react'
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import newSteps from './steps'

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    }
  },
  useModalOverlay: true
};
function Button() {
  const tour = useContext(ShepherdTourContext);

  return (
    
  );
}
class App extends Component {
  render() {
    return (
      
        
          

    );
  }
}

shepherd：https://github.com/shipshapecode/shepherd。
react-shepherd：https://github.com/shipshapecode/react-shepherd。
vue-shepherd：https://github.com/shipshapecode/vue-shepherd。
angular-shepherd：https://github.com/shipshapecode/angular-shepherd。

React Joyride

React Joyride 在 GitHub 上擁有超過(guò) 5.1k Star，在 React 項(xiàng)目中開箱即用，用于向現(xiàn)有用戶介紹新功能。其具有以下特點(diǎn)：

易于使用
高度可定制
文檔完善
積極維護(hù)

可以使用以下命令來(lái)安裝 react-joyride：

npm i react-joyride

可以通過(guò)以下方式來(lái)在 React 中使用 react-joyride：

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      
                  steps={steps}
          ...
        />
        ...
      

    );
  }
}

Github：https://github.com/gilbarbara/react-joyride。

Vue Tour

Vue Tour 是一個(gè)輕巧、簡(jiǎn)單且可自定義的新手指引插件，可以與 Vue.js 一起使用。它提供了一種快速簡(jiǎn)便的方法來(lái)指導(dǎo)用戶使用應(yīng)用。它在 Github 上擁有 2.1 k Star。

可以通過(guò)以下命令來(lái)安裝 Vue Tour：

npm install vue-tour

然后在應(yīng)用入口導(dǎo)入插件（如果使用 vue-cli 搭建項(xiàng)目，通常是 main.js），并在 Vue 中注冊(cè)它?？梢蕴砑幽J(rèn)提供的樣式或根據(jù)自己的喜好自定義它們。

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h h(App)
}).$mount('#app')

最后將 v-tour 組件放入模板中的任何位置（通常在 App.vue 中），并向其傳遞一系列步驟。每個(gè)步驟的 target 屬性可以將應(yīng)用的任何組件中的 DOM 元素作為 target（只要在相關(guān)步驟彈出時(shí)它存在于 DOM 中）。

Github：https://github.com/pulsardev/vue-tour。

Reactour

Reactour 是一個(gè)用于創(chuàng)建 React 應(yīng)用導(dǎo)覽的流行庫(kù)。在 GitHub 上擁有 3.2K Star，它提供了一種簡(jiǎn)單的方式來(lái)引導(dǎo)用戶瀏覽網(wǎng)站和應(yīng)用。

可以通過(guò)以下命令來(lái)安裝 reactour：

npm i -S @reactour/tour

安裝完成之后，在應(yīng)用的根組件添加 TourProvider，傳遞元素的步驟以在瀏覽期間突出顯示：

import { TourProvider } from '@reactour/tour'

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
)

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]

然后在應(yīng)用樹中的某個(gè)地方，使用 useTour hook 來(lái)控制 Tour：

import { useTour } from '@reactour/tour'

function App() {
  const { setIsOpen } = useTour()
  return (
    <>
      
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      

      
    
  )
}

Github：https://github.com/elrumordelaluz/reactour。

分享標(biāo)題：如何實(shí)現(xiàn)前端新手引導(dǎo)功能？
鏈接分享：http://www.5511xx.com/article/cddgpcj.html