uniapp 弹窗组件的封装

uniapp 弹窗组件的封装

弹窗样式在全局样式文件 glabal.css

在这里不做添加 内容在另一篇 css常用布局样式

css 文件用于移动端应用 微信小程序 Android App

在 App.vue 中引入全局样式

<style>
/* 全局通用样式  */
@import "@/common/css/global.css";

/* 定义通用样式 */
:root {
  --back: #f8f8f8;
  --primary: #409eff;
  --warning: #e6a23c;
  --success: #67c23a;
  --info: #6c757d;
  --danger: #f56c6c;
  --white: #ffffff;
  --black: #333333;
}

 /* 使用 var() 使用  */
 .container {
    color: var(--black);
    background-color: var(--back);
 }

</style>

通过全局引入 或者 局部引用 使用 弹窗组件 pop

在 father.vue 中使用, 以及使用中的相关属性

• pop_type : 弹窗类型

• input : 输入框类型
• content : 弹窗显示文本, 不含输入框

• title : 弹窗标题
• cancel : 弹窗右边按钮内容
• confirm : 弹窗左边按钮内容
• content : 弹窗中显示内容
• inp_placeholder : 使用输入框类型弹窗, 输入框提示内容
• @cancel : 弹窗右边按钮触发函数
• @confirm : 弹窗左边按钮触发函数

props 参数均含有默认值, 不做显示是仍需要在父组件中声明变量输入 空值

<template>
  <div>
    <my-pop
      :pop_type="pop_type"
      :title="title"
      :cancel="cancel"
      :confirm="confirm"
      :content="conteng"
      :inp_placeholder="inp_placeholder"
      @confirm="popConfirm"
      @Cancel="popCancel"
    ></my-pop>
  </div>
</template>
<script>
import pop from "@/component/pop";
export default {
  name: "HelloView",
  components: {
    "my-pop": pop,
  },
  data() {
    return {
      pop_type: "content",
      title: "弹窗标题",
      cancel: "取消",
      confirm: "确认",
      content: "弹窗显示的文本内容",
      inp_placeholder: "请输入内容",
    };
  },
  methods: {
    // 弹窗左边按钮触发函数
    popConfirm(e) {
      // e 用于接受弹窗传递的数据
      // 点击函数触发弹窗 confirm
      console.log("click confirm");
    },
    // 弹窗右边按钮触发函数
    popCancel() {
      console.log("click cancel");
    },
  },
};
</script>

弹窗组件封装

<template>
  <view>
    <view class="confirm" v-if="show_pop">
      <view class="mian pop h-w80  h-bgc-white h-border-r-5">
        <form @submit="Confirm" @reset="Cancel">
          <view class="title h-input-title h-f4">{{ title }}</view>
          <!-- 不同的输入框类型 -->
          <view class="input" v-if="pop_type_ == 'input'">
            <view class="todolist h-flex-around h-m-auto h-p-4 h-w90 h-m-auto">
              <input
                type="text"
                class="h-btn-radius h-pl-5 h-w80"
                :placeholder="inp_placeholder"
                name="value"
              />
            </view>
          </view>

          <view class="input" v-if="pop_type_ == 'submit'">
            <view class="todolist h-flex-around h-m-4 h-w90 h-m-auto">
              <view class="">
                {{ content }}
              </view>
            </view>
          </view>

          <view class="btn h-w90 h-m-auto h-flex h-mb-4">
            <button 
              form-type="submit" 
              class="h-w45 h-btn-radius h-bgc-primary">
                {{ confirm }}
            </button>
            <button 
              form-type="reset" 
              class="h-w45 h-btn-radius h-btn-reset">
                {{ cancel }}
            </button>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "pop",
  props: {
    /**
     * pop_type: 弹窗类型
     * 				input: 输入
     * 				submit: 只显示文本
     */
    pop_type: {
      // 弹窗类型
      type: String,
      default: "input",
    },
    title: {
      // 弹窗标题
      type: String,
      default: "添加待办事项",
    },
    cancel: {
      // 右边按钮显示内容
      type: String,
      default: "取消",
    },
    confirm: {
      // 左边按钮显示内容, 只在 confirm 中向父组件传递数据
      type: String,
      default: "添加",
    },
    content: {
      // 弹窗显示内容文本
      type: String,
      default: "显示文本内容",
    },
    inp_placeholder: {
      // 弹窗输入框中提示内容
      type: String,
      default: "请输入内容",
    },
  },
  data() {
    return {
      // 是否显示弹窗
      show_pop: false,
      // 弹窗类型用于展示不同类型弹窗
      pop_type_: this.pop_type,
    };
  },
  methods: {
    open() {
      // 打开弹窗
      this.show_pop = true;
    },
    close() {
      // 关闭弹窗
      this.show_pop = false;
    },
    // 点击确认函数
    Confirm(e) {
      // 输入框弹窗类型向父组件传递弹窗中输入的参数
      // 使用 $emit 向父组件传值
      if (this.pop_type_ == "inpiut") {
        let { value } = e.detail.value;
        this.$emit("confirm", value);
      } else {
        this.$emit("confirm");
      }

      this.close();
    },

    Cancel() {
      // 点击取消函数
      this.$emit("cancel");
      this.close();
    },
  },
};
</script>