src\components\SearchInput\index.vue

搜索组件编写

<template><div class="search-wrap"><input type="text":placeholder="placeholder":maxlength="maxlength":value="inputValue"@input="searchData($event)"/></div>
</template><script>
import {ref} from 'vue';export default {name: 'SearchInput',props: {placeholder: String,maxlength: Number},setup(){const inputValue = ref('');const searchData = (e) => {}return {inputValue,searchData}}}
</script>

src\store\mutations.js

添加新的逻辑

export default {setHeaderTitle(state, routerName) {switch (routerName) {case 'day':state.headerTitle = '当天信息'breakcase 'month':state.headerTitle = '近期假期'breakcase 'year':state.headerTitle = '当年假期'breakdefault:state.headerTitle = '当天信息'break}},/*** 设置输入框最大长度* @param {*} state* @param {*} routerName*/setMaxlength(state, routerName) {switch (routerName) {case 'day':state.maxlength = 8breakcase 'month':state.maxlength = 6breakcase 'year':state.maxlength = 4breakdefault:state.maxlength = 8break}},/*** 设置输入框提示信息* @param {*} state* @param {*} routerName*/setPlaceholder(state, routerName) {const date = new Date()let year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate()month = month < 10 ? '0' + month : monthday = day < 10 ? '0' + day : dayswitch (routerName) {case 'day':state.placeholder = `格式：${year}${month}${day} （${year}年${month}月${day}日）`breakcase 'month':state.placeholder = `格式：${year}${month} （${year}年${month}月）`breakcase 'year':state.placeholder = `格式：${year} （${year}年）`breakdefault:state.placeholder = `格式：${year}${month}${day} （${year}年${month}月${day}日）`break}},
}

src\App.vue

监听路由变化，重新更新输入框最大长度和提示信息缓存数据

<search-input :placeholder='placeholder' :maxlength='maxlength'></search-input>// 监听路由变化，设置 header 标题watch(() => router.currentRoute.value.name,(value) => {store.commit('setHeaderTitle', value)store.commit('setPlaceholder', value)store.commit('setMaxlength', value)})