AI销管
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-input.vue 11 KiB

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