-
在小程序开发的时候,我们有时候需要自定义或者封装一个小组件用到多处导入使用,怎么样才能使用外部设置进来的
class
或者style
样式呢。 -
通过
externalClasses
既可以导出当前组件需要外部设置的class
属性,这个属性是个数组,例如:externalClasses: ['new-class', 'new-class', ...]
。 -
my-component.js
Component({ // 外部样式属性定义,其实也就是把内部需要外部支持的 class 名称放这里导出 // 在外部直接使用导出的名称字段关联即可,可以同时导出多个,这里是数组 ['','',...] externalClasses: ['inner-class'], // 外部使用的属性定义 properties: { // 这里定义了 innerText 属性,属性值可以在组件使用时指定 innerText: { type: String, value: 'default value' } }, data: { // 这里是一些组件内部数据 someData: {} }, observers: { innerText(innerText) { // 当字段内容发生改变的时候,触发此函数 console.log('内容变化了', innerText) }, }, methods: { // 这里是一个自定义方法 customMethod: function () { console.log('点击了', this.data.innerText) } } })
-
my-component.wxml
<!-- 这是自定义组件的内部WXML结构 --> <view class="inner-class" bind:tap="customMethod"> {{innerText}} </view>
-
使用组件的页面
index.wxml
<view> <!-- 以下是对一个自定义组件的引用 --> <my-component inner-text="Some text" inner-class="inner-class"></my-component> </view>
-
使用组件的页面
index.wxss
.inner-class { background-color: red; }
-
效果
微信小程序 - 自定义组件支持外部class或style样式及参数 (Component - externalClasses)
于 2020-10-23 10:02:56 首次发布