|
@@ -1,220 +1,211 @@
|
|
|
<template>
|
|
|
- <view class="cm-search">
|
|
|
- <view class="search-control" @click.stop="handleClick">
|
|
|
- <view class="search-input">
|
|
|
- <text class="search-icon iconfont icon-sousuo"></text>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- confirm-type="search"
|
|
|
- :placeholder="placeholder"
|
|
|
- v-model="inputValue"
|
|
|
- :focus="false"
|
|
|
- @focus="$emit('focus')"
|
|
|
- @confirm="handleSearch(inputValue)"
|
|
|
- />
|
|
|
- <text v-if="clearable && inputValue" class="clearable iconfont icon-quxiao" @click="clearValue"></text>
|
|
|
- </view>
|
|
|
- <view class="search-btn" @click="handleSearch(inputValue)">搜索</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <template v-if="keywordVisible && keywordList.length > 0">
|
|
|
- <view class="hot-keyword">
|
|
|
- <view class="title">
|
|
|
- <text>搜索历史</text>
|
|
|
- <text class="clear iconfont icon-shanchu" @click="$emit('remove')"></text>
|
|
|
- </view>
|
|
|
- <view class="keyword-list">
|
|
|
- <view
|
|
|
- class="keyword"
|
|
|
- @click="handleSearch(keyword)"
|
|
|
- v-for="(keyword, index) in keywordList"
|
|
|
- :key="index"
|
|
|
- v-text="keyword"
|
|
|
- ></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mask"></view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
+ <view class="cm-search">
|
|
|
+ <view class="search-control" @click.stop="handleClick">
|
|
|
+ <view class="search-input">
|
|
|
+ <text class="search-icon iconfont icon-sousuo"></text>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ confirm-type="search"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ :focus="false"
|
|
|
+ :value="value"
|
|
|
+ @input="e => $emit('input', e.target.value)"
|
|
|
+ @focus="$emit('focus')"
|
|
|
+ @confirm="handleSearch"
|
|
|
+ />
|
|
|
+ <text v-if="clearable && value" class="clearable iconfont icon-quxiao" @click="clearValue"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn" @click="handleSearch(value)">搜索</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template v-if="keywordVisible && keywordList.length > 0">
|
|
|
+ <view class="hot-keyword">
|
|
|
+ <view class="title">
|
|
|
+ <text>搜索历史</text>
|
|
|
+ <text class="clear iconfont icon-shanchu" @click="$emit('remove')"></text>
|
|
|
+ </view>
|
|
|
+ <view class="keyword-list">
|
|
|
+ <view
|
|
|
+ class="keyword"
|
|
|
+ v-for="(keyword, index) in keywordList"
|
|
|
+ v-text="keyword"
|
|
|
+ :key="index"
|
|
|
+ @click="handleSearch(keyword)"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mask"></view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'cm-search',
|
|
|
- model: {
|
|
|
- prop: 'value',
|
|
|
- event: 'input'
|
|
|
- },
|
|
|
- props: {
|
|
|
- value: {
|
|
|
- typs: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- // 占位字符
|
|
|
- placeholder: {
|
|
|
- type: String,
|
|
|
- default: '请输入搜索关键字'
|
|
|
- },
|
|
|
- clearable: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
-
|
|
|
- disabled: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
-
|
|
|
- keywordList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
-
|
|
|
- keywordVisible: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- inputValue(nVal) {
|
|
|
- this.$emit('input', nVal)
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- inputValue: ''
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.inputValue = this.value
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clearValue() {
|
|
|
- this.inputValue = ''
|
|
|
- this.$emit('clear')
|
|
|
- },
|
|
|
- handleClick() {
|
|
|
- if (!this.disabled) return
|
|
|
- this.$emit('goSearch')
|
|
|
- },
|
|
|
- handleSearch(keyword) {
|
|
|
- if (this.disabled) return
|
|
|
- this.inputValue = keyword
|
|
|
- this.$emit('search')
|
|
|
- }
|
|
|
- }
|
|
|
+ name: 'cm-search',
|
|
|
+ model: {
|
|
|
+ prop: 'value',
|
|
|
+ event: 'input'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ typs: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 占位字符
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: '请输入搜索关键字'
|
|
|
+ },
|
|
|
+ clearable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+
|
|
|
+ keywordList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+
|
|
|
+ keywordVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 清空
|
|
|
+ clearValue() {
|
|
|
+ this.$emit('input', '')
|
|
|
+ this.$emit('clear')
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ handleClick() {
|
|
|
+ if (!this.disabled) return
|
|
|
+ this.$emit('goSearch')
|
|
|
+ },
|
|
|
+ // 关键词搜索
|
|
|
+ handleSearch(keyword) {
|
|
|
+ if (this.disabled) return
|
|
|
+ this.$emit('input', keyword)
|
|
|
+ this.$emit('search')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.cm-search {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .hot-keyword {
|
|
|
- position: relative;
|
|
|
- z-index: 999;
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
-
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx 32rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- position: relative;
|
|
|
- font-size: 26rpx;
|
|
|
- padding: 24rpx 0;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .clear {
|
|
|
- position: absolute;
|
|
|
- font-weight: normal;
|
|
|
- right: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .keyword {
|
|
|
- display: inline-block;
|
|
|
- margin-right: 18rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- padding: 0 16rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background: #eee;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 998;
|
|
|
- background: #f7f7f7;
|
|
|
- }
|
|
|
-
|
|
|
- .search-control {
|
|
|
- position: relative;
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- border-bottom: 1rpx solid #f7f7f7;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 90rpx;
|
|
|
- background: #fff;
|
|
|
-
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- padding: 0 24rpx;
|
|
|
-
|
|
|
- .search-input {
|
|
|
- flex: 1;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- padding-left: 74rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- background: #f7f7f7;
|
|
|
-
|
|
|
- input {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .search-icon,
|
|
|
- .clearable {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 9;
|
|
|
- }
|
|
|
-
|
|
|
- .search-icon {
|
|
|
- left: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .clearable {
|
|
|
- right: 24rpx;
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .search-btn {
|
|
|
- text-align: center;
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .hot-keyword {
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .clear {
|
|
|
+ position: absolute;
|
|
|
+ font-weight: normal;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .keyword {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: #eee;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 998;
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-control {
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ border-bottom: 1rpx solid #f7f7f7;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 90rpx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 74rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-icon,
|
|
|
+ .clearable {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-icon {
|
|
|
+ left: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clearable {
|
|
|
+ right: 24rpx;
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ text-align: center;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|