layout="inline"
,表单布局使用inline,默认是horizontal。
<a-form :form="form" style="margin-top: 12px" layout="inline">
<a-row :gutter="1">
<a-col :span="6">
<a-form-item label="用户名">
<a-input placeholder="请输入用户名" allow-clear style="width: 95%" v-model="form.username"/>
a-form-item>
a-col>
<a-col :span="6">
<a-form-item label="年龄">
<a-input placeholder="请输入年龄" allow-clear style="width: 95%" v-model="form.age" />
a-form-item>
a-col>
<a-col :span="4">
<a-form-item>
<a-button type="primary">搜索a-button>
a-form-item>
a-col>
a-row>
a-form>
不加layout=inline
可以在CSS中这样写
.ant-form-item {
display: flex;
}
- BaiduMap 组件容器本身是一个空的块级元素,
如果容器不定义高度
,百度地图将渲染在一个高度为 0 不可见的容器内。没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的
。当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整 zoom 的值。- 由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,
不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。
request.js
中拦截请求错误,比如token失效或token不存在了,然后跳转到登录页面
。
在main.js
中导出路由:
let routerJS= new Vue({
router})
export default routerJS
在request.js
引入routerJS
,然后就可以跳转到登录页面了。
import routerJS from '@/main';
routerJS.$router.push('/user/login')
vue router导航完成后获取数据路由介绍
自己写的tab切换路由,根据配置好的路由去渲染。当刷新页面的时候,激活样式又变成默认激活的第一个了。
在created
中判断一下当前路由是:找到响应的激活路由,页面刷新也没问题了。刚开始是想存储到localStorage中,太麻烦了这个。
//获取当前路由是,重点是这行代码。
let path=this.$router.history.current.fullPath
// 刷新的时候设置当前路由激活的是who sideBarList路由是router.js中获取到渲染的
this.sideBarListAct= this.sideBarList.findIndex(item=>item.path==path)
还可以结合组件内监听路由的变化
:去做其他操作
watch:{
'$route'(to,from){
console.log(to.path,from,'监听路由是,其他操作……')
}
},
scoped
属性的时候也可以直接修改,这样会影响到其他组件内的样式。 不太好这样 <a-input placeholder="请输入内容" allow-clear class="test"/>
.ant-input-affix-wrapper .ant-input
复制好类名后,新建一个global.less
文件可以,然后在main.js
中挂载下
import './global.less' // 在main.js中引入
global.less
:
test
,这就是修改所有的input输入框的背景色了。so添加个类名只修改当前的组件。.test.ant-input-affix-wrapper .ant-input {
background: pink;
}
5.2 这个checkbox样式是真的难修改啊,我只能改部分,果断放弃挣扎
修改checkbox默认样式原文链接,他写的很详细了
// 鼠标hover时候的颜色
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner{
border: 2px solid #1BBA79 !important;
}
// 设置默认的颜色
.ant-checkbox{
.ant-checkbox-inner{
border: 2px solid #1BBA79;
background-color: transparent;
}
}
// 设置选中的颜色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
background-color: #1BBA79;
border: 2px solid #1BBA79;
}
2021年5.27日