Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

339 righe
9.0 KiB

  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="value"
  21. @confirm="search"
  22. @input="inputChange"
  23. :disabled="disabled"
  24. @focus="getFocus"
  25. :maxlength="getMaxlength"
  26. :focus="focus"
  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" @touchstart="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. @touchstart.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. // 将maxlength转为数值
  230. getMaxlength() {
  231. return Number(this.maxlength);
  232. }
  233. },
  234. methods: {
  235. // 目前HX2.6.9 v-model双向绑定无效,故监听input事件获取输入框内容的变化
  236. inputChange(e) {
  237. this.keyword = e.detail.value;
  238. },
  239. // 清空输入
  240. // 也可以作为用户通过this.$refs形式调用清空输入框内容
  241. clear() {
  242. this.keyword = '';
  243. // 延后发出事件,避免在父组件监听clear事件时,value为更新前的值(不为空)
  244. this.$nextTick(() => {
  245. this.$emit('clear');
  246. })
  247. },
  248. // 确定搜索
  249. search(e) {
  250. this.$emit('search', e.detail.value);
  251. // 收起键盘
  252. uni.hideKeyboard();
  253. },
  254. // 点击右边自定义按钮的事件
  255. custom() {
  256. this.$emit('custom', this.keyword);
  257. // 收起键盘
  258. uni.hideKeyboard();
  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. this.focused = false;
  270. this.show = false;
  271. this.$emit('blur', this.keyword);
  272. },
  273. // 点击搜索框,只有disabled=true时才发出事件,因为禁止了输入,意味着是想跳转真正的搜索页
  274. clickHandler() {
  275. if(this.disabled) this.$emit('click');
  276. }
  277. }
  278. };
  279. </script>
  280. <style lang="scss" scoped>
  281. @import "../../libs/css/style.components.scss";
  282. .u-search {
  283. display: flex;
  284. align-items: center;
  285. flex: 1;
  286. }
  287. .u-content {
  288. display: flex;
  289. align-items: center;
  290. padding: 0 18rpx;
  291. flex: 1;
  292. }
  293. .u-clear-icon {
  294. display: flex;
  295. align-items: center;
  296. }
  297. .u-input {
  298. flex: 1;
  299. font-size: 28rpx;
  300. line-height: 1;
  301. margin: 0 10rpx;
  302. color: $u-tips-color;
  303. }
  304. .u-close-wrap {
  305. width: 40rpx;
  306. height: 100%;
  307. display: flex;
  308. align-items: center;
  309. justify-content: center;
  310. border-radius: 50%;
  311. }
  312. .u-placeholder-class {
  313. color: $u-tips-color;
  314. }
  315. .u-action {
  316. font-size: 28rpx;
  317. color: $u-main-color;
  318. width: 0;
  319. overflow: hidden;
  320. transition: all 0.3s;
  321. white-space: nowrap;
  322. text-align: center;
  323. }
  324. .u-action-active {
  325. width: 80rpx;
  326. margin-left: 10rpx;
  327. }
  328. </style>