DeepSeek 助力 Vue3 开发：打造丝滑的密码输入框（Password Input）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

[DeepSeek 助力 Vue3 开发：打造丝滑的密码输入框（Password Input）](#DeepSeek 助力 Vue3 开发：打造丝滑的密码输入框（Password Input）)
- 📚前言
- 📚页面效果
- 📚指令输入
- - 属性定义
  - - [1. 输入框基本属性](#1. 输入框基本属性)
    - [2. 安全与显示属性](#2. 安全与显示属性)
    - [3. 样式属性](#3. 样式属性)
    - [4. 提示信息属性](#4. 提示信息属性)
  - 事件定义
  - - [1. 输入事件](#1. 输入事件)
    - [2. 交互事件](#2. 交互事件)
    - [3. 密码可见性切换事件](#3. 密码可见性切换事件)
  - 其他
  - - [1. 密码强度验证](#1. 密码强度验证)
    - [2. 安全考虑](#2. 安全考虑)
    - [3. 可访问性](#3. 可访问性)
    - [4. 文档和示例](#4. 文档和示例)
- 📚think
- - 📘组件代码
- 📚代码测试
- 📚测试代码正常跑通，附其他基本代码
- - [📘编写路由 \src\router\index.js](#📘编写路由 \src\router\index.js)
  - [📘编写展示入口 \src\App.vue](#📘编写展示入口 \src\App.vue)
- 📚页面效果
- 📚相关文章

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的密码输入框（Password Input）

📚前言

用户体验和市场反响也充分证明了 DeepSeek 的价值。用户对 DeepSeek 的功能和表现给予了高度评价，其在市场上的下载量和日活用户数持续增长，迅速在全球范围内获得了广泛的认可和用户的喜爱。DeepSeek 的出现，不仅对美国科技股和全球 AI 市场产生了深远的影响，也打破了原有的市场格局，推动了全球 AI 技术的创新和发展。

📚页面效果

📚指令输入

已经创建好了一个基于Vue3的组合式API的项目(Composition API)，并能正常运行起来，请帮我用 Vue3的组合式API(Composition API) 生成一个密码输入框（Password Input）的功能组件，所有代码都保存在components/PasswordInput 下的文件夹中。功能组件的script标签中只有setup属性，使用普通 JavaScript 实现,不使用TypeScript。

功能要有，如下属性：

属性定义

1. 输入框基本属性

modelValue
- 类型：String
- 描述：用于实现双向数据绑定，绑定输入框中的密码值，遵循 Vue 3 的 v-model 语法糖。
placeholder
- 类型：String
- 描述：输入框内的占位文本，提示用户输入密码。
disabled
- 类型：Boolean
- 描述：是否禁用输入框，禁用状态下用户无法输入内容。
readonly
- 类型：Boolean
- 描述：是否为只读状态，只读状态下用户可以看到内容但无法修改。
maxlength
- 类型：Number
- 描述：输入框允许输入的最大字符数。

2. 安全与显示属性

showPassword
- 类型：Boolean
- 描述：是否显示密码明文，可用于实现密码可见与隐藏的切换功能。
toggleable
- 类型：Boolean
- 描述：是否允许用户切换密码的可见状态，通常配合一个图标按钮实现。
strengthMeter
- 类型：Boolean
- 描述：是否显示密码强度指示器，用于提示用户输入密码的强度。
pattern
- 类型：String
- 描述：输入框的正则表达式验证规则，用于限制密码的格式。

3. 样式属性

class
- 类型：String | Array | Object
- 描述：为输入框添加额外的 CSS 类名，方便自定义样式。
style
- 类型：String | Object
- 描述：为输入框添加内联样式。

4. 提示信息属性

errorMessage
- 类型：String
- 描述：当输入的密码不符合规则时显示的错误提示信息。
successMessage
- 类型：String
- 描述：当输入的密码符合规则时显示的成功提示信息。

事件定义

1. 输入事件

update:modelValue
- 描述：当输入框中的值发生变化时触发，用于实现 v-model 的双向数据绑定。
input
- 描述：每次输入内容时触发，可用于实时验证密码。
change
- 描述：当输入框失去焦点且值发生变化时触发。

2. 交互事件

focus
- 描述：输入框获得焦点时触发。
blur
- 描述：输入框失去焦点时触发。
keydown
- 描述：按下键盘按键时触发。
keyup
- 描述：释放键盘按键时触发。

3. 密码可见性切换事件

toggleShowPassword
- 描述：当用户点击切换密码可见状态的按钮时触发。

其他

1. 密码强度验证

实现一个密码强度验证函数，根据密码的长度、包含字符类型等因素评估密码强度，并显示相应的提示信息。
可以使用不同的颜色或图标来直观表示密码强度。

2. 安全考虑

避免在控制台或日志中记录用户输入的密码。
对于密码的传输和存储，建议使用安全的协议和加密算法。

3. 可访问性

为输入框添加适当的 ARIA 属性，如 aria-label、aria-invalid 等，提高屏幕阅读器的支持。
确保密码可见性切换按钮有明确的文本或图标提示，方便用户操作。

4. 文档和示例

提供详细的文档，说明每个属性和事件的使用方法。
提供多个示例，展示不同场景下的密码输入框效果，方便用户快速上手。

你有更好的建议也可以添加，要注明。组件定义好后给出5个及以上的调用示例，示例中添加完整的数据和事件，确保每个示例是独立的。

下面是现有目录

DeepSeekAndVue/

├── src/ # 源代码目录

│ ├── assets/ # 静态资源

│ │ ├── base.css

│ │ ├── main.css

│ │ └── logo.svg

│ ├── components/ # 组件目录

│ │ ├── HelloWorld.vue

│ │ ├── TheWelcome.vue

│ │ ├── WelcomeItem.vue

│ │ ├── Progress/

│ │ │ └── Progress.vue

│ │ ├── Accordion/

│ │ ├── BackToTop/

│ │ ├── Card/

│ │ ├── InfiniteScroll/

│ │ ├── Notification/

│ │ ├── Timeline/

│ │ ├── Switch/

│ │ ├── Tabs/

│ │ ├── Sidebar/

│ │ ├── Breadcrumbs/

│ │ ├── MasonryLayout/

│ │ ├── Rating/

│ │ ├── ColorPicker/

│ │ ├── RightClickMenu/

│ │ ├── RangePicker/

│ │ ├── Navbar/

│ │ ├── FormValidation/

│ │ ├── CopyToClipboard/

│ │ ├── ClickAnimations/

│ │ ├── ThumbnailList/

│ │ ├── KeyboardShortcuts/

│ │ ├── CommentSystem/

│ │ ├── QRCode/

│ │ ├── RadioButton/

│ │ ├── Slider/

│ │ ├── ScrollAnimations/

│ │ ├── TextInput/

│ │ ├── Divider/

│ │ ├── Checkbox/

│ │ ├── TagInput/

│ │ ├── DropdownSelect/

│ │ ├── List/

│ │ ├── Header/

│ │ ├── Footer/

│ │ ├── Pagination/

│ │ ├── FloatingActionButton/

│ │ ├── PasswordInput/

│ │ ├── GridLayout/

│ │ ├── DatePicker/

│ │ └── icons/

│ ├── router/ # 路由配置

│ │ └── index.js

│ ├── stores/ # Pinia 状态管理

│ │ └── counter.js

│ ├── views/ # 页面组件

│ │ ├── ProgressView.vue

│ │ ├── TabsView.vue

│ │ ├── SwitchView.vue

│ │ ├── TimelineView.vue

│ │ ├── NotificationView.vue

│ │ ├── CardView.vue

│ │ ├── InfiniteScrollView.vue

│ │ ├── BackToTopView.vue

│ │ ├── AccordionView.vue

│ │ ├── SidebarView.vue

│ │ ├── BreadcrumbsView.vue

│ │ ├── MasonryLayoutView.vue

│ │ ├── RatingView.vue

│ │ ├── ColorPickerView.vue

│ │ ├── RightClickMenuView.vue

│ │ ├── RangePickerView.vue

│ │ ├── NavbarView.vue

│ │ ├── FormValidationView.vue

│ │ ├── CopyToClipboardView.vue

│ │ ├── ClickAnimationsView.vue

│ │ ├── ThumbnailListView.vue

│ │ ├── KeyboardShortcutsView.vue

│ │ ├── CommentSystemView.vue

│ │ ├── QRCodeView.vue

│ │ ├── RadioButtonView.vue

│ │ ├── SliderView.vue

│ │ ├── ScrollAnimationsView.vue

│ │ ├── TextInputView.vue

│ │ ├── DividerView.vue

│ │ ├── CheckboxView.vue

│ │ ├── TagInputView.vue

│ │ ├── DropdownSelectView.vue

│ │ ├── ListView.vue

│ │ ├── HeaderView.vue

│ │ ├── FooterView.vue

│ │ ├── PaginationView.vue

│ │ ├── FloatingActionButtonView.vue

│ │ ├── GridLayoutView.vue

│ │ ├── PasswordInputView.vue

│ │ ├── DatePickerView.vue

│ │ └── AboutView.vue

│ ├── App.vue # 根组件

│ └── main.js # 应用入口

├── public/ # 公共资源目录

├── index.html # HTML 模板

├── package.json # 项目配置

├── vite.config.js # Vite 配置

└── node_modules/ # 依赖包目录

📚think

📘组件代码

我帮你创建了一个功能完善的密码输入框组件，以下是实现代码：

components/PasswordInput/PasswordInput.vue

html 复制代码

<template>
  <div class="password-input-wrapper">
    <div class="input-container">
      <input
        :type="passwordType"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :class="computedClass"
        :style="style"
        :pattern="pattern"
        @input="handleInput"
        @change="handleChange"
        @focus="handleFocus"
        @blur="handleBlur"
        @keydown="handleKeydown"
        @keyup="handleKeyup"
        aria-label="Password input"
        :aria-invalid="!!errorMessage"
      />
      <button
        v-if="toggleable"
        type="button"
        class="toggle-button"
        @click="togglePasswordVisibility"
        aria-label="Toggle password visibility"
      >
        {{ showPasswordIcon }}
      </button>
    </div>

    <div v-if="strengthMeter" class="strength-meter">
      <div
        class="strength-bar"
        :class="strengthClass"
        :style="{ width: strengthWidth }"
      ></div>
      <span class="strength-text">{{ strengthText }}</span>
    </div>

    <div v-if="errorMessage" class="message error">
      {{ errorMessage }}
    </div>
    <div v-else-if="successMessage" class="message success">
      {{ successMessage }}
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  modelValue: String,
  placeholder: String,
  disabled: Boolean,
  readonly: Boolean,
  maxlength: Number,
  showPassword: Boolean,
  toggleable: Boolean,
  strengthMeter: Boolean,
  pattern: String,
  class: [String, Array, Object],
  style: [String, Object],
  errorMessage: String,
  successMessage: String
})

const emit = defineEmits([
  'update:modelValue',
  'input',
  'change',
  'focus',
  'blur',
  'keydown',
  'keyup',
  'toggleShowPassword'
])

const localShowPassword = ref(props.showPassword)

const passwordType = computed(() => 
  localShowPassword.value ? 'text' : 'password'
)

const showPasswordIcon = computed(() =>
  localShowPassword.value ? '👁️' : '👁️🗨️'
)

const handleInput = (e) => {
  emit('update:modelValue', e.target.value)
  emit('input', e)
}

const handleChange = (e) => {
  emit('change', e)
}

const handleFocus = (e) => {
  emit('focus', e)
}

const handleBlur = (e) => {
  emit('blur', e)
}

const handleKeydown = (e) => {
  emit('keydown', e)
}

const handleKeyup = (e) => {
  emit('keyup', e)
}

const togglePasswordVisibility = () => {
  localShowPassword.value = !localShowPassword.value
  emit('toggleShowPassword', localShowPassword.value)
}

const computedClass = computed(() => [
  props.class,
  'password-input',
  {
    'is-invalid': props.errorMessage,
    'is-valid': props.successMessage,
    'disabled': props.disabled
  }
])

// 密码强度计算
const strengthLevel = computed(() => {
  const password = props.modelValue || ''
  let strength = 0

  // 长度评分
  if (password.length >= 8) strength += 1
  if (password.length >= 12) strength += 1

  // 字符类型评分
  const hasLower = /[a-z]/.test(password)
  const hasUpper = /[A-Z]/.test(password)
  const hasNumber = /\d/.test(password)
  const hasSpecial = /[^A-Za-z0-9]/.test(password)

  const typeCount = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean).length
  strength += typeCount

  if (strength <= 2) return 0 // 弱
  if (strength <= 4) return 1 // 中
  if (strength <= 6) return 2 // 强
  return 3 // 非常强
})

const strengthText = computed(() => {
  const levels = ['Weak', 'Medium', 'Strong', 'Very Strong']
  return levels[strengthLevel.value]
})

const strengthClass = computed(() => `strength-${strengthLevel.value}`)

const strengthWidth = computed(() => 
  `${(strengthLevel.value + 1) * 25}%`
)
</script>

<style scoped>
.password-input-wrapper {
  width: 100%;
  max-width: 400px;
}

.input-container {
  position: relative;
}

.password-input {
  width: 100%;
  padding: 8px 40px 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.password-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.is-invalid {
  border-color: #f56c6c;
}

.is-valid {
  border-color: #67c23a;
}

.toggle-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.strength-meter {
  margin-top: 8px;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  transition: all 0.3s;
}

.strength-0 { background: #f56c6c; }
.strength-1 { background: #e6a23c; }
.strength-2 { background: #67c23a; }
.strength-3 { background: #409eff; }

.strength-text {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.message {
  font-size: 12px;
  margin-top: 4px;
}

.error { color: #f56c6c; }
.success { color: #67c23a; }

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

以下是5个使用示例：

基础用法

html 复制代码

<template>
  <PasswordInput
    v-model="password"
    placeholder="Enter your password"
  />
</template>

<script setup>
import { ref } from 'vue'
import PasswordInput from '@/components/PasswordInput/PasswordInput.vue'

const password = ref('')
</script>

带强度指示和切换按钮

html 复制代码

<template>
  <PasswordInput
    v-model="password"
    placeholder="Enter strong password"
    :strength-meter="true"
    :toggleable="true"
    @toggleShowPassword="handleToggle"
  />
</template>

<script setup>
import { ref } from 'vue'
import PasswordInput from '@/components/PasswordInput/PasswordInput.vue'

const password = ref('')

const handleToggle = (visible) => {
  console.log('Password visibility:', visible)
}
</script>

带验证和消息提示

html 复制代码

<template>
  <PasswordInput
    v-model="password"
    placeholder="At least 8 characters"
    :pattern="pattern"
    :error-message="errorMsg"
    :success-message="successMsg"
    @input="validatePassword"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import PasswordInput from '@/components/PasswordInput/PasswordInput.vue'

const password = ref('')
const pattern = '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'

const errorMsg = ref('')
const successMsg = ref('')

const validatePassword = () => {
  const isValid = new RegExp(pattern).test(password.value)
  errorMsg.value = isValid ? '' : 'Minimum 8 characters with letters and numbers'
  successMsg.value = isValid ? 'Password is valid' : ''
}
</script>

禁用状态和自定义样式

html 复制代码

<template>
  <PasswordInput
    v-model="password"
    placeholder="Disabled input"
    :disabled="true"
    class="custom-style"
    style="border-radius: 20px; padding: 12px;"
  />
</template>

<style>
.custom-style {
  background-color: #f5f7fa;
  border: 2px solid #909399;
}
</style>

完整功能示例

html 复制代码

<template>
  <PasswordInput
    v-model="password"
    placeholder="Enter secure password"
    :maxlength="20"
    :toggleable="true"
    :strength-meter="true"
    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
    :error-message="errorMsg"
    :success-message="successMsg"
    @change="logChange"
    @keyup.enter="submit"
    class="full-featured"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import PasswordInput from '@/components/PasswordInput/PasswordInput.vue'

const password = ref('')
const errorMsg = ref('')
const successMsg = ref('')

const logChange = (e) => {
  console.log('Password changed:', e.target.value)
}

const submit = () => {
  if (!errorMsg.value) {
    console.log('Submitting password...')
  }
}
</script>

<style>
.full-featured {
  border: 2px solid #e6a23c;
  transition: all 0.3s;
}

.full-featured:focus {
  border-color: #67c23a;
}
</style>

额外建议：

可以通过添加autocomplete属性支持自动填充
可以添加inputmode属性优化移动端输入体验
可以添加loading状态指示验证过程
可以添加密码生成器功能
可以集成常见的密码验证库（如zxcvbn）来增强强度验证

组件特性：

完全响应式设计
完善的键盘导航支持
移动端友好
可访问性优化
灵活的样式定制
实时验证反馈
安全的密码处理

📚代码测试

正常

📚测试代码正常跑通，附其他基本代码

添加路由
页面展示入口

📘编写路由 \src\router\index.js

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import RightClickMenuView from '../views/RightClickMenuView.vue'
import RangePickerView from '../views/RangePickerView.vue'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'progress',
      component:  () => import('../views/ProgressView.vue'),
    },
    {
      path: '/tabs',
      name: 'tabs',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 标签页（Tabs）
      component: () => import('../views/TabsView.vue'),
    },
    {
      path: '/accordion',
      name: 'accordion',
      // 折叠面板（Accordion）
      component: () => import('../views/AccordionView.vue'),
    },
    {
      path: '/timeline',
      name: 'timeline',
      // 时间线（Timeline）
      component: () => import('../views/TimelineView.vue'),
    },
    {
      path: '/backToTop',
      name: 'backToTop',
      component: () => import('../views/BackToTopView.vue')
    },
    {
      path: '/notification',
      name: 'notification',
      component: () => import('../views/NotificationView.vue')
    },
    {
      path: '/card',
      name: 'card',
      component: () => import('../views/CardView.vue')
    },
    {
      path: '/infiniteScroll',
      name: 'infiniteScroll',
      component: () => import('../views/InfiniteScrollView.vue')
    },
    {
      path: '/switch',
      name: 'switch',
      component: () => import('../views/SwitchView.vue')
    },
    {
      path: '/sidebar',
      name: 'sidebar',
      component: () => import('../views/SidebarView.vue')
    },
    {
      path: '/breadcrumbs',
      name: 'breadcrumbs',
      component: () => import('../views/BreadcrumbsView.vue')
    },
    {
      path: '/masonryLayout',
      name: 'masonryLayout',
      component: () => import('../views/MasonryLayoutView.vue')
    },
    {
      path: '/rating',
      name: 'rating',
      component: () => import('../views/RatingView.vue')
    },
    {
      path: '/datePicker',
      name: 'datePicker',
      component: () => import('../views/DatePickerView.vue')
    },
    {
      path: '/colorPicker',
      name: 'colorPicker',
      component: () => import('../views/ColorPickerView.vue')
    },
    {
      path: '/rightClickMenu',
      name: 'rightClickMenu',
      component: RightClickMenuView
    },
    {
      path: '/rangePicker',
      name: 'rangePicker',
      component: () => import('../views/RangePickerView.vue')
    },
    {
      path: '/navbar',
      name: 'navbar',
      component: () => import('../views/NavbarView.vue')
    },
    {
      path: '/formValidation',
      name: 'formValidation',
      component: () => import('../views/FormValidationView.vue')
    },
    {
      path: '/copyToClipboard',
      name: 'copyToClipboard',
      component: () => import('../views/CopyToClipboardView.vue')
    },
    {
      path: '/clickAnimations',
      name: 'clickAnimations',
      component: () => import('../views/ClickAnimationsView.vue')
    },
    {
      path: '/thumbnailList',
      name: 'thumbnailList',
      component: () => import('../views/ThumbnailListView.vue')
    },
    {
      path: '/keyboardShortcuts',
      name: 'keyboardShortcuts',
      component: () => import('../views/KeyboardShortcutsView.vue')
    },
    {
      path: '/commentSystem',
      name: 'commentSystem',
      component: () => import('../views/CommentSystemView.vue')
    },
    {
      path: '/qRCode',
      name: 'qRCode',
      component: () => import('../views/QRCodeView.vue')
    },
    {
      path: '/radioButton',
      name: 'radioButton',
      component: () => import('../views/RadioButtonView.vue')
    },
    {
      path: '/slider',
      name: 'slider',
      component: () => import('../views/SliderView.vue')
    },
    {
      path: '/scrollAnimations',
      name: 'scrollAnimations',
      component: () => import('../views/ScrollAnimationsView.vue')
    },
    {
      path: '/textInputView',
      name: 'textInputView',
      component: () => import('../views/TextInputView.vue')
    },
    {
      path: '/divider',
      name: 'divider',
      component: () => import('../views/DividerView.vue')
    },
    {
      path: '/checkbox',
      name: 'checkbox',
      component: () => import('../views/CheckboxView.vue')
    },
    {
      path: '/tagInput',
      name: 'tagInput',
      component: () => import('../views/TagInputView.vue')
    },
    {
      path: '/dropdownSelect',
      name: 'dropdownSelect',
      component: () => import('../views/DropdownSelectView.vue')
    },
    {
      path: '/list',
      name: 'list',
      component: () => import('../views/ListView.vue')
    },
    {
      path: '/header',
      name: 'header',
      component: () => import('../views/HeaderView.vue')
    },
    {
      path: '/footer',
      name: 'footer',
      component: () => import('../views/FooterView.vue')
    },
    {
      path: '/pagination',
      name: 'pagination',
      component: () => import('../views/PaginationView.vue')
    },
    {
      path: '/floatingActionButton',
      name: 'floatingActionButton',
      component: () => import('../views/FloatingActionButtonView.vue')
    },
    {
      path: '/gridLayout',
      name: 'gridLayout',
      component: () => import('../views/GridLayoutView.vue')
    },
    {
      path: '/passwordInput',
      name: 'passwordInput',
      component: () => import('../views/PasswordInputView.vue')
    }
  ],
})

export default router

📘编写展示入口 \src\App.vue

html 复制代码

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Progress</RouterLink>
        <RouterLink to="/tabs">Tabs</RouterLink>
        <RouterLink to="/accordion">Accordion</RouterLink>
        <RouterLink to="/timeline">Timeline</RouterLink>
        <RouterLink to="/backToTop">BackToTop</RouterLink>
        <RouterLink to="/notification">Notification</RouterLink>
        <RouterLink to="/card">Card</RouterLink>
        <RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink>
        <RouterLink to="/switch">Switch</RouterLink>
        <RouterLink to="/sidebar">Sidebar</RouterLink>
        <RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink>
        <RouterLink to="/masonryLayout">MasonryLayout</RouterLink>
        <RouterLink to="/rating">Rating</RouterLink>
        <RouterLink to="/datePicker">DatePicker</RouterLink>
        <RouterLink to="/colorPicker">ColorPicker</RouterLink>
        <RouterLink to="/rightClickMenu">RightClickMenu</RouterLink>
        <RouterLink to="/rangePicker">RangePicker</RouterLink>
        <RouterLink to="/navbar">Navbar</RouterLink>
        <RouterLink to="/formValidation">FormValidation</RouterLink>
        <RouterLink to="/copyToClipboard">CopyToClipboard</RouterLink>
        <RouterLink to="/clickAnimations">ClickAnimations</RouterLink>
        <RouterLink to="/thumbnailList">ThumbnailList</RouterLink>
        <RouterLink to="/keyboardShortcuts">KeyboardShortcuts</RouterLink>
        <RouterLink to="/commentSystem">CommentSystem</RouterLink>
        <RouterLink to="/qRCode">QRCode</RouterLink>
        <RouterLink to="/radioButton">RadioButton</RouterLink>
        <RouterLink to="/slider">Slider</RouterLink>
        <RouterLink to="/scrollAnimations">ScrollAnimations</RouterLink>
        <RouterLink to="/textInputView">TextInput</RouterLink>
        <RouterLink to="/divider">Divider</RouterLink>
        <RouterLink to="/checkbox">Checkbox</RouterLink>
        <RouterLink to="/tagInput">TagInput</RouterLink>
        <RouterLink to="/dropdownSelect">DropdownSelect</RouterLink>
        <RouterLink to="/list">List</RouterLink>
        <RouterLink to="/header">Header</RouterLink>
        <RouterLink to="/footer">Footer</RouterLink>
        <RouterLink to="/pagination">Pagination</RouterLink>
        <RouterLink to="/floatingActionButton">FloatingActionButton</RouterLink>
        <RouterLink to="/gridLayout">GridLayout</RouterLink>
        <RouterLink to="/passwordInput">PasswordInput</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

📚页面效果

📚相关文章

------------ 相　关　文　章 ------------

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

更多专栏订阅推荐：

👍 html+css+js 绚丽效果

💕 vue

✈️ Electron

⭐️ js

📝 字符串

✍️ 时间对象（Date()）操作