前端小技巧,记录贴

  1. transition标签使用,就是一个过渡的标签动画

1---transition只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素

2---mode的“out-in”和“in-out”代表的意思

out-in:在前一个组件离开之后下一个组件开始进入

in-out:下一个组件进入,前一个组件才离开

<transition mode="out-in" name="fade">
              <router-view
               
              ></router-view>
            </transition>
  1. 直接把当前时间渲染到页面

{
    
    {value1}}

value1: new Date(),获取当前时间
  1. 局部插件导入简写,vue-fullcalendar:日历插件

  components: {
    "full-calendar": require("vue-fullcalendar")
  },

使用,名字和属性名对应上就可以。
<full-calendar
          class="test-fc"
>
 <template slot="fc-event-card" slot-scope="f" v-if="isshow">
           <p>{
    
    { f.event.title }}</p>
          </template>
     </full-calendar>
  1. New FileReader()

New FileReader():读取上传文件的内容,实例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>图片本地预览示例</title>
</head>

<body>
  <h3>,,,图片本地预览示例</h3><input type="file" accept="image/*" onchange="loadFile(event)" /><img id="previewContainer" />
  <script>
    const loadFile = function (event) {
      // 我们创建了一个 FileReader 对象并为该对象绑定 onload 相应的事件处理函数
      const reader = new FileReader();
      // 当文件读取完成后,会触发绑定的 onload 事件处理函数,在该处理函数内部会把获取 Data URL 数据赋给 img 元素的 src 属性,从而实现图片本地预览。
      reader.onload = function () {
        const output = document.querySelector("#previewContainer");
        output.src = reader.result;
      };
      // 然后调用 FileReader 对象的 readAsDataURL() 方法,把本地图片对应的 File 对象转换为 Data URL。 
      reader.readAsDataURL(event.target.files[0]);
    };
    </script>
</body>

</html>
  1. Js String.fromCharCode() 函数

String.fromCharCode()函数用于从一些Unicode字符值中返回一个字符串,该函数属于String对象。例如:

String.fromCharCode(71)//G
Unicode字符值也就是unicode编码方式,可以搜索一下
  1. Object.keys()

Object.keys()可以获取到对象的属性名,可以用作筛选表头数据,引用大神的举例

1-对象就是获取属性名,数组就是按照索引排,字符串就是拆分成数组的形式

let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person) // ["name", "age", "address","getName"]

详细看这位大神写的object.Keys()

  1. Math.sqrt(),Math.pow,Math.round()

Math.sqrt():算平方根的,如果Math.sqrt(9),那么结果是3,因为33得9

math.pow(x,y)的作用是取x的y次幂

例如:

math.pow(4,2) 就是(4²)输出的结果为16,4*4

math.pow(10,3) 就是(10³)输出的结果为1000,10*10,*10

math.round(x)的作用通俗讲就是对x进行"四舍五入",对0.5要进行判断对待。

math.round()的原理是对传入的参数+0.5之后,再向下取整得到的数就是返回的结果。这里的向下取整是说取比它小的第一个整数或者和它相等的整数

例如:

Math.round(-1.5)的结果是-1.5 + 0.5 再向下取整,即-1.0取整,结果是-1.。

Math.round(-1.4)的结果是 -1.4 + 0.5 即-0.9 向下取整,结果是-1。

同理,Math.round(1.5)即为 1.5 + 0.5 再向下取整,结果是2。

原文链接:https://blog.csdn.net/weixin_49372881/article/details/114374417

  1. 网页下载(跳转功能实现)

获取后台报表下载,全程后端操作,后端的下载链接
根据下载按钮的点击事件中
创建标签a,添加href跳转,拼接连接,触发点击事件,完成下载。
let a = document.createElement("a");
                a.href = "后端下载文件地址拼接文件名" + filename;
                a.click();
  1. Array.reverse()

array.reverse(),数组元素倒序,也就是数组[1,2,3],变成321

  1. linq插件

下载直接cnpm i linq -S

linqjs插件,可以对数据库内容进行增删改查,通过命令实现

条件匹配,感兴趣的可以搜索下。

var Enumerable = require('linq')
Enumerable.from(that.cal_total_List)
          .where(n => n.fail_type === 0)
          .toArray()

11-解决npm下载慢问题

npm下载巨慢,之后cnpm下载的话可能会出现很多莫名其妙的bug,所以解决如下

npm install --registry=https://registry.npm.taobao.org

猜你喜欢

转载自blog.csdn.net/qq_44278289/article/details/129382992
今日推荐