init

src/views/screen/components/WeatherWarningExample.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="weather-example">
+    <h2>WeatherWarning 组件使用示例</h2>
+
+    <!-- 基础用法 -->
+    <div class="example-section">
+      <h3>1. 基础用法</h3>
+      <WeatherWarning />
+    </div>
+
+    <!-- 自定义配置 -->
+    <div class="example-section">
+      <h3>2. 自定义配置</h3>
+      <WeatherWarning :scroll-speed="2" :auto-fetch="false" :update-interval="10" :custom-data="customWeatherData" />
+    </div>
+
+    <!-- 通过ref调用方法 -->
+    <div class="example-section">
+      <h3>3. 通过ref调用方法</h3>
+      <WeatherWarning ref="weatherRef" />
+      <div class="button-group">
+        <button @click="updateData">更新数据</button>
+        <button @click="startScroll">开始滚动</button>
+        <button @click="stopScroll">停止滚动</button>
+        <button @click="fetchData">获取数据</button>
+      </div>
+    </div>
+
+    <!-- 控制面板 -->
+    <div class="example-section">
+      <h3>4. 控制面板</h3>
+      <div class="control-panel">
+        <label>
+          滚动速度:
+          <input v-model.number="scrollSpeed" type="range" min="0.5" max="3" step="0.1" />
+          {{ scrollSpeed }}
+        </label>
+        <label>
+          更新间隔(分钟):
+          <input v-model.number="updateInterval" type="range" min="1" max="30" step="1" />
+          {{ updateInterval }}
+        </label>
+        <label>
+          <input v-model="autoFetch" type="checkbox" />
+          自动获取数据
+        </label>
+      </div>
+      <WeatherWarning :scroll-speed="scrollSpeed" :auto-fetch="autoFetch" :update-interval="updateInterval" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import WeatherWarning from './WeatherWarning.vue'
+
+// 自定义天气数据
+const customWeatherData = [
+  {
+    content: '自定义预警1: 今日天气晴朗，适合户外活动......',
+    level: 'low'
+  },
+  {
+    content: '自定义预警2: 明日可能有小雨，请携带雨具......',
+    level: 'medium'
+  },
+  {
+    content: '自定义预警3: 后天将有强降雨，请注意防范......',
+    level: 'high'
+  }
+]
+
+// 控制面板数据
+const scrollSpeed = ref(1)
+const updateInterval = ref(5)
+const autoFetch = ref(true)
+
+// ref引用
+const weatherRef = ref()
+
+// 更新数据
+const updateData = () => {
+  const newData = [
+    {
+      content: '动态更新的天气预警信息1......',
+      level: 'high'
+    },
+    {
+      content: '动态更新的天气预警信息2......',
+      level: 'medium'
+    }
+  ]
+  weatherRef.value?.updateWeatherData(newData)
+}
+
+// 开始滚动
+const startScroll = () => {
+  weatherRef.value?.startWeatherScroll()
+}
+
+// 停止滚动
+const stopScroll = () => {
+  weatherRef.value?.stopWeatherScroll()
+}
+
+// 获取数据
+const fetchData = () => {
+  weatherRef.value?.fetchWeatherData()
+}
+</script>
+
+<style scoped lang="scss">
+// 响应式设计
+@media (width <=768px) {
+  .weather-example {
+    padding: 10px;
+
+    .example-section {
+      padding: 15px;
+    }
+
+    .button-group {
+      flex-direction: column;
+
+      button {
+        width: 100%;
+      }
+    }
+
+    .control-panel {
+      label {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 5px;
+      }
+    }
+  }
+}
+
+.weather-example {
+  max-width: 1200px;
+  padding: 20px;
+  margin: 0 auto;
+
+  h2 {
+    margin-bottom: 30px;
+    color: #333;
+    text-align: center;
+  }
+
+  .example-section {
+    padding: 20px;
+    margin-bottom: 40px;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+
+    h3 {
+      padding-bottom: 10px;
+      margin-bottom: 15px;
+      color: #555;
+      border-bottom: 2px solid #007bff;
+    }
+  }
+
+  .button-group {
+    display: flex;
+    margin-top: 15px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    button {
+      padding: 8px 16px;
+      color: white;
+      cursor: pointer;
+      background: #007bff;
+      border: none;
+      border-radius: 4px;
+      transition: background 0.3s;
+
+      &:hover {
+        background: #0056b3;
+      }
+    }
+  }
+
+  .control-panel {
+    padding: 15px;
+    margin-bottom: 20px;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      font-weight: 500;
+
+      input[type="range"] {
+        width: 150px;
+      }
+
+      input[type="checkbox"] {
+        margin: 0;
+      }
+    }
+  }
+}
+</style>