u-input.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. <template>
  2. <view
  3. class="u-input"
  4. :class="{
  5. 'u-input--border': border,
  6. 'u-input--error': validateState
  7. }"
  8. :style="{
  9. padding: `0 ${border ? 20 : 0}rpx`,
  10. borderColor: borderColor,
  11. textAlign: inputAlign
  12. }"
  13. @click="inputClick"
  14. >
  15. <textarea
  16. v-if="type == 'textarea'"
  17. class="u-input__input u-input__textarea"
  18. :style="[getStyle]"
  19. :value="defaultValue"
  20. :placeholder="placeholder"
  21. :placeholderStyle="placeholderStyle"
  22. :disabled="disabled"
  23. :maxlength="inputMaxlength"
  24. :fixed="fixed"
  25. :focus="focus"
  26. :autoHeight="autoHeight"
  27. :selection-end="uSelectionEnd"
  28. :selection-start="uSelectionStart"
  29. :cursor-spacing="getCursorSpacing"
  30. :show-confirm-bar="showConfirmbar"
  31. :adjust-position="adjustPosition"
  32. @input="handleInput"
  33. @blur="handleBlur"
  34. @focus="onFocus"
  35. @confirm="onConfirm"
  36. />
  37. <view v-else-if="type === 'select'" class="u-input__input">
  38. <view :style="placeholderStyle" v-if="!defaultValue">{{placeholder}}</view>
  39. <view v-else style="line-height: normal;padding: 15rpx 0;">{{defaultValue}}</view>
  40. </view>
  41. <input
  42. v-else
  43. class="u-input__input"
  44. :type="type == 'password' ? 'text' : type"
  45. :style="[getStyle]"
  46. :value="defaultValue"
  47. :password="type == 'password' && !showPassword"
  48. :placeholder="placeholder"
  49. :placeholderStyle="placeholderStyle"
  50. :disabled="disabled"
  51. :maxlength="inputMaxlength"
  52. :focus="focus"
  53. :confirmType="confirmType"
  54. :cursor-spacing="getCursorSpacing"
  55. :selection-end="uSelectionEnd"
  56. :selection-start="uSelectionStart"
  57. :show-confirm-bar="showConfirmbar"
  58. :adjust-position="adjustPosition"
  59. @focus="onFocus"
  60. @blur="handleBlur"
  61. @input="handleInput"
  62. @confirm="onConfirm"
  63. />
  64. <view class="u-input__right-icon u-flex">
  65. <view class="u-input__right-icon__clear u-input__right-icon__item" @tap.stop="onClear" v-if="clearable && value != '' && (type !== 'select'?focused:true)">
  66. <u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
  67. </view>
  68. <view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
  69. <u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click.stop="showPassword = !showPassword"/>
  70. </view>
  71. <view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
  72. 'u-input__right-icon--select--reverse': selectOpen
  73. }">
  74. <u-icon name="arrow-right" size="26" color="#c0c4cc"></u-icon>
  75. </view>
  76. </view>
  77. </view>
  78. </template>
  79. <script>
  80. import Emitter from '../../libs/util/emitter.js';
  81. /**
  82. * input 输入框
  83. * @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。
  84. * @tutorial http://uviewui.com/components/input.html
  85. * @property {String} type 模式选择,见官网说明
  86. * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
  87. * @property {} v-model 用于双向绑定输入框的值
  88. * @property {String} input-align 输入框文字的对齐方式(默认left)
  89. * @property {String} placeholder placeholder显示值(默认 '请输入内容')
  90. * @property {Boolean} disabled 是否禁用输入框(默认false)
  91. * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
  92. * @property {String Number} selection-start 光标起始位置,自动聚焦时有效,需与selection-end搭配使用(默认-1)
  93. * @property {String Number} maxlength 光标结束位置,自动聚焦时有效,需与selection-start搭配使用(默认-1)
  94. * @property {String Number} cursor-spacing 指定光标与键盘的距离,单位px(默认0)
  95. * @property {String} placeholderStyle placeholder的样式,字符串形式,如"color: red;"(默认 "color: #c0c4cc;")
  96. * @property {String} confirm-type 设置键盘右下角按钮的文字,仅在type为text时生效(默认done)
  97. * @property {Object} custom-style 自定义输入框的样式,对象形式
  98. * @property {Boolean} focus 是否自动获得焦点(默认false)
  99. * @property {Boolean} fixed 如果type为textarea,且在一个"position:fixed"的区域,需要指明为true(默认false)
  100. * @property {Boolean} password-icon type为password时,是否显示右侧的密码查看图标(默认true)
  101. * @property {Boolean} border 是否显示边框(默认false)
  102. * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
  103. * @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true)
  104. * @property {String Number} height 高度,单位rpx(text类型时为70,textarea时为100)
  105. * @example <u-input v-model="value" :type="type" :border="border" />
  106. */
  107. export default {
  108. name: 'u-input',
  109. mixins: [Emitter],
  110. props: {
  111. value: {
  112. type: [String, Number],
  113. default: ''
  114. },
  115. // 输入框的类型,textarea,text,number
  116. type: {
  117. type: String,
  118. default: 'text'
  119. },
  120. inputAlign: {
  121. type: String,
  122. default: 'left'
  123. },
  124. placeholder: {
  125. type: String,
  126. default: '请输入内容'
  127. },
  128. disabled: {
  129. type: Boolean,
  130. default: false
  131. },
  132. maxlength: {
  133. type: [Number, String],
  134. default: 140
  135. },
  136. placeholderStyle: {
  137. type: String,
  138. default: 'color: #c0c4cc;'
  139. },
  140. confirmType: {
  141. type: String,
  142. default: 'done'
  143. },
  144. // 输入框的自定义样式
  145. customStyle: {
  146. type: Object,
  147. default() {
  148. return {};
  149. }
  150. },
  151. // 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
  152. fixed: {
  153. type: Boolean,
  154. default: false
  155. },
  156. // 是否自动获得焦点
  157. focus: {
  158. type: Boolean,
  159. default: false
  160. },
  161. // 密码类型时,是否显示右侧的密码图标
  162. passwordIcon: {
  163. type: Boolean,
  164. default: true
  165. },
  166. // input|textarea是否显示边框
  167. border: {
  168. type: Boolean,
  169. default: false
  170. },
  171. // 输入框的边框颜色
  172. borderColor: {
  173. type: String,
  174. default: '#dcdfe6'
  175. },
  176. autoHeight: {
  177. type: Boolean,
  178. default: true
  179. },
  180. // type=select时,旋转右侧的图标,标识当前处于打开还是关闭select的状态
  181. // open-打开,close-关闭
  182. selectOpen: {
  183. type: Boolean,
  184. default: false
  185. },
  186. // 高度,单位rpx
  187. height: {
  188. type: [Number, String],
  189. default: ''
  190. },
  191. // 是否可清空
  192. clearable: {
  193. type: Boolean,
  194. default: true
  195. },
  196. // 指定光标与键盘的距离,单位 px
  197. cursorSpacing: {
  198. type: [Number, String],
  199. default: 0
  200. },
  201. // 光标起始位置,自动聚焦时有效,需与selection-end搭配使用
  202. selectionStart: {
  203. type: [Number, String],
  204. default: -1
  205. },
  206. // 光标结束位置,自动聚焦时有效,需与selection-start搭配使用
  207. selectionEnd: {
  208. type: [Number, String],
  209. default: -1
  210. },
  211. // 是否自动去除两端的空格
  212. trim: {
  213. type: Boolean,
  214. default: true
  215. },
  216. // 是否显示键盘上方带有”完成“按钮那一栏
  217. showConfirmbar:{
  218. type:Boolean,
  219. default:true
  220. },
  221. // 弹出键盘时是否自动调节高度,uni-app默认值是true
  222. adjustPosition: {
  223. type: Boolean,
  224. default: true
  225. }
  226. },
  227. data() {
  228. return {
  229. defaultValue: this.value,
  230. inputHeight: 70, // input的高度
  231. textareaHeight: 100, // textarea的高度
  232. validateState: false, // 当前input的验证状态,用于错误时,边框是否改为红色
  233. focused: false, // 当前是否处于获得焦点的状态
  234. showPassword: false, // 是否预览密码
  235. lastValue: '', // 用于头条小程序,判断@input中,前后的值是否发生了变化,因为头条中文下,按下键没有输入内容,也会触发@input时间
  236. };
  237. },
  238. watch: {
  239. value(nVal, oVal) {
  240. this.defaultValue = nVal;
  241. // 当值发生变化,且为select类型时(此时input被设置为disabled,不会触发@input事件),模拟触发@input事件
  242. if(nVal != oVal && this.type == 'select') this.handleInput({
  243. detail: {
  244. value: nVal
  245. }
  246. })
  247. },
  248. },
  249. computed: {
  250. // 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,给用户可以传入字符串数值
  251. inputMaxlength() {
  252. return Number(this.maxlength);
  253. },
  254. getStyle() {
  255. let style = {};
  256. // 如果没有自定义高度,就根据type为input还是textarea来分配一个默认的高度
  257. style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
  258. this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
  259. style = Object.assign(style, this.customStyle);
  260. return style;
  261. },
  262. //
  263. getCursorSpacing() {
  264. return Number(this.cursorSpacing);
  265. },
  266. // 光标起始位置
  267. uSelectionStart() {
  268. return String(this.selectionStart);
  269. },
  270. // 光标结束位置
  271. uSelectionEnd() {
  272. return String(this.selectionEnd);
  273. }
  274. },
  275. created() {
  276. // 监听u-form-item发出的错误事件,将输入框边框变红色
  277. this.$on('on-form-item-error', this.onFormItemError);
  278. },
  279. methods: {
  280. /**
  281. * change 事件
  282. * @param event
  283. */
  284. handleInput(event) {
  285. let value = event.detail.value;
  286. // 判断是否去除空格
  287. if(this.trim) value = this.$u.trim(value);
  288. // vue 原生的方法 return 出去
  289. this.$emit('input', value);
  290. // 当前model 赋值
  291. this.defaultValue = value;
  292. // 过一个生命周期再发送事件给u-form-item,否则this.$emit('input')更新了父组件的值,但是微信小程序上
  293. // 尚未更新到u-form-item,导致获取的值为空,从而校验混论
  294. // 这里不能延时时间太短,或者使用this.$nextTick,否则在头条上,会造成混乱
  295. setTimeout(() => {
  296. // 头条小程序由于自身bug,导致中文下,每按下一个键(尚未完成输入),都会触发一次@input,导致错误,这里进行判断处理
  297. // #ifdef MP-TOUTIAO
  298. if(this.$u.trim(value) == this.lastValue) return ;
  299. this.lastValue = value;
  300. // #endif
  301. // 将当前的值发送到 u-form-item 进行校验
  302. this.dispatch('u-form-item', 'on-form-change', value);
  303. }, 40)
  304. },
  305. /**
  306. * blur 事件
  307. * @param event
  308. */
  309. handleBlur(event) {
  310. // 最开始使用的是监听图标@touchstart事件,自从hx2.8.4后,此方法在微信小程序出错
  311. // 这里改为监听点击事件,手点击清除图标时,同时也发生了@blur事件,导致图标消失而无法点击,这里做一个延时
  312. let value = event.detail.value;
  313. setTimeout(() => {
  314. this.focused = false;
  315. }, 100)
  316. // vue 原生的方法 return 出去
  317. this.$emit('blur', value);
  318. setTimeout(() => {
  319. // 头条小程序由于自身bug,导致中文下,每按下一个键(尚未完成输入),都会触发一次@input,导致错误,这里进行判断处理
  320. // #ifdef MP-TOUTIAO
  321. if(this.$u.trim(value) == this.lastValue) return ;
  322. this.lastValue = value;
  323. // #endif
  324. // 将当前的值发送到 u-form-item 进行校验
  325. this.dispatch('u-form-item', 'on-form-blur', value);
  326. }, 40)
  327. },
  328. onFormItemError(status) {
  329. this.validateState = status;
  330. },
  331. onFocus(event) {
  332. this.focused = true;
  333. this.$emit('focus');
  334. },
  335. onConfirm(e) {
  336. this.$emit('confirm', e.detail.value);
  337. },
  338. onClear(event) {
  339. this.handleInput({detail:{value:''}})
  340. this.$emit('clear', '');
  341. },
  342. inputClick() {
  343. this.$emit('click');
  344. }
  345. }
  346. };
  347. </script>
  348. <style lang="scss" scoped>
  349. @import "../../libs/css/style.components.scss";
  350. .u-input {
  351. position: relative;
  352. flex: 1;
  353. @include vue-flex;
  354. &__input {
  355. //height: $u-form-item-height;
  356. font-size: 28rpx;
  357. color: $u-main-color;
  358. flex: 1;
  359. }
  360. &__textarea {
  361. width: auto;
  362. font-size: 28rpx;
  363. color: $u-main-color;
  364. padding: 10rpx 0;
  365. line-height: normal;
  366. flex: 1;
  367. }
  368. &--border {
  369. border-radius: 6rpx;
  370. border-radius: 4px;
  371. border: 1px solid $u-form-item-border-color;
  372. }
  373. &--error {
  374. border-color: $u-type-error!important;
  375. }
  376. &__right-icon {
  377. &__item {
  378. margin-left: 10rpx;
  379. }
  380. &--select {
  381. transition: transform .4s;
  382. &--reverse {
  383. transform: rotate(-180deg);
  384. }
  385. }
  386. }
  387. }
  388. </style>