热土豆1号

自定义vue-lite-popup组件

发表于  | 

在移动端开发时，经常会用到popupwindow这样的弹窗控件，给用户进行选项操作，android和ios中原生提供了这类控件，而在移动端前端中这类控件需要自己定义。我这里采用webpack+vue自定一个popup控件，可以在其他vue项目中直接使用。

如何使用

效果:

  1. 安装npm依赖
    npm install vue-lite-popup --save

  2. 在入口处引入库

    1
    2
    3
    import PopupPlugin from 'vue-lite-popup';
    import PopupPluginCss from 'vue-lite-popup/dist/style.css'
    Vue.use(PopupPlugin);

  3. 在页面中使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <template>
      <div class="page">
        <div v-for="(item,index) in dataList" :key="index" class="list-item">
          <div>{{index}}---</div>
          <div>{{item}}</div>
          <div style="margin-left: auto" @click="onItemClick($event,index,item)"> . . . </div>
        </div>
        <Popup ref="popupRef">
          <div class="popup-option">
            <div style="height: 50%" @click="clickAttention">关注</div>
            <div style="height: 50%" @click="clickCancelAttention">取消关注</div>
          </div>
        </Popup>
      </div>
    </template>
    <script>
    //  import {Popup} from './../dist/index';
      export default {
        data () {
          return {
            dataList:[],
          }
        },
        mounted(){
          for(let i=0;i<20;i++){
            this.dataList.push('__'+i+'__');
          }
        },
        methods:{
          onItemClick(event,index,item){
            this.$refs.popupRef.showWithAchor(event.target,-90,10);
          },
          clickAttention(){
            console.log('关注');
            this.$refs.popupRef.close();
          },
          clickCancelAttention(){
            console.log('取消关注');
            this.$refs.popupRef.close();
          }
        },
    //    components:{Popup}
      }
    </script>
    <style>
      @import './normalize.css';
      .page{
        width: 100%;
        height: 100%;
        overflow: auto;
      }
      .list-item{
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 8px;
        margin-top: 3px;
        background: gray;
      }
      .popup-option{
        height: 60px;
        padding: 10px;
        background: #42b983;
      }
    </style>

如何实现popup控件

  • 项目目录

  • 实现关键点：当点击页面上任意一个dom节点时，可以通过zepto的offset()返回或设置匹配元素相对于文档的偏移。然后就可以设置popop控件的内容部分相对于文档的偏移量，通过方法控制这个popup控件展示与否，即可实现这个效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
show(x,y){
    $(".popup-layer").children().css({left:x,top:y});
    $(".popup-layer").children().click(function (event) {
      event.stopPropagation();
    });
    this.showFlag=true;
},
showWithAchor(dom,dx,dy){
	let offsetValue=$(dom).offset();
	let left=offsetValue.left+dom.offsetWidth+dx;
	let top=offsetValue.top+dom.offsetHeight+dy;
	this.show(left,top);
}

如何在npm上发布控件

  1. 在npm上注册一个账号
  2. npm adduser
  3. npm publish

发布库的名称(package.json中的name)不能和npm上已有的重名，因此发布之前请检查

参考

  1. http://www.w3school.com.cn/jquery/css_offset.asp
  2. https://segmentfault.com/a/1190000006250554
  3. http://www.w2bc.com/Article/50764