浪花 - 前端搜索页面设计＋开发

一、搜索框组件

1. 新建视图组件 SearchPage.vue

注意！配置路由时引入组件的一个坑：路由对应组件导入错误

• 错误原因：自定义组件和框架组件名字重复，可能会错把框架的组件给 import 进来

• 解决：修改自定义组件的名称

2. 配置路由

• 在路由配置文件中配置路由及对应的视图组件

3. 引入搜索框组件

• 使用可以进行事件监听的 Search 组件
• Search 组件提供了 search 和 cancel 事件，search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发

<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => Toast(val);
    const onCancel = () => Toast('取消');
    return {
      value,
      onSearch,
      onCancel,
    };
  },
};

4. 查看页面效果

5. 路由跳转的两种方法

方法一：编程式导航路由跳转

• 点击顶部 NavBar 的搜索图标时应跳转到搜索页面，需要使用编程式导航
• 使用步骤：​​​​​​​

  • 引入 vue-router 的 { useRouter } 

  • 使用 router.push("/search")，导航到搜索页面

  import {useRouter} from "vue-router";
  
  const router = useRouter();
  
  const onClickLeft = () => {
    router.push('/search');
  };

• router.push(...) 介绍：该方法的参数可以是一个字符串路径，或者一个描述地址的对象

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

 方法二：声明式路由跳转

• 使用 <router-link> 创建 a 标签来定义导航链接
• 设置 to 的值指定要跳转到的路由

二、已选标签布局设计

1. 选择 “可关闭的标签” 组件进行引入

<van-tag :show="true" closeable size="medium" type="primary">
    标签
</van-tag>

<van-tag :show="true" closeable size="medium" type="primary">
    标签
</van-tag>

<van-tag :show="true" closeable size="medium" type="primary">
    标签
</van-tag>

2. 引入分割线组件

• 通过 content-position 指定内容所在位置

<van-divider content-position="left">文字</van-divider>
<van-divider content-position="right">文字</van-divider>

3. 查看页面效果

三、可选标签布局设计

1. 选择 TreeSelect 多选模式的分类选择组件作为选择标签的组件

• active-id：右侧选中项的 id，active-id 为数组格式时，可以选中多个右侧选项
• main-active-index：左侧选中项的索引
• items：分类所需显示的数据
• max：右侧最大选中个数
• selected-icon：自定义右侧栏选中状态的图标

<van-tree-select
  v-model:active-id="activeIds"
  v-model:main-active-index="activeIndex"
  :items="items"
/>

import { ref } from 'vue';

export default {
  setup() {
    const activeId = ref([1, 2]);
    const activeIndex = ref(0);
    const items = [
      {
        text: '浙江',
        children: [
          { text: '杭州', id: 1 },
          { text: '温州', id: 2 },
          { text: '宁波', id: 3, disabled: true },
        ],
      },
      {
        text: '江苏',
        children: [
          { text: '南京', id: 4 },
          { text: '无锡', id: 5 },
          { text: '徐州', id: 6 },
        ],
      },
      { text: '福建', disabled: true },
    ];

    return {
      items,
      activeId,
      activeIndex,
    };
  },
};

2. 查看页面效果

四、已选标签的绑定

1. 当用户选择标签后，要将所选标签展示在已选标签处

2. 通过组件提供的 activeIds 属性进行绑定

3. 使用 v-for 遍历 activeIds，并通过插值表达式展示标签数据

<van-tag v-for="tag in activeIds" :show="true" closeable size="medium" type="primary">
    {{ tag }}
</van-tag>

Vue 语法介绍：

• v-for 指令
  • Vue 的内置指令
  • 用于在模板中进行循环渲染，它能够根据源数据的数组或对象来生成重复的元素或组件
  • 类似的指令还有 v-if、v-on 等
• {{ msg }} 插值表达式
  • 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)
  • 双大括号标签会被替换为相应组件实例中 msg属性的值。同时每次 msg 属性更改时它也会同步更新。

4. 查看效果

附：v-for 学习示例

1. 遍历数组

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

2. 使用对象进行循环 

<template>
  <ul>
    <li v-for="(value, key, index) in object" :key="index">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>