DataWeather 天气卡片

使用 avue-data-weather 展示天气卡片，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

对比不同天气对应的图标与渐变背景，示例数据为本地演示值。

正在加载示例…

<template>
  <div>
    <h3>多城市天气</h3>
    <avue-data-weather :option="option1"></avue-data-weather>
    <h3 style="margin-top: 20px;">详细天气信息</h3>
    <avue-data-weather :option="option2"></avue-data-weather>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const option1 = ref({
  span: 6,
  data: [
    { city: '北京', temp: 28, weather: '晴', wind: '东南风3级', date: '周一' },
    { city: '上海', temp: 25, weather: '多云', wind: '东风2级', date: '周一' },
    { city: '广州', temp: 32, weather: '晴', wind: '南风2级', date: '周一' },
    { city: '深圳', temp: 30, weather: '雨', wind: '西南风3级', date: '周一' }
  ]
});
const option2 = ref({
  span: 8,
  data: [
    { city: '北京', temp: 28, weather: '晴', wind: '东南风3级', date: '2024-02-06', tempLow: 18, tempHigh: 30 },
    { city: '成都', temp: 15, weather: '阴', wind: '微风', date: '2024-02-06', tempLow: 10, tempHigh: 18 },
    { city: '哈尔滨', temp: -5, weather: '雪', wind: '北风4级', date: '2024-02-06', tempLow: -15, tempHigh: -2 }
  ]
});
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	6	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
gutter	number	20	栅格间距，单位 px；当前实现传 0 也会回退为 20

data 数据项

字段	类型	默认值	说明
city / date	string	—	城市与日期文本
temp	number / string	—	当前气温，组件追加 °C
weather	string	—	天气名称，支持 sunny/cloudy/overcast/rain/snow 及当前语言包的别名
wind	string	—	风力信息
tempLow / tempHigh	number / string	—	最低和最高气温，设置 tempLow 后显示区间
background	string	按天气匹配渐变	自定义 CSS background
click	function	—	点击回调 click(item)

使用说明

组件不请求天气接口，也不自动更新日期。由业务侧提供数据；无法识别的天气图标和背景回退为晴天。

span 使用 Element Plus 的 24 栅格体系。布局随屏幕宽度切换，不要把它当成像素宽度；给数字字段传原始数值，单位使用对应的文本字段。

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。这些卡片不处理 href，跳转逻辑应写在 click 回调中。

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。