Vue中使用jQuery數字增量翻動元件

2021-09-28 12:59:44 字數 1204 閱讀 9522

數字翻牌效果有很多jquery元件可使用,但在vue元件中使用時遇到一些問題,在此記錄下。

在js檔案的底部用  export 匯出

在使用的元件在這樣引入:

2、元件**

注意style裡面不能加scoped,因為數字是在js檔案中動態新增的,加scoped的話css不生效

num是父元件傳入的

js檔案

//數字翻滾

const rollnumber = (function(win,doc)

this.$parent = doc.queryselector(x);

this.html = `

0123456

789.

`; this.extend( this.setting, y );

this.init(this.$parent,y)

}init (x,y);

animate ($parent)

}setnumdom (arrstr)}",o);

}else}",o);

}});

shtml += '

'; return shtml;

}update (num)else);

}this.animate(this.$parent);

}numtoarr (num){

num = parsefloat(num).tofixed(this.setting.dot);

let arrstr = typeof(num) == 'number' ? num.tostring().split("") : num.split("")

let arrlen = arrstr.length;

if(arrstr.length <=this.setting.len){

for(let _lens = 0;_lens

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 元件中使用jquery 模板

先看效果 博主是在首頁插入了輪播圖 資源 這個輪播圖是通過jquery 實現的,那麼vue 中怎麼引入呢?請繼續往下看 1 安裝jquery 外掛程式 2 安裝成功就可以使用了,下面需要替換掉 輪播圖中的jquery.js 換成我們安裝的 3 在元件中引入css與js 通過上面這幾步,我們就可以正常...