总结一下做移动端项目遇到的坑

 

 

新上线了一个vue的移动端项目，其中用到了时间控件，但是input[type='date']没有placeholder属性，网上查到的方法是<input type='text' onfocus='this.type="date"'>,这种方法在ios上是没问题的，但是在安卓上则需要点击两次才可以调起系统的时间控件。因此决定自己写个组件，解决安卓上的兼容性问题。代码如下：

<template>
    <div class="date_container">
      <input id="show-date" type="text" :value="date" disabled :placeholder="placeholder"/>
      <input id="date" type="date" @change="changeDate"/>
    </div>
</template>

<script>
  export default{
    data(){
      let today = new Date()
      return {
        date: ''
      }
    },
    props:{
      dateType:{
        type: String,
        default: ''
      },
      defaultDate:{
        type: String,
        default: ''
      },
      placeholder:{
        type: String,
        default: '点击选择日期'
      },
      to:{
        type: Object
      }
    },
    created(){
      this.date = this.defaultDate
      if(!this.placeholder) {
        this.placeholder = '点击选择日期'
      }
    },
    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 -->
<style scoped>
  .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>

 

使用代码为

<Date @setComponentDate="setComponentDate" dateType="start" :defaultDate="p.from_on" placeholder="请输入" :to="{which:'others',index:$index,dateType:'from_on'}"/>