Vue

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-longpress.min.js"></script>
<div id="app">
  <longpress 
    ref="btn"
    class="btn btn-primary"
    duration="3" 
    :on-confirm="doDelete"
    pressing-text="{$rcounter} 秒後に削除します。" 
    action-text="削除中です・・・">長押しでボタンを削除する</longpress>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align:center;
}

li {
  margin: 8px 0;
}

Vue

const VueLongpress = window['VueLongpress'];

new Vue({
  el: '#app',
  components: {
    longpress: VueLongpress
  },
  methods: {
    doDelete() {
      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
    }
  }
});