[小程序开发] 外部样式类

news/2024/7/20 3:38:28 标签: 前端, html, 小程序, scss, javascript, 微信小程序, sass
htmledit_views">

一、外部样式类

        在使用组件时,组件使用者可以给组件传入CSS类名,通过传入的类名修改组件的样式。

        如果需要使用外部样式类修改组件的样式,在Component中需要用extemalClasses定义若干个外部样式类。

二、使用步骤

        1、在Component中用externalClasses定义段定义若干个外部样式类。

javascript">Component({
    // 通过外部样式类修改组件样式
    // 组件接受的外部样式类
    externalClasses:['extend-class']

})

        2、自定义组件标签通过属性绑定的方式提供一个样式类,属性是externalClasses定义的元素,属性值是传递的类名。

html"><!-- 外部样式类 -->
<!-- 属性是在extendClass中定义的元素,属性值必须是一个类名 -->
<custom extend-class="my-class" />
.my-class{
	color: lightsalmon;
}

        3、将接受到的样式类用于自定义组件的内部

html"><view class="extend-class">通过外部样式类修改组件的样式</view>

在同一个节点上,如果存在外部样式类和普通的样式类,两个类的优先级是未定义的,在使用外部样式类时,样式需要通过!important添加权重 。


http://www.niftyadmin.cn/n/5436341.html

相关文章

Android 14.0 SystemUI设置系统导航栏默认为系统手势导航

1.概述 在14.0的原生系统rom产品定制化开发中,系统导航栏在10.0以后可以支持手势导航,但系统导航栏默认的是三键导航,Home Back Recent键三个键显示在底部 但是对于一些全屏的app 感觉操作起来不太方便,所以产品需要要求使用导航栏设置为系统手势导航这时系统底部就不会被…

算法:一些DFS的经验

DFS:可以看作是向下遍历树的模拟 剪枝&#xff1a;减少时间复杂度 一个dfs所需要具备的元素&#xff1a; 一&#xff0c;出口 1.出口&#xff1a;每一个进入的dfs的出口&#xff0c;可以是枚举全部元素后退出该dfs,也可以是大于层数或剪枝条件........ 二&#xff0c;向下搜…

Java 设计模式系列:行为型-观察者模式

简介 观察者模式是一种行为型设计模式&#xff0c;又被称为发布-订阅&#xff08;Publish/Subscribe&#xff09;模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都会得到通知并被自动更新。 观察者…

uni-app多次触发事件,防止重复点击

在uni-app中&#xff0c;经常会碰到多次触发事件&#xff0c;重复点击&#xff0c;导致造成业务出现问题。 虽然在后端可以进行操作&#xff0c;防止业务问题。那么前端该如何实现呢&#xff1f;1.在根目录下新建common文件并创建noclick.js文件 // 防止处理多次点击 function…

LeetCode_28_简单_找出字符串中第一个匹配项的下标

文章目录 1. 题目2. 思路及代码实现2.1 暴力匹配2.2 Knuth-Morris-Pratt 算法&#xff08;详解&#xff09;2.2.1 前缀函数2.2.2 前缀函数的求解 1. 题目 给你两个字符串 h a y s t a c k haystack haystack 和 n e e d l e needle needle &#xff0c;请你在 h a y s t a …

用python写网络爬虫:2.urllib库的基本用法

文章目录 urllib库抓取网页data参数timeout参数更灵活地配置参数登录代理Cookies 参考书籍 建议新入门的小伙伴先看我同一专栏的文章&#xff1a;用python写网络爬虫&#xff1a;1.基础知识 urllib库 urllib是python中一个最基础的HTTP库&#xff0c;一般是内置的&#xff0c;…

Vue项目创建新文件后都会提示仅当 “module” 选项设置为 “es2022”、“esnext”、“system”、“node16” -警告提示

警告提示 vscode中vue项目创建新文件后都会提示仅当 “module” 选项设置为 “es2022”、“esnext”、“system”、“node16” 或 “nodenext”,且 “target” 选项设置为 “es2017” 或更高版本时,才允许使用顶级 “await” 表达式。 在 VS Code 中,如果您在 TypeScript 文…

C++之入门一

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…