message.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <cover-view class="div">
  3. <cover-view class="div class="input-box"" :style="'bottom:'+displayInputBottom">
  4. <input class="message-input" v-model="text" :disabled="!isTimReady" :placeholder="isTimReady?'我想问主播...':'初始化中,请稍等'" placeholder-style="color:#fff;font-size:12px" type="text"
  5. />
  6. <cover-view class="div common-btn ds-button-small submit" @click="confirm()">发送</cover-view>
  7. </cover-view>
  8. </cover-view>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. isTimReady: {
  14. type: Boolean,
  15. default: false
  16. }
  17. },
  18. data () {
  19. return {
  20. text: '',
  21. displayInputBottom: '0px'
  22. }
  23. },
  24. methods: {
  25. confirm () {
  26. this.$emit('send-message', this.text)
  27. this.text = ''
  28. }
  29. },
  30. computed: {}
  31. }
  32. </script>
  33. <style lang="scss" scoped>
  34. .input-box{display: flex;}
  35. .message-input {
  36. height: 64rpx;
  37. width: 226rpx;
  38. border-radius: 40rpx;
  39. border-radius: 40rpx;
  40. padding-left: 20rpx;
  41. padding-right: 20rpx;
  42. line-height: 64rpx;
  43. border: 0;
  44. /* #ifndef APP-PLUS-NVUE */
  45. outline: none;
  46. /* #endif */
  47. font-size:12px;
  48. color: #fff;
  49. /* #ifndef APP-PLUS-NVUE */
  50. background: none;
  51. /* #endif */
  52. }
  53. .submit{margin-left: auto;}
  54. </style>