index.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view class="en-box">
  3. <input class="en-input sys-size-32 text-color-12 sys-weight-600 "
  4. placeholder-class="sys-size-28 text-color-999 sys-weight-400"
  5. :maxlength="maxlength"
  6. :type="type"
  7. :placeholder="placeholder ? placeholder : ''"
  8. :disabled="!!disabled"
  9. v-model="inputValue"
  10. ></input>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name:'en-input',
  16. props: {
  17. type: {
  18. type: String,
  19. default: 'text'
  20. },
  21. placeholder: {
  22. type: String,
  23. default: '请输入'
  24. },
  25. disabled: {
  26. default: false
  27. },
  28. name: {
  29. type: String,
  30. default: 'text'
  31. },
  32. value: {
  33. default: ''
  34. },
  35. maxlength:{
  36. default:140
  37. }
  38. },
  39. data() {
  40. return {
  41. inputValue: '',
  42. };
  43. },
  44. watch: {
  45. 'value': function () {
  46. if (this.inputValue !== this.value) {
  47. this.inputValue = this.value
  48. }
  49. },
  50. 'inputValue': function () {
  51. this.$emit('input', this.inputValue)
  52. }
  53. },
  54. mounted() {
  55. this.inputValue = this.value
  56. },
  57. methods: {
  58. }
  59. }
  60. </script>
  61. <style lang="scss">
  62. .en-input{
  63. .en-input{
  64. width: 100%;
  65. }
  66. .en-input-placeholder{
  67. color: #999999;
  68. font-size: 28rpx;
  69. }
  70. }
  71. </style>