AMap.InfoWindow

<template>
  <div>
    <div :style="customStyle" class="custom-box">
      <!-- Your content here -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 定义样式变量
const width = ref(200); // 使用 ref 创建响应式样式变量
const height = ref(100);
const color = ref('blue');

// 创建一个计算属性，用于组合样式
const customStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`,
  backgroundColor: color.value,
}));

// 示例：在组件中更新样式变量
setTimeout(() => {
  width.value = 300; // 改变宽度，触发计算属性更新样式
  color.value = 'red'; // 改变颜色，触发计算属性更新样式
}, 2000);

</script>

<style>
.custom-box {
  /* 在这里添加通用样式 */
  /* 注意：不要在这里定义宽度、高度、背景色等，因为这些样式会通过动态样式属性设置 */
  border: 2px solid black;
}
</style>

以下是一个完整的Vue 3示例，使用Element UI的el-table组件和el-table-column组件来展示订单号数据，并在内容溢出时显示tooltip：

<template>
  <el-table :data="orderList">
    <el-table-column
      prop="orderId"
      label="订单号"
      min-width="120"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        <span>{{ row.orderId }}</span>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        { orderId: "ORD12345", /* 其他订单相关数据 */ },
        { orderId: "ORD67890", /* 其他订单相关数据 */ },
        // 其他订单数据...
      ],
    };
  },
};
</script>

在这个示例中，我们使用了Vue的data选项来定义了一个名为orderList的数组，其中包含了多个订单对象，每个对象都有一个orderId字段以及其他与订单相关的数据。

然后，我们在el-table组件中使用:data属性将orderList数组作为表格的数据源。接着，我们在el-table-column中使用prop属性指定了要显示的数据字段，即"orderId"。

在el-table-column中使用了插槽（slot）来自定义表格列的内容，使用了Vue 3的新语法<template #default="{ row }">来获取当前行的数据，并使用row.orderId来显示订单号数据。

最后，我们使用show-overflow-tooltip属性来使内容溢出时显示tooltip来展示完整内容。

Google浏览器记住密码，自动填充后去除背景色，input内容填入样式变黑问题

[google浏览器]记住密码之后，账号密码框自动填充到input当中，输入框的背景色为白色，color为黑色，目标是去除这些自动填充之后的默认样式。

  input:-webkit-autofill {  
      -webkit-text-fill-color: #ededed !important;  
      -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  
      background-color:transparent;  
      background-image: none;  
      transition: background-color 50000s ease-in-out 0s;  
  }  
  input {  
      background-color:transparent;  
        caret-color: #fff;  // 光标颜色
  }

正则表达式用于匹配文本中符合特定规则的字符串。以下是一个简单的正则表达式，用于匹配恰好为6位数字的字符串：

/^\d{6}$/

解释：

^ 表示匹配字符串的开始位置。
\d 表示匹配任意数字（0-9）。
{6} 表示前面的元素 \d 必须出现6次。
$ 表示匹配字符串的结束位置。

这个正则表达式可以匹配由六个连续数字组成的字符串，如 "123456"，"987654" 等。其他字符、空格或者少于六位数字的字符串将不会匹配。

示例代码：

const sixDigitRegex = /^\d{6}$/;

console.log(sixDigitRegex.test("123456")); // true
console.log(sixDigitRegex.test("987654")); // true
console.log(sixDigitRegex.test("12345"));  // false，不足六位
console.log(sixDigitRegex.test("abcdef")); // false，包含字母

^ 表示匹配字符串的开始位置。
. 表示匹配任意字符（除了换行符 \n）。
{6,} 表示前面的元素 . 至少要出现6次或更多次。
$ 表示匹配字符串的结束位置。

这个正则表达式将匹配由至少六个任意字符组成的字符串，可以是数字、字母、符号，甚至包括空格等。长度必须大于或等于6位，但没有上限，可以是任意长度。

示例代码：

const atLeastSixCharactersRegex = /^.{6,}$/;

console.log(atLeastSixCharactersRegex.test("123456"));          // true
console.log(atLeastSixCharactersRegex.test("abc123"));          // true
console.log(atLeastSixCharactersRegex.test("A@5$9#"));          // true
console.log(atLeastSixCharactersRegex.test("  hello "));        // true，包含空格
console.log(atLeastSixCharactersRegex.test("12345"));           // false，不足六位
console.log(atLeastSixCharactersRegex.test("abcdefghijkl"));    // true，超过六位
console.log(atLeastSixCharactersRegex.test("short"));           // false，少于六位
console.log(atLeastSixCharactersRegex.test("a".repeat(100)));  // true，任意长度大于6

如果你想修改 <el-table-column> 中的模板，以便遍历一个数组并获取名称，并使用逗号分隔这些名称，可以按照以下方式进行修改：

<el-table-column label="角色" min-width="120" show-overflow-tooltip>
  <template #default="{ row }">
    <span>{{ row.roles.map(role => role.name).join(', ') }}</span>
  </template>
</el-table-column>

在上面的示例中，我们使用 map() 方法遍历 row.roles 数组，并获取每个角色的名称。然后，使用 join(', ') 方法将这些名称使用逗号进行分隔，并将结果显示在 <span> 元素中。

确保在 row.roles 数组中的每个角色对象中包含一个名为 name 的属性，以便正确获取角色名称。

请根据你的实际数据结构和需求，调整上述代码中的变量名和属性名。

这样，当表格渲染时，将遍历数组中的角色，并将它们的名称使用逗号分隔显示在表格列中。

要从event.data中提取嵌套的JSON数据，并将其赋值给变量data。为了实现这一点，您可以使用JSON.parse()函数来解析JSON字符串，然后提取所需的数据。

const parsedData = JSON.parse(event.data);
const content = JSON.parse(parsedData.content).content;
const data = content;

// 现在，您可以使用变量data来访问解析后的JSON数据

在上述代码中，我们首先使用JSON.parse(event.data)解析event.data，得到一个对象parsedData。然后，我们使用JSON.parse(parsedData.content)再次解析parsedData.content，以提取嵌套的JSON数据，并将其赋值给content变量。最后，我们将content赋值给data，以便您可以通过data访问解析后的JSON数据。

在Vue 3中，使用ref创建的响应式变量，要访问其值，需要通过.value属性来获取。所以在打印boxList1的值时，应该使用boxList1.value

加群联系作者vx：xiaoda0423

仓库地址：https://github.com/webVueBlog/WebGuideInterview

前端系列21集-vue3，轨迹展示

AMap.InfoWindow

Google浏览器记住密码，自动填充后去除背景色，input内容填入样式变黑问题