Mint ui-Vue.js-based mobile component library

Mint ui-Vue.js-based mobile component library

NPM Installation:npm i mint-ui -S

//1. Complete IntroductionImport vue from ' Vue 'Import Mintui from' Mint-ui 'Import' Mint-ui/lib/style.css 'vue.use (Mintui)//2. Introduction of some componentsImport {MessageBox} from ' Mint-ui '//pop-up prompt box (Error prompt)Import {Toast} from ' Mint-ui ';//Short message prompt box (informational tip)Import ' Mint-ui/lib/style.css 'Object.defineproperty (Vue.prototype,' $messageBox ', {Value:messagebox}) Object.defineproperty (Vue.prototype,' $toast ', {value:toast}) import {Loadmore} from' Mint-ui '//Pull-down/pull- up refreshvue.component (Loadmore.name, Loadmore)//3. Example of Prompt box//Xxx.vue This. $toast (' Praise Success ') This. $messageBox. Alert (' Pro, activity closed ')//Request.js (Request to service side)Import {Indicator, MessageBox} from ' Mint-ui 'service.interceptors.request.use (config= = {//Request InterceptorIndicator.open (' Load in ... ')//Show load Prompt box  returnconfig}) Service.interceptors.response.use (//Respone InterceptorResponse ={indicator.close ()//Close the Load prompt boxConst RES =Response.dataif(Res. ReturnCode!== ' 000000 ') {          } Else {      returnRes}}, error={indicator.close () Messagebox.alert (' It's too hot, don't be impatient, kiss, try Again ')    returnpromise.reject (Error)})

4. Pull Up Refresh Example

<Divclass= "Page-container"><Mt-loadmoreclass= "Detail-box": Class= "{' all-loaded ': allloaded}": Bottom-method= "Loadmoredetail"<!--pull-up refresh execution Method--: bottom-all-loaded= "allloaded"<!--If True, the Bottommethod will not be triggered again -: Auto-fill= "false"<!--Loadmore automatically detects when it is initialized that its height is capable of filling its container, and if not, calls Bottom-method until it fills the container. If you do not want to use this mechanism, you can set Auto-fill to False -ref= "Loadmore" ><ulclass= "Detail-list">    <Liclass= "Item"v-for= "(Item,index) in Beandetaillist": Key= "Index">        <!-- ...  -    </Li>  </ul></Mt-loadmore></Div>

Import {Qrybeandetail} from ' @/api 'Let currentindexexportdefault{data () {return{beandetaillist: [], allloaded:false}}, mounted () {Qrybeandetail ({currentindex:0}). Then (response ={Const Beandetaillist=Response. List This. beandetaillist =beandetaillist Currentindex=parseint (response. PageSize)if(Beandetaillist.length = =Response. Totalnum) {This  . allloaded = true       }    }).Catch(Error ={})}, methods: {//load more details of the gold beanLoadmoredetail () {Qrybeandetail ({currentindex:currentindex}). Then (response={Const Beandetaillist= This. Beandetaillist.concat (response. List) This. beandetaillist =beandetaillist Currentindex+=parseint (response. PageSize)if(Beandetaillist.length = =Response. Totalnum) {This  . allloaded = true         }         This. $refs. loadmore.onbottomloaded ()//Finally, you need to manually invoke the Loadmore onbottomloaded event. This is because some relocation of the component is required after the data has been loaded}).Catch(Error = {            })    }  }}

Mint ui-Vue.js-based mobile component library