u-search.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <template>
  2. <view class="u-search" @tap="clickHandler" :style="{
  3. margin: margin,
  4. }">
  5. <view
  6. class="u-content"
  7. :style="{
  8. backgroundColor: bgColor,
  9. borderRadius: shape == 'round' ? '100rpx' : '10rpx',
  10. border: borderStyle,
  11. height: height + 'rpx'
  12. }"
  13. >
  14. <view class="u-icon-wrap">
  15. <u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon>
  16. </view>
  17. <input
  18. confirm-type="search"
  19. @blur="blur"
  20. :value="valueCom"
  21. @confirm="search"
  22. @input="inputChange"
  23. :disabled="disabled"
  24. @focus="getFocus"
  25. :focus="focus"
  26. :maxlength="maxlength"
  27. placeholder-class="u-placeholder-class"
  28. :placeholder="placeholder"
  29. :placeholder-style="`color: ${placeholderColor}`"
  30. class="u-input"
  31. type="text"
  32. :style="[{
  33. textAlign: inputAlign,
  34. color: color,
  35. backgroundColor: bgColor,
  36. }, inputStyle]"
  37. />
  38. <view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
  39. <u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
  40. </view>
  41. </view>
  42. <view :style="[actionStyle]" class="u-action"
  43. :class="[showActionBtn || show ? 'u-action-active' : '']"
  44. @tap.stop.prevent="custom"
  45. >{{ actionText }}</view>
  46. </view>
  47. </template>
  48. <script>
  49. /**
  50. * search 搜索框
  51. * @description 搜索组件,集成了常见搜索框所需功能,用户可以一键引入,开箱即用。
  52. * @tutorial https://www.uviewui.com/components/search.html
  53. * @property {String} shape 搜索框形状,round-圆形,square-方形(默认round)
  54. * @property {String} bg-color 搜索框背景颜色(默认#f2f2f2)
  55. * @property {String} border-color 边框颜色,配置了颜色,才会有边框
  56. * @property {String} placeholder 占位文字内容(默认“请输入关键字”)
  57. * @property {Boolean} clearabled 是否启用清除控件(默认true)
  58. * @property {Boolean} focus 是否自动获得焦点(默认false)
  59. * @property {Boolean} show-action 是否显示右侧控件(默认true)
  60. * @property {String} action-text 右侧控件文字(默认“搜索”)
  61. * @property {Object} action-style 右侧控件的样式,对象形式
  62. * @property {String} input-align 输入框内容水平对齐方式(默认left)
  63. * @property {Object} input-style 自定义输入框样式,对象形式
  64. * @property {Boolean} disabled 是否启用输入框(默认false)
  65. * @property {String} search-icon-color 搜索图标的颜色,默认同输入框字体颜色
  66. * @property {String} color 输入框字体颜色(默认#606266)
  67. * @property {String} placeholder-color placeholder的颜色(默认#909399)
  68. * @property {String} search-icon 输入框左边的图标,可以为uView图标名称或图片路径
  69. * @property {String} margin 组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx"
  70. * @property {Boolean} animation 是否开启动画,见上方说明(默认false)
  71. * @property {String} value 输入框初始值
  72. * @property {String | Number} maxlength 输入框最大能输入的长度,-1为不限制长度
  73. * @property {Boolean} input-style input输入框的样式,可以定义文字颜色,大小等,对象形式
  74. * @property {String | Number} height 输入框高度,单位rpx(默认64)
  75. * @event {Function} change 输入框内容发生变化时触发
  76. * @event {Function} search 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
  77. * @event {Function} custom 用户点击右侧控件时触发
  78. * @event {Function} clear 用户点击清除按钮时触发
  79. * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
  80. */
  81. export default {
  82. name: "u-search",
  83. emits: ["update:modelValue", "input", "change", "search", "custom", "clear", "focus", "blur"],
  84. props: {
  85. // 输入框的初始化内容
  86. value: {
  87. type: String,
  88. default: ''
  89. },
  90. modelValue: {
  91. type: String,
  92. default: ''
  93. },
  94. // 搜索框形状,round-圆形,square-方形
  95. shape: {
  96. type: String,
  97. default: 'round'
  98. },
  99. // 搜索框背景色,默认值#f2f2f2
  100. bgColor: {
  101. type: String,
  102. default: '#f2f2f2'
  103. },
  104. // 占位提示文字
  105. placeholder: {
  106. type: String,
  107. default: '请输入关键字'
  108. },
  109. // 是否启用清除控件
  110. clearabled: {
  111. type: Boolean,
  112. default: true
  113. },
  114. // 是否自动聚焦
  115. focus: {
  116. type: Boolean,
  117. default: false
  118. },
  119. // 是否在搜索框右侧显示取消按钮
  120. showAction: {
  121. type: Boolean,
  122. default: true
  123. },
  124. // 右边控件的样式
  125. actionStyle: {
  126. type: Object,
  127. default() {
  128. return {};
  129. }
  130. },
  131. // 取消按钮文字
  132. actionText: {
  133. type: String,
  134. default: '搜索'
  135. },
  136. // 输入框内容对齐方式,可选值为 left|center|right
  137. inputAlign: {
  138. type: String,
  139. default: 'left'
  140. },
  141. // 是否启用输入框
  142. disabled: {
  143. type: Boolean,
  144. default: false
  145. },
  146. // 开启showAction时,是否在input获取焦点时才显示
  147. animation: {
  148. type: Boolean,
  149. default: false
  150. },
  151. // 边框颜色,只要配置了颜色,才会有边框
  152. borderColor: {
  153. type: String,
  154. default: 'none'
  155. },
  156. // 搜索框高度,单位rpx
  157. height: {
  158. type: [Number, String],
  159. default: 64
  160. },
  161. // input输入框的样式,可以定义文字颜色,大小等,对象形式
  162. inputStyle: {
  163. type: Object,
  164. default() {
  165. return {}
  166. }
  167. },
  168. // 输入框最大能输入的长度,-1为不限制长度(来自uniapp文档)
  169. maxlength: {
  170. type: [Number, String],
  171. default: '-1'
  172. },
  173. // 搜索图标的颜色,默认同输入框字体颜色
  174. searchIconColor: {
  175. type: String,
  176. default: ''
  177. },
  178. // 输入框字体颜色
  179. color: {
  180. type: String,
  181. default: '#606266'
  182. },
  183. // placeholder的颜色
  184. placeholderColor: {
  185. type: String,
  186. default: '#909399'
  187. },
  188. // 组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx"、"30rpx 20rpx"等写法
  189. margin: {
  190. type: String,
  191. default: '0'
  192. },
  193. // 左边输入框的图标,可以为uView图标名称或图片路径
  194. searchIcon: {
  195. type: String,
  196. default: 'search'
  197. }
  198. },
  199. data() {
  200. return {
  201. keyword: '',
  202. showClear: false, // 是否显示右边的清除图标
  203. show: false,
  204. // 标记input当前状态是否处于聚焦中,如果是,才会显示右侧的清除控件
  205. focused: this.focus
  206. // 绑定输入框的值
  207. // inputValue: this.value
  208. };
  209. },
  210. watch: {
  211. keyword(nVal) {
  212. // 双向绑定值,让v-model绑定的值双向变化
  213. this.$emit('input', nVal);
  214. this.$emit("update:modelValue", nVal);
  215. // 触发change事件,事件效果和v-model双向绑定的效果一样,让用户多一个选择
  216. this.$emit('change', nVal);
  217. },
  218. valueCom: {
  219. immediate: true,
  220. handler(nVal) {
  221. this.keyword = nVal;
  222. }
  223. }
  224. },
  225. computed: {
  226. valueCom() {
  227. // #ifdef VUE2
  228. return this.value;
  229. // #endif
  230. // #ifdef VUE3
  231. return this.modelValue;
  232. // #endif
  233. },
  234. showActionBtn() {
  235. if (!this.animation && this.showAction) return true;
  236. else return false;
  237. },
  238. // 样式,根据用户传入的颜色值生成,如果不传入,默认为none
  239. borderStyle() {
  240. if (this.borderColor) return `1px solid ${this.borderColor}`;
  241. else return 'none';
  242. },
  243. },
  244. methods: {
  245. // 目前HX2.6.9 v-model双向绑定无效,故监听input事件获取输入框内容的变化
  246. inputChange(e) {
  247. this.keyword = e.detail.value;
  248. },
  249. // 清空输入
  250. // 也可以作为用户通过this.$refs形式调用清空输入框内容
  251. clear() {
  252. this.keyword = '';
  253. // 延后发出事件,避免在父组件监听clear事件时,value为更新前的值(不为空)
  254. this.$nextTick(() => {
  255. this.$emit('clear');
  256. })
  257. },
  258. // 确定搜索
  259. search(e) {
  260. this.$emit('search', e.detail.value);
  261. try{
  262. // 收起键盘
  263. uni.hideKeyboard();
  264. }catch(e){}
  265. },
  266. // 点击右边自定义按钮的事件
  267. custom() {
  268. this.$emit('custom', this.keyword);
  269. try{
  270. // 收起键盘
  271. uni.hideKeyboard();
  272. }catch(e){}
  273. },
  274. // 获取焦点
  275. getFocus() {
  276. this.focused = true;
  277. // 开启右侧搜索按钮展开的动画效果
  278. if (this.animation && this.showAction) this.show = true;
  279. this.$emit('focus', this.keyword);
  280. },
  281. // 失去焦点
  282. blur() {
  283. // 最开始使用的是监听图标@touchstart事件,自从hx2.8.4后,此方法在微信小程序出错
  284. // 这里改为监听点击事件,手点击清除图标时,同时也发生了@blur事件,导致图标消失而无法点击,这里做一个延时
  285. setTimeout(() => {
  286. this.focused = false;
  287. }, 100)
  288. this.show = false;
  289. this.$emit('blur', this.keyword);
  290. },
  291. // 点击搜索框,只有disabled=true时才发出事件,因为禁止了输入,意味着是想跳转真正的搜索页
  292. clickHandler() {
  293. if(this.disabled) this.$emit('click');
  294. }
  295. }
  296. };
  297. </script>
  298. <style lang="scss" scoped>
  299. @import "../../libs/css/style.components.scss";
  300. .u-search {
  301. @include vue-flex;
  302. align-items: center;
  303. flex: 1;
  304. }
  305. .u-content {
  306. @include vue-flex;
  307. align-items: center;
  308. padding: 0 18rpx;
  309. flex: 1;
  310. }
  311. .u-clear-icon {
  312. @include vue-flex;
  313. align-items: center;
  314. }
  315. .u-input {
  316. flex: 1;
  317. font-size: 28rpx;
  318. line-height: 1;
  319. margin: 0 10rpx;
  320. color: $u-tips-color;
  321. }
  322. .u-close-wrap {
  323. width: 40rpx;
  324. height: 100%;
  325. @include vue-flex;
  326. align-items: center;
  327. justify-content: center;
  328. border-radius: 50%;
  329. }
  330. .u-placeholder-class {
  331. color: $u-tips-color;
  332. }
  333. .u-action {
  334. font-size: 28rpx;
  335. color: $u-main-color;
  336. width: 0;
  337. overflow: hidden;
  338. transition: all 0.3s;
  339. white-space: nowrap;
  340. text-align: center;
  341. }
  342. .u-action-active {
  343. width: 80rpx;
  344. margin-left: 10rpx;
  345. }
  346. </style>