微信小程序 样式库-微信小程序文本框样式

# 组件模板和样式

与页面类似，自定义组件有自己的wxml模板和wxss样式。

# 组件模板

组件模板的编写方式与页面模板相同。 组件模板和组件数据结合生成的节点树将插入到组件的引用位置。

可以在组件模板中提供一个节点来承载在引用该组件时提供的子节点。

代码示例：

这是组件的内部节点

这是插入组件插槽的内容

注意模板中引用的自定义组件及其对应的节点名需要在json文件中显式定义，否则会被视为无意义的节点。 此外，节点名称也可以声明为抽象节点。

# 模板数据绑定

与普通的 WXML 模板类似，可以使用数据绑定，以便将动态数据传递给子组件的属性。

代码示例：

这是插入组件插槽的内容

在上面的例子中，组件的属性 propA 和 propB 将接收页面传递过来的数据。 页面可以通过setData改变绑定的数据字段。

注意：此类数据绑定只能传递 JSON 兼容数据。 从基础库版本 2.0.9 开始，也可以在数据中包含函数（但这些函数不能在 WXML 中直接调用，只能传递给子组件）。

# 组件wxml的槽

组件的wxml中可以包含一个slot节点，用于承载组件用户提供的wxml结构。

默认情况下，一个组件的 wxml 中只能有一个插槽。 当需要使用多个slot时，可以在组件js中声明并启用。

成分（{

选项： {

multipleSlots: true // 在定义组件时在选项中启用多插槽支持

},

特性： { /* ... */ }，

方法： { /* ... */ }

})

此时可以在这个组件的wxml中使用多个slot，用不同的名字来区分。

这是组件的内部细节

使用时，使用slot属性将节点插入到不同的slot中。

这是插入组件插槽的内容

这是插入组件插槽的内容

# 组件样式

组件对应wxss文件的样式，只对组件wxml中的节点生效。 在编写组件样式时需要注意以下几点： 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请使用class选择器。

在组件和引用组件的页面中使用后代选择器（.a .b）在某些极端情况下可能会产生意想不到的性能。 如果是这样，请避免使用它们。

子元素选择器（.a>.b）只能用在视图组件与其子节点之间，用在其他组件中可能会出现意想不到的情况。

继承的样式，比如字体和颜色，会从组件外部继承到组件内部。

除了继承的样式，app.wxss中的样式和组件所在页面的样式对自定义组件是无效的（除非更改了组件样式隔离选项）。

#a { } /* 不能在组件中使用 */

[a] { } /* 不能在组件中使用 */

button { } /* 不能在组件中使用 */

.a > .b { } /* 除非.a是视图组件节点，否则可能不会生效*/

此外，组件可以使用 :host 选择器为其放置的节点指定默认样式（需要 DevTools 支持基础库 1.7.2 或更高版本）。

代码示例：

/* 组件 custom-component.wxss */

：主持人 {

颜色：黄色；

}

这段文字是黄色的

# 组件样式隔离

默认情况下，自定义组件的样式只受自定义组件wxss影响。 除非以下两种情况： App.wxss 或页面的 wxss 使用标签名称选择器（或其他一些特殊选择器）直接指定样式，这些选择器将影响页面和所有组件。 通常不推荐这样做。

指定特殊样式隔离选项 styleIsolation。

成分（{

选项： {

styleIsolation: '隔离'

}

})

从基础库版本 2.6.5 开始支持 styleIsolation 选项。 支持以下值： isolated 表示启用样式隔离，class指定的样式在自定义组件内外互不影响（一般为默认值）；

apply-shared表示页面wxss样式会影响自定义组件，但是自定义组件wxss中指定的样式不会影响页面；

shared表示页面wxss样式会影响自定义组件，自定义组件wxss中指定的样式也会影响页面和其他自定义组件设置apply-shared或shared。 （此选项在插件中不可用。）

使用后两者时，重要的是要注意组件之间样式的相互作用。

如果使用这个Component构造器构造一个页面，默认值为shared，可以使用如下额外的样式隔离选项：该页面不会影响其他自定义组件；

page-apply-shared 表示app.wxss 在该页面被禁用。 同时页面wxss样式不会影响其他自定义组件，但是设置为shared的自定义组件会影响页面；

page-shared 意味着 app.wxss 在该页面上被禁用。 同时，页面wxss样式会影响其他设置为apply-shared或shared的自定义组件，也会受到设置为shared的自定义组件的影响。

从小程序基础库2.10.1版本开始，styleIsolation也可以配置在页面或者自定义组件的json文件中（这样就不需要在js文件的options中配置了）。 例如：

{

"styleIsolation": "隔离"

}

另外，小程序基础库2.2.3及以后版本支持addGlobalClass选项，即在Component的options中设置addGlobalClass: true。

该选项等同于设置 styleIsolation: apply-shared ，但设置 styleIsolation 选项后该选项将失效。

代码示例：

/* 组件 custom-component.js */

成分（{

选项： {

添加全局类：真，

}

})

此文本的颜色由 `app.wxss` 和页面 `wxss` 中定义的样式决定

/* 应用程序.wxss */

.red-text {

红色;

}

# 1.9.90开始支持外部样式类基库，低版本需要兼容。

有时，组件希望接受从外部传入的样式类。 这时候可以使用externalClasses定义段在Component中定义几个外部样式类。

这个特性可以用来实现类似view组件的hover-class属性：页面可以提供一个style类，赋值给view的hover-class，style类本身写在页面中而不是视图组件的实现。

注意：在同一个节点上使用普通样式类和外部样式类时，这两个类的优先级是不确定的，所以最好避免这种情况。

代码示例：

/* 组件 custom-component.js */

成分（{

外部类：['我的类']

})

此文本的颜色由组件外部的类决定

这样，组件的使用者就可以像使用普通的属性一样，指定这个样式类对应的类。 2.7.1之后可以指定多个对应的类。

代码示例：

.red-text {

红色;

}

.large-text {

字体大小：1.5em；

}

# 参考页面或父组件的样式库从2.9.2开始支持，低版本需要兼容。

即使启用了样式隔离，组件仍然可以在本地引用组件所在页面的样式或父组件的样式。

例如，如果在页面中定义了 wxss：

.blue-text {

颜色：蓝色；

}

在这个组件中微信小程序 样式库，可以使用~来引用这个类的样式：

这段文字是蓝色的

如果在组件的父组件 wxss 中定义：

.red-text {

红色;

}

在这个组件中，可以使用^来引用这个类的样式：

这段文字是红色的

您也可以连续使用多个 ^ 来引用祖先组件中的样式。

注意：如果组件是一个相对独立和通用的组件，请先使用外部样式类，而不是直接引用父组件或页面的样式。

# 支持虚拟化组件节点基础库2.11.2，低版本需要兼容。

默认情况下，自定义组件的节点本身就是一个“普通”节点。 使用时，可以像普通视图组件节点一样，在该节点上设置类样式、动画、flex布局等。

蓝色，全宽

但是有时候，自定义组件并不希望节点本身能够设置样式，响应flex布局等，而是希望自定义组件内部的第一层节点能够响应flex布局或者样式完全确定由自定义组件本身。

在这种情况下，您可以将此自定义组件设为“虚拟”：

成分（{

选项： {

虚拟主机：真

},

特性： {

style: { // 定义style属性，获取style属性上设置的值

类型：字符串，

}

},

externalClasses: ['class'], // class可以设置为externalClasses

})

通过这种方式，可以将 flex 放置在自定义组件中：

不蓝

全屏宽度

需要注意的是，自定义组件节点上的类样式和动画将不再生效，但仍然可以：将样式定义为properties属性微信小程序 样式库，获取样式上设置的值；

将类定义为 externalClasses 外部样式类，使自定义组件 wxml 可以使用类值。

代码示例：