PC端开发笔记

子组件内有复选框，选中记录一直存在，解决方法销毁重建组件

<!-- 销毁重建组件 使用v-if  editOrderible是编辑订单的显示隐藏-->
<commontMaster ref="commont" v-if="editOrderible"></commontMaster>

时间选择器的选中和清空

<a-form-item label="日期：" style="margin-right:100px">
		//双向绑定一个data，该变量会自动赋值，清空的时候给他赋值''
        <a-month-picker v-model="times" placeholder="请选择月份" @change="onChangeMonth" style="width: 200px"/>
      </a-form-item>
      <a-form-item label="师傅负责人：">
        <a-select v-model="masterId" default-value="" style="width: 200px">
          <a-select-option :value="item.userId" v-for="(item, i) in masterList" :key="i">
            {
    
    {
    
     item.userName }}
          </a-select-option>
        </a-select>
      </a-form-item>

 onChangeMonth (date, dateString) {
    
    
      console.log(date, dateString)
      // 赋值的时候需要另一个变量接受，不能使用v-model的变量，它会自动赋值
      this.time = dateString
    },

多选框选中取消，收集所有数据

<template>
  <div class="bg-white">
    <!-- 多选框 -->
    <a-checkbox-group @change="onChange" style="width:100%;" v-model="tab">
      <a-row style="width:50%;">
        <a-col :span="8">
          <a-checkbox value="A" :checked="true" @change="radio">
            A
          </a-checkbox>
        </a-col>
        <a-col :span="8">
          <a-checkbox value="B" @change="radio">
            B
          </a-checkbox>
        </a-col>
        <a-col :span="8">
          <a-checkbox value="C" @change="radio">
            C
          </a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
    <!-- tab表单 -->
    <a-tabs default-active-key="A" @change="callback">
      <a-tab-pane :key="i" :tab="i" v-for="(item,i) in info" >
        <div>姓名：<a-input placeholder="Basic usage" v-model="item.name" /></div>
        <div>年龄：<a-input placeholder="Basic usage" v-model="item.age"/></div>
        <div>爱好：<a-input placeholder="Basic usage" v-model="item.like"/></div>
      </a-tab-pane>
    </a-tabs>
    <button @click="confirm()">确定</button>
  </div>
</template>
<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      value: 1,
      tab: ['A'],
      list: {
    
     'A': {
    
    
        name: '',
        age: '',
        like: '',
        show: true
      },
      'B': {
    
    
        name: '',
        age: '',
        like: '',
        show: false
      },
      'C': {
    
    
        name: '',
        age: '',
        like: '',
        show: false
      } }
    }
  },
  computed: {
    
    
    info () {
    
    
      const obj = {
    
    }
      for (var k in this.list) {
    
    
        if (this.list[k].show) {
    
    
          obj[k] = this.list[k]
        }
      }
      return obj
    }
  },
  methods: {
    
    
    // onChange (checkedValues) {
    
    
    //   this.tab = checkedValues
    // },
    radio (e) {
    
    
      this.$set(this.list[e.target.value], 'show', e.target.checked)
    },
    confirm () {
    
    
      console.log(this.info)
    }
  }
}
</script>
<style scoped lang="less">
.bg-white{
    
    
    background: white;
}
</style>

页面切换顶部进度条展示

npm install --save nprogress

// router.js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
    
    
  NProgress.start()
  next()
})

router.afterEach(() => {
    
    
  NProgress.done()
})  

// app.vue
#nprogress .bar {
    
    
   background: red !important; //自定义颜色
}

登录表单去空格，enter直接登录