perf: 增加设置弹窗 可设置是否进行自适应

刘嘉威

2022-10-24 a191ee0f495760168aa776590793e72c9ecbda0d

 src/views/header.vue

@@ -1,14 +1,25 @@
<script setup lang="ts">

import { reactive } from "vue";

import dayjs from 'dayjs';

import type {DateDataType} from "./index.d"

import {useSettingStore} from "@/stores/index"



const dateData = reactive({

  dateDay: null,

  dateYear: null,

  dateWeek: null,

  weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

const dateData = reactive<DateDataType>({

  dateDay: "",

  dateYear: "",

  dateWeek: "",

  timing:null

});



const showSetting = () => {};

const { setSettingShow} =useSettingStore()

const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]

const timeFn = () => {

  dateData.timing = setInterval(() => {

    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");

    dateData.dateWeek = weekday[dayjs().day()];

  }, 1000);

};

timeFn()

</script>



<template>

@@ -23,11 +34,10 @@
    </div>

    <div class="timers">

      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}

      <i

        class="blq-icon-shezhi02"

        style="margin-left: 10px"

        @click="showSetting"

      ></i>



      <div class="setting_icon"   @click="setSettingShow(true)">

          <img src="@/assets/img/headers/setting.png" alt="设置">

      </div>

    </div>

  </div>

</template>

@@ -76,8 +86,15 @@
    display: flex;

    align-items: center;



    .blq-icon-shezhi02 {

    .setting_icon {

      width: 20px;

      height: 20px;

      cursor: pointer;

      margin-left: 12px;

      img{

        width: 100%;

        height: 100%;

      }

    }

  }

}