You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
3.3 KiB
158 lines
3.3 KiB
<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>
|