u-search.vue 9.2 KB

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