jjzjj

uniapp修改原生内置组件的样式 - 不污染全部页面

Rudon滨海渔村 2023-04-05 原文

效果图

原来：

修改后：

核心步骤

  1. 目标组件的元素外层加容器，class="box" （名字随意）
  2. 在vue的style后面再加一个style scoped 
    <style scoped>
.box /deep/ .label-text {
    font-size: 15px;
	color: red;
	font-weight: bold;
}
</style>
  3. 刷新，搞定

完整步骤

 

  1. 找出组件内部的元素的class，方便css控制，例如：
  2. 然后在vue屁股后面新增：
  3. 然后参照以下的完整代码： 
    <template>
	<view>
		
		<view class="paddingRow50 paddingCol80">
			<uni-forms ref="updatePwdForm" class="myForm">
				<uni-forms-item label="原密码:" name="pold">
					<uni-easyinput v-model="formData.pold" placeholder="请输入账号当前密码" type="password"/>
				</uni-forms-item>
				<view class="borderLine"></view>
				
				<uni-forms-item label="新密码:" name="pnew">
					<uni-easyinput v-model="formData.pnew" placeholder="请输入新密码" type="password"/>
				</uni-forms-item>
				<view class="borderLine"></view>
				
				<uni-forms-item label="确认密码:" name="pconfirm">
					<uni-easyinput v-model="formData.pconfirm" placeholder="请再确认新密码" type="password"/>
				</uni-forms-item>
				<view class="borderLine"></view>
				
			</uni-forms>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 测试开发专用, 显示提交后的TODO
				devShowMore: false,
				
				// 表单数据
				formData: {
					// 旧密码
					pold: '',
					
					// 新密码
					pnew: '',
					
					// 新密码确认
					pconfirm: ''
				},
				
				// 表单验证规则
				rules: {
					pold: {
						rules: [{
							required: true,
							errorMessage: '原密码不能为空'
						}]
					},
					pnew: {
						rules: [{
							required: true,
							errorMessage: '新密码不能为空'
						}]
					},
					
					// 新密码确认
					pconfirm: {
						rules: [{
							required: true,
							errorMessage: '确认密码不能为空'
						}]
					}
				}
			}
		},
		methods: {
			
		},
		onReady() {

		}
	}
</script>

<style>
    /* 原来的css样式 */
</style>

<style scoped>
.myForm /deep/ .label-text {
    font-size: 15px;
	color: red;
	font-weight: bold;
}
</style>

  4. 搞定

 

更多uniapp笔记，一起成长！

【持续更新】uni-app学习笔记_Rudon滨海渔村的博客-CSDN博客https://rudon.blog.csdn.net/article/details/122662633

内置uniapp新密34class$hbuilderx$小程序$组件

有关uniapp修改原生内置组件的样式 - 不污染全部页面的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  3. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  4. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  5. ruby - 是否有内置的 Ruby 1.8.7 将数组拆分为相同大小的子数组？ - 2

    我已经开始了:defsplit_array(array,size)index=0results=[]ifsize>0whileindex如果我在[1,2,3,4,5,6]上运行它，比如split_array([1,2,3,4,5,6],3)它将产生这个数组:[[1,2,3],[4,5,6]]。在Ruby1.8.7中是否已经有可用的东西可以做到这一点？ 最佳答案 [1,2,3,4,5,6].each_slice(3).to_a#=>[[1,2,3],[4,5,6]]对于1.8.6:require'enumerator'[1,2,3,4

  6. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  7. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  8. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  9. ruby-on-rails - RoR中是否有任何内置方法可以为整数填充零？ - 2

    如果我想要“00001”而不是“1”，除了我自己写填零方法之外，有没有内置的方法可以帮助我为整数填零？ 最佳答案 puts"%05d"%1#00001参见:String::%,Kernel::sprintf这是正在发生的事情。%左侧的"%05d"是C风格的格式说明符。%右边的变量就是要格式化的东西。格式说明符可以像这样解码:%-格式说明符的开头0-用前导零填充5-长度为5个字符d-被格式化的是一个整数如果你要格式化多个东西，你会把它们放在一个数组中:"%d-%s"%[1,"One"]#=>1-one

  10. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem？或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面，我们在StackOverflow上找到一个类似的问题： https:/

随机推荐