dialog弹框组件封装

移动端项目中使用 vut UI组件库。

比较常用的dialog弹出框和Picker 选择器，这两个的样式跟UI设计的不太一样，尤其是border边框在手机ios系统上有兼容问题。

dialog弹框组件

<template>
  <transition name="confirm-fade">
    <div
      v-if="isShowConfirm"
      class="my-confirm"
      @click.stop="clickFun('clickCancel')"
      @touchmove.prevent
    >
      <div class="confirm-content-wrap" @click.stop >
        <div class="service_type" >
          <li>{{title}}</li>
          <li class="service_content">{{content}}</li>
        </div>
        <div class="my-operation">
          <div class="confirm-btn" @click="clickFun('clickConfirm')">
            <p class="my-btn-text my-btn-text-left">{{cancelText}}</p>
          </div>
          <div class="confirm-btn" @click="sureBtn">
            <p class="my-btn-text">{{confirmText}}</p>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
      cancelText: "取消", // 取消按钮的文字
      confirmText: "确认", // 确认按钮的文字
      type: "confirm", // 表明弹框的类型：confirm - 确认弹窗（有取消按钮）；alert - 通知弹框（没有取消按钮）
      outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior，事件的函数提供判断到底是哪个事件触发的
      dataType: 0, //1.显示服务类型，2.显示照片
      imgUrl: "",
      title:"提示信息",
      content:"不能再改了"
    };
  },
  methods: {
    //确定的自定义事件
    sureBtn(){
      this.$emit("sureBtn")
     this.hidden();
    },
    show(config) {
      // dataType 显示的数据类型
      if (Object.prototype.toString.call(config) === "[object Object]") {
        // 确保用户传递的是一个对象
        this.cancelText = config.cancelText || "取消";
        this.confirmText = config.confirmText || "确认";
        this.type = config.type || "confirm";
        this.outerData = config.data || null;
        this.title  =config.title
        this.content = config.content
      }
      this.isShowConfirm = true;
    },
    hidden() {
      this.isShowConfirm = false;
      this.titleText = "操作提示";
      this.cancelText = "取消";
      this.confirmText = "确认";
      this.type = "confirm";
      this.outerData = null;
    },
    clickFun(type) {
      this.hidden();
    },
  },
};
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<style scoped>
.my-confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  /* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
/* 进入和出去的动画 */
.confirm-fade-enter-active {
  animation: opacity 0.3s;
}
.confirm-fade-enter-active .confirm-content-wrap {
  animation: scale 0.3s;
}
.confirm-fade-leave-active {
  animation: outOpacity 0.2s;
}
 
/* 包裹层容器样式 */
.confirm-content-wrap {
  width: 80%;
  position: absolute;
  left: 50%;  
        top:50%;      
        transform:translate(-50%,-50%);
  background-color: #fff;
  border-radius: 30px;
  z-index: 999;
  user-select: none;
}
 
/* 顶部标题部分 */
.my-confirm-title {
  padding-top: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #333;
}
 
/* 中间内容部分 */
.my-confirm-content {
  padding: 0 15px;
  padding-top: 20px;
  margin-bottom: 32px;
  text-align: center;
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}
 
/* 底部按钮样式 */
.my-operation {
  display: flex;
  border-top: 1px solid  #dedede;
}
.my-operation .my-cancel-btn,
.confirm-btn {
  flex: 1;
}
 
.my-operation .my-btn-text {
  text-align: center;
  font-size: 16px;
  padding:  34px 0 34px 0 36px;
}
.my-btn-text{
  text-align: center;
  font-size: 36px !important;
  color: #0064e3;
   padding: 20px 0;
}
.my-btn-text-left{
   border-right: 1px solid  #dedede;
}
/* 其他修饰样式 */
.my-border-right {
  border-right: 1px solid #eee;
}
 
 
 
/* 出去的动画 */
@keyframes outOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
 
.div_img {
 
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  user-select: none;
}
.img {
  display: block;
  width: 100%;
  height: 100%;
}
.service_type {
  padding: 50px 30px 20px 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.service_type li{
    margin-bottom: 30px;
    font-size: 30px;
}
.service_type_content{
        line-height: 36px;
      padding: 20px 0;
      font-size: 24px;
      color: #666666;
}
.service_type_title{
      line-height: 1;
      font-size: 28px;
      color: #1a1a1a;
      font-weight: bold;
}
.service_type .service_content {
  color: #999999;
}
</style>