community-front/pages/components/searchDemo.vue

<template>
  <view class="demo-container">
    <view class="demo-title">搜索组件演示</view>
    
    <!-- 基础搜索框 -->
    <view class="demo-section">
      <view class="section-title">基础搜索框</view>
      <Search 
        v-model="searchValue1"
        placeholder="请输入搜索内容"
        @search="onSearch"
        @clear="onClear"
        @clickIcon="onClickIcon"
      />
      <view class="result">搜索内容：{{ searchValue1 }}</view>
    </view>
    
    <!-- 右侧搜索图标 -->
    <view class="demo-section">
      <view class="section-title">右侧搜索图标</view>
      <Search 
        v-model="searchValue2"
        placeholder="搜索图标在右侧"
        searchIconAlign="right"
        @search="onSearch"
      />
    </view>
    
    <!-- 居中对齐 -->
    <view class="demo-section">
      <view class="section-title">居中对齐</view>
      <Search 
        v-model="searchValue3"
        placeholder="居中对齐的搜索框"
        textAlign="center"
        :showIcon="false"
        @search="onSearch"
      />
    </view>
    
    <!-- 自定义样式 -->
    <!-- <view class="demo-section"> -->
      <view class="section-title">自定义样式</view>
      <Search 
        v-model="searchValue4"
        placeholder="自定义背景色和高度"
        :placeholderClass="{
          color:'red',
          fontSize:'24rpx'
        }"
        bgColor="#e8f4fd"
        height="100rpx"
        :showCancel="false"
        @search="onSearch"
      />
    <!-- </view> -->
    
    <!-- 禁用状态 -->
    <view class="demo-section">
      <view class="section-title">禁用状态</view>
      <Search 
        v-model="searchValue5"
        placeholder="禁用状态的搜索框"
        :disabled="true"
      />
    </view>
    
    <!-- 不显示取消按钮 -->
    <view class="demo-section">
      <view class="section-title">不显示取消按钮</view>
      <Search 
        v-model="searchValue6"
        placeholder="没有取消按钮"
        :showCancel="false"
        @search="onSearch"
      />
    </view>
  </view>
</template>

<script>
import Search from '@/pages/components/Search.vue'

export default {
  components: {
    Search
  },
  data() {
    return {
      searchValue1: '',
      searchValue2: '',
      searchValue3: '',
      searchValue4: '',
      searchValue5: '禁用状态示例',
      searchValue6: ''
    }
  },
  methods: {
    onSearch(value) {
      uni.showToast({
        title: `搜索：${value}`,
        icon: 'none'
      })
    },
    onClear() {
      uni.showToast({
        title: '清除搜索内容',
        icon: 'none'
      })
    },
    onClickIcon() {
      uni.showToast({
        title: '点击了搜索图标',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.demo-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.demo-section {
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.section-title {
  padding: 30rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.result {
  padding: 20rpx 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #f8f9fa;
}
</style>