feat:还原更新框架
This commit is contained in:
@@ -1,36 +1,36 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 3.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : jry
|
||||
* @lastTime : 2025-12-19 08:55:21
|
||||
* @FilePath : /uview-plus/libs/config/props/icon.js
|
||||
*/
|
||||
import config from '../../libs/config/config'
|
||||
|
||||
const {
|
||||
color
|
||||
} = config
|
||||
export default {
|
||||
// icon组件
|
||||
icon: {
|
||||
name: '',
|
||||
color: color['u-content-color'],
|
||||
size: '16px',
|
||||
bold: false,
|
||||
index: '',
|
||||
hoverClass: '',
|
||||
customPrefix: 'uicon',
|
||||
label: '',
|
||||
labelPos: 'right',
|
||||
labelSize: '15px',
|
||||
labelColor: color['u-content-color'],
|
||||
space: '3px',
|
||||
imgMode: '',
|
||||
width: '',
|
||||
height: '',
|
||||
top: 0,
|
||||
stop: false
|
||||
}
|
||||
}
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-20 18:00:14
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/icon.js
|
||||
*/
|
||||
import config from '../../libs/config/config'
|
||||
|
||||
const {
|
||||
color
|
||||
} = config
|
||||
export default {
|
||||
// icon组件
|
||||
icon: {
|
||||
name: '',
|
||||
color: color['u-content-color'],
|
||||
size: '16px',
|
||||
bold: false,
|
||||
index: '',
|
||||
hoverClass: '',
|
||||
customPrefix: 'uicon',
|
||||
label: '',
|
||||
labelPos: 'right',
|
||||
labelSize: '15px',
|
||||
labelColor: color['u-content-color'],
|
||||
space: '3px',
|
||||
imgMode: '',
|
||||
width: '',
|
||||
height: '',
|
||||
top: 0,
|
||||
stop: false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -203,7 +203,6 @@ export default {
|
||||
'uicon-empty-list': '\ue68b',
|
||||
'uicon-empty-page': '\ue627',
|
||||
'uicon-empty-order': '\ue639',
|
||||
'uicon-empty-wifi': '\ue668',
|
||||
'uicon-man': '\ue697',
|
||||
'uicon-woman': '\ue69c',
|
||||
'uicon-man-add': '\ue61c',
|
||||
@@ -212,4 +211,4 @@ export default {
|
||||
'uicon-man-delete-fill': '\ue66a',
|
||||
'uicon-zh': '\ue70a',
|
||||
'uicon-en': '\ue692'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,94 +1,91 @@
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import IconDefaultProps from './icon'
|
||||
import { registerComponentProps } from '../../libs/config/props.js'
|
||||
|
||||
const defProps = registerComponentProps(IconDefaultProps)
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 图标类名
|
||||
name: {
|
||||
type: String,
|
||||
default: () => defProps.icon.name
|
||||
},
|
||||
// 图标颜色，可接受主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => defProps.icon.color
|
||||
},
|
||||
// 字体大小，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.size
|
||||
},
|
||||
// 是否显示粗体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: () => defProps.icon.bold
|
||||
},
|
||||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.index
|
||||
},
|
||||
// 触摸图标时的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: () => defProps.icon.hoverClass
|
||||
},
|
||||
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: () => defProps.icon.customPrefix
|
||||
},
|
||||
// 图标右边或者下面的文字
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.label
|
||||
},
|
||||
// label的位置，只能右边或者下边
|
||||
labelPos: {
|
||||
type: String,
|
||||
default: () => defProps.icon.labelPos
|
||||
},
|
||||
// label的大小
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.labelSize
|
||||
},
|
||||
// label的颜色
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: () => defProps.icon.labelColor
|
||||
},
|
||||
// label与图标的距离
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.space
|
||||
},
|
||||
// 图片的mode
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: () => defProps.icon.imgMode
|
||||
},
|
||||
// 用于显示图片小图标时，图片的宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.width
|
||||
},
|
||||
// 用于显示图片小图标时，图片的高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.height
|
||||
},
|
||||
// 用于解决某些情况下，让图标垂直居中的用途
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.top
|
||||
},
|
||||
// 是否阻止事件传播
|
||||
stop: {
|
||||
type: Boolean,
|
||||
default: () => defProps.icon.stop
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 图标类名
|
||||
name: {
|
||||
type: String,
|
||||
default: () => defProps.icon.name
|
||||
},
|
||||
// 图标颜色，可接受主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => defProps.icon.color
|
||||
},
|
||||
// 字体大小，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.size
|
||||
},
|
||||
// 是否显示粗体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: () => defProps.icon.bold
|
||||
},
|
||||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.index
|
||||
},
|
||||
// 触摸图标时的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: () => defProps.icon.hoverClass
|
||||
},
|
||||
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: () => defProps.icon.customPrefix
|
||||
},
|
||||
// 图标右边或者下面的文字
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.label
|
||||
},
|
||||
// label的位置，只能右边或者下边
|
||||
labelPos: {
|
||||
type: String,
|
||||
default: () => defProps.icon.labelPos
|
||||
},
|
||||
// label的大小
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.labelSize
|
||||
},
|
||||
// label的颜色
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: () => defProps.icon.labelColor
|
||||
},
|
||||
// label与图标的距离
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.space
|
||||
},
|
||||
// 图片的mode
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: () => defProps.icon.imgMode
|
||||
},
|
||||
// 用于显示图片小图标时，图片的宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.width
|
||||
},
|
||||
// 用于显示图片小图标时，图片的高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.height
|
||||
},
|
||||
// 用于解决某些情况下，让图标垂直居中的用途
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.icon.top
|
||||
},
|
||||
// 是否阻止事件传播
|
||||
stop: {
|
||||
type: Boolean,
|
||||
default: () => defProps.icon.stop
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,238 +1,254 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-icon"
|
||||
@tap="clickHandler"
|
||||
:class="['u-icon--' + labelPos]"
|
||||
>
|
||||
<image
|
||||
class="u-icon__img"
|
||||
v-if="isImg"
|
||||
:src="name"
|
||||
:mode="imgMode"
|
||||
:style="[imgStyle, addStyle(customStyle)]"
|
||||
></image>
|
||||
<text
|
||||
v-else
|
||||
class="u-icon__icon"
|
||||
:class="uClasses"
|
||||
:style="[iconStyle, addStyle(customStyle)]"
|
||||
:hover-class="hoverClass"
|
||||
>{{icon}}</text>
|
||||
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
|
||||
<text
|
||||
v-if="label !== ''"
|
||||
class="u-icon__label"
|
||||
:style="{
|
||||
color: labelColor,
|
||||
fontSize: addUnit(labelSize),
|
||||
marginLeft: labelPos == 'right' ? addUnit(space) : 0,
|
||||
marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
|
||||
marginRight: labelPos == 'left' ? addUnit(space) : 0,
|
||||
marginBottom: labelPos == 'top' ? addUnit(space) : 0,
|
||||
}"
|
||||
>{{ label }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入图标名称，已经对应的unicode
|
||||
import icons from './icons';
|
||||
import { props } from './props';
|
||||
import config from '../../libs/config/config';
|
||||
import { mpMixin } from '../../libs/mixin/mpMixin';
|
||||
import { mixin } from '../../libs/mixin/mixin';
|
||||
import { addUnit, addStyle } from '../../libs/function/index';
|
||||
import fontUtil from './util';
|
||||
/**
|
||||
* icon 图标
|
||||
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||
* @tutorial https://uview-plus.jiangruyi.com/components/icon.html
|
||||
* @property {String} name 图标名称，见示例图标集
|
||||
* @property {String} color 图标颜色,可接受主题色 （默认 color['u-content-color'] ）
|
||||
* @property {String | Number} size 图标字体大小，单位px （默认 '16px' ）
|
||||
* @property {Boolean} bold 是否显示粗体 （默认 false ）
|
||||
* @property {String | Number} index 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
* @property {String} hoverClass 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
|
||||
* @property {String} customPrefix 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
|
||||
* @property {String | Number} label 图标右侧的label文字
|
||||
* @property {String} labelPos label相对于图标的位置，只能right或bottom （默认 'right' ）
|
||||
* @property {String | Number} labelSize label字体大小，单位px （默认 '15px' ）
|
||||
* @property {String} labelColor 图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
|
||||
* @property {String | Number} space label与图标的距离，单位px （默认 '3px' ）
|
||||
* @property {String} imgMode 图片的mode
|
||||
* @property {String | Number} width 显示图片小图标时的宽度
|
||||
* @property {String | Number} height 显示图片小图标时的高度
|
||||
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 （默认 0 ）
|
||||
* @property {Boolean} stop 是否阻止事件传播 （默认 false ）
|
||||
* @property {Object} customStyle icon的样式，对象形式
|
||||
* @event {Function} click 点击图标时触发
|
||||
* @event {Function} touchstart 事件触摸时触发
|
||||
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-icon',
|
||||
beforeCreate() {
|
||||
if (!fontUtil.params.loaded) {
|
||||
fontUtil.loadFont();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
emits: ['click'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
computed: {
|
||||
uClasses() {
|
||||
let classes = []
|
||||
classes.push(this.customPrefix + '-' + this.name)
|
||||
// uview-plus内置图标类名为u-iconfont
|
||||
if (this.customPrefix == 'uicon') {
|
||||
classes.push('u-iconfont')
|
||||
} else {
|
||||
// 不能缺少这一步，否则自定义图标会无效
|
||||
classes.push(this.customPrefix)
|
||||
}
|
||||
// 主题色，通过类配置
|
||||
if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ')
|
||||
//#endif
|
||||
return classes
|
||||
},
|
||||
iconStyle() {
|
||||
let style = {}
|
||||
style = {
|
||||
fontSize: addUnit(this.size),
|
||||
lineHeight: addUnit(this.size),
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||
top: addUnit(this.top)
|
||||
}
|
||||
if (this.customPrefix !== 'uicon') {
|
||||
style.fontFamily = this.customPrefix
|
||||
}
|
||||
// 非主题色值时，才当作颜色值
|
||||
if (this.color && !config.type.includes(this.color)) style.color = this.color
|
||||
|
||||
return style
|
||||
},
|
||||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||
isImg() {
|
||||
return this.name.indexOf('/') !== -1
|
||||
},
|
||||
imgStyle() {
|
||||
let style = {}
|
||||
// 如果设置width和height属性，则优先使用，否则使用size属性
|
||||
style.width = this.width ? addUnit(this.width) : addUnit(this.size)
|
||||
style.height = this.height ? addUnit(this.height) : addUnit(this.size)
|
||||
return style
|
||||
},
|
||||
// 通过图标名，查找对应的图标
|
||||
icon() {
|
||||
// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
|
||||
if (this.customPrefix !== "uicon") {
|
||||
return config.customIcons[this.name] || this.name;
|
||||
}
|
||||
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
|
||||
return icons['uicon-' + this.name] || this.name
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addStyle,
|
||||
addUnit,
|
||||
clickHandler(e) {
|
||||
this.$emit('click', this.index, e)
|
||||
// 是否阻止事件冒泡
|
||||
this.stop && this.preventEvent(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 变量定义
|
||||
$u-icon-primary: $u-primary !default;
|
||||
$u-icon-success: $u-success !default;
|
||||
$u-icon-info: $u-info !default;
|
||||
$u-icon-warning: $u-warning !default;
|
||||
$u-icon-error: $u-error !default;
|
||||
$u-icon-label-line-height:1 !default;
|
||||
|
||||
/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
|
||||
// App端通过uni.loadFontFace加载包内本地字体，避免远程字体阻塞页面渲染。
|
||||
@font-face {
|
||||
font-family: 'uicon-iconfont';
|
||||
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.u-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
|
||||
&--left {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--top {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-family: uicon-iconfont;
|
||||
position: relative;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
|
||||
&--primary {
|
||||
color: $u-icon-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $u-icon-success;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $u-icon-error;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $u-icon-warning;
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: $u-icon-info;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&__label {
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: $u-icon-label-line-height;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view
|
||||
class="u-icon"
|
||||
@tap="clickHandler"
|
||||
:class="['u-icon--' + labelPos]"
|
||||
>
|
||||
<image
|
||||
class="u-icon__img"
|
||||
v-if="isImg"
|
||||
:src="name"
|
||||
:mode="imgMode"
|
||||
:style="[imgStyle, addStyle(customStyle)]"
|
||||
></image>
|
||||
<text
|
||||
v-else
|
||||
class="u-icon__icon"
|
||||
:class="uClasses"
|
||||
:style="[iconStyle, addStyle(customStyle)]"
|
||||
:hover-class="hoverClass"
|
||||
>{{icon}}</text>
|
||||
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
|
||||
<text
|
||||
v-if="label !== ''"
|
||||
class="u-icon__label"
|
||||
:style="{
|
||||
color: labelColor,
|
||||
fontSize: addUnit(labelSize),
|
||||
marginLeft: labelPos == 'right' ? addUnit(space) : 0,
|
||||
marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
|
||||
marginRight: labelPos == 'left' ? addUnit(space) : 0,
|
||||
marginBottom: labelPos == 'top' ? addUnit(space) : 0,
|
||||
}"
|
||||
>{{ label }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
||||
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
||||
const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
|
||||
const domModule = weex.requireModule('dom')
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uicon-iconfont",
|
||||
'src': `url('${fontUrl}')`
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 引入图标名称，已经对应的unicode
|
||||
import icons from './icons'
|
||||
import { props } from './props';
|
||||
import { mpMixin } from '../../libs/mixin/mpMixin';
|
||||
import { mixin } from '../../libs/mixin/mixin';
|
||||
import { addUnit, addStyle } from '../../libs/function/index';
|
||||
import config from '../../libs/config/config';
|
||||
/**
|
||||
* icon 图标
|
||||
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||
* @tutorial https://ijry.github.io/uview-plus/components/icon.html
|
||||
* @property {String} name 图标名称，见示例图标集
|
||||
* @property {String} color 图标颜色,可接受主题色 （默认 color['u-content-color'] ）
|
||||
* @property {String | Number} size 图标字体大小，单位px （默认 '16px' ）
|
||||
* @property {Boolean} bold 是否显示粗体 （默认 false ）
|
||||
* @property {String | Number} index 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
* @property {String} hoverClass 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
|
||||
* @property {String} customPrefix 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
|
||||
* @property {String | Number} label 图标右侧的label文字
|
||||
* @property {String} labelPos label相对于图标的位置，只能right或bottom （默认 'right' ）
|
||||
* @property {String | Number} labelSize label字体大小，单位px （默认 '15px' ）
|
||||
* @property {String} labelColor 图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
|
||||
* @property {String | Number} space label与图标的距离，单位px （默认 '3px' ）
|
||||
* @property {String} imgMode 图片的mode
|
||||
* @property {String | Number} width 显示图片小图标时的宽度
|
||||
* @property {String | Number} height 显示图片小图标时的高度
|
||||
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 （默认 0 ）
|
||||
* @property {Boolean} stop 是否阻止事件传播 （默认 false ）
|
||||
* @property {Object} customStyle icon的样式，对象形式
|
||||
* @event {Function} click 点击图标时触发
|
||||
* @event {Function} touchstart 事件触摸时触发
|
||||
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-icon',
|
||||
beforeCreate() {
|
||||
// #ifdef APP-NVUE
|
||||
if (this.customFontFamily) {
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
|
||||
'src': `url('${this.customFontUrl}')`
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
emits: ['click'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
computed: {
|
||||
uClasses() {
|
||||
let classes = []
|
||||
classes.push(this.customPrefix + '-' + this.name)
|
||||
// uView的自定义图标类名为u-iconfont
|
||||
if (this.customPrefix == 'uicon') {
|
||||
classes.push('u-iconfont')
|
||||
} else {
|
||||
// 不能缺少这一步，否则自定义图标会无效
|
||||
classes.push(this.customPrefix)
|
||||
}
|
||||
// 主题色，通过类配置
|
||||
if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ')
|
||||
//#endif
|
||||
return classes
|
||||
},
|
||||
iconStyle() {
|
||||
let style = {}
|
||||
style = {
|
||||
fontSize: addUnit(this.size),
|
||||
lineHeight: addUnit(this.size),
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||
top: addUnit(this.top)
|
||||
}
|
||||
// 非主题色值时，才当作颜色值
|
||||
if (this.color && !config.type.includes(this.color)) style.color = this.color
|
||||
|
||||
return style
|
||||
},
|
||||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||
isImg() {
|
||||
return this.name.indexOf('/') !== -1
|
||||
},
|
||||
imgStyle() {
|
||||
let style = {}
|
||||
// 如果设置width和height属性，则优先使用，否则使用size属性
|
||||
style.width = this.width ? addUnit(this.width) : addUnit(this.size)
|
||||
style.height = this.height ? addUnit(this.height) : addUnit(this.size)
|
||||
return style
|
||||
},
|
||||
// 通过图标名，查找对应的图标
|
||||
icon() {
|
||||
// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
|
||||
if (this.customPrefix !== "uicon") {
|
||||
return this.customIcons[this.customPrefix + '-' + this.name] || this.name;
|
||||
}
|
||||
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
|
||||
return icons['uicon-' + this.name] || this.name
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addStyle,
|
||||
addUnit,
|
||||
clickHandler(e) {
|
||||
this.$emit('click', this.index, e)
|
||||
// 是否阻止事件冒泡
|
||||
this.stop && this.preventEvent(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
// 变量定义
|
||||
$u-icon-primary: $u-primary !default;
|
||||
$u-icon-success: $u-success !default;
|
||||
$u-icon-info: $u-info !default;
|
||||
$u-icon-warning: $u-warning !default;
|
||||
$u-icon-error: $u-error !default;
|
||||
$u-icon-label-line-height:1 !default;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
// 非nvue下加载字体
|
||||
@font-face {
|
||||
font-family: 'uicon-iconfont';
|
||||
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.u-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
|
||||
&--left {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--top {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-family: uicon-iconfont;
|
||||
position: relative;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
|
||||
&--primary {
|
||||
color: $u-icon-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $u-icon-success;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $u-icon-error;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $u-icon-warning;
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: $u-icon-info;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&__label {
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: $u-icon-label-line-height;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
@@ -1,90 +0,0 @@
|
||||
import config from '../../libs/config/config';
|
||||
// #ifdef APP || APP-NVUE
|
||||
import iconFontUrl from './upicon.ttf?url';
|
||||
// #endif
|
||||
|
||||
const iconFontFamily = 'uicon-iconfont';
|
||||
|
||||
let params = {
|
||||
loaded: false
|
||||
};
|
||||
|
||||
const getIconUrl = () => {
|
||||
// #ifdef APP || APP-NVUE
|
||||
return iconFontUrl;
|
||||
// #endif
|
||||
return config.iconUrl;
|
||||
};
|
||||
|
||||
const markFontLoaded = () => {
|
||||
// App端使用包内本地字体，重复注册没有收益且会放大多图标页面开销。
|
||||
// #ifdef APP || APP-NVUE
|
||||
params.loaded = true;
|
||||
return;
|
||||
// #endif
|
||||
// 全局加载不稳定，默认关闭，需要开启可以配置loadFontOnce。
|
||||
if (config.loadFontOnce) {
|
||||
params.loaded = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载字体方法
|
||||
const loadFont = () => {
|
||||
const iconUrl = getIconUrl();
|
||||
markFontLoaded();
|
||||
// #ifdef APP-NVUE
|
||||
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
||||
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
||||
const domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': iconFontFamily,
|
||||
'src': `url('${iconUrl}')`
|
||||
});
|
||||
if (config.customIcon.family) {
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': config.customIcon.family,
|
||||
'src': `url('${config.customIcon.url}')`
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
|
||||
uni.loadFontFace({
|
||||
global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
|
||||
family: iconFontFamily,
|
||||
source: 'url("' + iconUrl + '")',
|
||||
success() {
|
||||
// console.log('内置字体图标加载成功');
|
||||
},
|
||||
fail() {
|
||||
// console.error('内置字体图标加载出错');
|
||||
}
|
||||
});
|
||||
if (config.customIcon.family) {
|
||||
uni.loadFontFace({
|
||||
global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
|
||||
family: config.customIcon.family,
|
||||
source: 'url("' + config.customIcon.url + '")',
|
||||
success() {
|
||||
// console.log('扩展字体图标加载成功');
|
||||
},
|
||||
fail() {
|
||||
// console.error('扩展字体图标加载出错');
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// if (this.customFontFamily) {
|
||||
// domModule.addRule('fontFace', {
|
||||
// 'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
|
||||
// 'src': `url('${this.customFontUrl}')`
|
||||
// })
|
||||
// }
|
||||
// #endif
|
||||
return true;
|
||||
};
|
||||
|
||||
export default {
|
||||
params: params,
|
||||
loadFont
|
||||
}
|
||||
Reference in New Issue
Block a user