index.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. showShake:false
  43. };
  44. },
  45. watch: {
  46. 'value': function () {
  47. if (this.inputValue !== this.value) {
  48. this.inputValue = this.value
  49. }
  50. },
  51. 'inputValue': function () {
  52. this.$emit('input', this.inputValue)
  53. }
  54. },
  55. mounted() {
  56. this.inputValue = this.value
  57. },
  58. methods: {
  59. }
  60. }
  61. </script>
  62. <style lang="scss">
  63. .en-input{
  64. .en-input{
  65. width: 100%;
  66. }
  67. .en-input-placeholder{
  68. color: #999999;
  69. font-size: 28rpx;
  70. }
  71. }
  72. </style>