| | |
| | | <template> |
| | | <div class="buy-input relative"> |
| | | <img class="w-40 h-40 absolute left-24" src="~@/assets/image/payment/search.png" alt="" /> |
| | | <input class="w-full box-border pl-80" :readonly="readonly" type="text" :value="value" :placeholder="placeholder" @input="changeVal" |
| | | @focus="focus" /> |
| | | <img |
| | | class="w-40 h-40 absolute left-24" |
| | | src="~@/assets/image/payment/search.png" |
| | | alt="" |
| | | /> |
| | | <input |
| | | class="w-full box-border pl-80" |
| | | :readonly="readonly" |
| | | type="text" |
| | | :value="value" |
| | | :placeholder="placeholder" |
| | | @input="changeVal" |
| | | @focus="focus" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'BuyInput', |
| | | props: ['value', 'placeholder','isReadonly'], |
| | | name: "BuyInput", |
| | | props: ["value", "placeholder", "isReadonly"], |
| | | data() { |
| | | return { |
| | | readonly: false |
| | | } |
| | | readonly: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | if(this.isReadonly) { |
| | | this.readonly = this.isReadonly |
| | | } else { |
| | | this.readonly = false |
| | | } |
| | | if (this.isReadonly) { |
| | | this.readonly = this.isReadonly; |
| | | } else { |
| | | this.readonly = false; |
| | | } |
| | | }, |
| | | methods: { |
| | | focus(e) { |
| | | this.$emit('focus', e.target.value) |
| | | this.$emit("focus", e.target.value); |
| | | }, |
| | | changeVal(e) { |
| | | this.$emit('input', e.target.value) |
| | | this.$emit("input", e.target.value); |
| | | }, |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |