<template>
  <div>
    <input
      type="text"
      class="ui-input"
      placeholder="https://"
      v-model.trim="hyperlink"
      @change="onUrlChange()"
    />
  </div>
</template>

<script>
export default {
  props:['link'],
  data(){
    return {
      hyperlink:this.link
    }
  },
  methods:{
    onUrlChange() {
            if (this.hyperlink) {
                if (!/^http(s)?:\/\//.test(this.hyperlink)) {
                    this.hyperlink =
                        window.location.protocol + "//" + this.hyperlink;
                }
            }
        },
  },
  watch:{
    hyperlink(newVal){
      this.$emit('linkChange',newVal)
    }
  }
}
</script>

<style lang="less" src="./style.less"></style>

<style lang="less" scoped>

</style>
