200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 微信小程序自定义组件使用阿里矢量图标库图标

微信小程序自定义组件使用阿里矢量图标库图标

时间:2024-01-20 03:24:13

相关推荐

微信小程序自定义组件使用阿里矢量图标库图标

有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式。

测试了一番,直接传递class参数是无效的,那我们怎么做呢?

开始实践

仔细查阅了官方文档,发现是可以的。

我们首先在组件的js文件中加入externalClasses数组变量,用于定义我们要传递的父层class名称:

/* 组件 index.js */Component({options: {addGlobalClass: true},externalClasses: ['custom-class'],properties: {info: null,name: String,size: String,color: String},methods: {onClick() {this.triggerEvent('click');}}});

然后,组件的wxml中使用class="my-class"来使父层样式生效:

<!-- 组件 index.wxml --><view class="custom-class {{name}} iconfont" style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}" bind:tap="onClick"></view>

<!-- index.wxss -->@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1556422480839'); /* IE9 */src: url('iconfont.eot?t=1556422480839#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABtQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBYIFQATYCJAMICwYABCAFhG0HMBv2BcgOJQWJ2IAhDiNAPDyt/e/c2fmqScSzeDIskUmWIb0KnvBGhJA8VNGQPPS3P/lXvn+Aqjlp2R3sjzcLz86pg1QJkYoGLFMmZbqUV8Yn7p3+FlAg8wHlNMfif1GAgaUBjbWpi6SAsGHsApdwnECjATmE3aqGDvCTWeMCcdlkEMEvF5Jllq0XamuWZvFAjfp0M/3A/fD38d9K+JHUFKy6k0uVCpT88rLzikpZcdEniOdzgK2iwByQiXO1qSOegjE9Naa8jIB9VQe/cln6FrHXP0/UsiqbQR8U3ZPYldxqZQI5bj8Ezoz6KGk51nZ9LwhPX698iIOp25SAd58HiumXq3eQKuOBwosft38NC7z9SKjo8vzj2o3LmIPTWEM2non7x7fsGnqwEqXs7TkQdB1PIv+vf+95Fa6Dvw90vv3hcYm68P6Ilk9LMT3l9v7ytKWv9Q/beqquygzb0ksQ9uE09/aZ9Fj/8dnQrarr1f1D13zCfLqq4ww2gbJaPs0exfm/ep4L1zqvh0MLHuubMvj5v6QFy/p5QP253cE/VOZZiKpMl1qmlFVTWUWe5HCUIwEF3Ktk+Tr9GavrueFcqNdz2546/SkK9cYomTGHGk3WUKveBhrNql7dpAvjKXIDZswDhHbPkbT6gEK7n5TM+I0avf6hVnt4otGFiNyyyUSYAsoZihwVIk0Sk+ywU8fKA6LqNjSMWkWWlYasLmRuU5RoVZpithrtyOaY4R4z6DinhDKHjVSB09BqdRAnc5hR5ioj5848tZrWvUklO2wQYAeDRBxSEJJJhInMwY76rbmA0vfbIINRViLWQqrxd0GMm6lzQktF04NSrbL3It3LK25jDHQ4jiIoxsGGqAIOZLVTDoSzfpAZknEqxhEJpzxq1Iz2VanW19g+oJA1YOlT2P0KtdfRZhLtAA==') format('woff2'),url('iconfont.woff?t=1556422480839') format('woff'),url('iconfont.ttf?t=1556422480839') format('truetype'),/* chrome,firefox,opera,Safari,Android,iOS 4.2+ */ url('iconfont.svg?t=1556422480839#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-yemian:before {content: "\e604";}

最后,我们在页面中使用组件的时候,直接用my-class传递页面的wxss样式名称就好:

<!-- index.wxss --><ss-icon name="icon-yemian" size='30' color='#000' my-class="在这里写你的class" />

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。