微信小程序 - 自定义组件支持外部class或者style样式 (Component - externalClasses)
发布日期:2021-06-29 11:37:54 浏览次数:2 分类:技术文章

本文共 757 字,大约阅读时间需要 2 分钟。

  • 在小程序开发的时候,我们有时候需要自定义或者封装一个小组件用到多处导入使用,怎么样才能使用外部设置进来的 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: {}  },  methods: {    // 这里是一个自定义方法    customMethod: function () { }  }})
  • my-component.wxml

    {
    {innerText}}
  • 使用组件的页面 index.wxml

  • 使用组件的页面 index.wxss

    .inner-class {  background-color: red;}
  • 效果

转载地址:https://blog.csdn.net/zz00008888/article/details/109224813 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Nginx nginx: [emerg] bind() to 0.0.0.0:8083 failed (48: Address already in use)
下一篇:Vue - You are using the runtime-only build of Vue where the template compiler ...

发表评论

最新留言

不错!
[***.144.177.141]2024年04月14日 16时45分02秒