Summarize the pits that are encountered in mobile projects

New on the line of a Vue mobile project, which used the time control, but input[type= ' date ' does not have placeholder attribute, the online method is <input type= ' text ' onfocus= ' this.type= ' This method is not a problem on iOS, but it takes two clicks on Android to adjust the system's time control. So decide to write a component yourself to solve the compatibility problem on Android. The code is as follows:

<Template>    <Divclass= "Date_container">      <inputID= "Show-date"type= "text": Value= "Date"disabled:p Laceholder= "Placeholder"/>      <inputID= "Date"type= "Date"@change= "ChangeDate"/>    </Div></Template><Script>Exportdefault{data () {Let today= NewDate ()return{date:"'}}, props:{datetype:{type:string,default: "'}, defaultdate:{type:string,default: "'}, placeholder:{type:string,default: 'Click to select a date'}, to:{Type:object}}, created () { This. Date=  This. Defaultdateif(! This. Placeholder) {         This. Placeholder= 'Click to select a date'}}, mounted () {}, methods: {input:function(e) {//alert (e.target.value);//if ("= = = = E.target.value) {//this.date = ' '//alert (this.date);//        }}, ChangeDate:function(event) {//alert (' this.date== ' +this.date);//alert (event.target.value);         This. Date=Event.target.value.replace (/-/G,'.') Console.log ( This. Date);  This. $emit ('setcomponentdate',  This. Date.replace (/-/G,'.') , This. Datetype, This. To)} }  }</Script><!--Add "scoped" attribute to limit CSS to this component only -<stylescoped>. Date_container{width:100%;Height:100%;position:relative;Overflow:Hidden;  }. Date_container input{Display:Inline-block;width:100%;Height:100%;background: White;position:Absolute;Top:0;text-align:Center;Line-height:Normal;  }input[type= ' text ']{    /*opacity:0.0;*/Color:#4c576f;  }input[type= ' datetime-local ']{background:paleturquoise;Opacity:0.0;  }input[type= ' Date ']{width:3rem;Height:100%;background:paleturquoise;Opacity:0.0;  }::-webkit-input-placeholder{Color:#b3bcce;font-size:. 14rem;  }input[disabled]{Opacity:1}. Addcontainer input[type= ' text ']{text-align: Right;  }</style>

Use code to

<date @setComponentDate = "Setcomponentdate" datetype= "Start":d efaultdate= "p.from_on" placeholder= "Please enter": to= "{ Which: ' Others ', index: $index, Datetype: ' from_on '} '/>

Summarize the pits that are encountered in mobile projects