css3整理--::selection

本文详细介绍了CSS中::selection伪元素的使用方法及其兼容性情况。讲述了如何通过::selection来定制用户选中文本的样式,包括背景色和前景色,并强调了其仅能应用于这两项样式设置的特点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

::selection作用:

  当使用鼠标选择文本时,改版被选中文本的背景色和前景色。(默认情况下,window中背景色是深蓝色,前景色是白色。)

::selection语法:

  /*Mozilla Firefox*/

  ::-moz-selection {

     background: 颜色值;

     color:颜色值; }

  /*Webkit,Opera9.5+,Ie9+*/

  ::selection {

    background: 颜色值;

    color:颜色值; } 

  注意:::selection只能设置background和color两个属性,而不能改变其它属性,如font-size,也就是说在::selection设置font-size也是不生效的。

::selection兼容性:

  IE9+、webkit支持,FF需要加-moz-前缀

转载于:https://www.cnblogs.com/charling/p/3637577.html

<template> <el-container style="height: 100vh; overflow: hidden;"> <!-- 侧边栏 --> <el-aside width="200px" style="background-color: #304156;"> <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF"> <el-menu-item index="1"> <i class="el-icon-user"></i> <span>员工管理</span> </el-menu-item> </el-menu> </el-aside> <!-- 主内容区 --> <el-container> <!-- 头部 --> <el-header class="app-header"> <h2 class="app-title">员工管理系统</h2> </el-header> <!-- 主要内容 --> <el-main class="app-content"> <!-- 查询条件 --> <div class="query-section"> <el-row :gutter="20"> <el-col :span="4"> <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable /> </el-col> <el-col :span="4"> <el-select v-model="queryParams.gender" placeholder="请选择性别" clearable> <el-option label="男" :value="0" /> <el-option label="女" :value="1" /> </el-select> </el-col> <el-col :span="4"> <el-select v-model="queryParams.job" placeholder="请选择职位" clearable> <el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-col> <el-col :span="6"> <el-date-picker v-model="queryParams.dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-col> <el-col :span="6" class="action-buttons"> <el-button type="primary" @click="fetchData" icon="el-icon-search">搜索</el-button> <el-button type="success" @click="showAddDialog" icon="el-icon-plus">新增</el-button> <el-button type="danger" @click="batchDelete" icon="el-icon-delete">批量删除</el-button> </el-col> </el-row> </div> <!-- 数据表格 --> <div class="table-section"> <el-table :data="tableData" border stripe @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" /> <el-table-column prop="id" label="ID" width="70" align="center" /> <el-table-column prop="name" label="姓名" min-width="100" /> <el-table-column label="头像" width="90" align="center"> <template #default="{ row }"> <el-avatar :src="row.image" :size="45" shape="square"> <i class="el-icon-user-solid" v-if="!row.image" /> </el-avatar> </template> </el-table-column> <el-table-column prop="gender" label="性别" width="80" align="center"> <template #default="{ row }"> <el-tag :type="row.gender === 0 ? &#39;primary&#39; : &#39;danger&#39;"> {{ row.gender === 0 ? &#39;男&#39; : &#39;女&#39; }} </el-tag> </template> </el-table-column> <el-table-column prop="job" label="职位" min-width="120"> <template #default="{ row }"> <el-tag :type="getJobTagType(row.job)"> {{ jobMap[row.job] || &#39;未知&#39; }} </el-tag> </template> </el-table-column> <el-table-column prop="entrydate" label="入职时间" width="110" align="center" /> <el-table-column prop="createTime" label="创建时间" min-width="160" align="center" /> <el-table-column prop="updateTime" label="最后修改" min-width="160" align="center" /> <el-table-column label="操作" width="150" align="center" fixed="right"> <template #default="{ row }"> <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button> <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(row.id)">删除</el-button> </template> </el-table-column> </el-table> </div> <!-- 分页组件 --> <div class="pagination-section"> <el-pagination background layout="total, prev, pager, next, sizes" :total="total" :page-sizes="[5, 10, 20, 50]" :page-size="queryParams.pageSize" v-model:current-page="queryParams.pageNum" @current-change="fetchData" @size-change="handleSizeChange" /> </div> </el-main> </el-container> </el-container> <!-- 新增/编辑对话框 - 优化样式 --> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px" :close-on-click-modal="false"> <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px" label-position="left"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="性别" prop="gender"> <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%"> <el-option label="男" :value="0" /> <el-option label="女" :value="1" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="职位" prop="job"> <el-select v-model="form.job" placeholder="请选择职位" style="width: 100%"> <el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="密码" prop="password" v-if="!isEdit"> <el-input v-model="form.password" show-password /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="入职时间" prop="entrydate"> <el-date-picker v-model="form.entrydate" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" /> </el-form-item> </el-col> </el-row> <el-form-item label="头像链接" prop="image"> <el-input v-model="form.image" placeholder="请输入图片URL" /> <div class="avatar-preview" v-if="form.image"> <el-image :src="form.image" fit="cover" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[form.image]" /> </div> </el-form-item> <el-form-item class="form-actions"> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> </template> <script setup> import { ref, reactive, onMounted } from &#39;vue&#39;; import axios from &#39;axios&#39;; import { ElMessage, ElMessageBox } from &#39;element-plus&#39;; // 设置 axios 实例 const apiClient = axios.create({ baseURL: &#39;http://localhost:8080/emps&#39;, timeout: 5000, }); // 表格数据 const tableData = ref([]); const total = ref(0); const selectedRows = ref([]); const formRef = ref(null); // 查询参数 const queryParams = reactive({ pageNum: 1, pageSize: 5, name: &#39;&#39;, gender: null, job: null, dateRange: [] }); // 表单数据 const form = reactive({ id: null, username: &#39;&#39;, password: &#39;&#39;, name: &#39;&#39;, gender: null, job: null, image: &#39;&#39;, entrydate: &#39;&#39; }); // 表单验证规则 const formRules = { name: [{ required: true, message: &#39;请输入姓名&#39;, trigger: &#39;blur&#39; }], username: [{ required: true, message: &#39;请输入用户名&#39;, trigger: &#39;blur&#39; }], gender: [{ required: true, message: &#39;请选择性别&#39;, trigger: &#39;change&#39; }], job: [{ required: true, message: &#39;请选择职位&#39;, trigger: &#39;change&#39; }], password: [{ required: true, message: &#39;请输入密码&#39;, trigger: &#39;blur&#39; }], entrydate: [{ required: true, message: &#39;请选择入职日期&#39;, trigger: &#39;change&#39; }] }; // 对话框控制 const dialogVisible = ref(false); const dialogTitle = ref(&#39;新增员工&#39;); const isEdit = ref(false); // 职位映射表 const jobMap = { 1: &#39;班主任&#39;, 2: &#39;讲师&#39;, 3: &#39;学工主管&#39;, 4: &#39;教研主管&#39;, 5: &#39;咨询师&#39; }; // 职位选项 const jobOptions = [ { label: &#39;班主任&#39;, value: 1 }, { label: &#39;讲师&#39;, value: 2 }, { label: &#39;学工主管&#39;, value: 3 }, { label: &#39;教研主管&#39;, value: 4 }, { label: &#39;咨询师&#39;, value: 5 } ]; // 获取职位标签类型 const getJobTagType = (job) => { const types = [&#39;&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;danger&#39;, &#39;info&#39;, &#39;primary&#39;]; return types[job] || &#39;info&#39;; }; // 获取数据 const fetchData = async () => { const params = { page: queryParams.pageNum, pageSize: queryParams.pageSize, name: queryParams.name, gender: queryParams.gender, job: queryParams.job, begin: queryParams.dateRange[0] || &#39;&#39;, end: queryParams.dateRange[1] || &#39;&#39; }; try { const res = await apiClient.get(&#39;&#39;, { params }); if (res.data.code === 1) { tableData.value = res.data.data.rows.map(item => ({ ...item, // 格式化最后修改时间 updateTime: formatDateTime(item.updateTime) })); total.value = res.data.data.total; } else { ElMessage.error(&#39;获取数据失败:&#39; + res.data.msg); } } catch (error) { console.error(&#39;请求出错:&#39;, error); ElMessage.error(&#39;网络请求失败,请检查后端是否运行正常&#39;); } }; // 时间格式化函数 const formatDateTime = (dateTime) => { if (!dateTime) return &#39;&#39;; // 如果是字符串直接返回 if (typeof dateTime === &#39;string&#39;) { // 尝试解析ISO格式时间 try { const date = new Date(dateTime); return date.toLocaleString(&#39;zh-CN&#39;, { year: &#39;numeric&#39;, month: &#39;2-digit&#39;, day: &#39;2-digit&#39;, hour: &#39;2-digit&#39;, minute: &#39;2-digit&#39;, second: &#39;2-digit&#39; }).replace(/\//g, &#39;-&#39;); } catch (e) { return dateTime; } } // 如果是Date对象或时间戳 const date = new Date(dateTime); return date.toLocaleString(&#39;zh-CN&#39;, { year: &#39;numeric&#39;, month: &#39;2-digit&#39;, day: &#39;2-digit&#39;, hour: &#39;2-digit&#39;, minute: &#39;2-digit&#39;, second: &#39;2-digit&#39; }).replace(/\//g, &#39;-&#39;); }; // 显示新增对话框 const showAddDialog = () => { dialogTitle.value = &#39;新增员工&#39;; isEdit.value = false; Object.assign(form, { id: null, username: &#39;&#39;, password: &#39;&#39;, name: &#39;&#39;, gender: null, job: null, image: &#39;&#39;, entrydate: &#39;&#39; }); dialogVisible.value = true; }; // 显示编辑对话框 const handleEdit = (row) => { dialogTitle.value = &#39;编辑员工&#39;; isEdit.value = true; Object.assign(form, { ...row }); dialogVisible.value = true; }; // 提交表单 const submitForm = async () => { try { await formRef.value.validate(); if (isEdit.value) { await apiClient.put(&#39;&#39;, form); ElMessage.success(&#39;员工信息更新成功&#39;); } else { await apiClient.post(&#39;&#39;, form); ElMessage.success(&#39;员工添加成功&#39;); } dialogVisible.value = false; fetchData(); } catch (error) { if (error.name !== &#39;Error&#39;) { console.error(&#39;保存失败:&#39;, error); ElMessage.error(&#39;操作失败:&#39; + (error.response?.data?.message || error.message)); } } }; // 删除员工 const handleDelete = async (id) => { try { await ElMessageBox.confirm(`确认删除ID为 ${id} 的员工吗?`, &#39;删除确认&#39;, { confirmButtonText: &#39;确定&#39;, cancelButtonText: &#39;取消&#39;, type: &#39;warning&#39; }); await apiClient.delete(`/${[id]}`); ElMessage.success(&#39;删除成功&#39;); fetchData(); } catch (error) { if (error !== &#39;cancel&#39;) { console.error(&#39;删除失败:&#39;, error); ElMessage.error(&#39;删除失败:&#39; + (error.response?.data?.message || error.message)); } } }; // 批量删除 const batchDelete = async () => { if (selectedRows.value.length === 0) { ElMessage.warning(&#39;请至少选择一条记录&#39;); return; } try { const ids = selectedRows.value.map(item => item.id); await ElMessageBox.confirm(`确认删除选中的 ${ids.length} 条员工吗?`, &#39;批量删除确认&#39;, { confirmButtonText: &#39;确定&#39;, cancelButtonText: &#39;取消&#39;, type: &#39;warning&#39; }); await apiClient.delete(`/${ids}`); ElMessage.success(`成功删除 ${ids.length} 条记录`); fetchData(); } catch (error) { if (error !== &#39;cancel&#39;) { console.error(&#39;批量删除失败:&#39;, error); ElMessage.error(&#39;删除失败:&#39; + (error.response?.data?.message || error.message)); } } }; // 表格选择监听 const handleSelectionChange = (rows) => { selectedRows.value = rows; }; // 处理分页大小变化 const handleSizeChange = (size) => { queryParams.pageSize = size; fetchData(); }; // 初始化加载数据 onMounted(() => { fetchData(); }); </script> <style scoped> /* 全局样式 */ .app-header { background-color: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); display: flex; align-items: center; padding: 0 20px; z-index: 1; } .app-title { margin: 0; font-size: 18px; font-weight: 600; color: #333; } .app-content { padding: 20px; background-color: #f0f2f5; height: calc(100vh - 60px); overflow-y: auto; } .query-section { background: #fff; padding: 20px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .table-section { background: #fff; padding: 20px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .pagination-section { display: flex; justify-content: center; background: #fff; padding: 15px 0; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .action-buttons { display: flex; justify-content: flex-end; } .form-actions { display: flex; justify-content: center; margin-top: 20px; } .avatar-preview { display: flex; justify-content: center; margin-top: 10px; } .el-avatar { background-color: #f5f7fa; display: flex; align-items: center; justify-content: center; } .el-avatar i { color: #909399; } /* 优化对话框样式 */ .el-dialog__body { padding: 20px 25px; } /* 调整操作列按钮间距 */ .el-table .el-button { margin: 0 5px; } /* 确保选择器宽度100% */ .el-select { width: 100%; } </style> 优化一下代码,使代码量更简洁,编辑和删除按钮使它们并列排版,别上下排版
最新发布
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值