vue心得体会

1、指定光标到固定输入框

方法一：使用autofocus

<nut-textinput autofocus
  class="mycim-input"
  placeholder="扫描箱码"
  id="my-boxCode"
  v-model="qcInfo.boxCode"
  @keydown.enter="doKeyDown"
>
</nut-textinput>

方法二：使用focus()方法

window.document.getElementById('my-boxCode').focus();

方法三：通过ref获取本页面的dom元素

<nut-col :span="24" class="item">
  <nut-textinput autofocus class="mycim-input" placeholder="唛头组件1"
	id="palletIdA" v-model="qcInfo.palletLotIdA" ref="palletIdA"
	@keydown.enter="doKeyDownPalletLotIdA">
  </nut-textinput>
</nut-col>

在需要的地方指定光标位置：

this.$refs.palletIdA.focus();

2、定时器

在methods中定义

methods: {
	times() {
   		return setInterval(() => {
     		console.log('555');
   		}, 600);
 	}
}

在mounted中调用

mounted() {
	this.times();
}

3、时间选择器

年-月-日 时:分
效果展示：

打开选择器：

<div class="label">记录日期:</div>
<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker">
	<span slot="title">
	<label>日期时间选择</label>
	</span>
	<div slot="desc" class="selected-option">
	<span class="show-value">{{recordTime ? recordTime : ''}}</span>
	</div>
</nut-cell>
<nut-datepicker
	:is-visible="isVisible"
	title="选择日期时间"
	type="datetime"
	:defaultValue="defaultValue"
	startDate="2022-01-01 00:08"
	endDate="2030-10-05 10:04"
	@close="switchPicker"
	@choose="setChooseValue"
></nut-datepicker>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		recordTime: ''
	  }
	},
	methods: {
	  switchPicker() {
        this.isVisible = !this.isVisible;
      },
      setChooseValue(param) {
        console.log('param:' + param);
        const theDate = param[5];
        this.recordTime = theDate;
      },
      getDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let time = `${year}-${month}-${day} ${hour}:${minute}`;
        console.log('time:' + time);
        this.defaultValue = time;
      }
	},
	created() {
	  this.getDateTime();
	}
}

注：
（1）defaultValue：选择器的默认打开时间和defaultValue相关，所以需要打开时对defaultValue赋值，给定需要打开的时间即可；
（2）startDate：如果不指定startDate，选择器可选择日期的开始时间为2000-01-01 00:00，可根据自身情况给定或者动态赋值；
（3）endDate：如果不给定endDate那么当天日期会有问题，只能选择0时时间，可根据自身情况给定或者动态赋值；

4、禁止浏览器默认填充使用autocomplete属性

autocomplete="off"

5、table中td间显示边框线

table添加样式

style="border-collapse: collapse;"

td添加样式

style="border: 1px #ccc solid;"

6、NUT-UI弹框提示，并定时关闭对话框

1. 定义对话框

<nut-dialog
 :title="'当前料盒:'+this.qcInfo.bunchBoxId+'未入库,请先入库'"
 :visible="dialogShow"
 @cancel-btn-click="dialogShow=false"
 @close="dialogShow=false"
 :noCancelBtn="true">
  <a href="javascript:;"></a>
</nut-dialog>

2. 定义dialogShow

dialogShow: false

3. 定时关闭
   注：在适当的地方调用

this.dialogShow = true;
setTimeout(() => {
  this.dialogShow = false;
}, 2000);

7、 对话框中定义对话框

this.$dialog({
  title: '盘点自动出库料盒共' + this.noScanBunchList.length + '个,' + this.bunchQty + '串',
  content: '分别为:' + this.noScanBunchList + ',请确认是否盘点完成?',
  closeBtn: false,
  onOkBtn(event) {
    materialApi.doBunchInventoryOutbound(bunchInfo, activeBunchInfo)
      .then(res => {
        if (res.success) {
          sessionStorage.removeItem('activeBunchList');
          this.$dialog({
            title: '提示',
            content: '盘点完成!',
            closeBtn: false,
            confirmButtonText: '我知道了',
            noCancelBtn: true,
            onOkBtn() {
              window.location.reload(); // 重新加载页面
              this.close();
            }
          });
        } else {
          msgBox(res.msg.errorMsg, this);
        }
      });
    this.close();
  },
  onCloseBtn(event) {
    this.bunchQty = 0;
    this.noScanBunchList = [];
  }
});

8、根据结果改变列颜色

8.1 改变列表行背景颜色

1. 定义列表

 <Card class="base-info">
  <template v-slot:head>库存料盒</template>
  <table style="width: 100%; text-align: center;">
    <tr>
      <td style="width: 5%;font-weight:bold;">序号</td>
      <td style="width: 70%;font-weight:bold;">料盒</td>
      <td style="width: 5%;font-weight:bold;">数量</td>
      <td style="width: 20%;font-weight:bold;">已扫描</td>
    </tr>
    <tr v-for="(item, index) in activeBunchList" :key="index" :class="getListItemColor(item)">
      <td>{{item.seq}}</td>
      <td>{{item.boxId}}</td>
      <td>{{item.bunchQty}}</td>
      <td>{{item.isScan}}</td>
    </tr>
  </table>
</Card>

2. 定义getListItemColor方法

getListItemColor(item) {
  let classColor = '';
  if (item.isScan === 'Y') {
    classColor = 'green-row';
  }
  return classColor;
}

3. 定义style

.green-row {
  background-color: #28B463;
}
.red-row {
  background-color: #A93226;
}

8.2 改变列表行字体颜色

1. 定义列表

 <Card class="base-info">
  <template v-slot:head>库存料盒</template>
  <table style="width: 100%; text-align: center;">
    <tr>
      <td style="width: 5%;font-weight:bold;">序号</td>
      <td style="width: 70%;font-weight:bold;">料盒</td>
      <td style="width: 5%;font-weight:bold;">数量</td>
      <td style="width: 20%;font-weight:bold;">已扫描</td>
    </tr>
    <tr v-for="(item, index) in activeBunchList" :key="index" :style="getListItemStyleColor(item)">
      <td>{{item.seq}}</td>
      <td>{{item.boxId}}</td>
      <td>{{item.bunchQty}}</td>
      <td>{{item.isScan}}</td>
    </tr>
  </table>
</Card>

2. 定义getListItemStyleColor方法

getListItemStyleColor(item) {
  let color = '';
  if (item.isScan === 'Y') {
    color = '#28B463';
  }
  return { color };
}

9、列表加滚动条

通过CSS属性overflow 来实现滚动框

<Card class="base-info">
 <template v-slot:head>库存料盒</template>
 <div style="overflow-y: auto; max-height: 260px;">
 <table style="width: 100%; text-align: center;">
   <tr>
     <td style="width: 5%;font-weight:bold;">序号</td>
     <td style="width: 70%;font-weight:bold;">料盒</td>
     <td style="width: 5%;font-weight:bold;">数量</td>
     <td style="width: 20%;font-weight:bold;">已扫描</td>
   </tr>
   <tr v-for="(item, index) in activeBunchList" :key="index" :class="getListItemColor(item)">
     <td>{{item.seq}}</td>
     <td>{{item.boxId}}</td>
     <td>{{item.bunchQty}}</td>
     <td>{{item.isScan}}</td>
   </tr>
 </table>
 </div>
</Card>