使用 Vue 实现包含单选框的弹窗等功能（附Demo）

已于 2025-03-12 11:28:16 修改
阅读量3.3k 收藏 31
点赞数 27
分类专栏： 前端/小程序 文章标签： vue.js javascript 前端
于 2024-07-01 08:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47872288/article/details/139930617
版权

目录

前言

如果在弹窗中单独增设一些选项或者少部分的数据，可用如下的方式
（不用单独创建专门的表单样式）
如果单纯可以通过基本的按钮传输给后端，可用如下知识点

对于弹窗的基本知识推荐阅读：

  1. Vue2：详细分析Element中的MessageBox基本知识（附Demo）
  2. 详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）

1. Vue2

此处涉及avue的知识点，推荐阅读：【vue】avue-crud表单属性配置（表格以及列）

基本的功能如下：

在这里插入图片描述

对应的template部分（以下代码为从实战中抽取）

<template>
  <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               :cell-style="cellStyle"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
      <el-button type="primary" size="small" plain @click="showWeekPlanDialog">生成周计划</el-button>

      <el-dialog title="周计划" :visible.sync="showWeekPlanDialogBox" :append-to-body="true" width="20%">
            <el-radio-group v-model="selectedPeriod" @change="handlePeriodChange">
                <el-table :data="weekPeriods" border>
                    <el-table-column label="时间段" width="100">
                        <template slot-scope="scope">
                          <el-radio :label="scope.row.label" ></el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dateRange" label="日期范围" width=200></el-table-column>
                </el-table>
            </el-radio-group>
            <el-button type="primary" size="small" @click="submitWeekPlan" style="margin: 10px;">提交</el-button>
        </el-dialog>
      </template>

对应的功能部分如下：

<script>
  import { doCheckWeekPlan } from "@/api/equipment/basicInfo/inforunningdata";
  import moment from 'moment';

  export default {
    data() {
      return {
        showWeekPlanDialogBox: false, // 控制弹窗显示
        selectedPeriod: '', // 选中的时间段
        weekPeriods: [], // 时间段数组
        loading: true,
        page: {
          pageSize: 100,
          currentPage: 1,
          total: 0
        },
        selectionList: []
      };
    },
    methods: {
      // 显示周月计划弹窗
      showWeekPlanDialog() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.calculateWeekPeriods();
        this.showWeekPlanDialogBox = true;
      },
      // 计算时间段
      calculateWeekPeriods() {
        const today = moment();
        const startDateThisWeek = today.clone().startOf('isoWeek');
        const endDateThisWeek = today.clone().endOf('isoWeek');
        const startDateLastWeek = startDateThisWeek.clone().subtract(1, 'week');
        const endDateLastWeek = startDateLastWeek.clone().endOf('isoWeek');
        const startDateNextWeek = startDateThisWeek.clone().add(1, 'week');
        const endDateNextWeek = startDateNextWeek.clone().endOf('isoWeek');

        const formatDateRange = (startDate, endDate) => {
            return `${startDate.format('YYYY-MM-DD')}~${endDate.format('YYYY-MM-DD')}`;
        };

        this.weekPeriods = [
            { label: '上周', dateRange: formatDateRange(startDateLastWeek, endDateLastWeek) },
            { label: '本周', dateRange: formatDateRange(startDateThisWeek, endDateThisWeek) },
            { label: '下周', dateRange: formatDateRange(startDateNextWeek, endDateNextWeek) }
        ];
      },
      // 提交周月计划
      submitWeekPlan() {
        if (this.selectedPeriod === '') {
          this.$message.warning("请选择一个时间段");
          return;
        }
        doCheckWeekPlan(this.ids, this.selectedPeriod).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.showWeekPlanDialogBox = false;
        }).catch(error => {
          console.log(error);
        });
      }
    }
  };
</script>
  • showWeekPlanDialogBox：控制弹窗显示的布尔值
  • selectedPeriod：存储用户选择的时间段
  • weekPeriods：存储计算后的时间段数组
  • showWeekPlanDialog：显示弹窗的方法，并在没有选中数据时提示用户
  • calculateWeekPeriods：计算并格式化上周、本周、下周的时间段
  • submitWeekPlan：提交选中的时间段并调用API，成功后刷新数据并关闭弹窗

对于Js的日期，推荐阅读：js获取上周本周下周的日期（附Demo）

同理，如果是月计划

在这里插入图片描述

整体逻辑如下：

<template slot="menuLeft">
  <el-button type="primary" size="small" plain @click="showWeekPlanDialog">生成周计划</el-button>
  <el-button type="primary" size="small" plain @click="showMonthPlanDialog">生成月计划</el-button>

  <el-dialog title="周计划" :visible.sync="showWeekPlanDialogBox" :append-to-body="true" width="20%">
    <el-radio-group v-model="selectedPeriod" @change="handlePeriodChange">
      <el-table :data="weekPeriods" border>
        <el-table-column label="时间段" width="100">
          <template slot-scope="scope">
            <el-radio :label="scope.row.label"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="dateRange" label="日期范围" width=200></el-table-column>
      </el-table>
    </el-radio-group>
    <el-button type="primary" size="small" @click="submitWeekPlan" style="margin: 10px;">提交</el-button>
  </el-dialog>

  <el-dialog title="月计划" :visible.sync="showMonthPlanDialogBox" :append-to-body="true" width="20%">
    <el-radio-group v-model="selectedMonthPeriod" @change="handleMonthPeriodChange">
      <el-table :data="monthPeriods" border>
        <el-table-column label="时间段" width="100">
          <template slot-scope="scope">
            <el-radio :label="scope.row.label"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="dateRange" label="日期范围" width=200></el-table-column>
      </el-table>
    </el-radio-group>
    <el-button type="primary" size="small" @click="submitMonthPlan" style="margin: 10px;">提交</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showWeekPlanDialogBox: false,
      showMonthPlanDialogBox: false,
      selectedPeriod: '',
      selectedMonthPeriod: '',
      weekPeriods: [],
      monthPeriods: [],
    };
  },
  methods: {
    showWeekPlanDialog() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.calculateWeekPeriods();
      this.showWeekPlanDialogBox = true;
    },
    showMonthPlanDialog() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.calculateMonthPeriods();
      this.showMonthPlanDialogBox = true;
    },
    calculateWeekPeriods() {
      const today = moment();
      const startDateThisWeek = today.clone().startOf('isoWeek');
      const endDateThisWeek = today.clone().endOf('isoWeek');
      const startDateLastWeek = startDateThisWeek.clone().subtract(1, 'week');
      const endDateLastWeek = startDateLastWeek.clone().endOf('isoWeek');
      const startDateNextWeek = startDateThisWeek.clone().add(1, 'week');
      const endDateNextWeek = startDateNextWeek.clone().endOf('isoWeek');
      const formatDateRange = (startDate, endDate) => `${startDate.format('YYYY-MM-DD')}~${endDate.format('YYYY-MM-DD')}`;
      this.weekPeriods = [
        { label: '上周', dateRange: formatDateRange(startDateLastWeek, endDateLastWeek) },
        { label: '本周', dateRange: formatDateRange(startDateThisWeek, endDateThisWeek) },
        { label: '下周', dateRange: formatDateRange(startDateNextWeek, endDateNextWeek) }
      ];
    },
    calculateMonthPeriods() {
	 const today = moment();
	  const startDateThisMonth = today.clone().startOf('month');
	  const endDateThisMonth = today.clone().endOf('month');
	  const startDateLastMonth = startDateThisMonth.clone().subtract(1, 'month');
	  const endDateLastMonth = startDateLastMonth.clone().endOf('month');
	  const startDateNextMonth = startDateThisMonth.clone().add(1, 'month');
	  const endDateNextMonth = startDateNextMonth.clone().endOf('month');
	  
	  const formatMonthYear = (date) => date.format('YYYY-MM');
	  
	  this.monthPeriods = [
	    { label: '上月', dateRange: formatMonthYear(startDateLastMonth) },
	    { label: '本月', dateRange: formatMonthYear(startDateThisMonth) },
	    { label: '下月', dateRange: formatMonthYear(startDateNextMonth) }
	  ];
	},
    submitWeekPlan() {
      if (this.selectedPeriod == '') {
        this.$message.warning("请选择一个时间段");
        return;
      }
      doWeekPlan(this.ids, this.selectedPeriod).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.showWeekPlanDialogBox = false;
      }, error => {
        console.log(error);
      });
    },
    submitMonthPlan() {
      if (this.selectedMonthPeriod == '') {
        this.$message.warning("请选择一个时间段");
        return;
      }
      doMonthPlan(this.ids, this.selectedMonthPeriod).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.showMonthPlanDialogBox = false;
      }, error => {
        console.log(error);
      });
    }
  }
};
</script>

2. Vue3

整体界面如下：

在这里插入图片描述

增加一个AuditDialog.vue文件

<template>
  <el-dialog :model-value="modelValue" @update:model-value="updateVisible" title="审批操作" width="15%">
    <el-radio-group v-model="selectedResult">
      <el-radio label="通过">审批通过</el-radio>
      <el-radio label="不通过">审批不通过</el-radio>
    </el-radio-group>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});

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

const selectedResult = ref('');

const handleConfirm = () => {
  if (!selectedResult.value) {
    ElMessage.error('请选择审批结果');
    return;
  }
  emit('confirm', selectedResult.value);
  emit('update:modelValue', false);
};

const handleCancel = () => {
  emit('update:modelValue', false);
};

const updateVisible = (value) => {
  emit('update:modelValue', value);
};

watch(() => props.modelValue, (newVal) => {
  if (!newVal) {
    selectedResult.value = ''; // 重置选择
  }
});
</script>

对应的父组件如下：

<template>
  <ContentWrap>
    <!-- 列表 -->
    <el-row justify="center" class="table-title">
      <el-col :span="24" class="text-center">
        委托单列表
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="预约编号" align="center" prop="appointmentId" />
      <el-table-column label="操作" align="center" width="180px">
        <template #default="scope">
          <div class="action-buttons">
            <el-button
              link
              type="primary"
              @click="openAuditDialog(scope.row.id)"
              v-if="scope.row.appointmentStatus === '待码头确认'"
              v-hasPermi="['dangerous:appointment-commission:audit']"
            >
              审核
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 审核对话框 -->
    <AuditDialog v-model:modelValue="isAuditDialogVisible" @confirm="handleAudit" />
  </ContentWrap>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import AuditDialog from './AuditDialog.vue'; // 导入自定义对话框组件
import AppointmentCommissionApi from './api'; // 假设你有一个 API 模块
import { getList } from './utils'; // 假设你有一个获取列表的工具函数

const loading = ref(false);
const list = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
});
const isAuditDialogVisible = ref(false);
const currentAuditId = ref(null);

const openAuditDialog = (id) => {
  currentAuditId.value = id;
  isAuditDialogVisible.value = true;
};

const handleAudit = async (result) => {
  try {
    const response = await AppointmentCommissionApi.auditAppointmentCommission(currentAuditId.value, result === '通过');
    if (response === true) {
      ElMessage.success('审批成功');
      await getList(); // 成功后刷新列表
    } else {
      ElMessage.error('审批失败'); // 处理失败情况
    }
  } catch (error) {
    ElMessage.error('审批操作失败'); // 处理任何错误
  } finally {
    isAuditDialogVisible.value = false; // 关闭对话框
  }
};

// 模拟获取列表数据
const getList = async () => {
  loading.value = true;
  // 模拟异步请求
  setTimeout(() => {
    list.value = [
      { id: 1, appointmentId: 'A123', appointmentStatus: '待码头确认' },
      { id: 2, appointmentId: 'A456', appointmentStatus: '已确认' },
      // 添加更多数据
    ];
    total.value = list.value.length;
    loading.value = false;
  }, 1000);
};

getList();
</script>

<style scoped>
.table-title {
  margin: 20px 0;
}
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>

3. 拓展

弹窗中需要按钮，数据回显等交互：

下述同样是vue3的界面：

在这里插入图片描述
主界面：

<el-button
  link
  type="success"
  @click="openAuditDialog(scope.row.id,scope.row.damCod)"
  v-if="scope.row.checkStatus === 0"
  v-hasPermi="['gate:cabinet-swap:audit']"
>
  审核
</el-button>

 <!-- 单个审核对话框 -->
 <AuditDialog v-model:modelValue="isAuditDialogVisible" @confirm="handleAudit" :damcod="selectedDamcod"/>

对应的js：

import AuditDialog from './AuditDialog.vue' // 审核结果弹窗


const isAuditDialogVisible = ref(false);
const selectedCheckId = ref(null);
const selectedDamcod = ref(null); // 新增变量，用于存储 damcod 的值
const openAuditDialog = (id,damCod) => {
  selectedCheckId.value = id;
  selectedDamcod.value = damCod; // 传递 damcod 的值
  isAuditDialogVisible.value = true;
};

/** 审核按钮操作 */
const handleAudit = async ({ result, reason, damageType }) => {
  isAuditDialogVisible.value = true;
  try {

    console.log(result)
    console.log(damageType)
    const response = await CabinetSwapApi.completeAuditCheck({
      id: selectedCheckId.value,
      result: result === '通过', // 转换为布尔值
      damageType: damageType || '', // 传递残损类型
      reason: reason || ''
    });
    
    if (response === true) {
      message.success(t('common.withAuditSuccess'));
    }
    await getList();
  } catch {} 
  finally {
    isAuditDialogVisible.value = false;
  }
};

专门的弹窗界面逻辑：（主要是某些数据回显，以及弹窗的定制化）

<template>
  <el-dialog :model-value="modelValue" @update:model-value="updateVisible" title="审批操作" width="20%">
    <el-radio-group v-model="selectedResult" class="mb-4">
      <el-radio label="通过">审批通过</el-radio>
      <el-radio label="不通过">审批不通过</el-radio>
    </el-radio-group>

    <!-- 审核不通过时，显示输入框 -->
    <el-input
      v-if="selectedResult === '不通过'"
      v-model="rejectionReason"
      type="textarea"
      rows="5"
      placeholder="请输入不通过的原因"
      class="mt-2"
    />

    <!-- 审核通过时，显示残损类型和残损描述 -->
    <div v-if="selectedResult === '通过'" class="mt-2">
      <div class="mb-4">
        <label for="damageTypeSelect" class="block text-sm font-medium text-gray-700">残损类型：</label>
        <el-select
          id="damageTypeSelect"
          v-model="damageType"
          placeholder="请选择残损类型"
          class="w-full mt-1"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.GATE_DAMAGE_DICT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </div>

      <div class="mb-4">
        <label for="damageDescription" class="block text-sm font-medium text-gray-700">残损描述：</label>
        <el-input
          id="damageDescription"
          v-model="damageDescription"
          type="textarea"
          rows="3"
          placeholder="请输入残损描述"
          class="w-full mt-1"
        />
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  damcod: { // 新增 props，用于接收 damcod 的值
    type: String,
    default: null
  }
});

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

const selectedResult = ref('');
const rejectionReason = ref('');
const damageType = ref(''); // 记录选中的残损类型
const damageDescription = ref(''); // 新增残损描述

// 监听 damcod 的值，进行回显
watch(() => props.damcod, (newVal) => {
  if (newVal) {
    damageType.value = newVal; // 直接赋值
  }
}, { immediate: true });


const handleConfirm = () => {
  if (!selectedResult.value) {
    ElMessage.error('请选择审批结果');
    return;
  }
  if (selectedResult.value === '不通过' && !rejectionReason.value) {
    ElMessage.error('请输入不通过的原因');
    return;
  }
  if (selectedResult.value === '通过' && !damageType.value) {
    ElMessage.error('请选择残损类型');
    return;
  }
  if (selectedResult.value === '通过' && !damageDescription.value) {
    ElMessage.error('请输入残损描述');
    return;
  }

  emit('confirm', {
    result: selectedResult.value,
    reason: rejectionReason.value,
    damageType: damageType.value,
    damageDescription: damageDescription.value
  });
  emit('update:modelValue', false);
};

const handleCancel = () => {
  emit('update:modelValue', false);
};

const updateVisible = (value) => {
  emit('update:modelValue', value);
};

watch(() => props.modelValue, (newVal) => {
  if (!newVal) {
    selectedResult.value = '';
    rejectionReason.value = '';
    damageType.value = '';
    damageDescription.value = ''; // 清空残损描述
  }
});
</script>

<style scoped>
.mt-2 {
  margin-top: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.w-full {
  width: 100%;
}

.block {
  display: block;
}

.text-sm {
  font-size: 0.875rem;
}

.font-medium {
  font-weight: 500;
}

.text-gray-700 {
  color: #4a5568;
}
</style>
Vue3单选框（Radio）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
03-29 8308
用于在多个备选项中选中单个状态，支持：单独使用；选项列表；按钮样式；填底的按钮样式；禁用；禁用选项；垂直排列；自定义间距；可选按钮大小；自定义主题色等；总之，功能丰富，简单易用😁😁
vue例子（实现单选、多选、弹窗等功能）
07-24
单选、多选、弹窗功能为组件每个页面都可以调用。适合初级初级的vue学习者，共勉。（里面的test文件夹里面的就是组件）
Vue 框架组件模块之弹窗组件深度剖析(四)
最新发布
Android开发领域创作者
04-02 778
在弹窗组件中，事件处理是实现交互的重要手段。我们在组件的methods中定义了处理各种事件的方法，如和。这些方法通过$emit触发自定义事件，将事件传递给父组件。自定义事件是 Vue 中组件之间通信的重要方式。父组件可以通过在子组件上监听这些自定义事件，来处理子组件内部发生的事件。以下是一个简单的示例，展示了自定义事件的使用：vue-- 父组件模板 --><template><div>-- 显示一个按钮，点击时显示弹窗 -->
vue 弹窗实现方法
花生日记
05-26 7648
打开弹窗</button><button @click="showModal">打开弹窗</button><button @click="close">关闭
VUE 弹框的实现
CC酱写前端的博客
04-22 640
AnBanDialog.vue（项目上封装好的弹框，主要是样式问题）项目中常用且比较基础的功能。
使用vue实现各类弹出框组件
10-16
主要介绍了使用vue实现各类弹出框组件,文中给大家提到了vue中常用的dialog组件的封装，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 弹窗 多选表格组件封装 以及 回调绑定
UP
09-10 413
组件 <template> <!-- 角色table多选回显组件-强制单选 --> <div> <el-row> <el-form :inline="true" :model="ruleForm" class="demo-form-inline"> <el-form-item label="角色名称:"> <el-input size="small" v-model="ru.
layui单选框选中事件
weixin_43880379的博客
10-12 3755
rm', function () { var form = layui.form; form.on('checkbox(switchTest)', function (data) { alert("哈哈哈"); layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis); //layer.tips('开关c
Ruoyi-Vue-Pro芋道Vue3实现用户选择组件
qq_32073593的博客
11-15 890
在企业级应用开发中，用户选择是一个非常常见的需求。无论是发送消息、分配任务，还是设置权限，我们都需要一个功能完善、体验良好的用户选择组件。本文将带你一步步实现一个基于若依 Ruoyi-Vue-Pro Vue3 的用户选择组件。
Vue3全家桶入门 （通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）
qq_49900295的博客
05-15 3347
todolist项目准备 vue3.0环境搭建 进入想要的目录路径：vue create todolist 选择select features，点击回车 上下键移动按空格选择，一定不要按回车，这样就进入下一步了 我们按空格选择Router和vuex和下面的css预处理器，我们暂时先把Linter这个关闭掉 我们选择3.x的版本，按回车 路由是否选择history模式，写Y按回车 这一步选择css预处理器，我就选择一个less 配置项就选择它默认的配置项 ..
使用Vue组件实现一个简单弹窗效果
08-27
主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式，props 、 $emit 传参，具体组件代码也传上去了。需要的朋友可以参考下
vue实现简单的登录弹出框
01-18
本文实例为大家分享了vue实现简单的登录弹出框的具体代码，供大家参考，具体内容如下 初学vue框架，小小的写了一个登录弹出框效果 各路大佬多多指教。 不多废话，直接上代码： CSS： *{margin:0;padding:0;} /*登陆按钮*/ #app{ width:140px; height:36px; margin:10px auto; } #login,#login a{ width: 200px; height: 38px; line-height:38px; text-align: center; text-decoration: none; font
Vue+DHTMLX Gantt创建甘特图如何实现页面上时间单位的选择
weixin_63194072的博客
06-25 807
levels: [scales:[},scales:[}},},scales:[},scales:[},scales:[})i++) {zoomConfig中设置显示单位1.初始化缩放功能：gantt.ext.zoom.init(zoomConfig);2.设置默认缩放级别3.添加缩放后的事件监听器})当甘特图缩放后，此事件监听器将被触发。level（缩放级别）和config（缩放配置）。在事件处理函数中，它使用。
Vue项目中如何实现弹窗系统的封装
Komorebi_q的博客
08-07 1659
第三个参数中插槽的使用，用来指定子元素渲染的位置。弹窗列表仅在单个页面有效，而弹窗列表是全局变量，故当切换其他页面时，应该清空弹窗列表。由于渲染函数优先级，如果在setup()钩子中返回渲染函数，Vue将会忽略组件的。导出一个clearComponentList()，用于清空弹窗列表。该组件为每一个弹窗组件的外层包裹组件，主要作用是抽离公共样式。从hook中获取弹窗列表，调用h函数，返回渲染函数。导出一个showModal()，用于打开弹窗。使用渲染函数，设置弹窗出口。，用来储存将要渲染的组件。
必须分享！让你体验极致舒适的Vue弹窗使用方案，Get起来！
2301_79347496的博客
10-18 476
如果你觉得如果如果大家有其他弹窗方案，欢迎留言交流哦！
Vue组件：自定义弹窗组件Dialog详解
热门推荐
工作的日常记录和平凡的生活分享
10-18 1万+
项目中大量的模块因字段都比较少，因此添加和编辑用弹框的形式更加方便，但是UI的设计和现用的组件库的弹框组件差异比较大，只能自己动手封装这么一个组件了。通过自定义弹窗组件ByDialog，我们可以在Vue.js应用中创建高度定制化的弹窗功能。通过属性、事件和插槽的灵活运用，我们可以实现各种弹窗样式和交互效果。
vue按钮弹框
卡拉米
08-29 2928
在Vue中实现按钮点击后弹出对话框（弹框）的功能，通常可以使用一些Vue的UI组件库，如Element UI、Vuetify、BootstrapVue等，这些库提供了丰富的组件，包括对话框（Dialog）、模态框（Modal）等，可以很方便地实现这个功能。但如果你不想使用任何UI库，也可以自己手写一个简单的弹框组件。
首帧请求被单帧请求干扰
03-15
### 首帧请求受单帧请求干扰的原因分析 首帧请求可能受到单帧请求的干扰，主要源于资源竞争以及优先级调度机制。以下是具体原因及其解决方案： #### 资源竞争的影响 在某些情况下，网络通信中的 AP（接入点）可能会因为处理多个请求而导致资源分配不足。例如，在无线网络环境中，AP 的带宽有限，如果存在大量高优先级的单帧请求，则可能导致低优先级的首帧请求延迟甚至丢失[^1]。 #### 主线程阻塞的可能性 对于基于 JavaScript 的应用环境而言，由于 JS 运行于浏览器主线程上，任何耗时操作都可能引发阻塞效应。这种阻塞不仅会影响页面渲染性能，还可能导致关键事件（如首帧加载）被推迟执行[^2]。 --- ### 解决方案 #### 优化网络传输策略 通过调整 AP 对不同类型数据包的优先级设置来缓解此问题。可以采用 QoS（Quality of Service,服务质量）技术为重要流量设定更高的权重值，确保即使在网络负载较高时也能保障首帧请求得到及时响应。 #### 减少反射现象带来的影响 针对物理层面上可能出现的数据失真情况，应仔细校准设备参数以降低因终端电阻不匹配所引起的信号衰减程度。合理配置硬件组件能够有效减轻由外部因素造成的通讯异常状况[^3]。 #### 提升前端代码效率 为了避免长时间运行的任务占用过多时间片进而拖慢整个系统的反应速度，开发者应当注意编写高效简洁的JavaScript程序，并利用Web Workers等多线程支持功能将复杂运算移至后台完成，以此减少对UI更新周期的影响。 ```javascript // 使用 Web Worker 处理密集型计算任务 if (window.Worker) { const worker = new Worker('worker.js'); worker.onmessage = function(e){ console.log(`Result from worker: ${e.data}`); }; } ``` --- ### 总结 综上所述，要防止首帧请求遭受来自其他类型请求的干扰，需从以下几个方面入手：一是改进网络架构设计并引入QoS控制手段；二是改善底层硬件设施状态避免不必要的损耗发生；三是提高软件开发质量特别是关注用户体验方面的细节之处。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农研究僧

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值