如何长按保存，代码展示

最新推荐文章于 2022-12-05 14:59:57 发布

原创最新推荐文章于 2022-12-05 14:59:57 发布 · 894 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#如何实现长按显示

在这里插入代码片
html

 <div class="delete-button-show" @touchstart="showDeleteButton" @touchend="clearLoop">
  <div class="h" :class="{'delete-button-shows': isDeleting}">x</div>
<!-- @click="clickDelFloor(index)"-->

css

  <style >
  .delete-button-show{
    width: 100px;
    height: 100px;
    background: #ffe339;
  }
  .h{
    visibility:hidden;
  }
  .delete-button-shows{
    visibility: visible;
  }
</style>

script

<script>
  export default {
    data(){
      return{
        floors_list:[
          {
            list:'1'
          }, {
            list:'2'
          }, {
            list:'3'
          },
        ],
        isDeleting:false
      }
    },
    methods:{
      showDeleteButton() {
        clearInterval(this.Loop);//再次清空定时器，防止重复注册定时器
        this.Loop=setTimeout(()=>{
          this.isDeleting = true;
        },1000);
      },
      clearLoop() {
        clearInterval(this.Loop);
      },
    }
  }
</script>