You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

343 lines
11 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="u-search" @tap="clickHandler" :style="{
margin: margin,
}">
<view
class="u-content"
:style="{
backgroundColor: bgColor,
borderRadius: shape == 'round' ? '100rpx' : '10rpx',
border: borderStyle,
height: height + 'rpx'
}"
>
<view class="u-icon-wrap">
<u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon>
</view>
<input
confirm-type="search"
@blur="blur"
:value="value"
@confirm="search"
@input="inputChange"
:disabled="disabled"
@focus="getFocus"
:focus="focus"
:maxlength="maxlength"
placeholder-class="u-placeholder-class"
:placeholder="placeholder"
:placeholder-style="`color: ${placeholderColor}`"
class="u-input"
type="text"
:style="[{
textAlign: inputAlign,
color: color,
backgroundColor: bgColor,
}, inputStyle]"
/>
<view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
<u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
</view>
</view>
<view :style="[actionStyle]" class="u-action"
:class="[showActionBtn || show ? 'u-action-active' : '']"
@tap.stop.prevent="custom"
>{{ actionText }}</view>
</view>
</template>
<script>
/**
* search 搜索框
* @description 搜索组件,集成了常见搜索框所需功能,用户可以一键引入,开箱即用。
* @tutorial https://www.uviewui.com/components/search.html
* @property {String} shape 搜索框形状round-圆形square-方形默认round
* @property {String} bg-color 搜索框背景颜色(默认#f2f2f2
* @property {String} border-color 边框颜色,配置了颜色,才会有边框
* @property {String} placeholder 占位文字内容(默认“请输入关键字”)
* @property {Boolean} clearabled 是否启用清除控件默认true
* @property {Boolean} focus 是否自动获得焦点默认false
* @property {Boolean} show-action 是否显示右侧控件默认true
* @property {String} action-text 右侧控件文字(默认“搜索”)
* @property {Object} action-style 右侧控件的样式,对象形式
* @property {String} input-align 输入框内容水平对齐方式默认left
* @property {Object} input-style 自定义输入框样式,对象形式
* @property {Boolean} disabled 是否启用输入框默认false
* @property {String} search-icon-color 搜索图标的颜色,默认同输入框字体颜色
* @property {String} color 输入框字体颜色(默认#606266
* @property {String} placeholder-color placeholder的颜色默认#909399
* @property {String} search-icon 输入框左边的图标可以为uView图标名称或图片路径
* @property {String} margin 组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx"
* @property {Boolean} animation 是否开启动画见上方说明默认false
* @property {String} value 输入框初始值
* @property {String | Number} maxlength 输入框最大能输入的长度,-1为不限制长度
* @property {Boolean} input-style input输入框的样式可以定义文字颜色大小等对象形式
* @property {String | Number} height 输入框高度单位rpx默认64
* @event {Function} change 输入框内容发生变化时触发
* @event {Function} search 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
* @event {Function} custom 用户点击右侧控件时触发
* @event {Function} clear 用户点击清除按钮时触发
* @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
*/
export default {
name: "u-search",
props: {
// 搜索框形状round-圆形square-方形
shape: {
type: String,
default: 'round'
},
// 搜索框背景色,默认值#f2f2f2
bgColor: {
type: String,
default: '#f2f2f2'
},
// 占位提示文字
placeholder: {
type: String,
default: '请输入关键字'
},
// 是否启用清除控件
clearabled: {
type: Boolean,
default: true
},
// 是否自动聚焦
focus: {
type: Boolean,
default: false
},
// 是否在搜索框右侧显示取消按钮
showAction: {
type: Boolean,
default: true
},
// 右边控件的样式
actionStyle: {
type: Object,
default() {
return {};
}
},
// 取消按钮文字
actionText: {
type: String,
default: '搜索'
},
// 输入框内容对齐方式,可选值为 left|center|right
inputAlign: {
type: String,
default: 'left'
},
// 是否启用输入框
disabled: {
type: Boolean,
default: false
},
// 开启showAction时是否在input获取焦点时才显示
animation: {
type: Boolean,
default: false
},
// 边框颜色,只要配置了颜色,才会有边框
borderColor: {
type: String,
default: 'none'
},
// 输入框的初始化内容
value: {
type: String,
default: ''
},
// 搜索框高度单位rpx
height: {
type: [Number, String],
default: 64
},
// input输入框的样式可以定义文字颜色大小等对象形式
inputStyle: {
type: Object,
default() {
return {}
}
},
// 输入框最大能输入的长度,-1为不限制长度(来自uniapp文档)
maxlength: {
type: [Number, String],
default: '-1'
},
// 搜索图标的颜色,默认同输入框字体颜色
searchIconColor: {
type: String,
default: ''
},
// 输入框字体颜色
color: {
type: String,
default: '#606266'
},
// placeholder的颜色
placeholderColor: {
type: String,
default: '#909399'
},
// 组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx"、"30rpx 20rpx"等写法
margin: {
type: String,
default: '0'
},
// 左边输入框的图标可以为uView图标名称或图片路径
searchIcon: {
type: String,
default: 'search'
}
},
data() {
return {
keyword: '',
showClear: false, // 是否显示右边的清除图标
show: false,
// 标记input当前状态是否处于聚焦中如果是才会显示右侧的清除控件
focused: this.focus
// 绑定输入框的值
// inputValue: this.value
};
},
watch: {
keyword(nVal) {
// 双向绑定值让v-model绑定的值双向变化
this.$emit('input', nVal);
// 触发change事件事件效果和v-model双向绑定的效果一样让用户多一个选择
this.$emit('change', nVal);
},
value: {
immediate: true,
handler(nVal) {
this.keyword = nVal;
}
}
},
computed: {
showActionBtn() {
if (!this.animation && this.showAction) return true;
else return false;
},
// 样式根据用户传入的颜色值生成如果不传入默认为none
borderStyle() {
if (this.borderColor) return `1px solid ${this.borderColor}`;
else return 'none';
},
},
methods: {
// 目前HX2.6.9 v-model双向绑定无效故监听input事件获取输入框内容的变化
inputChange(e) {
this.keyword = e.detail.value;
},
// 清空输入
// 也可以作为用户通过this.$refs形式调用清空输入框内容
clear() {
this.keyword = '';
// 延后发出事件避免在父组件监听clear事件时value为更新前的值(不为空)
this.$nextTick(() => {
this.$emit('clear');
})
},
// 确定搜索
search(e) {
this.$emit('search', e.detail.value);
try{
// 收起键盘
uni.hideKeyboard();
}catch(e){}
},
// 点击右边自定义按钮的事件
custom() {
this.$emit('custom', this.keyword);
try{
// 收起键盘
uni.hideKeyboard();
}catch(e){}
},
// 获取焦点
getFocus() {
this.focused = true;
// 开启右侧搜索按钮展开的动画效果
if (this.animation && this.showAction) this.show = true;
this.$emit('focus', this.keyword);
},
// 失去焦点
blur() {
// 最开始使用的是监听图标@touchstart事件自从hx2.8.4后,此方法在微信小程序出错
// 这里改为监听点击事件,手点击清除图标时,同时也发生了@blur事件导致图标消失而无法点击这里做一个延时
setTimeout(() => {
this.focused = false;
}, 100)
this.show = false;
this.$emit('blur', this.keyword);
},
// 点击搜索框只有disabled=true时才发出事件因为禁止了输入意味着是想跳转真正的搜索页
clickHandler() {
if(this.disabled) this.$emit('click');
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-search {
@include vue-flex;
align-items: center;
flex: 1;
}
.u-content {
@include vue-flex;
align-items: center;
padding: 0 18rpx;
flex: 1;
}
.u-clear-icon {
@include vue-flex;
align-items: center;
}
.u-input {
flex: 1;
font-size: 28rpx;
line-height: 1;
margin: 0 10rpx;
color: $u-tips-color;
}
.u-close-wrap {
width: 40rpx;
height: 100%;
@include vue-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.u-placeholder-class {
color: $u-tips-color;
}
.u-action {
font-size: 28rpx;
color: $u-main-color;
width: 0;
overflow: hidden;
transition: all 0.3s;
white-space: nowrap;
text-align: center;
}
.u-action-active {
width: 80rpx;
margin-left: 10rpx;
}
</style>