2,594 total views, 4 views today
在改版公司新網站的時候,因為要應付天天都會有奇怪的人,問奇怪的問題,所以要用最快速有效率的元件,來解決自己工作上的疑難雜症,但是通常高手先進都會叫你啃官網的說明,於是當初用了vue-datepicker-local這個套件,發現我又需要一些三級連動的,或是處理動態效果的,這些當然可以透過 js 與 bootstrap4 來寫,但是我又不碼農,隨時都會有”電腦不能用”,或是指著螢幕講我聽不懂的話,需要處理的項目,最後終於出現 iview 這個萬用的UI。
同場加映,另外一套也是不錯的UI元件layui ,或是ElementUI與vueify,可是因為已經使用 vue 了,加上bootstrap,感覺用layui有點多餘(雖然加掛 iview 也差不多是這樣 ) ,總之我們來看看怎麼安裝吧。
首先,先去啃官方的文件,有很多的範例與教學,我是安裝在laravel使用 webpack的方式裝。
首先下
npm install iview --save
然後在 webpack.mix.js 加入
mix.js('resources/js/app.js', 'public/js') .js('node_modules/iview/dist/iview.min.js','public/js')
接著在linux終端機執行
npm run watch-poll
接下來是蠻關鍵的一步,但是好像很多教學網站都沒提到,在view要引入 iview.min.js
<script src="{{ mix('/js/iview.min.js') }}"></script>
這樣就完工了,透過 iView 官方文件,可以簡單看一下他的範例,抄起來很快的
步驟指引 https://jsfiddle.net/adslcai/21vkth6s/
tab 標籤頁範例 https://jsfiddle.net/adslcai/2uvawh86/
網頁載入進度指示 https://jsfiddle.net/adslcai/1wbkt6u8/