vue项目前端遇到的问题(一)
自己前端确实不牢固，根本不会，基本就是无头苍蝇乱窜，遇到不会的就去搜了
vue span标签中不识别空格的问题：
想使用空格站位达到效果，但是渲染的时候，空格就没了
首先将span指定类
<style></style>里面在写span这个类
图片加载被拦截
使用基本的img src 被拦截没法展现出来
一开始我是用el-button 里面塞背景图片解决，但是确实很丑
解决：
使用<el-image style="width: 30px; height: 27px" :src="require('/ideaproject/训练项目/fishery/flash-vue-cockpit/public/2.png')" fit="fill" class="tempimg"></el-image>
解释：
style：设置加载图片的参数
src:图片路径，如果图片在asset里面那么可以@/ 这种定位，我是从根路径定位
其他自行理解fill充满，class 为el-imgae指定类，我这里css没有对应的不影响
然后用谷歌浏览器就可以展示了
input 输入框的设置
<div>
<input style="background:transparent;border:1px solid #ffffff" type="text" maxlength="11" placeholder="输入点位关键词"></input>
</div>
<style></style>里面加上：
input[type="text"],input[type="password"],input[type="email"]{
-web-kit-appearance:none;
-moz-appearance: none;
outline:0;
box-sizing: border-box;
text-align:left;
font-size:1.2em;
height:2.1em;
border-radius:5px;
border:1px solid #c8cccf;
color:white;;
display:block;
padding:0 1em;
text-decoration:none;
width:100%;
}
input::-webkit-input-placeholder{
color: white;
}
el-collapse 箭头位置的调整
变为：
<el-collapse accordion v-model="activeNames" @change="handleChange" >
<el-collapse-item name="1">
<span class="collapse-title" slot="title">鄞州区</span>
<!-- 到时候改成点击事件-->
<div>宁波松岙大埠1</div>
<div>宁波松岙大埠2</div>
<div>宁波松岙大埠3</div>
</el-collapse-item>
<el-collapse-item name="2">
<span class="collapse-title" slot="title">海曙区</span>
<div>海曙大埠1</div>
<div>海曙大埠2</div>
</el-collapse-item>
<el-collapse-item name="3">
<span class="collapse-title" slot="title">镇海区</span>
<div>镇海大埠1</div>
<div>镇海大埠1</div>
</el-collapse-item>
</el-collapse>
<style>下面加上
::v-deep .collapse-title {
flex: 1 0 90%;
order: 1;
.el-collapse-item__header {
flex: 1 0 auto;
order: -1;
}
}
两个el-card 水平布局，在屏幕两边
我是使用el-row ，el-col 来布局的
<el-row>
<el-col :span="19">
<el-card class="box-card">
<!-- 你的代码-->
</el-card>
<el-col>
<el-col :span="5">
<el-card class="box-card">
<!-- 你的代码-->
</el-card>
<el-col>
<el-row>
一些解释：
el-row 控制一行
el-col 控制列
屏幕一行分为24栏
也就是说我两个：span 里面的数字之和要等于24 ，那么这个数值可以调整到你的card符合你要求的时候，那么就是你中意的时候，或许12 12满足了呢
我的是这样的
el-image 左图片右文字效果
代码:
<div slot="header" class="clearfix" :style="background">
<!-- style="border: none" align="center"-->
<el-image style="width: 30px; height: 27px" :src="require('/ideaproject/训练项目/fishery/flash-vue-cockpit/public/6.png')" fit="fill" class="tempimg"></el-image>
<span class="span"> 预警数统计</span>
</div>
<div slot="header" >
<el-image style="width: 135px; height: 120px" :src="require('/ideaproject/训练项目/fishery/flash-vue-cockpit/public/1.png')" fit="fill" class="tupian"></el-image>
<div class="wenzi_1">
<span style="color: white;"> 今日预警数</span>
</div>
<div class="wenzi_2">
<span style="color: white;"> 本月预警数</span>
</div>
<div class="wenzi_3">
<span style="color: white;"> 累计预警数</span>
</div>
</div>
.tupian{
z-index:100;
}
.wenzi_1{
position: absolute;
left:1405px; //只是假定的值，具体需测量
top:80px;
z-index:101;
}
.wenzi_2{
position: absolute;
left:1405px; //只是假定的值，具体需测量
top:100px;
z-index:101;
}
.wenzi_3{
position: absolute;
left:1405px; //只是假定的值，具体需测量
top:120px;
z-index:101;
}
相关解释：
z-index设置 层级
z-index 越大说明越在上层
就像金字塔一样
然后我的想法是每个文字都给个样式，确实麻烦，后续如果有好的办法在续写
然后left是距离左边屏幕的距离
top是距离顶部的距离
调整到自己想要的格式就行了
position: absolute; 是绝对位置不管之前的设置直接以屏幕为准
el=select 下拉框样式修改
<style lang="scss" scoped>
::v-deep .el-input__inner {
padding: 0;
background: transparent;
color: #fff;
//border: none;
font-size: 18px;
}
::v-deep
.el-select-dropdown{
background-color:transparent;
}
.select-popper {
background-color:transparent;
border-radius: 0.08rem;
border: solid 0.02rem #1c395d;
//font-family: PingFangSC-Regular;
.el-select-dropdown__item{
color: #FFFFFF;
background: transparent;
}
.el-select-dropdown__item.selected {
//font-family: PingFangSC-Regular;
font-size: 0.28rem;
color: rgba(74, 141, 253, 1);
}
li {
color: #fff;
background: transparent;
color: #fff;
font-size: 0.28rem;
}
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
background-color: rgba(110, 147, 206, 0.2);
margin-right: 1px;
}
.popper__arrow::after {
border-bottom-color: transparent;
}
.popper__arrow {
border-bottom-color: transparent;
}
.el-select-dropdown__empty {
padding: 0.2rem;
font-size: 0.28rem;
}
}
.select_shijian{
//color: #FFFFFF;
background: transparent;
width: 260px;
position: absolute;
top: -10px;
left: 0px;
//right: 0px;
}
//.el-select-dropdown {
// background: rgba(8, 27, 69, 0.7) ;
// border-color:rgba(37, 175, 252, 1) ;
//}
//右侧和下方的白边
.el-scrollbar__wrap{
margin-bottom: -20px !important;
margin-right: -20px !important;
}
//数据返回
<script>
data(){
return{
cities:[{'value':'事件类型','label':'疑似船只'},{'value':'事件类型','label':'测试船只'},{'value':'事件类型','label':'确认船只'}],
}
{
</script>
不再做解释了，一些深度效果可以看渲染后的页面源码进行更改
日历选择器
代码：
<!-- 日期范围选择-->
<div class="block1">
<el-date-picker v-model="startDate" type="daterange" range-separator=" 至 " start-placeholder="开始日期" end-placeholder="结束日期"
style="background: transparent;position: absolute;top: 45px;width:260px;color: #FFFFFF" value-format="yyyy-MM-dd" @change="handleStartDateChange">
</el-date-picker>
</div>
css
.block1 {
padding: 10px 0px;
background: transparent;
color: #FFFFFF;
}
js:
methods:
handleStartDateChange() {
if (this.startDate && this.startDate.length > 0) {
const timestampBegin = +new Date(this.startDate[0])
const timestampEnd = +new Date(this.startDate[1])
if (timestampEnd > timestampBegin + 3600 * 1000 * 24 * 10) {
this.$alert('规定为日期的起止时间跨度不能超过10天', '提示', {
confirmButtonText: '确定',
type: 'warning'
})
.then(() => (this.startDate = null))
.catch(() => (this.startDate = null))
}
}
},
