gypsy-crm-frontend-vu/components/cwg-tips-popup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
        <view class="popup-content">
            <view v-if="title" class="des1"
                style="font-size: 16px;font-weight: bold; line-height: 1.6; margin: 30px 0 50px" v-t="title" />
            <view v-if="content" class="des1" style="font-size: 15px; line-height: 1.6; margin: 30px 0 50px"
                v-t="content" />
            <view v-else class="des1" style="font-size: 15px; line-height: 1.6; margin: 30px 0 50px" v-t="content">
            </view>
            <cwg-rich-text class="popup-text" :nodes="introduce" />
        </view>
        <template #footer>
            <button @click="visible = false">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="tosubmitConfirm">{{ t('Btn.Confirm') }}</button>
        </template>
    </cwg-popup>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    // 弹窗标题
    title: {
        type: String,
        default: ''
    },
    // 弹窗内容
    content: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    },
    // 弹窗富文本内容
    introduce: {
        type: String,
        default: ''
    },
});

const emit = defineEmits(['update:visible', 'confirm']);

const { t } = useI18n();

// Watch for changes in visible prop and emit update event
const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
});
const tosubmitConfirm = () => {
    visible.value = false;
    emit('confirm');
}
</script>

<style lang="scss" scoped>
.popup-content {
    text-align: left;

    .des1 {
        text-align: left;
    }

    :deep(.popup-text),
    :deep(rich-text),
    :deep(p),
    :deep(div),
    :deep(ol),
    :deep(ul),
    :deep(li) {
        text-align: left !important;
    }

    p {
        text-align: left;
    }
}
</style>