arcgis vue弹框自定义样式

要自定义 ArcGIS API for JavaScript 中的 Vue 弹框样式，您需要使用自定义 CSS 样式表。以下是一个简单的例子：

1. 在您的 Vue 组件中，添加以下代码：

<template>
  <div>
    <div ref="popupContainer"></div>
  </div>
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  name: 'MyMap',
  data() {
    return {
      view: null,
      popup: null
    }
  },
  mounted() {
    this.initializeMap();
  },
  methods: {
    async initializeMap() {
      const [Map, MapView, Popup] = await loadModules(['esri/Map', 'esri/views/MapView', 'esri/widgets/Popup']);

      this.view = new MapView({
        container: 'map',
        map: new Map({
          basemap: 'streets-navigation-vector'
        })
      });

      this.popup = new Popup({
        container: this.$refs.popupContainer,
        content: 'This is a test popup'
      });

      this.view.popup = this.popup;
    }
  }
}
</script>

<style>
/* Customize the popup style here */
.esri-popup__main-container {
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
</style>

2. 在上面的代码中，我们使用了 `loadModules` 方法来加载 `esri/widgets/Popup` 模块，并在 `mounted` 钩子函数中初始化了弹框。我们在 `popup` 对象中设置了 `container` 属性为 `this.$refs.popupContainer`，这是一个空的 `div` 元素，用于容纳弹框内容。

3. 最后，在样式表中，我们可以使用 CSS 选择器来选择弹框的不同部分，并添加自定义样式。在这个例子中，我们选择了 `.esri-popup__main-container` 类，添加了一些样式，如圆角和阴影。

请注意，这只是一个简单的例子，您可以根据您的需求自定义更多样式。