zoukankan      html  css  js  c++  java
  • 总结一下做移动端项目遇到的坑

     

    新上线了一个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'}"/>
  • 相关阅读:
    Poj 2017 Speed Limit(水题)
    Poj 1316 Self Numbers(水题)
    Poj 1017 Packets(贪心策略)
    Poj 1017 Packets(贪心策略)
    Poj 2662,2909 Goldbach's Conjecture (素数判定)
    Poj 2662,2909 Goldbach's Conjecture (素数判定)
    poj 2388 Who's in the Middle(快速排序求中位数)
    poj 2388 Who's in the Middle(快速排序求中位数)
    poj 2000 Gold Coins(水题)
    poj 2000 Gold Coins(水题)
  • 原文地址:https://www.cnblogs.com/web-fengmin/p/6880049.html
Copyright © 2011-2022 走看看