AsUI

复杂操作

# 点击外部

v-as-clickoutside表示点击外部指令,其可以传入一个回调方法。如下例子中，若是pc端可以打开控制台观察打印信息。

<template>
  <div class="t-click-outside-area">
    <button v-as-clickoutside="handleClickOut">点击元素外部</button>
  </div>
</template>

<script>
export default {
  name: "t-long-press",
  methods: {
    handleClickOut() {
      console.log('外部元素触发')
    }
  }
}
</script>
<style>
.t-click-outside-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-click-outside-area>button{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
}
</style>
Expand Copy

# 伸缩点击

用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在页面上的排列布局。可传入的参数为:上右下左扩展的范围,单位为px,默认向外扩展10px(界面上看不出来)。

参数 默认值 说明
top,right,bottom,left 10,10,10,10 上右下左扩展宽度(逗号分割),类型为String,非必填值

v-as-expandclick表示伸缩点击指令,代码如下:

<template>
  <div class="t-expand-click-area">
    <div v-as-expandclick="20,30,40,50"></div>
  </div>
</template>

<script>
export default {
  name: "t-expand-click",
  data () {
    return {
    }
  }
}
</script>

<style>
.t-expand-click-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-expand-click-area>div{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 50px;
  height: 50px;
}
</style>
Expand Copy

# 弹框滚动

v-as-scroll-pop表示弹框滚动指令,该指令传的值是css中scroll-behavior的属性,如smooth。如下,点击显示弹框按钮,页面中弹框以外区域的滚动条不再显示。

<template>
  <div class="t-scroll-pop-area">
    <button class="show-scroll-pop-btn" @click="showScrollPop">显示弹框</button>

    <!--    v-as-scroll-pop="'smooth'"-->
    <div class="scroll-pop" v-if="isScrollPopShow" v-as-scroll-pop="'smooth'" v-as-clickoutside="handleCloseScrollPop">
      <div class="content">
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
        <p>这是很长一段文字，请耐心读完，然后你会发现这段文字并没有什么意义。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-scroll-pop",
  data(){
    return{
      isScrollPopShow:false,
    }
  },
  methods:{
    showScrollPop(){
      this.isScrollPopShow=true;
    },
    handleCloseScrollPop(){
      this.isScrollPopShow=false;
    },
  }
}
</script>

<style>
.t-scroll-pop-area{
  width: 100%;
  height: 300px;
  position: relative;
}
.t-scroll-pop-area .show-scroll-pop-btn{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
  box-sizing: border-box;
}
.t-scroll-pop-area .scroll-pop{
  position:absolute;
  left: 10%;
  top: 20%;
  width: 80%;
  height: 70%;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 1px #DCDCDC;

}
.t-scroll-pop-area .scroll-pop .content{
  margin-left: 10%;
  width: 80%;
  height: 100%;
}
.t-scroll-pop-area .scroll-pop .content p{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
Expand Copy

# 响应收缩

v-as-resize表示响应收缩指令,该指令传一个回调方法。代码如下:

<template>
  <div class="t-resize-area">
    <button @click="changeContainerWidth">改变测试容器的宽度</button>
    <div v-as-resize="resize" class="t-resize-container"></div>
  </div>
</template>

<script>
export default {
  name: "t-resize",
  methods: {
    changeContainerWidth(){
      let dom=document.querySelector(".t-resize-container");
      dom.style.width=Math.max(Math.ceil(Math.random()*200),20)+'px'
    },
    resize() {
      let dom=document.querySelector(".t-resize-container");
      let width=dom.clientWidth;
      let height=dom.clientHeight;
      console.log(`container正在缩放,宽度是${width}px,高度是${height}px`);
    }
  },
}
</script>

<style>
.t-resize-area{
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.t-resize-area>button{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 160px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
}
.t-resize-area .t-resize-container{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  outline: none;
  border: none;
  color: #ffffff;
  margin-top: 20px;
}
</style>
Expand Copy

← 规范化显示 →