feiniao-farm-h5/src/views/old_mini/user/components/addPopup.vue

<template>
    <popup class="add-popup" round v-model:show="showAddPopup" :close-on-click-overlay="false">
        <div class="popup-title">添加分组</div>
        <el-input class="popup-input" v-model="input" placeholder="分组名" size="large" />
        <div class="popup-button">
            <div class="cancel" @click="showAddPopup = false">取消</div>
            <div class="confirm" @click="handleConfirm">确定</div>
        </div>
    </popup>
</template>

<script setup>
import { ref, watch } from "vue";
import { Popup} from "vant";

const props = defineProps({
    show:{
        type:Boolean,
        defalut:false
    }
})
const input = ref("");

const showAddPopup = ref(false)

watch(()=>props.show,()=>{
    input.value = ""
    showAddPopup.value = true
})

const emit = defineEmits(["confirm"]);

const handleConfirm = () => {
    showAddPopup.value = false;
    emit("confirm", input.value);
}
</script>

<style lang="scss" scoped>
.add-popup{
    width: 90%;
    padding: 20px 16px;
    .popup-title{
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 12px;
    }
    .popup-input{
        margin-bottom: 30px;
    }
    .popup-button{
        display: flex;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        div{
            flex: 1;
            font-size: 16px;
            padding: 9px;
            border-radius: 20px;
            background: #2199F8;
            color: #fff;
            text-align: center;
        }
        .cancel{
            margin-right: 20px;
            color: #000;
            background: #fff;
            border: 1px solid #999999;
        }
    }
}
</style>