##记录实际项目中学到的知识点
一 第一个工作.2021-4.6号开始
1.display: inline-block: 可以将盒子转化为行内块,将div等元素横着排列
2.画圆
<!-- 先写一个div -->
<div class="circle"><div>
.circle{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%;
-moz-border-radius: 50%;
webkit-border-radius: 50%;
}
3.vue点击事件可以直接写方法
如data中定义count 点击事件中可以直接使用<button @click="count++">{{count}}}</button>
4.v-for="item in movies"
对于item的理解是:item是movies中的每一项的值,假如movies=[a,b,c,d],那么item是a,是b,是c也是d.
v-for="(item,index) in movies" 这是一般的用法. item代表每**一个**值,index代表每**一个**索引
<span></span>不能调整margin的上下边距.只能使用margin-left和right属性,pading的上下左右都可以调整.
Array.isArray(obj), 用来判断obj是不是一个数组
display:flex;之后是不能使用宽度设置的,可以使用
flex-grow:0;
flex-shrink:0;
给子元素加了之后就可以使用了
- echarts加滚动条
x轴
dataZoom: [//给x轴设置滚动条
{
start:0,//默认为0
end: 100-1500/31,//默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 10,//组件高度
left: '10%', //左边的距离
right: '10%',//右边的距离
bottom: 26,//右边的距离
borderColor: "#000",
fillerColor: '#269cdb',
borderRadius:5,
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime:true, //是否实时更新
filterMode: 'filter',
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100-1500/31,//默认为100
},
],
y轴
dataZoom: [//给x轴设置滚动条
{
start:0,//默认为0
end: 100-1500/31,//默认为100
type: 'slider',
maxValueSpan:14,//窗口的大小,显示数据的条数的
show: true,
yAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: '80%',//组件高度
left: 650, //左边的距离
right: 15,//右边的距离
top: 50,//右边的距离
borderColor: "rgba(43,48,67,.8)",
fillerColor: '#33384b',
backgroundColor: 'rgba(43,48,67,.8)',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime:true, //是否实时更新
filterMode: 'filter',
yAxisIndex: [0,1],//控制的 y轴
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
yAxisIndex: [0,1],
start: 1,//默认为1
end: 100-1500/31,//默认为100
},
],
6.横向滚动
.max{
overflow:hiddend: // 父元素溢出隐藏
.both{
overflow-x:auto; // 子元素自动
}
}
7.判断是否为null,如果是返回 –
isNull(val) {
return val == null ? '-' : val;
},
8.加千分位符
$thousand(12476);
9.大于7用绿色,小于0用红色,默认是黑色
:class="{
redFont: 0.09 * 100 < 0 ? true : false,
greenFont: 0.09 * 100 >= 7 ? true : false,
}"
10.组件引入
组件文件名为yuanEcharts.vue
components: {
Yuanecharts: () => import('./yuanEcharts'),
},
组件使用
<yuanecharts />
- vscode改双引号为单引号
第一步: 和package同级写一个文件.prettierrc.json
第二步: 在里面写
{
"singleQuote": true, //引号
"semi": false // 分号
}
12.排序 根据数组中对象的某一个值来排序
var arr = [
{name:'zopp',age:0},
{name:'gpp',age:18},
{name:'yjj',age:8}
];
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
}
}
console.log(arr.sort(compare('age')));//如果要执行倒序就将value1-value2改为value2-value1
//使用sort()函数进行排序,没有参数时,以字符编码进行排序,有参数时,参数为比较函数()闭包函数function sortNumber(a,b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"console.log(arr.sort())//Array ["1", "10", "1000", "25", "40", "5"]console.log(arr.sort(sortNumber))//Array ["1", "5", "10", "25", "40", "1000"]
如何根据参数不同,来确定是升序排列,还是降序排序呢?
/**数组根据数组对象中的某个属性值进行排序的方法
* 使用例子:newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递,默认表示升序排序
* @param attr 排序的属性 如number属性
* @param rev true表示升序排列,false降序排序
* */
sortBy: function(attr,rev){
//第二个参数没有传递 默认升序排列
if(rev == undefined){
rev = 1;
}else{
rev = (rev) ? 1 : -1;
}
return function(a,b){
a = a[attr];
b = b[attr];
if(a < b){
return rev * -1;
}
if(a > b){
return rev * 1;
}
return 0;
}
}
13.vue 上滑下滑左滑右滑事件 添加一个指令(直接复制代码)
1.定义一个监听touch指令,主要根据计算开始到结束滑动的位置计算X、Y轴相应的距离再计算角度来判断滑动的方向
directives:{
//滑动指令
touch:{
bind: function (el, binding, vnode) {
var touchType = binding.arg; //传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
var timeOutEvent = 0;
var direction = '';
//滑动处理
var startX, startY;
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑动距离太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 'swiperight';
} else if (angle >= 45 && angle < 135) {
result = 'swipeup';
} else if (angle >= -135 && angle < -45) {
result = 'swipedown';
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 'swipeleft';
}
return result;
}
el.addEventListener('touchstart', function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
//判断长按
timeOutEvent = setTimeout(() =>{
timeOutEvent = 0 ;
if(touchType === 'press'){
binding.value()
}
} , 500);
}, false);
el.addEventListener('touchmove' , function (ev) {
clearTimeout(timeOutEvent)
timeOutEvent = 0;
});
el.addEventListener('touchend', function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
direction = GetSlideDirection(startX, startY, endX, endY);
clearTimeout(timeOutEvent)
switch (direction) {
case 0:
break;
case 'swipeup':
if(touchType === 'swipeup'){
binding.value()
}
break;
case 'swipedown':
if(touchType === 'swipedown'){
binding.value()
}
break;
case 'swipeleft':
if(touchType === 'swipeleft'){
binding.value()
}
break;
case 'swiperight':
if(touchType === 'swiperight'){
binding.value()
}
break;
default:
}
}, false);
}
}
}
2. 使用指令 在标签绑定指令和事件,并在methods定义事件。
<div v-touch:swipeleft="leftSlide" v-touch:swiperight="rightSlide">
</div>
methods(){
leftSlide() {
console.log('左滑')
},
rightSlide() {
console.log('右滑')
}
}
14.如果有了滑动事件怎么回到上一屏?
1.第一步在上添加ref=“swiper”.
就是这样:
2.第二步:在滑动的方法中加入this.$refs.swiper.prev(); (prev是回到上一屏,可以换成在这里插入代码片
其他的,具体参考swiper官方api)
15.在工作中使用vue跳转我这一屏时第一次能刷新页面并且传给我参数,但是后面就不会刷新页面了,这样在watch监听中加一个监听路由就行
watch: {
'$route' (to, from) {
this.intadata(); // 这是我的方法
}
}