当前位置: 首页 > news >正文

uniapp 使用unocss的问题

坑爹 
w-10 = width:10rpx

h-10 = height:10rpx

p-10 = padding:80rpx 

这不坑爹么 

需要手动修改规则
代码附上

// unocss.config.jsimport presetWeapp from "unocss-preset-weapp";import {transformerClass,transformerAttributify,
} from "unocss-preset-weapp/transformer";
import { defineConfig, presetAttributify } from "unocss";
const directionMap = {t: "top",b: "bottom",r: "right",l: "left",x: ["left", "right"], // 水平方向y: ["top", "bottom"], // 垂直方向
};export default {presets: [presetAttributify(),presetWeapp({whRpx: true, // 启用 rpx 单位(默认 true)platform: "uniapp", // 或 'uniapp'designWidth: 750,}),],transformers: [transformerAttributify(), transformerClass()],shortcuts: [],rules: [// 基础间距[/^m-(\d+)$/, ([, d]) => ({ margin: `${d}rpx` })],[/^p-(\d+)$/, ([, d]) => ({ padding: `${d}rpx` })],// 方向性间距(修正版)[/^m([tbrlxy])-(\d+)$/,([, dir, d]) => {const directions = Array.isArray(directionMap[dir])? directionMap[dir]: [directionMap[dir]];return Object.fromEntries(directions.map((k) => [`margin-${k}`, `${d}rpx`]));},],[/^p([tbrlxy])-(\d+)$/,([, dir, d]) => {const directions = Array.isArray(directionMap[dir])? directionMap[dir]: [directionMap[dir]];return Object.fromEntries(directions.map((k) => [`padding-${k}`, `${d}rpx`]));},],// 负值支持[/^-m([tbrlxy])?-(\d+)$/,([, dir, d]) => {if (!dir) return { margin: `-${d}rpx` };const directions = Array.isArray(directionMap[dir])? directionMap[dir]: [directionMap[dir]];return Object.fromEntries(directions.map((k) => [`margin-${k}`, `-${d}rpx`]));},],["center",{position: "absolute",top: "50%",left: "50%",transform: `translate(-50%, -50%)`,},],["shadow1",{"box-shadow": "0px 0px 12px rgba(0, 0, 0, .12)",},],[/^border-#([0-9a-fA-F]+)$/,([_, color]) => ({border: `1px solid #${color}`,}),],["trans",{transition: ".3s",},],],
};

http://www.dtcms.com/a/600627.html

相关文章:

  • [Linux——Lesson23.线程概念与控制:线程基础]
  • 四大主流浏览器Chrome、Edge、Safari、Firefox内核检测免费工具评测
  • 弱网通话没保障?多网聚合,逐包调度,新技术扫除网络痛点
  • 网站制作公司的网站贵阳网站改版
  • 电脑硬件价格呈现持续上涨趋势及软件优化的必要性
  • Spring集成kafka的最佳方式
  • 设计网站怎么做网业是什么行业
  • RK3588应用分享之国产化系统-开源鸿蒙OpenHarmony
  • RabbitMQ-基础-总结
  • 学习react第二天
  • 【JVS更新日志】低代码、APS排产、物联网、企业计划11.12更新说明!
  • 前端注释规范:如何写“后人能看懂”的注释(附示例)
  • C语言编译器下载地址 | 如何选择适合自己的C语言编译器
  • HarmonyOS之深入解析如何实现语音朗读能力
  • 台州企业网站的建设做网站能挣多少钱
  • 网站开发内容包括哪些wordpress 统计代码
  • 【昇腾CANN工程实践】BERT情感分析API性能优化实录:从CPU到NPU的15倍加速
  • 【Linux基础开发工具 (二)】详解Linux文本编辑器:Vim从入门到精通——完整教程与实战指南(上)
  • 使用 BR 备份 TiDB 到阿里云 OSS 存储
  • 机器学习项目——基于集成学习提升树情绪分类(代码/论文)
  • C++ 抽象类与多态原理深度解析:从纯虚函数到虚表机制(附高频面试题)
  • 尚硅谷 SpringCloud 01 分布式概念-工程创建-nacos安装-nacos服务注册与发现 -远程调用
  • C# Sqlite帮助类
  • 传统方式部署 Hadoop 高可用集群
  • 微软 Win11 经典版 Outlook 曝 BUG,加速 SSD 损耗
  • C++在边缘AI加速中的硬件优化:结合位运算与SIMD提升推理效率
  • 网站开发文档撰写作业牡丹江整站优化
  • QT:ItemView视图控件
  • 让UI完全按屏幕比例变化的方法
  • 结项报告完整版:Apache SeaTunnel 支持 Flink 引擎 Schema Evolution 功能