VUE專案中如何使用vue tour 新手引導

2021-10-01 09:35:04 字數 1276 閱讀 5333

vue-tour實現相當於給乙個div新增了乙個tooltip,不像vue-intro那樣有高亮顯示

npm install vue-tour

//然後在main.js中全域性引入

import vuetour from

'vue-tour'

require

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

)vue.

use(vuetour)

newvue()

.$mount()

//在vue頁面中使用vue-tour

"v-step-11" v-model=

"form" autocomplete=

"off"

class

="form-input"

>

<

/el-input>

"v-step-12" v-model=

"form" autocomplete=

"off"

class

="form-input"

>

<

/el-input>

"mytour"

:steps=

"steps" v-if=

"ifintro"

:options=

"myoptions"

:callback=

"mycallback"

>

<

/v-tour>

export

default},

}], myoptions:},

mycallbacks:}}

},created()

mounted()

this

.$tours[

'mytour'].

start()

//在mounted裡呼叫tour的start方法

}methods:

,myonstop()

)},myonpreviousstep

(currentstep)},

myonnextstep

(currentstep)

}注意:如果你vue多個頁面用到了vue-tour,id不要重複,不然d屬性會被覆蓋掉,比如你a頁面的input,id="v-step-1"的params的placement為top,b頁面的input的id="v-step-1"的params的placement為left,這時候b頁面的提示就會變成top,所以id值是唯一的,最好不要重複

vue專案中使用jQuery

這裡是引入全域性的jquery 1.在package.json檔案中,devdependencies 物件中新增 jquery 3.1.1 2.在build資料夾下的webpack.base.conf.js檔案中新增 var webpack require webpack 增加乙個plugins p...

vue 專案中使用 jquery

在 vue 專案中使用 jquery,具體步驟如下 1 npm 安裝 jquery 命令如下,後邊指定安裝的 jquery 版本 npm install jquery 3.2.1不加 會安裝最新版本 npm install jquery命令執行成功後,會在 package.json 檔案中自動生成 ...

vue專案中使用mui

vue搭建環境 hbuilder編輯器。我不喜歡用hbuilder寫 在使用vscode 使用的是vue cli腳手架。這個就不多bb了,之後對檔案做了簡單的調整。還是直接貼圖吧 基本的頁面準備工作完成assetspublicpath 之前是 改為 使build之後的專案能在本地執行 product...