零散知识点整理（一）

mercurio13zeq

已于 2022-07-12 16:06:41 修改

阅读量430

点赞数 2

文章标签： html5 javascript css

于 2021-09-01 12:17:30 首次发布

本文链接：https://blog.csdn.net/weixin_42491987/article/details/120036689

版权

0. 如何刷新DNS解析缓存

按住：             window + R   
命令窗口输入：      cmd  敲命令 ipconfig /flushdns
窗口会提示：       “已成功刷新DNS解析缓存”
查看本机DNS可输入： ipconfig /all

2. vue组件间传值

1) 父传子

a.实现原理:

父组件： 自定义属性名 + 要传递的数据  ==> :myValue="数据"
子组件	props['父组件上自定义的属性名'] ==> 接收数据

b.代码实现：

父组件：

子组件：

2) 子传父

a.实现原理:

子组件： this.$emit('自定义事件名称'，数据)
（子组件绑定@自定义事件名称='回调函数'，在函数方法中用$emit传数据）
父组件： 通过v-on(简写@)接受方法在methods中接收参数

b.代码实现：子组件：

父组件：

3) 兄弟组件传值

a.实现原理

&&通过中央通讯 let bus = new Vue()
a组件： methods：{函数{bus.$emit('自定义事件名', 要传输数据)}}发送
b组件： created(){bus.$on('a组件自定义的事件名', 函数)} 接收数据

b.代码实现

1.创建bus.js内容为
import Vue from “vue”
export default new Vue()
2.a组件：

b组件

父组件

4) 子组件调用父组件方法

a.实现原理

父组件：在子组件标签上绑定@父组件methods中方法名='父组件methods中方法名函数'
子组件：在methods中函数内用this.$emit(‘父组件methods中方法名函数’)直接调用

b.代码实现

父组件：

子组件：

2. location对象

属性	描述	http://www.runoob.com:8080/test.html?name=333&eee=22＃PART2&b=2
hash	返回一个URL的锚部分	＃PART2&b=2(#之后所有东西，包括#)
host	返回一个URL的主机名和端口	www.runoob.com:8080
hostname	返回URL的主机名	www.runoob.com
href	返回一个URL的路径名	http://www.runoob.com:8080/test.htm?name=333&eee=22＃PART2
port	返回一个URL服务器使用的端口号	8080(如果端口号是80(这是默认端口号),没有将返回!)
protocol	返回一个URL协议	http:
search	返回一个URL的查询部分	?name=333
–	–
方法	说明
assign()	载入一个新的文档	window.location.assign(“https://www.runoob.com”)
reload()	重新载入当前文档	location.reload()
replace()	用新的文档替换当前文档	location.replace(newURL)

3. 滑动页面触发方法

1）滑动到页面底部跳转下一页

<template>
  <div id="index" class="index" @touchend.stop="gtouchend($event)"></div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "index",
  data() {
    return {};
  },
  created() {},
  components: {},
  mounted() {},
  methods: {
    // 滚动条触底跳转下一页
    gtouchend (e) {
      const pageHeight  = document.getElementById('index').scrollHeight
      const screenHeight = e.view.screen.height
      const marginBottom = e.view.pageYOffset
      console.log(e,pageHeight,screenHeight,marginBottom)
      if(screenHeight + marginBottom >= pageHeight) { // 苹果可以实现，安卓不行，最后减去10px
        // 跳转下一页
        this.toNext()
      }
    },
    toNext () {
      this.$router.push('/page2')
    }
  },
};
</script>

<style lang="scss" scoped>
.index {
  width: 100vw;
  height: 200vw;
}
</style>

2）手指上滑一定距离跳转下一页

<template>
  <div class="flower" @touchmove="pageMove($event)" @touchstart="toNextStart" @touchend="toNextEnd">
    <div class="tip">
      <img src="./../assets/icon-top2.svg" alt="">
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'flower',
  components: {},
  data () {
    return {
      beforeY: '', // 触摸开始的Y坐标
      afterY: '', // 触摸开始的Y坐标
    }
  },
  mounted () {

  },
  methods: {
    pageMove(e) {
      e.preventDefault()
    },
    toNextStart (el) {
      this.beforeY = el.targetTouches[0].clientY
    },
    toNextEnd (el) {
      this.afterY = el.changedTouches[0].clientY
      if (this.beforeY - this.afterY > 100) this.$router.push('/index?page=flower')
    },

  }
}
</script>

<style lang="scss" scoped>
@keyframes top {
  0% {
    bottom: 6vw;
  }
  30% {
    bottom: 18vw;
  }
  100% {
    bottom: 6vw;
  }
}

.flower {
  width: 100vw;
  height: 100vh;

  .tip {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6vw;
    animation: top 1s linear infinite;

    img {
      width: 6vw;
    }
  }
}
</style>

4. 把new Date()格式的时间，转为(2021-01-01 12:00:00)格式

    timeReg () {  
      const date = new Date(); // 获取的是当前时间
      var y = date.getFullYear();  
      var m = date.getMonth() + 1;  
      m = m < 10 ? ('0' + m) : m;  
      var d = date.getDate();  
      d = d < 10 ? ('0' + d) : d;  
      var h = date.getHours();  
      h=h < 10 ? ('0' + h) : h;  
      var minute = date.getMinutes();  
      minute = minute < 10 ? ('0' + minute) : minute;  
      var second=date.getSeconds();  
      second=second < 10 ? ('0' + second) : second;  
      return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
    },

拓：（另一种获取标准格式时间的方法，并与一个特定时间比较）-- 用于截止日期

    // 获取当前时间，整理成对应格式
    getNowTime() {
      let dateTime;
      let yy = new Date().getFullYear(); // 年
      let mm = new Date().getMonth() + 1 ? "0" + (new Date().getMonth() + 1) : new Date().getMonth() + 1; // 月
      let dd = new Date().getDate() ? "0" + new Date().getDate() : new Date().getDate(); // 日
      let hh = new Date().getHours() ? "0" + new Date().getHours() : new Date().getHours(); // 时
      let mf = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes(); // 分
      let ss = new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds(); // 秒
      dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      return dateTime;
    },
    // 获取当前时间和截止时间比较
    isEnd() {
      const time1 = this.$store.state.config.spot_vote_time_control.val;
      const time2 = this.getNowTime();
      const endTime = new Date(time1);
      const nowTime = new Date(time2);
      endTime.getTime() - nowTime.getTime() < 0
        ? console.log("time1在time2之前")
        : console.log("time1在time2之后")
    },

5. 在vue项目的created中创建引入script文件

  created() {
    const script = document.createElement('script')
    script.onload = () => {
      console.log(window.infoData)
    }
    const newTime = new Date().getTime()
    script.src = `https://static.luckevent.com/projects/fosun/fosunInfo.js?${newTime}`
    document.querySelector('head').append(script)
  },

// js文件内容
var infoData = [
  {
    code: 'lxf',
    industry: '缈婃鼎绉戞妧',
    name: '缈婃鼎',
    mobile: '13270908655',
    superiorCode: '缈婃鼎绉戞妧'
  },
    {
    code: 'yi',
    industry: '缈婃鼎绉戞妧_yirun',
    name: '缈婃鼎绠＄悊鍛�',
    mobile: '13270908653',
    superiorCode: 'luckevent_yirun'
  }
];

window.infoData = infoData;

6. 图片转为File格式的文件上传

    // 图片转为File格式的文件上传
    imageToFile(url){
      this.handleImgToBase64(url)
    },

    // 图片转为file格式第一步
    handleImgToBase64(url) {
      let that = this;
      var image = new Image();
      image.crossOrigin = '';
      image.src = url;
      image.onload = function () {
        that.imageToBase64(image) //图片转base64
      }
    },

    // 图片转为file格式第二步----image转为base64格式
    imageToBase64 (img)  {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/jpeg" + ext);
      // return dataURL;

      console.log(dataURL,"dataURL")

      this.base64ToFile(dataURL)
    },

    // 图片转为file格式第三步----base64转为file格式
    base64ToFile(urlData,fileName) {
      let arr = urlData.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]); // 解码base64
      let n = bytes.length
      let ia = new Uint8Array(n);
      while (n--) {
          ia[n] = bytes.charCodeAt(n);
      }
      this.imgToFile = new File([ia], fileName, { type: mime });

      console.log(this.imgToFile,"img")
      //this.beforeAvatarUpload(this.imgToFile)
    },

mercurio13zeq

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零散知识点整理（一）

1. location对象属性描述http://www.runoob.com:8080/test.html?name=333&eee=22＃PART2&b=2hash返回一个URL的锚部分＃PART2&b=2(#之后所有东西，包括#)host返回一个URL的主机名和端口www.runoob.com:8080hostname返回URL的主机名www.runoob.comhref返回一个URL的路径名http://www.runo
复制链接

扫一扫