leiyun
/
ai_uniapp_v2
1
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
1 Cometer
1 Ramo
4.2 MiB
 
 
 
Árvore: 635772c47b
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '635772c47b'
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-search/u-search.vue

378 linhas
12 KiB
Em bruto Responsabilidade Histórico 

  1. <template>

  2. 	<view

  3. 	    class="u-search"

  4. 		:class="[iconPosition === 'right' && 'u-search__reverse']"

  5. 	    @tap="clickHandler"

  6. 	    :style="[{

  7. 			margin: margin,

  8. 		}, addStyle(customStyle)]"

  9. 	>

  10. 		<view

  11. 		    class="u-search__content"

  12. 		    :style="{

  13. 				backgroundColor: resolvedBgColor,

  14. 				borderRadius: shape == 'round' ? '100px' : '4px',

  15. 				borderColor: resolvedBorderColor,

  16. 			}"

  17. 		>

  18. 			<template v-if="$slots.label || label !== null">

  19. 				<slot name="label">

  20. 					<text class="u-search__content__label">{{ label }}</text>

  21. 				</slot>

  22. 			</template>

  23. 			<view class="u-search__content__icon">

  24. 				<up-icon

  25. 					@tap="clickIcon"

  26. 				    :size="searchIconSize"

  27. 				    :name="searchIcon"

  28. 				    :color="searchIconColor ? searchIconColor : resolvedColor"

  29. 				></up-icon>

  30. 			</view>

  31. 			<input

  32. 			    confirm-type="search"

  33. 			    @blur="blurFunc"

  34. 			    :value="keyword"

  35. 			    @confirm="search"

  36. 			    @input="inputChange"

  37. 			    :disabled="disabled"

  38. 			    @focus="getFocus"

  39. 			    :focus="focus"

  40. 			    :maxlength="maxlength"

  41. 				:adjust-position="adjustPosition"

  42. 				:auto-blur="autoBlur"

  43. 			    placeholder-class="u-search__content__input--placeholder"

  44. 			    :placeholder="placeholder"

  45. 			    :placeholder-style="`color: ${resolvedPlaceholderColor}`"

  46. 			    class="u-search__content__input"

  47. 			    type="text"

  48. 			    :style="[{

  49. 					pointerEvents: disabled ? 'none' : 'auto',

  50. 					textAlign: inputAlign,

  51. 					color: resolvedColor,

  52. 					backgroundColor: resolvedBgColor,

  53. 					height: addUnit(height)

  54. 				}, inputStyle]"

  55. 			/>

  56. 			<view

  57. 			    class="u-search__content__icon u-search__content__close"

  58. 			    v-if="isShowClear"

  59. 			    @click="clear"

  60. 			>

  61. 				<up-icon

  62. 				    name="close"

  63. 				    size="11"

  64. 				    color="#ffffff"

  65. 					customStyle="line-height: 12px"

  66. 				></up-icon>

  67. 			</view>

  68.             <slot name="inputRight"></slot>

  69. 		</view>

  70. 		<text

  71. 		    :style="[actionStyle]"

  72. 		    class="u-search__action"

  73. 		    :class="[(showActionBtn || show) && 'u-search__action--active']"

  74. 		    @tap.stop.prevent="custom"

  75. 		>{{ actionText }}</text>

  76. 	</view>

  77. </template>

  78. 

  79. <script>

  80. 	import { props } from './props';

  81. 	import { mpMixin } from '../../libs/mixin/mpMixin';

  82. 	import { mixin } from '../../libs/mixin/mixin';

  83. 	import { addUnit, addStyle } from '../../libs/function/index';

  84. 	/**

  85. 	 * search 搜索框

  86. 	 * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。

  87. 	 * @tutorial https://uview-plus.jiangruyi.com/components/search.html

  88. 	 * @property {String}			shape				搜索框形状，round-圆形，square-方形（默认 'round' ）

  89. 	 * @property {String}			bgColor				搜索框背景颜色（默认 '#f2f2f2' ）

  90. 	 * @property {String}			placeholder			占位文字内容（默认 '请输入关键字' ）

  91. 	 * @property {Boolean}			clearabled			是否启用清除控件（默认 true ）

  92. 	 * @property {Boolean}			focus				是否自动获得焦点（默认 false ）

  93. 	 * @property {Boolean}			showAction			是否显示右侧控件（默认 true ）

  94. 	 * @property {Object}			actionStyle			右侧控件的样式，对象形式

  95. 	 * @property {String}			actionText			右侧控件文字（默认 '搜索' ）

  96. 	 * @property {String}			inputAlign			输入框内容水平对齐方式 （默认 'left' ）

  97. 	 * @property {Object}			inputStyle			自定义输入框样式，对象形式

  98. 	 * @property {Boolean}			disabled			是否启用输入框（默认 false ）

  99. 	 * @property {String}			borderColor			边框颜色，配置了颜色，才会有边框 (默认 'transparent' )

  100. 	 * @property {String}			searchIconColor		搜索图标的颜色，默认同输入框字体颜色 (默认 '#909399' )

  101. 	 * @property {Number | String}	searchIconSize 搜索图标的字体，默认22

  102. 	 * @property {String}			color				输入框字体颜色（默认 '#606266' ）

  103. 	 * @property {String}			placeholderColor	placeholder的颜色（默认 '#909399' ）

  104. 	 * @property {String}			searchIcon			输入框左边的图标，可以为uView图标名称或图片路径  (默认 'search' )

  105. 	 * @property {String}			iconPosition		输入框图标位置，left-左边, right-右边  (默认 'left' )

  106. 	 * @property {String}			margin				组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )

  107. 	 * @property {Boolean} 			animation			是否开启动画，见上方说明（默认 false ）

  108. 	 * @property {String}			value				输入框初始值

  109. 	 * @property {String | Number}	maxlength			输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )

  110. 	 * @property {String | Number}	height				输入框高度，单位px（默认 64 ）

  111. 	 * @property {String | Number}	label				搜索框左边显示内容

  112. 	 * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面

  113. 	 * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点

  114. 	 * @property {Boolean}	        onlyClearableOnFocused	是否仅在聚焦时显示清除控件（默认 true ）

  115. 	 * @property {Object}			customStyle			定义需要用到的外部样式

  116. 	 *

  117. 	 * @event {Function} change 输入框内容发生变化时触发

  118. 	 * @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发

  119. 	 * @event {Function} custom 用户点击右侧控件时触发

  120. 	 * @event {Function} clear 用户点击清除按钮时触发

  121. 	 * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>

  122. 	 */

  123. 	export default {

  124. 		name: "u-search",

  125. 		mixins: [mpMixin, mixin, props],

  126. 		data() {

  127. 			return {

  128. 				keyword: '',

  129. 				show: false,

  130. 				// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件

  131. 				focused: this.focus

  132. 				// 绑定输入框的值

  133. 				// inputValue: this.value

  134. 			};

  135. 		},

  136. 		watch: {

  137. 			keyword(nVal) {

  138. 				// 双向绑定值，让v-model绑定的值双向变化

  139. 				// #ifdef VUE3

  140. 				this.$emit("update:modelValue", nVal);

  141. 				// #endif

  142. 				// #ifdef VUE2

  143. 				this.$emit('input', nVal);

  144. 				// #endif

  145. 				// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择

  146. 				this.$emit('change', nVal);

  147. 			},

  148. 			// #ifdef VUE3

  149. 			modelValue: {

  150. 				immediate: true,

  151. 				handler(nVal) {

  152. 					this.keyword = nVal;

  153. 				}

  154. 			},

  155. 			// #endif

  156. 			// #ifdef VUE2

  157. 			value: {

  158. 				immediate: true,

  159. 				handler(nVal) {

  160. 					this.keyword = nVal;

  161. 				}

  162. 			},

  163. 			// #endif

  164. 		},

  165. 		computed: {

  166. 			resolvedBgColor() {

  167. 				if (this.bgColor) {

  168. 					return this.bgColor

  169. 				}

  170. 				return this.upThemeVar('--up-card-bg-color', this.$u?.color?.bgColor || '#f2f2f2')

  171. 			},

  172. 			resolvedBorderColor() {

  173. 				// 外部显式传参时保持原行为

  174. 				if (this.upHasProp('borderColor') || (this.borderColor && this.borderColor !== 'transparent')) {

  175. 					return this.borderColor

  176. 				}

  177. 				// 暗黑模式默认给弱边框，避免背景同色时轮廓不明显

  178. 				if (this.upThemeIsDark) {

  179. 					return this.upThemeVar('--up-border-color', 'rgba(255, 255, 255, 0.12)')

  180. 				}

  181. 				return 'transparent'

  182. 			},

  183. 			resolvedColor() {

  184. 				return this.color || this.upThemeVar('--up-content-color', this.$u?.color?.contentColor || '#606266')

  185. 			},

  186. 			resolvedPlaceholderColor() {

  187. 				return this.placeholderColor || this.upThemeVar('--up-tips-color', this.$u?.color?.tipsColor || '#909399')

  188. 			},

  189. 			showActionBtn() {

  190. 				return !this.animation && this.showAction

  191. 			},

  192. 			// 是否显示清除控件

  193. 			isShowClear() {

  194. 				const { clearabled, focused, keyword, onlyClearableOnFocused } = this;

  195. 				if (!clearabled) {

  196. 					return false;

  197. 				}

  198. 				if (onlyClearableOnFocused) {

  199. 					return !!focused && keyword !== "";

  200. 				} else {

  201. 					return keyword !== "";

  202. 				}

  203. 			}

  204. 		},

  205. 		emits: ['clear', 'search', 'custom', 'focus', 'blur', 'click', 'clickIcon', 'update:modelValue', 'change'],

  206. 		methods: {

  207. 			addStyle,

  208. 			addUnit,

  209. 			// 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化

  210. 			inputChange(e) {

  211. 				this.keyword = e.detail.value;

  212. 			},

  213. 			// 清空输入

  214. 			// 也可以作为用户通过this.$refs形式调用清空输入框内容

  215. 			clear() {

  216. 				this.keyword = '';

  217. 				// 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)

  218. 				this.$nextTick(() => {

  219. 					this.$emit('clear');

  220. 				})

  221. 			},

  222. 			// 确定搜索

  223. 			search(e) {

  224. 				this.$emit('search', e.detail.value);

  225. 				try {

  226. 					// 收起键盘

  227. 					uni.hideKeyboard();

  228. 				} catch (e) {}

  229. 			},

  230. 			// 点击右边自定义按钮的事件

  231. 			custom() {

  232. 				this.$emit('custom', this.keyword);

  233. 				try {

  234. 					// 收起键盘

  235. 					uni.hideKeyboard();

  236. 				} catch (e) {}

  237. 			},

  238. 			// 获取焦点

  239. 			getFocus() {

  240. 				this.focused = true;

  241. 				// 开启右侧搜索按钮展开的动画效果

  242. 				if (this.animation && this.showAction) this.show = true;

  243. 				this.$emit('focus', this.keyword);

  244. 			},

  245. 			// 失去焦点

  246. 			blurFunc() {

  247. 				// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错

  248. 				// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时

  249. 				setTimeout(() => {

  250. 					this.focused = false;

  251. 				}, 100)

  252. 				this.show = false;

  253. 				this.$emit('blur', this.keyword);

  254. 			},

  255. 			// 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页

  256. 			clickHandler() {

  257. 				if (this.disabled) this.$emit('click');

  258. 			},

  259. 			// 点击左边图标

  260. 			clickIcon(e) {

  261. 				this.$emit('clickIcon', this.keyword);

  262. 				try {

  263. 					// 收起键盘

  264. 					uni.hideKeyboard();

  265. 				} catch (e) {}

  266. 			}

  267. 		}

  268. 	}

  269. </script>

  270. 

  271. <style lang="scss" scoped>

  272. $u-search-content-padding: 0 10px !default;

  273. $u-search-label-color: $u-main-color !default;

  274. $u-search-label-font-size: 14px !default;

  275. $u-search-label-margin: 0 4px !default;

  276. $u-search-close-size: 20px !default;

  277. $u-search-close-radius: 100px !default;

  278. $u-search-close-bgColor: #C6C7CB !default;

  279. $u-search-close-transform: scale(0.82) !default;

  280. $u-search-input-font-size: 14px !default;

  281. $u-search-input-margin: 0 5px !default;

  282. $u-search-input-color: $u-main-color !default;

  283. $u-search-input-placeholder-color: $u-tips-color !default;

  284. $u-search-action-font-size: 14px !default;

  285. $u-search-action-color: $u-main-color !default;

  286. $u-search-action-width: 0 !default;

  287. $u-search-action-active-width: 40px !default;

  288. $u-search-action-margin-left: 5px !default;

  289. 

  290. /* #ifdef H5 */

  291. // iOS15在H5下，hx的某些版本，input type=search时，会多了一个搜索图标，进行移除

  292. [type="search"]::-webkit-search-decoration {

  293.     display: none;

  294. }

  295. /* #endif */

  296. 

  297. .u-search {

  298. 	@include flex(row);

  299. 	align-items: center;

  300. 	flex: 1;

  301. 

  302. 	&__content {

  303. 		@include flex;

  304. 		align-items: center;

  305. 		padding: $u-search-content-padding;

  306. 		flex: 1;

  307. 		justify-content: space-between;

  308. 		border-width: 1px;

  309. 		border-color: transparent;

  310. 		border-style: solid;

  311. 		overflow: hidden;

  312. 

  313. 		&__icon {

  314. 			@include flex;

  315. 			align-items: center;

  316. 		}

  317. 

  318. 		&__label {

  319. 			color: $u-search-label-color;

  320. 			font-size: $u-search-label-font-size;

  321. 			margin: $u-search-label-margin;

  322. 		}

  323. 

  324. 		&__close {

  325. 			width: $u-search-close-size;

  326. 			height: $u-search-close-size;

  327. 			border-top-left-radius: $u-search-close-radius;

  328. 			border-top-right-radius: $u-search-close-radius;

  329. 			border-bottom-left-radius: $u-search-close-radius;

  330. 			border-bottom-right-radius: $u-search-close-radius;

  331. 			background-color: $u-search-close-bgColor;

  332. 			@include flex(row);

  333. 			align-items: center;

  334. 			justify-content: center;

  335. 			transform: $u-search-close-transform;

  336. 		}

  337. 

  338. 		&__input {

  339. 			flex: 1;

  340. 			font-size: $u-search-input-font-size;

  341. 			line-height: 1;

  342. 			margin: $u-search-input-margin;

  343. 			color: $u-search-input-color;

  344. 

  345. 			&--placeholder {

  346. 				color: $u-search-input-placeholder-color;

  347. 			}

  348. 		}

  349. 	}

  350. 

  351. 	&__action {

  352. 		font-size: $u-search-action-font-size;

  353. 		color: $u-search-action-color;

  354. 		width: $u-search-action-width;

  355. 		overflow: hidden;

  356. 		transition-property: width;

  357. 		transition-duration: 0.3s;

  358. 		/* #ifndef APP-NVUE */

  359. 		white-space: nowrap;

  360. 		/* #endif */

  361. 		text-align: center;

  362. 

  363. 		&--active {

  364. 			width: $u-search-action-active-width;

  365. 			margin-left: $u-search-action-margin-left;

  366. 		}

  367. 	}

  368. 

  369. 	&__reverse &__content__icon {

  370. 		order: 3;

  371. 	}

  372. 

  373. 	&__reverse &__content__close {

  374. 		order: 2;

  375. 	}

  376. }

  377. </style>