Detailed explanation of @change compatibility issues in vue

@change Question

1. Requirement description

Requirements: Select a date. When the date changes, some events of the page corresponding to the date are rendered

condition:

Mobile
vue framework

2. Problem arising and description

Problem: Compatibility gap. Due to the different triggering methods of @change, the time loading is not uniform enough, and there is a problem with the time triggering.

The description is as follows:

When using vue as a mobile terminal, due to the requirements, a date selection control needs to be added somewhere on the page. Since it is not for users and is used internally, based on the principle of not wasting resources, we directly use the input from h5:

<input type="date">

emmm...CSS style will not be described again. Then bind the data and bind the change event listening value:

<input type="date" v-model="date" @change="selectDate">
selecrDate () {
  // do something...
}

After the basic process is finalized, there is no problem on the PC side. But note that we are discussing the mobile terminal effect at this time. Then using the PC terminal to open the debugging tool to simulate the mobile terminal model is obviously not enough to represent the real scenario of the mobile terminal, so it needs to be tested in the real machine. OK, next, differentiation appears.
Since the characteristic of @change is to execute when the monitor changes, the difference is exposed:

Android: After selecting the year, month and day, click OK, the data will change, and the monitoring event will work;
iOS: Click to select date, select year, listen to data changes once, execute selectDate once, select month, listen to data changes, execute again, select day, listen to data changes, execute again... Select non-stop, execute non-stop.

Due to the differentiation at these different ends, we must be "compatible" with this problem. So if the key issues arise, how to be compatible?

3. Solution

At this point, we must find a way to solve a problem first: how to prevent the problem of automatically executing selectDate on the iOS side. At this time, after some searching, I found that the @blur method can replace @change in iOS. I did it right away, and I dispelled it:

<input type="date" v-model="date" @blur="selectDate">

OK, find an Apple machine to try it. Perfect, choose the problem of year, month, day and day. The event will only be triggered after clicking OK. However, the so-called villain is not desirable to succeed. When he was very happy, he found that he had been dismissed on the Android phone. The reason is that after selecting on Android, the @blur event will not trigger, unless the selection is completed, click another area to trigger this event. Therefore, we are facing another compatibility problem. How to ensure that it can run smoothly on both Android and iOS systems?

There is a way - js to tell whether the system is Android or iOS:

const u = , app = ;
// Android judgmentconst isAndroid = ('Android') &gt; -1 || ('Linux') &gt; -1;
// iOS judgmentconst isIOS = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 

if (isAndroid) {
  // This is the Android operating system  // do something
}

if (isIOS) {
  // This is iOS operating system  // do something
}

With this step, the next thing is much simpler:

If it is an Android system, use @change;
If it is an iOS system, use @blur;
Since it is a mobile terminal, PC~ is not considered;

Completed ~.~!

Summarize

To summarize the above, the steps are as follows:

Enter the page, execute the js script, and determine the current device model;
If it is an Android device, execute @change;
If it is an iOS device, execute @blur.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.