康巴易测肤/伤疤uniapp小程序类
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 6.4KB

1 month ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <uvInput
  3. :value="value"
  4. :type="type"
  5. :fixed="fixed"
  6. :disabled="disabled"
  7. :disabledColor="disabledColor"
  8. :clearable="clearable"
  9. :password="password"
  10. :maxlength="maxlength"
  11. :placeholder="placeholder"
  12. :placeholderClass="placeholderClass"
  13. :placeholderStyle="placeholderStyle"
  14. :showWordLimit="showWordLimit"
  15. :confirmType="confirmType"
  16. :confirmHold="confirmHold"
  17. :holdKeyboard="holdKeyboard"
  18. :focus="focus"
  19. :autoBlur="autoBlur"
  20. :disableDefaultPadding="disableDefaultPadding"
  21. :cursor="cursor"
  22. :cursorSpacing="cursorSpacing"
  23. :selectionStart="selectionStart"
  24. :selectionEnd="selectionEnd"
  25. :adjustPosition="adjustPosition"
  26. :inputAlign="inputAlign"
  27. :fontSize="fontSize"
  28. :color="color"
  29. :prefixIcon="prefixIcon"
  30. :suffixIcon="suffixIcon"
  31. :suffixIconStyle="suffixIconStyle"
  32. :prefixIconStyle="prefixIconStyle"
  33. :border="border"
  34. :readonly="readonly"
  35. :shape="shape"
  36. :customStyle="customStyle"
  37. :formatter="formatter"
  38. :ignoreCompositionEvent="ignoreCompositionEvent"
  39. @focus="e => $emit('focus', e)"
  40. @blur="e => $emit('blur', e)"
  41. @keyboardheightchange="e => $emit('keyboardheightchange', e)"
  42. @change="e => $emit('change', e)"
  43. @input="e => $emit('input', e)"
  44. @confirm="e => $emit('confirm', e)"
  45. @clear="$emit('clear')"
  46. @click="$emit('click')"
  47. >
  48. <!-- #ifdef MP -->
  49. <slot name="prefix"></slot>
  50. <slot name="suffix"></slot>
  51. <!-- #endif -->
  52. <!-- #ifndef MP -->
  53. <slot name="prefix" slot="prefix"></slot>
  54. <slot name="suffix" slot="suffix"></slot>
  55. <!-- #endif -->
  56. </uvInput>
  57. </template>
  58. <script>
  59. /**
  60. * 此组件存在的理由是,在nvue下,u-input被uni-app官方占用了,u-input在nvue中相当于input组件
  61. * 所以在nvue下,取名为u--input,内部其实还是u-input.vue,只不过做一层中转
  62. */
  63. import uvInput from '../u-input/u-input.vue';
  64. import props from '../u-input/props.js'
  65. /**
  66. * Input 输入框
  67. * @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。
  68. * @tutorial https://uviewui.com/components/input.html
  69. * @property {String | Number} value 输入的值
  70. * @property {String} type 输入框类型,见上方说明 ( 默认 'text' )
  71. * @property {Boolean} fixed 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true,兼容性:微信小程序、百度小程序、字节跳动小程序、QQ小程序 ( 默认 false )
  72. * @property {Boolean} disabled 是否禁用输入框 ( 默认 false )
  73. * @property {String} disabledColor 禁用状态时的背景色( 默认 '#f5f7fa' )
  74. * @property {Boolean} clearable 是否显示清除控件 ( 默认 false )
  75. * @property {Boolean} password 是否密码类型 ( 默认 false )
  76. * @property {String | Number} maxlength 最大输入长度,设置为 -1 的时候不限制最大长度 ( 默认 -1 )
  77. * @property {String} placeholder 输入框为空时的占位符
  78. * @property {String} placeholderClass 指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/ ( 默认 'input-placeholder' )
  79. * @property {String | Object} placeholderStyle 指定placeholder的样式,字符串/对象形式,如"color: red;"
  80. * @property {Boolean} showWordLimit 是否显示输入字数统计,只在 type ="text"或type ="textarea"时有效 ( 默认 false )
  81. * @property {String} confirmType 设置右下角按钮的文字,兼容性详见uni-app文档 ( 默认 'done' )
  82. * @property {Boolean} confirmHold 点击键盘右下角按钮时是否保持键盘不收起,H5无效 ( 默认 false )
  83. * @property {Boolean} holdKeyboard focus时,点击页面的时候不收起键盘,微信小程序有效 ( 默认 false )
  84. * @property {Boolean} focus 自动获取焦点,在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。nvue 页面不支持,需使用组件的 focus()、blur() 方法控制焦点 ( 默认 false )
  85. * @property {Boolean} autoBlur 键盘收起时,是否自动失去焦点,目前仅App3.0.0+有效 ( 默认 false )
  86. * @property {Boolean} disableDefaultPadding 是否去掉 iOS 下的默认内边距,仅微信小程序,且type=textarea时有效 ( 默认 false )
  87. * @property {String | Number} cursor 指定focus时光标的位置( 默认 -1 )
  88. * @property {String | Number} cursorSpacing 输入框聚焦时底部与键盘的距离 ( 默认 30 )
  89. * @property {String | Number} selectionStart 光标起始位置,自动聚集时有效,需与selection-end搭配使用 ( 默认 -1 )
  90. * @property {String | Number} selectionEnd 光标结束位置,自动聚集时有效,需与selection-start搭配使用 ( 默认 -1 )
  91. * @property {Boolean} adjustPosition 键盘弹起时,是否自动上推页面 ( 默认 true )
  92. * @property {String} inputAlign 输入框内容对齐方式( 默认 'left' )
  93. * @property {String | Number} fontSize 输入框字体的大小 ( 默认 '15px' )
  94. * @property {String} color 输入框字体颜色 ( 默认 '#303133' )
  95. * @property {Function} formatter 内容式化函数
  96. * @property {String} prefixIcon 输入框前置图标
  97. * @property {String | Object} prefixIconStyle 前置图标样式,对象或字符串
  98. * @property {String} suffixIcon 输入框后置图标
  99. * @property {String | Object} suffixIconStyle 后置图标样式,对象或字符串
  100. * @property {String} border 边框类型,surround-四周边框,bottom-底部边框,none-无边框 ( 默认 'surround' )
  101. * @property {Boolean} readonly 是否只读,与disabled不同之处在于disabled会置灰组件,而readonly则不会 ( 默认 false )
  102. * @property {String} shape 输入框形状,circle-圆形,square-方形 ( 默认 'square' )
  103. * @property {Object} customStyle 定义需要用到的外部样式
  104. * @property {Boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理。
  105. * @example <u--input v-model="value" :password="true" suffix-icon="lock-fill" />
  106. */
  107. export default {
  108. name: 'u--input',
  109. mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
  110. components: {
  111. uvInput
  112. },
  113. }
  114. </script>