微信小程序-组件样式隔离

一.isolated

isolated是自定义组件.js的options对象字段styleIsolation的默认值,表示自定义组件和组件使用者之间的样式相互独立,互不影响。
写法:

  options:{//isolated默认值,开启样式隔离,使用者和自定义组件的样式相互不影响styleIsolation:"isolated"
}

二. apply-shared

apply-shared:组件使用者或者页面能影响自定义组件,但是自定义组件无法影响组件使用者

  options:{//apply-shared:组件使用者或者页面能影响自定义组件,但是自定义组件无法影响组件使用者styleIsolation:"apply-shared"
}

三.shared

shared:自定义组件和组件使用者的样式相互影响,影响范围涉及到其它使用了share和apply-share的自定义组件

  options:{//shared:自定义组件和组件使用者的样式相互影响,影响范围涉及到其它使用了share和apply-share的自定义组件styleIsolation:"shared""
}

在使用shared影响到的范围太广,我们可以通过命名空间进行范围限制。
比如在自定义checkbox组件的时候,在wxml文件里定义checkbox

<checkbox class="checkbox" checked="{{isCheck}}" 
bind:tap="update"></checkbox>

在scss文件里给checkbox设置样式的时候,可以使用命名空间就能确定具体组件的样式

.checkbox .wx-checkbox-input{width:24rpx !important;height: 24rpx !important;border-radius: 50% !important;border: 1px solid #fda007 !important;margin-top: -6rpx;
}

这样的话,在其他自定义组件或者页面使用checkbox就不会受到本次样式影响了

扩展:
关于checkbox的样式有三个固定的class选择器
.wx-checkbox-input:复选框未选中的样式
.wx-checkbox-input-checked:复选框选中的样式
.wx-checkbox-input.wx-checkbox-input-checked:before:复选框选中对号√的样式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go语言并发编程1-Gouroutine

参考文档&#xff1a;www.topgoer.com 使用方法 直接包装成函数&#xff0c;go关键字触发即可 注意事项 1 main方法结束后&#xff0c;main方法内启动的子协程会立即结束&#xff0c;无论是否执行完毕&#xff1b; 启动多个groutine 使用sync包的WaitGroup来控制&#xf…

springboot的非物质文化遗产管理系统-计算机毕业设计源码16087

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…

微信小程序 typescript 开发日历界面

1.界面代码 <view class"o-calendar"><view class"o-calendar-container" ><view class"o-calendar-titlebar"><view class"o-left_arrow" bind:tap"prevMonth">《</view>{{year}}年{{month…

Maven:下载配置教学(2024版 最简)

文章目录 一、Maven下载1.1 下载官网1.2 下载压缩包1.3 解压1.4 创建repo文件夹 二、Maven配置2.1 环境变量2.1.1 新建系统变量2.1.2 添加Path 2.2 阿里云镜像2.3 JDK2.4 本地仓库2.5 conf文件的全部内容2.6 测试安装配置是否成功 三、IDEA中配置Maven3.1 新配置3.2 推荐配置 四…

Java NIO的Files类删除文件

public static void main(String[] args) {String path "/path/to/your/file.txt"Path pathPng Paths.get(path);deletePng(pathPng,originalFilename);}public void deletePng(Path dir, String fileNameToDelete) {log.info("开始执行删除数据逻辑");tr…

在Clion使用CubeMX Stm32的步骤

Step1 准备软件&#xff0c;安装环境&#xff1a; 1. cubemx v6.5.0&#xff08;可以兼容以前版本的project&#xff09; https://www.st.com.cn/zh/development-tools/stm32cubemx.html STM32CubeMX 默认安装目录, 6.5版本可以兼容老版本 C:\Program Files\STMicroelectroni…

应用安全:OWASP Top 10与Java防御策略

在当今的软件开发领域&#xff0c;应用安全已经成为一个不可忽视的话题。OWASP Top 10是一个广为人知的安全风险列表&#xff0c;它列出了最常见的Web应用程序安全漏洞。本文将详细介绍OWASP Top 10中的每个漏洞&#xff0c;并提供Java语言的防御策略和代码示例&#xff0c;帮助…

Redis数据迁移-RedisShake

redis-shake是阿里云Redis团队开源的用于Redis数据迁移和数据过滤的工具。 一、基本功能 redis-shake它支持解析、恢复、备份、同步四个功能 恢复restore&#xff1a;将RDB文件恢复到目的redis数据库。 备份dump&#xff1a;将源redis的全量数据通过RDB文件备份起来。 解析deco…

CM311-5_系列通用_gk6323_安卓9_U盘卡刷短接强刷固件(带教程)

魔百和CM311-5_系列通用_gk6323V100C_安卓9_优盘卡刷短接强刷固件包&#xff08;带教程&#xff09;&#xff0c;可以解决开ADB刷机方法 进不去rec的问题。 CM311-5系列的盒子都能用&#xff0c;下面CM311-5 这个系列的强刷固件和教程分享给大家&#xff0c;进不去rec的兄弟们…

一分钟教你设置代理服务器的IP地址

许多人购买完代理IP却不会使用&#xff0c;我们来学习一下如何手把手地设置代理服务器的IP地址。无论是为了访问受限网站还是保护隐私&#xff0c;设置代理IP都是一个非常实用的技能。让我们一起来看看怎么做吧&#xff01; 设置代理服务器的IP地址步骤 1. 选择代理服务提供商…

Chrome插件elasticsearch-head的安装和使用

文章目录 一、安装二、使用 一、安装 本来是想直接在Chrome扩展程序商店里安装的&#xff0c;但是它让我更新浏览器版本&#xff0c;因此就自己下载了.crx文件 elasticsearch-head的git地址是这个 我直接点进了crx然后点偏右上角下载标志下载&#xff08;光标悬浮显示download…

数据识别概述

数据识别场景 数据识别确实可以分为两种主要类型&#xff1a;直接识别和间接识别&#xff08;或称为从文本中发现&#xff09;。下面我将详细解释这两种类型&#xff1a; 直接识别&#xff1a; 定义&#xff1a;直接识别是指直接判断某个数据是否符合特定的标准或条件。应用场…

《安全大模型技术与市场研究报告》发布,海云安榜上有名

近日&#xff0c;网络安全产业研究机构“数说安全”发布2024《安全大模型技术与市场研究报告》&#xff08;以下简称“报告”&#xff09;。 海云安凭借在开发安全领域的优秀业务能力以及在大模型相关技术研究方面的成就得到了认可&#xff0c;入选“安全开发大模型推荐供应商”…

高效使用 Guzzle:POST 请求与请求体参数的最佳实践

介绍 在现代爬虫技术中&#xff0c;高效发送 HTTP 请求并处理响应数据是关键步骤之一。Guzzle 是一个强大的 PHP HTTP 客户端&#xff0c;广泛应用于发送同步和异步请求。本文将介绍如何使用 Guzzle 发送 POST 请求&#xff0c;特别是如何传递请求体参数&#xff0c;并结合代理…

【风力发电】风力涡轮机模型搭建

目录 引言风力涡轮机数学原理风力涡轮机matlab仿真引言 风力发电领域仿真主要包含风力涡轮机模型、PMSM模型与控制算法,控制对象模型的建立是研究的基础,其中风力涡轮机的仿真则是第一步。为保证后续研究的严谨性,本文将针对《An Improved Mechanical Sensorless Maximum Po…

【Python】Python的安装与环境搭建

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言Python下载环境配置测试环境变量是否配置成功配置环境变量 运行Python交互式解释器&#xff1a;命令行脚本集成开发环境&#xff08;IDE&#xff1a;Integrated Development E…

检测水管缺水的好帮手-管道光电液位传感器

管道光电液位传感器是现代清水管道管理中的重要技术创新&#xff0c;不仅提高了检测液位的精确度&#xff0c;还解决了传统机械式和电容式传感器存在的诸多问题&#xff0c;成为检测管道缺水的可靠利器。 该传感器采用先进的光学感应原理&#xff0c;利用红外光学组件通过精密…

【vite创建项目】

搭建vue3tsvitepinia框架 一、安装vite并创建项目1、用vite构建项目2、配置vite3、找不到模块 “path“ 或其相对应的类型声明。 二、安装element-plus1、安装element-plus2、引入框架 三、安装sass sass-loader1、安装sass 四、安装vue-router-next 路由1、安装vue-router42搭…

labview技巧——AMC框架安装

AMC工具包的核心概念是队列&#xff0c;队列是一种先进先出&#xff08;FIFO&#xff0c;First In First Out&#xff09;的数据结构&#xff0c;适用于处理并发和异步任务。在LabVIEW中&#xff0c;队列可以用于在不同VI之间传递数据&#xff0c;确保消息的有序处理&#xff0…

你觉得胡锡进还能回本吗?还能融资买纳指?

7月3日&#xff0c;胡锡进发布最新炒股日记&#xff1a;这几天的股票表现总体很差&#xff0c;除了今天&#xff0c;之前连续几天都输给了沪指&#xff0c;因此虽然今天我只赔了546元&#xff0c;但#胡锡进总亏损达到8.5万#。这是我今年一月份2800点以下时的亏损额。胡锡进称已…