vue及其生態圈中有很多第三方UI框架,其中jqweui是一個優秀的移動端UI框架,它基于jQuery和WeUI進行了二次開發,具有更好的適配和擴展性。在使用中,我們可以通過npm或cdn引入。
// npm安裝 npm install jqweui --save // cdn引用 <link rel="stylesheet" href="http://jqweui.com/dist/css/jqweui.min.css"> <script src="http://jqweui.com/dist/js/jquery.min.js"></script> <script src="http://jqweui.com/dist/js/fastclick.js"></script> <script src="http://jqweui.com/dist/js/jqweui.min.js"></script>
在vue中使用jqweui需要注意q這些組件都是基于jQuery,因此需要在Vue中引入jQuery及其插件,在實現綁定事件時,需要通過this.$refs或$el來獲取DOM元素,并使用jQuery來綁定事件。
// 在vue中引入jQuery及其插件 import $ from 'jquery' import 'weui' import 'jqweui' // 綁定事件 mounted() { $(this.$refs.btn).on('click', () =>{ $.alert('Hello jqweui') }) } // 在組件中使用jqweui <template> <div> <a ref="btn" class="weui-btn weui-btn_primary">Hello, JQWEUI</a> </div> </template>
在實際開發中,我們可以結合Webpack的插件來進行按需加載,減小頁面的體積。另外,我們還可以通過CSS覆蓋的方式來自定義樣式,滿足不同的需求。
// webpack按需加載 import 'jqweui/lib/alert' // CSS覆蓋 <style scoped> .weui-btn_primary { color: #fff; background-color: #4cd964; } </style>
總之,jqweui是一個優秀的移動端UI框架,在vue中的使用也相當簡單,只需要在引入后結合jQuery的語法即可。當然,在使用中需要注意版本的問題,避免出現兼容性等問題。