最近做一個教育類的H5項目開發，有個UI界面是關于興趣愛好選擇，由于不希望用絕對定位將標簽的數量和位置固定，故根據一些簡單的計算封裝了隨著標簽數量增減的動態定位，然后就有了這個生成器。遺憾的是，通常這種UI只是移動端使用，而移動端如今多用rem進行布局，但該生成器采用的是px作為單位，仍需要自己修改單位換算問題。

生成器的界面如圖所示：

圖片描述
圖片描述

• 源碼地址：https://github.com/alex1504/c...
• 預覽地址：http://www.huzerui.com/circle...

說明：

1.基于Yeoman的webapp-generator構建
2.bower.json依賴：

"dependencies": {"vue": "^2.4.4","jquery": "^3.2.1","materialize": "^0.100.2","spectrum": "^1.8.0"}

3.package.json開發依賴

"devDependencies": {"async": "^2.5.0","babel-core": "^6.4.0","babel-preset-es2015": "^6.3.13","babel-register": "^6.5.2","browser-sync": "^2.2.1","cheerio": "^1.0.0-rc.2","del": "^2.2.0","gulp": "^3.9.0","gulp-autoprefixer": "^3.0.1","gulp-babel": "^6.1.1","gulp-cache": "^0.4.2","gulp-cssnano": "^2.0.0","gulp-eslint": "^3.0.0","gulp-filter": "^4.0.0","gulp-htmlmin": "^3.0.0","gulp-if": "^2.0.2","gulp-imagemin": "^3.0.1","gulp-load-plugins": "^1.2.4","gulp-plumber": "^1.0.1","gulp-sass": "^2.0.0","gulp-size": "^2.1.0","gulp-sourcemaps": "^2.2.0","gulp-uglify": "^2.0.0","gulp-useref": "^3.0.0","gulp.spritesmith": "^6.5.1","http-proxy-middleware": "^0.17.4","main-bower-files": "^2.5.0","merge-stream": "^1.0.1","node-sass": "^4.5.3","run-sequence": "^1.2.2","vinyl-buffer": "^1.0.0","wiredep": "^4.0.0"}

總結

以上是生活随笔為你收集整理的标签UI生成器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。