uni-app 百家姓 插件需求

针对您提出的uni-app百家姓插件需求，以下是一个简化的代码案例，用于展示如何在uni-app中实现一个基本的百家姓功能。此示例将展示一个包含百家姓列表的页面，并允许用户搜索特定姓氏。

首先，确保您已经在uni-app项目中安装了必要的依赖，并创建了一个新的页面，例如BaiJiaXing.vue。

BaiJiaXing.vue

<template>
  <view class="container">
    <input v-model="searchQuery" placeholder="搜索姓氏" @input="filterSurnames" />
    <view class="surname-list">
      <view v-for="(surname, index) in filteredSurnames" :key="index" class="surname-item">
        {{ surname }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      surnames: [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩',
        // ...（此处省略其余姓氏，以实际百家姓为准）
      ],
      filteredSurnames: []
    };
  },
  created() {
    this.filteredSurnames = [...this.surnames];
  },
  methods: {
    filterSurnames() {
      if (this.searchQuery.trim() === '') {
        this.filteredSurnames = [...this.surnames];
      } else {
        const query = this.searchQuery.toLowerCase();
        this.filteredSurnames = this.surnames.filter(surname => 
          surname.toLowerCase().includes(query)
        );
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.surname-list {
  margin-top: 20px;
}
.surname-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>

说明

1. 数据初始化：在data函数中，我们初始化了一个包含百家姓的数组surnames，以及一个用于存储过滤后姓氏的数组filteredSurnames。
2. 页面渲染：使用v-for指令遍历filteredSurnames数组，并在页面上显示每个姓氏。
3. 搜索功能：通过v-model绑定输入框的值到searchQuery，并在filterSurnames方法中根据searchQuery的值过滤姓氏列表。当输入框内容变化时，自动触发过滤操作。
4. 样式：简单的样式定义，确保页面布局美观。

此代码提供了一个基本的百家姓插件实现，您可以根据实际需求进一步扩展和优化，例如添加姓氏详情、拼音显示等功能。