You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.9 KiB
69 lines
1.9 KiB
<template>
|
|
<view class="s-icon" :class="c_class" :style="c_style" @click="handleClick">
|
|
<image v-if="isImage" class="s-icon__image" :src="name" :mode="mode" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import componentMixin from '../../mixins/componentMixin';
|
|
|
|
/**
|
|
* s-icon 图标
|
|
* @description s-icon 图标
|
|
* @property {String} classPrefix 类名前缀，用于使用自定义图标
|
|
* @property {String} name 图标名称或图片链接
|
|
* @property {Number|String} size 图标大小，默认单位为rpx
|
|
* @property {String} color 图标颜色
|
|
* @property {String} mode = [scaleToFill|aspectFill|widthFix] 图片裁剪、缩放的模式
|
|
* @property {String|Number} width 图片宽度
|
|
* @property {String|Number} height 图片高度
|
|
* @event {Function} click 点击事件
|
|
* @example <s-icon name="love" size="40" />
|
|
*/
|
|
export default {
|
|
name: 'SIcon',
|
|
mixins: [componentMixin],
|
|
props: {
|
|
classPrefix: {
|
|
type: String,
|
|
default: 's-icon',
|
|
},
|
|
name: String,
|
|
size: [Number, String],
|
|
color: String,
|
|
mode: {
|
|
type: String,
|
|
default: 'scaleToFill',
|
|
},
|
|
width: [Number, String],
|
|
height: [Number, String],
|
|
},
|
|
computed: {
|
|
isImage() {
|
|
return String(this.name).indexOf('/') !== -1;
|
|
},
|
|
c_class() {
|
|
const classPrefix = this.classPrefix || 's-icon';
|
|
return this.$mergeClass({
|
|
[classPrefix]: !this.isImage && classPrefix !== 's-icon',
|
|
[`${classPrefix}-${this.name}`]: !this.isImage,
|
|
}, this.custom_class);
|
|
},
|
|
c_style() {
|
|
return this.$mergeStyle({
|
|
width: this.$addUnit(this.width),
|
|
height: this.$addUnit(this.height),
|
|
fontSize: this.$addUnit(this.size),
|
|
color: this.color,
|
|
}, this.custom_style);
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick(e) {
|
|
this.$emit('click', e);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="./index.scss"></style>
|
|
|