uni-ui修改样式(持续更新)

场景

通过样式穿透修改uni-ui组件样式
这里以vue2写法为主,vue3可以使用更多的选择,比如:deep(),当然也有可能存在组件版本差异,导致方法名不同

实现

1.uni-data-select

::v-deep .uni-data-select {
	width: 33.3%;
	height: 100%;
}
::v-deep .uni-select{
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: 0.73rpx solid rgba(235,235,235,0.5);
}
::v-deep .uni-select__input-box{
	height: 100%;
	.uni-select__input-placeholder{
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 8.79rpx;
		color: #FFFFFF;
	}
}

2.uni-table
在这里插入图片描述

<view class="uni-container">
	<uni-table ref="table" :loading="loading" type="" emptyText="暂无更多数据" @selection-change="selectionChange">
		<uni-tr>
			<uni-th width="50" align="center">任务名称</uni-th>
			<uni-th width="40" align="center">任务状态</uni-th>
			<uni-th width="40" align="center">任务类型</uni-th>
			<uni-th width="40" align="center">执行机场</uni-th>
			<uni-th width="40" align="center">航线名称</uni-th>
			<uni-th width="40" align="center">创始人</uni-th>
			<uni-th width="70" align="center">创建时间</uni-th>
			<uni-th width="70" align="center">备注</uni-th>
			<uni-th width="50" align="center">操作</uni-th>
		</uni-tr>
		<uni-tr v-for="(item, index) in tableData" :key="index">
			<uni-td align="center">{{ item.taskname }}</uni-td>
			<uni-td align="center">{{ item.static }}</uni-td>
			<uni-td align="center">{{ item.type }}</uni-td>
			<uni-td align="center">{{ item.airport }}</uni-td>
			<uni-td align="center">{{ item.airname }}</uni-td>
			<uni-td align="center">{{ item.founder }}</uni-td>
			<uni-td align="center">{{ item.createtime }}</uni-td>
			<uni-td align="center">{{ item.notes }}</uni-td>
			<uni-td>
				<view class="uni-group">
					<button class="uni-button" size="mini" type="warn">执行</button>
					<button class="uni-button" size="mini" type="primary">轨迹</button>
				</view>
			</uni-td>
		</uni-tr>
	</uni-table>
	<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
</view>
.uni-table{
	border-radius: 0 !important;
	background: transparent !important;
	.uni-table-tr{
		height: 36.62rpx;
	}
	.uni-table-th{
		background-color: #242B38;
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 8.79rpx;
		color: #FFFFFF;
		border: none;
		line-height: 100%;
	}
	.uni-table-td{
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 8.79rpx;
		color: #FFFFFF;
		border-bottom: 0.73rpx solid rgba(235,235,235,0.5);
		line-height: 100%;
	}
	.checkbox{
		padding: 0;
		width: 10.25rpx;
	}
}

.uni-group {
	display: flex;
	align-items: center;
	justify-content: center;
	.uni-button{
		height: 17.58rpx;
		width: 26.37rpx;
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 10.25rpx;
	}
	.uni-button:after{
		border: 0;
	}
	.uni-button[type=warn]{
		color: #FF4437 !important;
	}
	.uni-button[type=primary]{
		color: #1E77F5 !important;
	}
}

//分页器
.uni-pagination-box{
	height: 36.62rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.uni-pagination__total{
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 10.25rpx;
		color: #FFFFFF;
		line-height: 15.38rpx;
	}
	.uni-pagination__btn{
		height: 21.97rpx;
		width: 21.97rpx;
		background: transparent;
		border: 0.73rpx solid rgba(235,235,235,0.5);
		.uni-icons{
			font-size: 10.25rpx !important;
			color: #fff !important;
		}
	}
	.uni-pagination__num{
		height: 21.97rpx;
		min-width: 21.97rpx;
		width: 21.97rpx;
		.uni-pagination__num-tag{
			line-height: 21.97rpx;
			height: 21.97rpx;
			min-width: 21.97rpx;
		}
	}
}
### 修改或自定义 `uni-picker-action` 组件样式 为了实现对 `uni-picker-action` 组件样式修改或自定义,可以采用多种方法来确保样式能够正确应用并生效。以下是几种常见的方式: #### 方法一:使用全局样式覆盖默认样式 可以在项目的根目录下的 `App.vue` 文件中的 `<style>` 标签内编写 CSS 或 SCSS 来覆盖组件的默认样式。 ```css /* App.vue */ <style> /* 使用 ::v-deep 深度选择器穿透作用域 */ ::v-deep .uni-picker-action { background-color: #f8f8f8; } </style> ``` 这种方法适用于希望在整个项目范围内统一更改该组件外观的情况[^1]。 #### 方法二:局部样式穿透 如果只想在一个特定页面上改变 `uni-picker-action` 的样式,则可以直接在这个页面对应的 `.vue` 文件里添加带有深度选择器 (`>>>`) 或者使用新的 `/deep/` 语法(取决于使用的 Vue 版本)以及 BEM 命名法来进行更精确的选择和样式设置。 对于较新版本的 Vue CLI,默认推荐使用 `:deep()` 方式替代旧版的 `>>>` 和 `/deep/`: ```html <!-- PageA.vue --> <template> <!-- 组件模板代码 --> </template> <script setup lang="ts"> // 脚本部分... </script> <style scoped> /* 新方式 */ :deep(.uni-picker-action) { color: red !important; } /* 如果上述不工作, 尝试这种方式 (Vue2.x)*/ /deep/.uni-picker-action { font-size: 16px; } </style> ``` 注意,在某些情况下可能还需要增加 `!important` 关键字以提高优先级从而确保自定义样式能被浏览器采纳[^2]。 #### 方法三:利用父类传递属性 一些 UI 库允许开发者通过 props 向子组件传入额外配置项,比如前面提到的例子中 u-popup 提供了 overlayStyle 属性用于指定遮罩层的样式。虽然这不是针对 `uni-picker-action` 的具体做法,但是同理可推,如果有类似的 API 可用的话也可以考虑这种途径。 例如: ```html <u-popup :overlayStyle="{ 'background-color': '#eee', 'touch-action': 'none' }"></u-popup> ``` 这表明可以通过类似的方法查找是否有提供给 `uni-picker-action` 设置其内部元素样式的 prop 参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值