popup-slider v1.0.1

XW_slider

XW_slider - 欣网专用 这是业务开发的公共滑块组件，外部使用时通过v-if来控制滑块组件的显示/隐藏。滑块校验成功时会触发success事件。

安装

  npm install xw-slider

使用

• 1、在main.js中，导入并安装xw-slider插件
• 2、在父组件模板中，直接使用滑块组件并注册success事件

示例

<template>
  <div class="page">
    <div
      class="btn"
      @click="
        popType = 'show';
        status = null;
      "
    >
      显示弹窗
    </div>
    <div class="check_res">检验结果：{{ status }}</div>
    <div class="popup_contianer" v-if="popType">
      <div class="popup_content">
        <div class="popup_title">这是弹窗标题</div>
        <div class="popup_desc">这是弹窗文案</div>
        <!--滑块组件-->
        <slide @success="success" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popType: null,
      status: null
    }
  },
  methods: {
    success() {
      this.status = '通过'
      this.popType = null
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  padding: 50px;
  min-height: 100vh;
  background-color: #e5e5e5;
}
.btn {
  width: 150px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 5%;
  color: pink;
  background-color: #fff;
}
.check_res {
  height: 150px;
  line-height: 150px;
}
.popup_contianer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  .popup_content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 600px;
    padding: 80px 0;
    background-color: #fff;
    border-radius: 10px;
  }
  .popup_desc {
    line-height: 400px;
  }
}
</style>