提交 a6700de3 编写于 作者: M mehaotian

fix: 修改 uni-icons 兼容问题

上级 4783369e
## 2.0.9(2024-01-12)
fix: 修复图标大小默认值错误的问题
## 2.0.8(2023-12-14) ## 2.0.8(2023-12-14)
- 修复 项目未使用 ts 情况下,打包报错的bug - 修复 项目未使用 ts 情况下,打包报错的bug
## 2.0.7(2023-12-14) ## 2.0.7(2023-12-14)
......
<template> <template>
<text class="uni-icons" :style="styleObj"> <text class="uni-icons" :style="styleObj">
<slot>{{unicode}}</slot> <slot>{{unicode}}</slot>
</text> </text>
</template> </template>
<script> <script>
import { fontData, IconsDataItem } from './uniicons_file' import { fontData, IconsDataItem } from './uniicons_file'
/** /**
* Icons 图标 * Icons 图标
* @description 用于展示 icon 图标 * @description 用于展示 icon 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小 * @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例 * @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色 * @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标 * @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件 * @event {Function} click 点击 Icon 触发事件
*/ */
export default { export default {
name: "uni-icons", name: "uni-icons",
props: { props: {
type: { type: {
type: String, type: String,
default: '' default: ''
}, },
color: { color: {
type: String, type: String,
default: '#333333' default: '#333333'
}, },
size: { size: {
type: Object, type: Object,
default: 24 default: 16
}, },
fontFamily: { fontFamily: {
type: String, type: String,
default: '' default: ''
} }
}, },
data() { data() {
return {}; return {};
}, },
computed: { computed: {
unicode() : string { unicode() : string {
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type }) let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
if (codes !== null) { if (codes !== null) {
return codes.unicode return codes.unicode
} }
return '' return ''
}, },
iconSize() : string { iconSize() : string {
const size = this.size const size = this.size
if (typeof size == 'string') { if (typeof size == 'string') {
const reg = /^[0-9]*$/g const reg = /^[0-9]*$/g
return reg.test(size as string) ? '' + size + 'px' : '' + size; return reg.test(size as string) ? '' + size + 'px' : '' + size;
// return '' + this.size // return '' + this.size
} }
return this.getFontSize(size as number) return this.getFontSize(size as number)
}, },
styleObj() : UTSJSONObject { styleObj() : UTSJSONObject {
if (this.fontFamily !== '') { if (this.fontFamily !== '') {
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily } return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
} }
return { color: this.color, fontSize: this.iconSize } return { color: this.color, fontSize: this.iconSize }
} }
}, },
created() { }, created() { },
methods: { methods: {
/** /**
* 字体大小 * 字体大小
*/ */
getFontSize(size : number) : string { getFontSize(size : number) : string {
return size + 'px'; return size + 'px';
}, },
}, },
} }
</script> </script>
<style scoped> <style scoped>
@font-face { @font-face {
font-family: UniIconsFontFamily; font-family: UniIconsFontFamily;
src: url('./uniicons.ttf'); src: url('./uniicons.ttf');
} }
.uni-icons { .uni-icons {
font-family: UniIconsFontFamily; font-family: UniIconsFontFamily;
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
color: #333; color: #333;
} }
</style> </style>
<template> <template>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text> <text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"> <text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
<slot></slot> <slot></slot>
</text> </text>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script> <script>
import { fontData } from './uniicons_file_vue.js'; import { fontData } from './uniicons_file_vue.js';
const getVal = (val) => { const getVal = (val) => {
const reg = /^[0-9]*$/g const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val; return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
} }
// #ifdef APP-NVUE // #ifdef APP-NVUE
var domModule = weex.requireModule('dom'); var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf' import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', { domModule.addRule('fontFace', {
'fontFamily': "uniicons", 'fontFamily': "uniicons",
'src': "url('" + iconUrl + "')" 'src': "url('" + iconUrl + "')"
}); });
// #endif // #endif
/** /**
* Icons 图标 * Icons 图标
* @description 用于展示 icons 图标 * @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小 * @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例 * @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色 * @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标 * @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件 * @event {Function} click 点击 Icon 触发事件
*/ */
export default { export default {
name: 'UniIcons', name: 'UniIcons',
emits: ['click'], emits: ['click'],
props: { props: {
type: { type: {
type: String, type: String,
default: '' default: ''
}, },
color: { color: {
type: String, type: String,
default: '#333333' default: '#333333'
}, },
size: { size: {
type: [Number, String], type: [Number, String],
default: 24 default: 16
}, },
customPrefix: { customPrefix: {
type: String, type: String,
default: '' default: ''
}, },
fontFamily: { fontFamily: {
type: String, type: String,
default: '' default: ''
} }
}, },
data() { data() {
return { return {
icons: fontData icons: fontData
} }
}, },
computed: { computed: {
unicode() { unicode() {
let code = this.icons.find(v => v.font_class === this.type) let code = this.icons.find(v => v.font_class === this.type)
if (code) { if (code) {
return code.unicode return code.unicode
} }
return '' return ''
}, },
iconSize() { iconSize() {
return getVal(this.size) return getVal(this.size)
}, },
styleObj() { styleObj() {
if (this.fontFamily !== '') { if (this.fontFamily !== '') {
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};` return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
} }
return `color: ${this.color}; font-size: ${this.iconSize};` return `color: ${this.color}; font-size: ${this.iconSize};`
} }
}, },
methods: { methods: {
_onClick() { _onClick() {
this.$emit('click') this.$emit('click')
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@import './uniicons.css'; @import './uniicons.css';
@font-face { @font-face {
font-family: uniicons; font-family: uniicons;
src: url('./uniicons.ttf'); src: url('./uniicons.ttf');
} }
/* #endif */ /* #endif */
.uni-icons { .uni-icons {
font-family: uniicons; font-family: uniicons;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
} }
</style> </style>
export type IconsData = { export type IconsData = {
id : string id : string
name : string name : string
font_family : string font_family : string
css_prefix_text : string css_prefix_text : string
description : string description : string
glyphs : Array<IconsDataItem> glyphs : Array<IconsDataItem>
} }
export type IconsDataItem = { export type IconsDataItem = {
font_class : string font_class : string
unicode : string unicode : string
} }
export const fontData = [ export const fontData = [
{ {
"font_class": "arrow-down", "font_class": "arrow-down",
...@@ -659,6 +659,6 @@ export const fontData = [ ...@@ -659,6 +659,6 @@ export const fontData = [
"font_class": "weixin", "font_class": "weixin",
"unicode": "\ue691" "unicode": "\ue691"
} }
] as IconsDataItem[] ] as IconsDataItem[]
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson) // export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
export const fontData = [ export const fontData = [
{ {
"font_class": "arrow-down", "font_class": "arrow-down",
...@@ -644,6 +644,6 @@ export const fontData = [ ...@@ -644,6 +644,6 @@ export const fontData = [
"font_class": "weixin", "font_class": "weixin",
"unicode": "\ue691" "unicode": "\ue691"
} }
] ]
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson) // export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
{ {
"id": "uni-icons", "id": "uni-icons",
"displayName": "uni-icons 图标", "displayName": "uni-icons 图标",
"version": "2.0.8", "version": "2.0.9",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。", "description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册