前端-常用代码片段整理

**Vue中弹窗代码

// 提示弹窗并且弹窗的确认和取消按钮调换(如果不需要就删除:cancelButtonClass: 'btn-custom-cancel',)
// closeOnClickModal: false 属性阻止点击空白处关闭弹框
this.$confirm('您确定要放弃这条记录?', '提示', {
cancelButtonClass: 'btn-custom-cancel',confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
}).then(() => {
}).catch(() => {
})
<style lang="scss">
// 弹窗的确认和取消按钮调换
.btn-custom-cancel {
  float: right !important;
  margin-left: 10px !important;
}
</style>

**Vue中带rules校验的确认保存

/**
<el-form ref="fromData" :rules="rules">
rules: {
  aaa: [
     { required: true, message: '请填写。。。', trigger: 'change' }
   ],
  bbb: [
     { required: true, message: '请填写。。。', trigger: 'blur' }
   ]
}
*/
#确认保存
submit(){
 this.$refs.fromData.validate((valid) => {
    if (valid) {

    }
  })
}

**Vue中在使用el-select标签时同时获取label和value的值

/**
--标签是<el-select @change="selChange">
--定义的数组是list: []
*/
selChange(val){
  let obj = this.list.find(function(item) {
	return item.dictValue === val;
  })
  //打印该值的label
  console.log(obj.dictLabel)
},

**Vue中将当前时间(new Date())格式化为(”yyyy-MM-dd HH:mm:ss“)(首位是0会被省略)

getDateTime(){
	var data = new Date();
	var nowDataTime = data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate() + ' ' + data.getHours() + ':' + data.getMinutes() + ':' + data.getSeconds();
	return nowDataTime
},

**Vue中将当前时间(new Date())格式化为(”yyyy-MM-dd HH:mm:ss“)(首位是0不会被省略)

getDateTime(date) {
  // var date= new Date();
  var y = date.getFullYear()
  var m = date.getMonth() + 1
  m = m < 10 ? '0' + m : m
  var d = date.getDate()
  d = d < 10 ? '0' + d : d
  var h = date.getHours()
  h = h < 10 ? '0' + h : h
  var minute = date.getMinutes()
  minute = minute < 10 ? '0' + minute : minute
  var second = date.getSeconds()
  second = second < 10 ? '0' + second : second
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
},

**Vue中JSON和对象的相互转化

//数组深拷贝
var array = []
JSON.parse(JSON.stringify(array))
//将对象转为JSON(student为对象)
var jsonValue=JSON.stringify(student);//常用
var jsonValue=student.toJSONString();
//将JSON转为对象
var obj = JSON.parse(jsonValue);//常用
var obj = jsonValue.parseJSON();
var obj = eval('(' + jsonValue+ ')');
var obj = eval_r('(' + jsonValue+ ')');

**Vue中判空公用js

/**
* 不出意外是如下结果，使用前请先测试一下 可写入项目公用util
* blank([])// true                 blank({})// true
* blank({ x: 123 })// false        blank('')// true
* blank(' ')// true                blank(' asdf')// false
* blank()// true                   var x; blank(x)// true
* var x = 12; blank(x)// false     blank(true)// false
* blank(false)// false             blank(0)// false            blank(NaN)// true
* */
isBlank(obj) {
var cache
if ((cache = typeof obj) !== 'boolean' && (cache !== 'number' || isNaN(obj)) && !obj)
  return true
if (cache === 'string' && obj.replace(/\s/g, '').length === 0)
  return true
if (cache === 'object') {
  if ((cache = toString.call(obj)) === '[object Array]' && obj.length === 0)
	return true
  if (cache === '[object Object]') {
	for (cache in obj) {
	  return false
	}
	return true
  }
}
return false
}

**Vue中日期组件赋默认值

/** 日期组件赋默认值(getMonthFirstDay()和this.getNowDate()是获取日期的方法，注意日期格式要和组件上的日期格式相同，dateValue是数组类型[])
<el-date-picker
	v-model="searchData.dateValue"
	value-format="yyyy/MM/dd"
	format="yyyy/MM/dd"
	style="width: 100%"
	type="daterange"
	range-separator="-"
	start-placeholder="开始日期"
	end-placeholder="结束日期" />
*/
this.$set(this.searchData, 'dateValue', [this.getMonthFirstDay(), this.getNowDate()])
// 获取当前日期（yyyy/MM/dd）
getNowDate() {
  const data = new Date()
  const y = data.getFullYear()
  let m = data.getMonth() + 1
  m = m < 10 ? '0' + m : m
  let d = data.getDate()
  d = d < 10 ? '0' + d : d
  return y + '/' + m + '/' + d
},
// 获取当月一号（yyyy/MM/dd）
getMonthFirstDay() {
  const data = new Date()
  const y = data.getFullYear()
  let m = data.getMonth() + 1
  m = m < 10 ? '0' + m : m
  return y + '/' + m + '/' + '01'
},

**Vue表格中鼠标悬停变小手可点击

// 鼠标悬停变小手可点击
<el-table-column prop="printNum" label="打印次数" align="center" width="80" show-overflow-tooltip>
  <template slot-scope="scope">
    <span style="color: blue;cursor: pointer" @click="click(scope.row)">{{ scope.row.printNum }}</span>
  </template>
</el-table-column>

**Vue表格中鼠标悬停出现tooltip

// 鼠标悬停出现tooltip
<el-table-column prop="giveUpFlag" label="生效状态" align="center" width="60" show-overflow-tooltip>
  <template slot-scope="scope">
    <el-tooltip v-if="scope.row.giveUpFlag === '1'" placement="top">
      <div slot="content">放弃人：{{ scope.row.giveUpUser }}<br />放弃时间：{{ scope.row.giveUpTime }}</div>
      <span v-if="scope.row.giveUpFlag === '1'" style="color: red">放弃</span>
    </el-tooltip>
    <span v-if="scope.row.giveUpFlag === '0'">生效</span>
  </template>
</el-table-column>

**Vue中其他知识点收藏

// 清空照片(uploads:照片组件的ref)
this.$refs.uploads.clearFiles()

…后续继续补充