This is the 18th day of my participation in Gwen Challenge

At the beginning of development, I weakened the Vue Router, originally thinking that this project would be used in conjunction with Electron, and it would be better to present it as a “page” to avoid the jump of some routes, so I just chose a Main page and deleted all other routes:

import {createRouter, createWebHashHistory} from 'vue-router';
import Home from '/@/components/FullCalendarMain.vue';

const routes = [
  {path: '/', name: 'Home', component: Home},
  {path: '/about', name: 'About', component: () => import('/@/components/About.vue')}, // Lazy load route component
];

export default createRouter({
  routes,
  history: createWebHashHistory(),
});
Copy the code

However, I have referred to other open source code related to Electron-Vue writing, which also makes good use of Vue Router.

So, today, we combine Naive UI to rebuild “dedicated pages” and put Vue Router to use.

Vue Router

Vue Router is the official route of vue.js. It is deeply integrated with the vue.js core, making it easy to build a single page application with vue.js, as the code above uses, which we have installed in the project:

"Vue - the router" : "^ 4.0.6",Copy the code

Add a “focus” route:

{path: '/focus', name: 'FocusViewSub', component: () => import('/@/components/FocusViewSub.vue')}, // Lazy load route component
Copy the code

This is a brief introduction to using the Vue Router. So let’s start the refactoring journey.

Refactoring Focus View

The first step is to remove the Sidebar component because of the switch to Vue Router mode:

// FocusViewSub.vue <template> <Sidebar v-model:visible="sidebarVisible" class="p-grid nested-grid" :base-z-index="1000" Position ="full" @click="hideFocus" > <h1> <Vue3CountdownClock > </Sidebar> </template>Copy the code

It goes straight to:

Focusviewsub. vue <h1> focus mode </h1> <Vue3CountdownClock />Copy the code

This removes the previously referenced PrimeVue component and includes other parameters. You can also look at the code submitted to Github.

<template> <h1> Focus mode </h1> <Vue3CountdownClock /> </template> <script lang="ts"> import {defineComponent, ref, provide, computed } from 'vue'; import Vue3CountdownClock from 'vue3-clock-countdown'; import Moment from 'moment'; import { useStore } from '/@/store'; export default defineComponent({ name: 'FocusViewSub', components: { Vue3CountdownClock, }, provide() { return { deadline: computed(() => Moment().add(this.store.state.focusTime, 'minute').format()), }; }, setup () {const Title = ref(' enter countdown '); provide('title', Title); const timerStyle = ref({ 'text-align': 'center', 'font-family': 'sans-serif', 'font-weight': 100, }); provide('timerStyle', timerStyle); const h1Style = ref({ color: '#396', 'font-weight': 100, 'font-size': '40px', margin: '40px 0px 20px', }); provide('h1Style', h1Style); const clockdiv = ref({ 'font-family': 'sans-serif', color: '#fff', display: 'inline-block', 'font-weight': 100, 'text-align': 'center', 'font-size': '30px', }); provide('clockdiv', clockdiv); const clockdivDiv = ref({ padding: '10px', 'border-radius': '3px', background: '#00BF96', display: 'inline-block', margin: '1px', }); provide('clockdivDiv', clockdivDiv); const clockdivDivSpan = ref({ padding: '15px', 'border-radius': '3px', background: '#00816A', display: 'inline-block', }); provide('clockdivDivSpan', clockdivDivSpan); const styleEndTime = ref({ color: '#fff', }); provide('styleEndTime', styleEndTime); const smalltext = ref({ 'padding-top': '5px', 'font-size': '16px', }); provide('smalltext', smalltext); const titleDays = ref('Days'); provide('titleDays', titleDays); const titleHours = ref('Hours'); provide('titleHours', titleHours); const titleMinutes = ref('Minutes'); provide('titleMinutes', titleMinutes); const titleSeconds = ref('Seconds'); provide('titleSeconds', titleSeconds); const titleEndTime = ref('End Time! '); provide('titleEndTime', titleEndTime); const store = useStore(); provide('store', store); return { store, }; }, methods: { hideFocus() { // this.$emit('update:visibleFocusView', this.sidebarVisible); window.electron.ipcRenderer.send('hide-focus-window'); ,}}}); </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> @import "~/styles/default.scss"; </style>Copy the code

Switch from Main to Route:

// fullcalendarmain.vue // focusClick() {this.visiblefullSetting = false; this.visibleFocusView = true; FocusClick () {this.visiblefullSetting = false;}, // focusClick() {this.visiblefullSetting = false; this.$router.push({ path: '/fucus' }) },Copy the code

Remove the FocusView component from FullCalendarMain as well.

Ok, let’s look at the implementation:

The entire page is displayed in full screen, very succinct, but we don’t have an action button to go back or back to the Main page.

Added exit logic.

Exit logic

There are two main things to think about here. The first is how to quit before the time of focus is up, and the other is that the time is up.

When the time is up, make a success prompt and go straight back to the main screen.

We need to add an unobtrusive “off” button that, when triggered, exits concentration.

Here, you need Naive UI’s stapled Affix component to pin the button in the upper left corner:

<n-affix
:trigger-top="24"
style="margin-left: 24px;"
position="absolute"
>
<n-button
  text
  style="font-size: 24px;"
  @click="hideFocus"
>
  <n-icon>
    <times-circle-regular-icon />
  </n-icon>
</n-button>
</n-affix>

...

hideFocus() {
  this.$router.back();
  window.electron.ipcRenderer.send('hide-focus-window');
},
Copy the code

Routes are returned directly using back.

For the use of icon buttons, see:

You can also add a Dialog to increase the “difficulty” of exiting, staying on the “focus” page as long as possible to achieve the focus goal, and then improve later.

In the second case, the hideFocus method exits after the countdown. However, I looked at the third-party Vue3CountdownClock component and did not provide the feedback logic of the countdown, so I will start to make a countdown component for myself or everyone to use, you can expect ~

summary

Today I mainly recorded the beginning of using the Vue Router function, separating the dedicated page from the Main component, reconstructing the dedicated page, and laying the groundwork for the subsequent custom countdown component.

To be continued!

The code has been synced to Github: github.com/fanly/fanly…