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>