vue3模块中的title标题进行滚动显示 & vue3页面语法糖写法

vue3模块中的title标题进行滚动显示

效果-从下往上滚动/切换

代码

实例一-工作情况

index.vue

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import titleHeader from '../header/titleHeader.vue'

import img from '@/assets/yfdd-bs/right/zbyq/fb.png'
//2.0定义数据
const state = reactive({
  items: [
    { name: '马云001' },
    { name: '雷军002' },
    { name: '丁磊003' },
    { name: '马云004' },
    { name: '雷军005' },
    { name: '丁磊006' },
    { name: '马云007' },
    { name: '雷军008' },
    { name: '丁磊009' }

  ],
  animate: false
})
//3.0设置滚动时长
onMounted(() => {
  setInterval(scroll, 1000)
})
//4.0滚动逻辑
const scroll = () => {
  state.animate = true
  setTimeout(() => {
    state.items.push(state.items[0])
    state.items.shift()
    state.animate = false
  }, 500)
}
</script>

<template>
  <div class="duty-container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[170, 24]"
    />
    <!--  1.0滚动模块的界面  -->
    <div :style="{width: '100%', height: '200px',overflow:'hidden'}">
      <div
        v-for="(item,i) in state.items"
        :key="i"
      >
        <div>题目</div>
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.duty-container {
  grid-area: a;  //grid-area容器布局
  background: url(@/assets/yfdd-bs/right/zbyq/back2.png) no-repeat;
  background-size: 100% 100%;
}
</style>

实例2-日报

index.vue——vue3页面语法糖写法

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'
import { reactive, onMounted, ref } from 'vue'
import img from '@/assets/yfdd-bs/right/zbyq/zb.png'
const bgImg = ref('bg-zbyq-dialog')
const dialogVisible = ref(false)
const isDialog = (e: any) => {
  console.log(e, '789')

  dialogVisible.value = true
}
const zbUrl = ref('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf')
const state = reactive({
  items: [
    { id: 1, titleZBRB: '1迎峰度冬值班日报第94期（9月16日）' },
    { id: 2, titleZBRB: '2迎峰度冬值班日报第94期（9月15日）' },
    { id: 3, titleZBRB: '3迎峰度冬值班日报第94期（9月14日）' },
    { id: 4, titleZBRB: '4迎峰度冬值班日报第94期（9月13日）' },
    { id: 5, titleZBRB: '5迎峰度冬值班日报第94期（9月12日）' },
    { id: 6, titleZBRB: '6迎峰度冬值班日报第94期（9月11日）' },
    { id: 7, titleZBRB: '7迎峰度冬值班日报第94期（9月10日）' },
    { id: 8, titleZBRB: '8迎峰度冬值班日报第94期（9月09日）' },
    { id: 9, titleZBRB: '9迎峰度冬值班日报第94期（9月08日）' }

  ],
  animate: false
})
onMounted(() => {
  setInterval(scroll, 2000)
})
const scroll = () => {
  state.animate = true
  setTimeout(() => {
    state.items.push(state.items[0])
    state.items.shift()
    state.animate = false
  }, 500)
}
</script>

<template>
  <div class="duty-container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[200, 24]"
    />

    <div class="zb-content">
      <div
        v-for="(item,i) in state.items"
        :key="i"
      >
        <div
          class="zbtt"
          @click="isDialog(item)"
        >
          <p>{{ item.titleZBRB }}</p>
        </div>
        <el-dialog
          v-model="dialogVisible"
          width="1200px"
          top="120px"
          :modal="false"
          :custom-class="bgImg"
          :close-on-click-modal="false"
          :lock-scroll="false"
        >
          <template #title>
            <div class="title">
              值班日报
            </div>
          </template>
          <!-- 预览内容区 -->
          <div class="show">
            <div class="showCount">
              <div class="count">
                <span v-if="!zbUrl">PDF或图片显示区域</span>
                <iframe
                  :src="zbUrl + '#toolbar=0'"
                  style="width:100%; height:100%;overflow:hidden;"
                />
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.duty-container {
  grid-area: b;
  background: url(@/assets/yfdd-bs/right/zbyq/back2.png) no-repeat;
  background-size: 100% 100%;
  .zb-content {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-top: -10px;
    .zbtt {
      width: 529px;
      height: 40px;
      background: url("@/assets/yfdd-bs/right/zbyq/zbbk.png") no-repeat;
      background-size: cover;
      margin-left: 20px;
      margin-top: 10px;
      p {
        margin-left: 85px;
        line-height: 45px;
        font-size: 21px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
      }
    }
  }
  .title {
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-weight: 600;
    color: white;
    font-size: 26px;
  }
  :deep(.el-dialog__body) {
    overflow-y: hidden;
  }
  .show {
    width: 860px;
    margin-left: 20px;
    background: #ffffff;
    position: relative;
    float: left;
    .showCount {
      .count {
        background: #d8d8d8;
        height: 800px;
        span {
          font-size: 50px;
          color: #333333;
          position: absolute;
          top: 360px;
          left: 200px;
        }
      }
    }
  }
}
</style>