Vant ui

轻量、可靠的移动端 Vue 组件库

https://youzan.github.io/vant/#/zh-CN/intro

 

 

postcss-pxtorem

vue:将px转化为rem，适配移动端vant-UI等框架

https://www.jianshu.com/p/220a186cc033

 

DatetimePicker时间选择器

https://www.jianshu.com/p/9daed4a96f63

 

vant ui 开始时间-结束时间 选择器

https://segmentfault.com/a/1190000021052209?utm_source=tag-newest

 

dialog弹出框的理解

组件化调用

HTML

<van-button type=“info” size=“small” @click=“onClick”>dialog按钮
<van-dialog
  v-model="show"
  title="弹出框"
  show-cancel-button
  :beforeClose="chargeBtn"
>
  <van-stepper v-model="number" min="0" integer/>
</van-dialog>

JS

data() {
  return {
    show: false,
    number: 1, 
  };
},
methods: {
  onClick() {
    this.show = true;
  },
  chargeBtn(action, done) {//确认or取消

    if (this.number < 0) {
      this.$notify("请输入数量！");
      done(false);
      return;
    }
    if (action === 'cancel') {//取消按钮
      done();
    } else if (action === 'confirm') {//确定按钮
        //向后端传值并关闭dialog弹出框
          this.show = false;
        });
      done();
    }
  }
}

 

https://blog.csdn.net/qq_40906004/article/details/92975157