点击时获取事件对象

# 点击时获取事件对象

<template>
	<button @click="test(1,2,$event)">按钮</button>
</template>
<script lang="ts" setup>
function test(a:number,b:number,c:Event){
	//获取事件对象
	console.log(c)
}
</script>

# 跨域参数配置

# 跨域相关参数

withCredentials：是否允许带cookie，true时服务端需要设置SupportsCredentials=true

import axios from 'axios'
import router from './../router'
import comm from './comm'

//axios.defaults.baseURL='/api'; 
const myAxios = axios.create({
  // 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one
  baseURL: '/api',
  // 设置超时时间 5s
  timeout: 10000,
  responseType: 'json',
  // 是否允许带cookie,true时服务端需要设置SupportsCredentials
  withCredentials: false,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})

// POST传参序列化(添加请求拦截器)
myAxios.interceptors.request.use(
  config => {
    // 在发送请求之前做某件事
    if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
      // 序列化
      const data = new FormData()
      Object.keys(config.data).forEach(item => {
        data.append(item, config.data[item])
      })
      config.data = data
    }
    if (localStorage.getItem('token')) {
      config.headers.Authorization = localStorage.token
    }
    console.log(config.data)
    return config
  },
  error => {
    comm.toast(error.data.message)
    return Promise.reject(error.data.message)
  }
)

// 返回状态判断(添加响应拦截器)
myAxios.interceptors.response.use(
  res => {
    // 对响应数据做些事
    if (res.data && res.data.code !== 1) {
      comm.toast(res.data.msg)
      return Promise.reject(res.data.msg)
    }
    return res.data
  },
  error => {
    // 若是发现有鉴权的基础信息
    if (localStorage.getItem('loginUserBaseInfo')) {
      // 并且当前的时间大于服务器过期的时间
	  const loginUserBaseInfo = window.localStorage.getItem('loginUserBaseInfo')
      const lifeTime = JSON.parse(loginUserBaseInfo).lifeTime * 1000
      const nowTime = new Date().getTime()
      if (nowTime > lifeTime) {
        localStorage.removeItem('loginUserBaseInfo')
        comm.toast('登录状态信息过期,请重新登录')
        router.push({
          path: '/login'
        })
      }
    } else {
      console.log(error)
      // 服务器状态码不是200的情况,这些自定义
      comm.toast(error.response.data.Message)
    }
    return Promise.reject(error.response)
  }
)

export default myAxios

devServer: {
	proxy: {
	   // 二级目录的一定要写在前面
	  '/api/wfs': {
		target: 'http://localhost:8000',
		changeOrigin: true,
		pathRewrite: {
			'^/dev-api/wfs': ''
		},
		logLevel: 'debug', // 可在控制台打印真实地址
	  },
	  '/api': {
		disableHostCheck:true, // 当设置为true时，此选项将绕过主机检查

		// 默认情况下是/，所以您可以作为http://localhost:8080使用
		// 更改为 /assets/ 就变为 http://localhost:8080/assets
		publicPath: '/assets/', 
		target: 'http://expo.sdxsk.com/api', //请求接口域名
		ws: true,
		secure: false,
		// 是否允许跨域
		changOrigin: true,
		// 如果配置了axios的baseURL为'/api',在这里需要用空字符串代替
		pathRewrite: {
		  '^/api': ''
		}
	  }
	}
}


// 这个是对所有的接口都代理的，不止是检测到 /api 的接口
// 当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)
devServer: {
 proxy: 'http://e.dxy.net'
}

在Vue项目中配置了代理，但是部署之后不生效，并且报404

这是因为Vue配置的代理仅在本地开发下有效，部署之后，需要：

在nginx中进行配置代理
或者后端配置跨域

# vue2相关设置

devServer: {
	host: '0.0.0.0',
	port: port,
	open: true,
	proxy: {
	  [process.env.VUE_APP_BASE_API]: {
		target: `http://128.169.21.56:8081`,
		changeOrigin: true,
		pathRewrite: {
		  ['^' + process.env.VUE_APP_BASE_API]: ''
		}
	  }
	},
	disableHostCheck: true
}

# vue3相关设置

server: {
  host: "localhost",
  port: 3002,
  proxy: {
	// "/api/":
	[ENV.VITE_API_URL]: {
	  target: "http://125.125.35.24:8088",
	  changeOrigin: true,
	  // rewrite: (path) => path.replace(/^\/api/, "")
	  rewrite: (p) => p.replace(RegExp(`^${ENV.VITE_API_URL}`), "")
	}
  }
}

# 监听元素变化

noMounted(() => {
  // 创建一个观察器实例并传入回调函数
  domOberver = new MutationObserver((mList, ob) => {
	  autoNiceHeight()
  })
  // 观察器的配置（需要观察什么变动）
  const config = { 
	  attributes: true, 
	  childList: true, 
	  subtree: true
  }
  // 配置开始观察的目标节点
  domObserver.observe(dialogRef.value, config)
})
onUnmounted(() => {
	// 停止观察
	domObserver.disconnect()
})
 
function autoNiceHeight(){
	const isExceed = warpperEle.offsetHeight < 
	                 dialogRef.value.offsetHeight  + dialogRef.value.offsetTop
	if(isExceed){
		const niceHeight = warpperEle.offsetHeight - dialogRef.value.offsetTop
		dialogRef.value.style.height = autoUnit(niceHeight)
	}
}

# 找不到模块"./XXX.vue"或其相应的类型声明

该问题是由于ts无法识别.vue文件导致的

在最外层的目录下新建一个env.d.ts文件

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module 'v-annotator'

最简版的方法

# 找到对应的eslint 的扩展 将它关闭，或者是将对应的设置关闭，不过这对于团队开发的话。会有所影响

# 和Iframe的通信

# 父组件向iframe发送消息

<template>
  <div>
    <iframe ref="iframe" :src="iframeSrc"></iframe>
    <button @click="sendMessageToIframe">发送消息到iframe</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iframeSrc: 'https://example.com/iframe-page' // 替换为实际的iframe页面地址
    }
  },
  methods: {
    sendMessageToIframe() {
      const message = { type: 'parentMessage', data: '这是来自父组件的消息' }
      this.$refs.iframe.contentWindow.postMessage(message, '*')
    }
  }
}
</script>

# iframe中的页面接收父组件发送的消息

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>IFrame Page</title>
</head>

<body>
  <script>
    window.addEventListener('message', event => {
      if (event.origin === 'https://your-parent-app-url') { // 替换为实际的父应用地址
        const message = event.data
        console.log('接收到来自父组件的消息:', message)
        // 在这里根据消息类型进行相应的处理
      }
    })
  </script>
</body>

</html>

# iframe向父组件发送消息

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>IFrame Page</title>
</head>

<body>
  <button onclick="sendMessageToParent()">发送消息到父组件</button>
  <script>
    function sendMessageToParent() {
      const message = { type: 'iframeMessage', data: '这是来自iframe的消息' }
      window.parent.postMessage(message, '*')
    }
  </script>
</body>

</html>

# 父组件接收iframe发送的消息

<script>
export default {
  // ...
  mounted() {
    window.addEventListener('message', event => {
      if (event.origin === 'https://example.com') { // 替换为实际的iframe页面地址
        const message = event.data
        console.log('接收到来自iframe的消息:', message)
        // 在这里根据消息类型进行相应的处理
      }
    })
  }
}
</script>

# 使用 Echarts 图表

<div class="footerCard-echarts">
	<div ref="towChart" style="width: 100%; height: 100%"></div>
</div>

<script lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
export default {
	setup() {
		const towChart = ref(null)
		const initTowChart = () => {
			// 初始化 ECharts 实例
			const myChart = echarts.init(towChart?.value)

			const option = { ...}

			// 使用配置项和数据显示图表
			myChart.setOption(option)
		}
		onMounted(() => {
			initTowChart()
		})
		
		return {
			towChart
		}
	}
}
</script>

← 语法使用