You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-input.vue 8.9 KiB

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