在 VueJS 中单击 link 时显示 Div/Flash 消息

Question

在我的 laravel/Vue 应用程序中，我有以下组件可以在 link 单击

时将文本复制到剪贴板

<a @click="copyURL" ref="mylink">
        <img class="social_icon" 
          src="/images/game/copy.png"
        /></a>
        <input type="text" class="copyurl_txt" 
        value="https://sample.site/" ref="text"></input>

我在 script

中有关注

<script>
export default {
methods: {
        copyURL() {
          this.$refs.text.select();
          document.execCommand('copy');
          alert('link copied');
        }
      },
};
</script>

现在我想知道如何在 div.or 中显示 link 复制的消息而不是打开警告框如何将该消息显示为 Flash 消息

Answer 1

我们可以将 flash 消息作为属性添加到 Vue 组件，并确定何时显示消息的真实性：

export default {
data () {
  return {
    flash: ''
  }
},
methods: {
  copyURL() {
    this.$refs.text.select();
    document.execCommand('copy');
    this.flash = 'link copied';
  }
}

现在我们可以添加一个 div 和 v-if="flash" 来确定何时显示它：

<div v-if="flash" v-text="flash"></div>

现在您的 div 和 flash 值只会在用户复制 link 时出现。

奖金

如果您的目标是在指定的时间段后隐藏该即时消息，我们可以设置一个观察器，它建立一个 setTimeout 方法，该方法将在一段时间后清除该消息。像这样：

export default {
  data () {
    return {
      flash: '',
      flashTick: null
    }
  },
  methods: {
    clearTick() {
      if (this.flashTick) {
        window.clearTimeout(this.flashTick)
      }  
      this.flashTick = null
    },
    copyURL() {
      this.$refs.text.select();
      document.execCommand('copy');
      this.flash = 'link copied';
    }
  },
  watch: {
    flash: function (newValue, oldValue) {
      if (newValue !== oldValue && newValue) {
        // first we must clear the old tick if it exists
      
        this.clearTick()

        this.flashTick = window.setTimeout( () => {
          this.flash = ''
        }, 3000)   
      }
    }
  },
  beforeDestroy() {
    this.clearTick()
  }
}

我们建立对 tick（超时）自身的引用，以便可以清理和删除它。
我们已经在 flash 变量上设置了观察器。
我们已经确保我们在 flash 上设置的值与旧值不匹配（以防止重复）并且我们确保设置了新值（因此当我们设置 this.flash = ''
我们在隐藏闪现消息之前设置了 3000 毫秒（3 秒）的超时时间
我们在 beforeDestroy() 中添加了一个挂钩，以在组件被移除时（例如导航离开，或使用条件隐藏组件）清除勾号和闪现消息

在 VueJS 中单击 link 时显示 Div/Flash 消息

Display a Div/Flash message on link click in VueJS

javascript

laravel

vue.js

vue-component