项目中常用写法（前端）
- vue
- 等待某个方法执行结束后，在执行
- 判断js是不是undefined类型
- 父组件传值到子组件
- state的值在标签中直接使用
- 读取html，去掉字符串中的html标签
- 字符串去掉中括号
- 去掉双引号
- 判断数组中是否包含某个值
- 在某个ui框架上的：text写判断
- 数组截取前几条数据
- vue运行打包
- vue打包之后放到nginx上运行
- 获取时间不是两位数字补全2位
- elementui 表格透明
- element ui 的级联 选择后不收起弹窗
- element ui 的级联 其他级别可选，最后一级不可选隐藏radio
- 遍历求和
- 绝对定位居中： 自身的一半
- flex换行：
- 清除定时器：
- 格式化时间：
- 保留两位小数：
- 过滤对象中某些值等于固定的值：
- 按照对象中的某个值进行排序：
- 复制对象 生成新对象 ，aa值不发生改变：
- 获取所有key值：
- 两个对象比较删除掉不相同的属性：
- 跳转页面传参，另一个页面接收：
- 父组件校验子组件的表单：
- 时间格式转化：
- 子组件调用父组件方法：
- 父组件值改变后需要刷新子组件：
- 父组件值改变后需要刷新清空子组件数据：
- 添加数据：
- 删除数据：
- 清除某个具体的表单校验：
- 对象合并去重后一个覆盖前一个的值：
- vue字符串分隔成数组后去掉空格和空值：
vue
项目中常用的书写方式
等待某个方法执行结束后，在执行
this.getCurrentAjInfo().then((results) => {
})
判断js是不是undefined类型
typeof (aa) !== 'undefined'
父组件传值到子组件
父组件在create中获取接口数据，取到的值放到父组件的data中，如下把data的值传递给子组件
<comHeader :hbfonts="hbfonts" />
子组件接受值
props: [ 'hbfonts'],
state的值在标签中直接使用
<span id="headerspan" v-show="hbfonts==1" class="fd-header-icon-span-3">{{$store.state.session.showName}}</span>
读取html，去掉字符串中的html标签
str.replace(/<[^>]+>/g, '')
字符串去掉中括号
aa.replace(/\[|]/g,'')
去掉双引号
aa.replace(/\"/g, "");
判断数组中是否包含某个值
//存在，flag1==0 不存在：flag2==-1
let barginFlag=[1,2,3,4];
let flag1= barginFlag.findIndex(item => item=== a)
在某个ui框架上的：text写判断
<aa-menu v-for="(item, index) in aa" :key="item.key" :code="item.key" :text="`<i class='fd-aa icon-${index%10} ${item.key}' style='margin-right: 10px'></i><span class='${(item.name === 'aa' && onshow)?'fontred':''}'>${item.name}</span> `+ `<i class='${(item.name === 'aa' && onshow)?'fd-aa icon-11':''}' style='margin-left: 10px;width: 11px;height:14px;'></i>`" @click="handleTriggerClick(item)"></aa-menu>
数组截取前几条数据
articleList.slice(0,1)
vue运行打包
cd ..
npm run build
vue打包之后放到nginx上运行
修改nginx的conf下的nginx.conf文件，修改端口号，修改代理地址
server {
listen 10022;
server_name localhost;
}
location /aa/ {
proxy_pass http://192.168.33.44:8080;
}
cmd命令查看端口号占用和杀掉占用进程：
>netstat -ano|findstr 10022
>taskkill/f /pid 17680
获取时间不是两位数字补全2位
this.hours = `00${data.getHours()}`.slice(-2)+ ':' + `00${data.getMinutes()}`.slice(-2)
elementui 表格透明
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
background-color: rgba(255,255,255,0.03);
font-size: 14px;
border: 0px;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
background-color: rgba(255,255,255,0.03);
font-size: 14px;
border: 1px solid rgba(255,255,255,0.16);
}
/deep/ .el-table tr,
/deep/ .el-table td {
color: #ffffff;
}
/deep/ .el-table th{
color: #099cfe;
}
/deep/ .el-table tbody tr:hover > td {
background-color: transparent !important;
}
/deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
background-color: transparent;
}
element ui 的级联 选择后不收起弹窗
<el-cascader @change="cascaderSelectChange" ref="cascaderRef"></el-cascader>
cascaderSelectChange() {
// 自动收到下拉框
this.$refs.cascaderRef.dropDownVisible = false
},
element ui 的级联 其他级别可选，最后一级不可选隐藏radio
.selectCell .el-cascader-panel .el-cascader-menu:nth-child(3){
.el-radio{
display: none;
}
}
遍历求和
var datas =[
{ value: 188, name: '91-100分' },
{ value: 120, name: '85-90分' },
];
let total = datas.flat().reduce(function (preValue, n) {
return preValue + n.value
}, 0)
绝对定位居中： 自身的一半
transform: translate(-50%, -50%);
flex换行：
flex-wrap: wrap;
清除定时器：
window.clearTimeout(this.ds1);
clearInterval(this.timersd)
格式化时间：
$ npm install moment --save
在main.js中全局引入
import moment from "moment"
Vue.prototype.$moment = moment;
moment(new Date()).format('YYYY-MM-DD') >= moment(this.form.halfstart).format('YYYY-MM-DD')
保留两位小数：
parseFloat(0).toFixed(2),
过滤对象中某些值等于固定的值：
this.xwpjList = this.$store.getters.dictionaryList.filter(item => item.pcode === this.code);
按照对象中的某个值进行排序：
this.xwpjList.sort((a, b) => {
return a.code-b.code
})
复制对象 生成新对象 ，aa值不发生改变：
let mtsjTemp = Object.assign({},this.aa,this.bb)
获取所有key值：
let keys = Object.keys(this.aa[0]);
两个对象比较删除掉不相同的属性：
Object.getOwnPropertyNames(mtsjTemp).filter((value)=>{
if(keys.indexOf(value)==-1){
delete mtsjTemp[value];
} else if(['nc','nm','nz'].indexOf(value)!=-1){
mtsjTemp[value] = this.timestampToTime(mtsjTemp[value]);
}
});
跳转页面传参，另一个页面接收：
this.$router.push({
name: '01FormView',
params: {
_id: this.rowid,
button: 'update',
stage: this.stage,
rybs:this.rybs
}
})
if(this.$route.params.rybs == 0){
res.jzjd = 0
}
父组件校验子组件的表单：
父组件
<xwpjForm :formCulumn="formCulumn" ref="pyRules" :formData="this.pyList" />
let pyFlag = this.$refs['pyRules'].validateForm(array);
子组件
<el-form :model="scope.row" ref="xwpjList" :rules="rules" class="demo-ruleForm" style="width:100%">
<el-form-item :prop="items.disabled==true?items.prop:null" style="width:100%" v-if="!items.select">
<el-input :autosize="{ minRows: 1, maxRows: 1}" type="textarea" :disabled="items.disabled ? scope.row[items.disabled] : true" style="width:100%;margin: 5px 0" v-model="scope.row[items.prop]"></el-input>
</el-form-item>
</el-form>
validateForm (array) {
let flag = null
let flagArray =[];
for(var i=0;i<this.$refs['xwpjList'].length;i++){
this.$refs['xwpjList'][i].validate(valid => {
this.defaultSelect(array);
if (valid && this.selectChooseOrNo) {
flagArray.push('true')
} else {
flagArray.push('false')
}
})
}
if(flagArray.indexOf('false')>=0){
flag = false;
} else {
flag = true;
}
return flag
},
时间格式转化：
timestampToTime(timestamp) {
if(timestamp == null || timestamp == ''){
return "";
}
var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = date.getDate();
return Y+M+D;
},
子组件调用父组件方法：
子组件
<el-button @click="formInsert(scope.$index, formData)" :disabled="chi.disabled ? scope.row[chi.disabled] : true" type="primary" plain >嘿嘿</el-button>
this.$emit('inrBtnClick', index, formData)
父组件
<p2023-formlist :formCulumn="formCulumn" ref="childRules" :formData="form.aa" @inrBtnClick="inrBtnClick"/>
inrBtnClick(index, rows){
// 内容
},
父组件值改变后需要刷新子组件：
<grid-form
:key="timer" // 关键
>
</grid-form>
data() {
return {
timer: '',
}
}
this.timer = new Date().getTime();
父组件值改变后需要刷新清空子组件数据：
父组件
<grid-form
:ref="t.prop"
>
</grid-form>
this.$refs.ear_corea[0].reset_data()
子组件
// 重置数据
reset_data() {
this.valueList = [];
}
添加数据：
this.$set(this.rules,aa)
删除数据：
object: {name: "xiaoming",age: 24,gender: "man"}
this.$delete(this.object, "name")
var b=[1,2,3,4]
this.$delete(b,1)
this.b=this.b.filter(item=>item!='2');
let data=[{id:1,name:'张三'},{id:2,name:'李四'}];
data=data.filter(item=>item.name!='张三');
清除某个具体的表单校验：
this.rules['bs_tech'][0].required = false
this.$refs['refform'].clearValidate(['bs_tech']);
对象合并去重后一个覆盖前一个的值：
this.tableData默认所有属性是空的，后端传递来的数据response覆盖掉this.tableData
let fieldArr = [...this.tableData, ...response]
this.tableData = Array.from(fieldArr.reduce((result, item) => result.set(item.mc, item), new Map()).values())
vue字符串分隔成数组后去掉空格和空值：
let a = 'www,mail , test,'
let m = a.split(",").map(el => el.trim()).filter(item => item.trim() != '')
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
