前端（技巧+踩坑记录）

1、计算属性用法

2、map返回数据

3、过渡效果

移动端过渡: 

效果图:

 

 更多过渡效果:进入/离开 & 列表过渡 — Vue.js 

pc端过渡动画:

直接用el组件，自带过渡

4、el分页组件

5、svelte.js+vite使用sass 

5.1.下载依赖:

 svelte.config.js内:

import sveltePreprocess from 'svelte-preprocess'

export default {
  preprocess: [
    sveltePreprocess({
      scss: true
    })
  ]
}

5.2.将svelte.config.js放项目根目录即可

6、获取当前时间戳 及转换年月日时分秒格式为时间戳

// 1.获取当前时间戳

let currentTime = new Date().getTime()

// 2.转换年月日时分秒为时间戳
// this.detailData.questionnairePo.updateTime :"2022-07-20 14:46:43"

let questionDate = Date.parse(new Date(this.detailData.questionnairePo.updateTime))

7、字符串截取

拿前两位:name ? name.substring(2, -2) : '暂无' 

拿后两位:name? name.substring(name.length - 2, name.length)

8滚动条平滑置顶

  const doc = document.getElementById('scroll-box')

      doc.scrollTo({

        top: 0,

        behavior: 'smooth'

      })

9、文本超出换行

            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            word-break: break-all;

有用的小技巧我会继续发

10、滚动条祛除

 找到滚动条的父类了，没有滚动条找到样式，解决方法：

// .f-menu为滚动条父类
.f-menu::-webkit-scrollbar {
  width: 0;
}

11、vue2报错解决

报错信息：
[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

 tip:弹框消失后，此vue组件就只剩下template，vue2模板必须要有个div

 12、el-tree搜索功能

这个方法是必写的不写报错：

filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }

 监听input内的值，值变了则改变树数据

  watch: {
    filterText(val) {
      console.log(val, 'val')
      this.$refs.tree.filter(val)
    }
  },

13、跨域的常用解决方法

13.1.cors

// request.js
 
import axios from 'axios'
 
const service = axios.create({
  withCredentials: true, //  跨域安全策略
  headers: {
    // 关键
    'Access-Control-Allow-Origin': '*'
  },
  timeout: 30 * 1000 // 超时时间 单位是ms
})
export default service

13.2.跨域代理

// vue.config.js
 
devServer: {
    // 设置为0.0.0.0则所有的地址均能访问
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 跨域问题解决 代理（关键部分）
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 注意！此处为后端提供的真实接口
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          // 如果接口中是没有api的，那就直接置空，'^/api': ''，
          // 如果接口中有api，那就得写成{'^/api':'/api'}
          '^/api': ''
        }
      }
    }
  }

14、让网页都在一个窗口内打开

 15、富文本数据渲染

let dom =document.getElementById('xxx') //xxx 为要插入富文本的元素
dom.innerHTML = 富文本数据

16、点击按钮复制文字

			copy(id) {
				let copycode = document.getElementById(id)
				const textarea = document.createElement('textarea');
				textarea.value = copycode.innerText;
				document.body.appendChild(textarea);
				textarea.select();
				document.execCommand('copy');
				document.body.removeChild(textarea);
			}