Talking about the path of the mint-ui plug-in and the path of the mint-ui plug-in

Talking about the path of the mint-ui plug-in and the path of the mint-ui plug-in

Recently, I used the Mobile Terminal Project of vue to discard the mui framework that I was familiar with. Instead, I used the mint-ui framework customized by ELE. Me team for vue.

I thought that mui's document was enough when I was developing it. But when I started to read the mint-ui document, I realized that I was too young...

For some of your problems, we hereby record them as a document to facilitate future use.

Swipe component

Because the project loads eslint, it does not reference the swiper framework as in the previous project.

The component document of this carousel chart is really not flattering (although other documents are not good enough). The official parameters are really rare, and some methods are not mentioned.

Shows the official api, you know:

After carefully reading the example of this component, you will find some common methods.

1. Carousel is not played by default.

Set the auto value to 0.

2. Manual Control of carousel Images

Use vue ref to bind the referenced swipe root tag first.

<mt-swipe ref="swipe" class="swipe" :auto="0">  <mt-swipe-item v-for="img in images" :key="img.id">      </mt-swipe-item></mt-swipe>

Then, using the swipe component bound with ref, we can call some internal control methods:

This. $ refs. swipe. next () // go to the next carousel image. this. $ refs. swipe. prev () // go to the previous carousel image.

The next step is probably the most important method I have found: monitor the index value activated by the current carousel Image

The current index value of the swipe component is saved in the index.

We can use the preceding method to save the currently activated index values when vue updates the dom:

beforeUpdate () { this.activeIndex = this.$refs.swipe.index}

Then, you can use the watch method to monitor the activation index value of the current swipe for subsequent processing.

watch: { activeIndex: function (val, oldVal) {  console.log('newIndex: %s, oldIndex: %s', val, oldVal)  // TODO }}

In this way, some basic operations of the swipe component are completed.

Picker component

Picker components also have many problems. If there are few words, go to the official api first:

Continue the field description for the slots object array:

During usage, we will find that there is a problem if the secondary initial value in the cascading picker is initialized directly.

Because according to the initialization data method in its demo, the index value in the array must be used for initialization. For level-1 menusdefaultIndexThere is no problem with the processing, but we need to point the value of values to the current list of second-level arrays.

AddressSlots: [{flex: 1, values: Object. keys (address), className: 'slot1', textAlign: 'center'}, {divider: true, content: '-', className: 'slot2'}, {flex: 1, values: ['beijing'], className: 'slot3 ', textAlign: 'center'}]

Avoid separateaddressSlotsFor data processing, we can point both level 1 and level 2 to the default first parameter, and then use the following method for initialization:

Mounted () {this. $ nextTick () =>{ setTimeout () =>{// use the index to initialize the default selected province and city. this. areaSlots [0]. defaultIndex = provinceIndex // Number type this. areaSlots [2]. defaultIndex = cityIndex}, 20 )})}

Bug handling

The Infinite scroll component is loaded multiple times.

The method in the official example is not loaded more than once after a rolling operation. The new loading processing should be blocked in the loading:

loadMore () { this.loading = true setTimeout(() => {  // TODO  this.loading = false }, 2500)}

Improvements:

LoadMore () {// prevents multiple times of loading if (this. loading) {return false} this. loading = true setTimeout () => {// TODO this. loading = false}, 2500 )}

Processing of sliding conflicts between tabContainer and loadMore

Although the two slides work very well together, if the height of tabContainer cannot fill the whole screen, it is not possible to slide left and right while refreshing in the pull-down. css must be used for Height Processing to slide left and right:

. Mint-tab-container-wrap {min-height: 617px; // The minimum height must be set}

The problem that Datetime picker cannot pop up normally

I don't know if this is the only problem I have encountered. I will show it in the official way.

In desperation, I checked the source code and found that I had to manually control the display of picker.

We need to add a datetime picker to be used to wrap the popup, and then use the computed attribute to change the display attribute for the current date and time control through the activation of popup.

This basically achieves the desired effect. The implementation code is as follows:

Html section:

<mt-popup v-model="activePicker" position="bottom">  <mt-datetime-picker :style="{ display: showOrHide }" ref="picker" type="date" v-model="date" :start-date="new Date('2010-01-01')" @cancel="cancelPicker" @confirm="cancelPicker"></mt-datetime-picker></mt-popup>

Js section:

computed: {  showOrHide: function () {   if (this.activePicker) {    return 'block'   } else {    return 'none'  } }},methods: { cancelPicker () {  this.activePicker = false }}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.