1. display样式左右布局：
display: flex;
justify-content: space-around;
2. display布局，左右两边对齐，中间间距
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
3. 换行省略
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
4. 多行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
5. 列表图片require
ImgList: [{
icon: require('../../assets/images/listImg1.png')
}],
6. css样式
字体下划线：text-decoration:underline;
字体间距： letter-spacing: 6px;
段落开头空格： text-indent:2em;
权重：!important
背景渐变： background-image: linear-gradient(to bottom, #27b8f2, #0e2779, #4ec5f0);
阴影：box-shadow: 0px 0.02px 0.18px 0 #5edaf3;
7. css hover鼠标移入，显示放大动画效果，用于列表样式
transform-all:hover {
cursor: pointer;
transform: scale(1.1);
transition: all 0.5s ease-in-out;
}
8. 跳转页面 带值跳转,router
routerUrlClick(url, params) {
let path = params != '' ? { name: url, params: params } : { name: url }
this.$router.push(path)
},
<router-link :to="{path: '/index', query: {id: '001',}}">aa</router-link>
9. 取反判断样式
取反：this.isShow = !this.isShow;
接口：@tap="Filter"
判断：v-show="isShow"
定义：isShow: false,
Filter() {
this.isShow = !this.isShow;
},
//取反：this.isShow = !this.isShow;
@click="toggle"
isShow: false,
toggle(){
this.isShow = !this.isShow
},
10. stateText: { 0: ‘停用’, 1: ‘启用’, 2: ‘初始’ },
循环集合对象参数，获取想要值，转换json字符串格式：stateText: { 0: ‘停用’, 1: ‘启用’, 2: ‘初始’ },
var json = "{";
this.List.forEach((item, i) => {
json += ("\"" + item.name + "\"" + ":" + "\"" + item.value + "\"" + ",")
})
json = json.substr(0, json.length - 1) + "}";
this.stateText = JSON.parse(json)
11. 循环集合，参数截取处理，逗号隔开，在截取最后一个逗号
that.multipleSelection.forEach(function (e) {
that.tableDeleteChange += e.USER_ID + ','
})
that.tableDeleteChange = that.tableDeleteChange.substr(0, that.tableDeleteChange.length-1)
二，循环集合，参数截取处理，逗号隔开
let arrays = [];
for (let i = 0; i < this.imagesList[index]; i++) {
arrays.push(this.imagesList[index])
}
this.landform.images = arrays.join(",")
12. JavaScript如何让一个变量名跟循环的下标拼接: arr[“data” + i]，用于echarts 图表循环赋值多个data1 data2 等
https://blog.csdn.net/weixin_45345105/article/details/111198296
13. echarts 图表循环赋值
var series = [];
farmProduceHarvest.legend.forEach((item, i) => {
series.push({
name: item,
type: "bar",
stack: "总量",
barGap: "10%",
barWidth: '20px',
data: farmProduceHarvest["data" + i]
})
})
// 集合里面2个集合，一个name集合，一个value集合，图如下：
var farmProduceData = []
farmProduceType.name.forEach(item => {
farmProduceData.push({
name: item,
value: ''
})
})
let typeCount = farmProduceType.data.reduce((acc, item) => acc + item, 0);
farmProduceType.data.forEach((item, i) => {
farmProduceData[i].value = item
})
//数据赋值，颜色改变和渐变效果
var color1 = ['rgba(55,162,255,0.6)', 'rgba(145,204,117,0.6)', 'rgba(250,200,88,0.6)', 'rgba(238,102,102,0.6)']
var color2 = ['rgba(55,162,255,0.0)', 'rgba(145,204,117,0.0)', 'rgba(250,200,88,0.0)', 'rgba(238,102,102,0.0)']
var color3 = ['rgba(55,162,255,0.9)', 'rgba(145,204,117,0.9)', 'rgba(250,200,88,0.9)', 'rgba(238,102,102,0.9)']
var color_i = 0;
this.SensorYYData = JSON.parse(JSON.stringify(this.SensorYYData))
for (var item in this.SensorYYData) {
if (this.SensorYYData[item]!= '') {
series.push({
name: item,
type: 'line',
stack: 'Total',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: color1[color_i]
}, {
offset: 1,
color: color2[color_i]
}], false
),
shadowColor: color3[color_i],
shadowBlur: 20
}
},
emphasis: {
focus: 'series'
},
data: this.SensorYYData[item]
})
color_i++;
}
}
14.echarts 模块，
myChart (id) {
let myChart = echarts.init(document.getElementById(id));
var option = {
}
myChart.setOption(option);
},
二 echarts根据屏幕分辨率适配，改变图表高度：
mounted() {
//body_app_smart 是div页面全局
window.riskBox = this.riskBox;
; (function (win, doc) {
function change() {
var width = window.screen.availWidth
var maxH = window.screen.availHeight
doc.documentElement.style.fontSize = (62.5 * width) / 1200 + 'px'
jQuery('.body_app_smart').width(width)
font = ((62.5 * width) / 1200) * 0.12
font2 = ((62.5 * width) / 1200) * 0.16
// 必须在 body 有宽度后执行，否则ie有问题
var height = window.innerHeight || document.body.clientHeight
var h
if (height > maxH - 130) {
h = height
} else {
h = maxH - 130
}
jQuery('.body_app_smart').css('minHeight', h)
// 必须在 body 有宽度后执行，否则ie有问题
}
change()
win.addEventListener('resize', change, false)
})(window, document)
window.addEventListener('resize', this.handleResize);
},
undated() {
window.onresize = () => {
return (() => {
this.handleResize();
})();
}
},
//data 定义myChart1: ''
//this.myChart1 = echarts.init(document.getElementById(id))
methods: {
handleResize() {
if (!this.myChart1) return;
this.myChart1.resize();
},
}
15.取循环列表前面3条数据
v-for="(item, index) in listImg.slice( 0,3)"
16. 循环2个集合放入 一个集合对象中
var farmProduceData = []
farmProduceType.name.forEach(item => {
farmProduceData.push({
name: item,
value: ''
})
})
farmProduceType.data.forEach((item, i) => {
farmProduceData[i].value = item
})
console.log(farmProduceData);
17. VUE+ElementUI对Table的多选进行批量操作（复选框勾选删除）完整功能实现
that.multipleSelection.forEach((value, index) => {
//遍历多选框获取的数据
that.tableData.forEach((v, i) => {
//遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值
if (value.USER_ID == v.USER_ID) {
that.tableData.splice(i, 1);
console.log(that.tableData);
}
});
});
18.class样式三元表达式判断
:class="checkbox == 0?'switch transf_open' : 'switch transf_off'"
19. 列表滚动 自定义，取掉滚动条
<div class="step_table">
<div class="table_title">
<p style="width: 26%;height: 100%;">名称</p>
<p style="width: 20%;height: 100%;">上季</p>
<p style="width: 20%;height: 100%;">本季</p>
<p style="width: 14%;height: 100%;">规模</p>
<p style="width: 20%;height: 100%;">类别</p>
</div>
<div class="tab_scroll_list">
<div class="tab_scroll_list_column">
<div class="table_title table_item" v-for="item in 10" :key="item">
<p style="width: 26%;height: 100%;">湖南省</p>
<p style="width: 20%;height: 100%;">258893</p>
<p style="width: 20%;height: 100%;">258893</p>
<p style="width: 14%;height: 100%;">500</p>
<p style="width: 20%;height: 100%;">计算机软件</p>
</div>
</div>
</div>
</div>
.table_title {
width: 100%;
height: 1rem;
line-height: 1rem;
color: #fff;
display: flex;
justify-content: space-around;
}
.table_title p{
font-size: 0.30rem;
margin: 0;
padding: 0 0.16rem 0 0.30rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.step_table .tab_scroll_list {
width: 100%;
height: 6.06rem;
position: relative;
overflow: hidden;
}
.step_table .tab_scroll_list_column {
position: absolute;
left: 0;
top: 0;
right: -24px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
20. 动画效果，上下，左右，用于打开浏览器布局开始移动效果
animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeInDown{
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInLeft{
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight{
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInUp{
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
21. vue default-checked-keys 销毁默认选择状态
treeKey 唯一的id 值，设置打开模块默认状态，点击其他事件，选中状态不被销毁
<el-tree :data="dialogList"
:expand-on-click-node="false"
ref="tree"
:default-expand-all="expandAll"
node-key="treeID"
:default-checked-keys="[treeKey]"
highlight-current
:props="defaultProps"
@node-click="handleNodeClick"></el-tree>
</div>
handleNodeClick(data) {
//修改默认勾选数组
this.treeKey = [];
/* 在调用这个方法之前修改了数据，Dom是可能还没有更新完的，
所以调用之后tree会显示未选中，调用tree的清空方法
Dom还没更新，将回调延迟到下次 DOM 更新循环之后执行
*/
this.$nextTick(function () {
this.$refs.tree.setCheckedKeys([]);
});
}
如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！
Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
