在项目中用到的,边学边记
不需要带参数到下一页时,用路由地址跳转到main页
this.$router.push({ path: "main" });
想带参数:
this.$router.push({
name: "main",
params: {
userInfo: userInfo,
id: id
}
});
我理解为全局变量,key-value形式存取,项目中用于存token值和用户权限值
存
localStorage.setItem("token", "unload");
取
localStorage.getItem("token")
父子组件之间传值,因业务需要定义自己的组件时,容易遇到父子组件传值问题
比如父组件调用了子组件mytrans组件,父组件写:
//方法:
getSource(data){
this.source = data;
},
子组件mytrans中这样写:
this.$emit("getSourceData", "123");
父子组件通过getSourceData这个名字传递,子组件的“123”就传到父组件页了。
// methods中
handleMenuSelect(index, indexPath) {
this.breads = indexPath;
}
第二个页面可用props取值
???solt: 还用到了solt属性,现在为止还没看懂,后补…
str.split(';'); //以分号拆分字符串
arr.join(';'); // 数组拼成字符串,分号分隔。默认逗号分隔。
.el-input__inner {
width: 200px !important;
}
css 能力不足,遇到调样式的总得查一查。通过这个问题学到 !important 这个语法。
这个语法在Ie7.0和firefox可以识别,但是Ie6.0不能成功应用,这就可以写出不同的浏览器不同显示的代码了,很有意思。
还有循环中的颜色设置,都是一样的找不到原来的配置是哪时,加上!important 增加优先级。
element from组件
增加:rules属性
//!!!这里prop的值需要和v-model值一样!!!!
规则:
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
}
遇到的问题,必选项第一次弹出后,一直存在,输入正确的值也不消失,原因是我写的prop名字和绑定的v-model名字不一致。
页面底部分页控件居中
.el-pagination {
padding-left: 20%;
}