|
- <template>
- <view :style="rootStyle" :class="className" class="cu-bar foot input">
- <input
- @focus="inputFocus"
- @blur="inputBlur"
- @input="input"
- @confirm="sendClick"
- :value="value"
- :adjust-position="false"
- :enableNative="false"
- :focus="false"
- :placeholder="placeholder"
- :disabled="inputDisabled"
- :confirm-hold="confirmHold"
- cursor-spacing="10"
- class="solid-bottom"
- confirm-type="send"
- type="text"
- />
- <slot name="action">
- <button @click="sendClick" :disabled="buttonDisabled" class="cu-btn bg-green shadow">发送</button>
- </slot>
- </view>
- </template>
-
- <script>
- export default {
- name: 'l-chat-input',
-
- props: {
- value: {},
- placeholder: {},
- inputDisabled: {},
- buttonDisabled: {},
- confirmHold: {}
- },
-
- data() {
- return { inputBottom: 0 }
- },
-
- methods: {
- input(e) {
- this.$emit('input', e.detail.value)
- this.$emit('change', e.detail.value)
- },
-
- inputFocus(e) {
- if (e && e.detail && e.detail.height) {
- this.inputBottom = e.detail.height
- }
- this.$emit('focus')
- },
-
- inputBlur(e) {
- this.inputBottom = 0
- this.$emit('blur')
- },
-
- sendClick(e) {
- this.$emit('sendMsg', this.value)
- }
- },
-
- computed: {
- rootStyle() {
- return this.getStyle({ bottom: this.inputBottom + 'px' })
- // return this.getStyle({ bottom: '0px' })
- }
- }
- }
- </script>
|
