| | |
| | | <view class="button xiala active" @click="selectMore"> |
| | | <view class="button-item"> |
| | | <!-- <text class="icon icon-more"></text> --> |
| | | <uni-data-select style="width: 100%;" v-model="val" :localdata="selectValue" @change="change" |
| | | :clear="false" ></uni-data-select> |
| | | <uni-data-select |
| | | style="width: 100%" |
| | | v-model="val" |
| | | :localdata="selectValue" |
| | | @change="change" |
| | | :clear="false" |
| | | ></uni-data-select> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | <view class="content" :style="{ 'border-radius': radius + 'px', border: border }"> |
| | | <view |
| | | class="content" |
| | | :style="{ 'border-radius': radius + 'px', border: border }" |
| | | > |
| | | <view class="content-box" :class="{ center: mode === 'center' }"> |
| | | <!-- <text class="icon icon-search"></text> --> |
| | | <text style="display: inline-block;padding-left: 20rpx;"></text> |
| | | <input class="input" @confirm="search" :class="{ center: !active && mode === 'center' }" :focus="isFocus" |
| | | :placeholder="' '+placeholder" v-model="inputVal" id="sdf" @input="input" @focus="focus" @blur="blur" /> |
| | | <text v-if="isDelShow" class="icon icon-del" @click="clear"></text> |
| | | <text style="display: inline-block; padding-left: 20rpx"></text> |
| | | <input |
| | | class="input" |
| | | @confirm="search" |
| | | :class="{ center: !active && mode === 'center' }" |
| | | :focus="isFocus" |
| | | :placeholder="' ' + placeholder" |
| | | v-model="inputVal" |
| | | id="sdf" |
| | | @input="input" |
| | | @focus="focus" |
| | | @blur="blur" |
| | | /> |
| | | <text v-if="isDelShow" class="icon icon-del" @click="clear" |
| | | ></text |
| | | > |
| | | </view> |
| | | <view v-show="(active && isFixedSearchBtn && button === 'inside') || (isDelShow && button === 'inside')" |
| | | class="searchBtn" @click="search">搜索</view> |
| | | <view |
| | | v-show=" |
| | | (active && isFixedSearchBtn && button === 'inside') || |
| | | (isDelShow && button === 'inside') |
| | | " |
| | | class="searchBtn" |
| | | @click="search" |
| | | >搜索</view |
| | | > |
| | | </view> |
| | | <!-- <template v-if="mode === 'common' || mode ==='center'"> |
| | | <view v-if="button === 'outside'" class="button" :class="{ active: isFixedSearchBtn || active }" @click="search"> |
| | |
| | | </view> |
| | | </template> --> |
| | | <template> |
| | | <view class="button btnn" :class="{ active: isFixedSearchBtn || active }" @click="search"> |
| | | <view class="button-item btn">{{ !isFixedSearchBtn ? searchName : '搜索' }}</view> |
| | | <view |
| | | class="button btnn" |
| | | :class="{ active: isFixedSearchBtn || active }" |
| | | @click="search" |
| | | > |
| | | <view class="button-item btn">{{ |
| | | !isFixedSearchBtn ? searchName : "搜索" |
| | | }}</view> |
| | | </view> |
| | | </template> |
| | | |
| | | </view> |
| | | <view class="more-container-parent"> |
| | | <view v-if="mode === 'more' && showMore" class="more-container"> |
| | |
| | | selectValue: { |
| | | type: Array, |
| | | default () { |
| | | return [{ |
| | | return [ |
| | | { |
| | | value: 0, |
| | | text: '篮球sdf' |
| | | }] |
| | | text: "" |
| | | } |
| | | ]; |
| | | } |
| | | }, |
| | | mode: { |
| | | type: String, |
| | | default: 'common' |
| | | default: "common" |
| | | }, |
| | | button: { |
| | | type: String, |
| | | default: 'outside' |
| | | default: "outside" |
| | | }, |
| | | isFixedSearchBtn: { |
| | | type: Boolean, |
| | |
| | | }, |
| | | radius: { |
| | | type: String, |
| | | default: '60' |
| | | default: "60" |
| | | }, |
| | | placeholder: { |
| | | type: String, |
| | | default: '请输入搜索内容' |
| | | default: "请输入搜索内容" |
| | | }, |
| | | backgroundColor: { |
| | | type: String, |
| | | default: '#fff' |
| | | default: "#fff" |
| | | }, |
| | | showMore: { |
| | | type: Boolean, |
| | |
| | | }, |
| | | border: { |
| | | type: String, |
| | | default: '1px #f5f5f5 solid' |
| | | default: "1px #f5f5f5 solid" |
| | | }, |
| | | keyword: { |
| | | type: String |
| | | } |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | | active: false, |
| | | inputVal: '', |
| | | searchName: '取消', |
| | | inputVal: "", |
| | | searchName: "取消", |
| | | isDelShow: false, |
| | | isFocus: false, |
| | | timer: 0 |
| | |
| | | } |
| | | }, |
| | | input() { |
| | | clearInterval(this.timer) |
| | | clearInterval(this.timer); |
| | | this.timer = setTimeout(() => { |
| | | this.$emit('input', this.inputVal); |
| | | }, 500) |
| | | this.$emit("input", this.inputVal); |
| | | }, 500); |
| | | }, |
| | | clear() { |
| | | this.inputVal = ''; |
| | | this.inputVal = ""; |
| | | this.active = false; |
| | | this.$emit('input', this.inputVal); |
| | | this.$emit('search', ''); |
| | | this.$emit("input", this.inputVal); |
| | | this.$emit("search", ""); |
| | | }, |
| | | getFocus() { |
| | | this.isFocus = true; |
| | | }, |
| | | // 搜索 |
| | | search() { |
| | | if (!this.inputVal) return; |
| | | // console.log(this.inputVal); |
| | | this.$emit('search', this.inputVal); |
| | | this.$emit("search", this.inputVal); |
| | | }, |
| | | selectMore() { |
| | | this.$emit('moreClick') |
| | | this.$emit("moreClick"); |
| | | }, |
| | | // 搜索下拉框 |
| | | change(e){ |
| | | this.$emit('select',e) |
| | | this.$emit("select", e); |
| | | console.log(e); |
| | | } |
| | | }, |
| | | created() { |
| | | this.$watch(() => this.inputVal, (newVal) => { |
| | | this.inputVal = this.keyWord; |
| | | this.$watch( |
| | | () => this.inputVal, |
| | | (newVal) => { |
| | | if (newVal) { |
| | | this.searchName = '搜索'; |
| | | this.searchName = "搜索"; |
| | | this.isDelShow = true; |
| | | } else { |
| | | this.searchName = '取消'; |
| | | this.searchName = "取消"; |
| | | this.isDelShow = false; |
| | | } |
| | | }) |
| | | } |
| | | ); |
| | | }, |
| | | watch: { |
| | | keyword(value) { |
| | | console.log(value); |
| | | this.inputVal = value; |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | white-space: nowrap; |
| | | // overflow: hidden; |
| | | &.active { |
| | | padding-left: 15upx; |
| | | width: 100upx; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | @font-face { |
| | | font-family: 'iconfont'; |
| | | src: url('https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183') format('truetype'); |
| | | font-family: "iconfont"; |
| | | src: url("https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183") |
| | | format("truetype"); |
| | | } |
| | | |
| | | .icon { |