create-uniapps 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.mjs +1 -5
- package/package.json +1 -1
- package/template/index.html +0 -1
- package/template/package-lock.json +49 -2
- package/template/package.json +5 -2
- package/template/src/App.vue +0 -1
- package/template/src/main.ts +2 -0
- package/template/src/pages/index/index.vue +2 -2
- package/template/src/pages.json +9 -2
- package/template/src/static/css/index.scss +1 -3
- package/template/src/static/css/tailwind.css +2 -1
- package/template/src/static/font_2225171_8kdcwk4po24.ttf +0 -0
- package/template/src/types/index.d.ts +0 -0
- package/template/src/uni_modules/uview-plus/components/u-icon/font_2225171_8kdcwk4po24.ttf +0 -0
- package/template/src/uni_modules/uview-plus/components/u-icon/u-icon.vue +179 -197
- package/template/src/uni_modules/uview-plus/components/u-icon/util.js +76 -61
- package/template/src/uni_modules/uview-plus/libs/config/config.js +39 -39
- package/template/src/uni_modules/uview-plus/libs/font/font_2225171_8kdcwk4po24.ttf +0 -0
- package/template/src/utils/request.ts +0 -3
- package/template/tsconfig.json +12 -2
package/index.mjs
CHANGED
|
@@ -121,11 +121,7 @@ function printCompletion(targetDir, installDeps) {
|
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
console.log(chalk.dim(` # 启动开发服务器`));
|
|
124
|
-
console.log(` npm run dev`);
|
|
125
|
-
console.log();
|
|
126
|
-
console.log(chalk.dim(` # 构建生产版本`));
|
|
127
|
-
console.log(` npm run build`);
|
|
128
|
-
console.log();
|
|
124
|
+
console.log(` npm run dev:h5`);
|
|
129
125
|
}
|
|
130
126
|
|
|
131
127
|
// 主函数
|
package/package.json
CHANGED
package/template/index.html
CHANGED
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
|
11
11
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
|
12
12
|
</script>
|
|
13
|
-
</script>
|
|
14
13
|
<title></title>
|
|
15
14
|
<!--preload-links-->
|
|
16
15
|
<!--app-context-->
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "
|
|
2
|
+
"name": "uniapp-template-vue3-vite-tailwindcss",
|
|
3
3
|
"version": "0.0.0",
|
|
4
4
|
"lockfileVersion": 3,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"packages": {
|
|
7
7
|
"": {
|
|
8
|
-
"name": "
|
|
8
|
+
"name": "uniapp-template-vue3-vite-tailwindcss",
|
|
9
9
|
"version": "0.0.0",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@dcloudio/uni-app": "3.0.0-4030620241128001",
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
|
|
24
24
|
"@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
|
|
25
25
|
"@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
|
|
26
|
+
"@dcloudio/uni-ui": "^1.5.11",
|
|
26
27
|
"@iconify-json/mdi": "^1.2.3",
|
|
27
28
|
"@iconify-json/ri": "^1.2.5",
|
|
28
29
|
"@iconify/vue": "^5.0.0",
|
|
@@ -50,6 +51,8 @@
|
|
|
50
51
|
"@eslint/js": "^9.31.0",
|
|
51
52
|
"@tailwindcss/postcss": "^4.1.14",
|
|
52
53
|
"@typescript-eslint/eslint-plugin": "^8.38.0",
|
|
54
|
+
"@uni-helper/uni-app-types": "^1.0.0-alpha.6",
|
|
55
|
+
"@uni-helper/uni-ui-types": "^1.0.0-alpha.6",
|
|
53
56
|
"@vue/runtime-core": "^3.4.21",
|
|
54
57
|
"@vue/tsconfig": "^0.7.0",
|
|
55
58
|
"autoprefixer": "^10.4.21",
|
|
@@ -2801,6 +2804,12 @@
|
|
|
2801
2804
|
"debug": "^4.3.3"
|
|
2802
2805
|
}
|
|
2803
2806
|
},
|
|
2807
|
+
"node_modules/@dcloudio/uni-ui": {
|
|
2808
|
+
"version": "1.5.11",
|
|
2809
|
+
"resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.11.tgz",
|
|
2810
|
+
"integrity": "sha512-DBtk046ofmeFd82zRI7d89SoEwrAxYzUN3WVPm1DIBkpLPG5F5QDNkHMnZGu2wNrMEmGBjBpUh3vqEY1L3jaMw==",
|
|
2811
|
+
"license": "Apache-2.0"
|
|
2812
|
+
},
|
|
2804
2813
|
"node_modules/@dcloudio/vite-plugin-uni": {
|
|
2805
2814
|
"version": "3.0.0-4030620241128001",
|
|
2806
2815
|
"resolved": "https://registry.npmjs.org/@dcloudio/vite-plugin-uni/-/vite-plugin-uni-3.0.0-4030620241128001.tgz",
|
|
@@ -5543,6 +5552,44 @@
|
|
|
5543
5552
|
"url": "https://opencollective.com/eslint"
|
|
5544
5553
|
}
|
|
5545
5554
|
},
|
|
5555
|
+
"node_modules/@uni-helper/uni-app-types": {
|
|
5556
|
+
"version": "1.0.0-alpha.6",
|
|
5557
|
+
"resolved": "https://registry.npmjs.org/@uni-helper/uni-app-types/-/uni-app-types-1.0.0-alpha.6.tgz",
|
|
5558
|
+
"integrity": "sha512-t9AKDYBmDaz4IW0fgtBt25ubEzf7kyUeMlHaBaG5nyNGd6pVuDpYkABhsnNPDiZcaHAoN6SbX1SQQx5axDOWbA==",
|
|
5559
|
+
"dev": true,
|
|
5560
|
+
"license": "MIT",
|
|
5561
|
+
"engines": {
|
|
5562
|
+
"node": ">=14.18"
|
|
5563
|
+
},
|
|
5564
|
+
"funding": {
|
|
5565
|
+
"url": "https://github.com/ModyQyW/sponsors"
|
|
5566
|
+
},
|
|
5567
|
+
"peerDependencies": {
|
|
5568
|
+
"typescript": "^5.0.0",
|
|
5569
|
+
"vue": "^3.0.0"
|
|
5570
|
+
}
|
|
5571
|
+
},
|
|
5572
|
+
"node_modules/@uni-helper/uni-ui-types": {
|
|
5573
|
+
"version": "1.0.0-alpha.6",
|
|
5574
|
+
"resolved": "https://registry.npmjs.org/@uni-helper/uni-ui-types/-/uni-ui-types-1.0.0-alpha.6.tgz",
|
|
5575
|
+
"integrity": "sha512-2KuAup2M7rPVzpLaXhhnxCD/Cs5VQYiqzC9XNI/VZuA88+ApPmHzkwyS0THSHnz1VbDIGX/Ju69nj+mApfYKDw==",
|
|
5576
|
+
"dev": true,
|
|
5577
|
+
"license": "MIT",
|
|
5578
|
+
"dependencies": {
|
|
5579
|
+
"@uni-helper/uni-app-types": "1.0.0-alpha.6"
|
|
5580
|
+
},
|
|
5581
|
+
"engines": {
|
|
5582
|
+
"node": ">=14.18"
|
|
5583
|
+
},
|
|
5584
|
+
"funding": {
|
|
5585
|
+
"url": "https://github.com/ModyQyW/sponsors"
|
|
5586
|
+
},
|
|
5587
|
+
"peerDependencies": {
|
|
5588
|
+
"@uni-helper/uni-app-types": "1.0.0-alpha.6",
|
|
5589
|
+
"typescript": "^5.0.0",
|
|
5590
|
+
"vue": "^3.0.0"
|
|
5591
|
+
}
|
|
5592
|
+
},
|
|
5546
5593
|
"node_modules/@volar/language-core": {
|
|
5547
5594
|
"version": "1.11.1",
|
|
5548
5595
|
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
|
package/template/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "
|
|
2
|
+
"name": "uniapp-template-vue3-vite-tailwindcss",
|
|
3
3
|
"version": "0.0.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev:custom": "uni -p",
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
|
|
51
51
|
"@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
|
|
52
52
|
"@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
|
|
53
|
+
"@dcloudio/uni-ui": "^1.5.11",
|
|
53
54
|
"@iconify-json/mdi": "^1.2.3",
|
|
54
55
|
"@iconify-json/ri": "^1.2.5",
|
|
55
56
|
"@iconify/vue": "^5.0.0",
|
|
@@ -77,6 +78,8 @@
|
|
|
77
78
|
"@eslint/js": "^9.31.0",
|
|
78
79
|
"@tailwindcss/postcss": "^4.1.14",
|
|
79
80
|
"@typescript-eslint/eslint-plugin": "^8.38.0",
|
|
81
|
+
"@uni-helper/uni-app-types": "^1.0.0-alpha.6",
|
|
82
|
+
"@uni-helper/uni-ui-types": "^1.0.0-alpha.6",
|
|
80
83
|
"@vue/runtime-core": "^3.4.21",
|
|
81
84
|
"@vue/tsconfig": "^0.7.0",
|
|
82
85
|
"autoprefixer": "^10.4.21",
|
|
@@ -98,4 +101,4 @@
|
|
|
98
101
|
"vite-plugin-eslint": "^1.8.1",
|
|
99
102
|
"vue-tsc": "^1.0.24"
|
|
100
103
|
}
|
|
101
|
-
}
|
|
104
|
+
}
|
package/template/src/App.vue
CHANGED
package/template/src/main.ts
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
5
|
<template>
|
|
6
|
-
<view class="w-full h-[100vh] flex
|
|
7
|
-
<text
|
|
6
|
+
<view class="w-full h-[calc(100vh-88rpx)] !flex justify-center items-center">
|
|
7
|
+
<text>首页</text>
|
|
8
8
|
</view>
|
|
9
9
|
</template>
|
|
10
10
|
|
package/template/src/pages.json
CHANGED
|
@@ -1,16 +1,23 @@
|
|
|
1
1
|
{
|
|
2
|
+
"easycom": {
|
|
3
|
+
"autoscan": true,
|
|
4
|
+
"custom": {
|
|
5
|
+
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
|
|
6
|
+
}
|
|
7
|
+
},
|
|
2
8
|
"pages": [
|
|
3
9
|
{
|
|
4
10
|
"path": "pages/index/index",
|
|
5
11
|
"style": {
|
|
6
|
-
"navigationBarTitleText": "
|
|
7
|
-
"navigationStyle": "custom"
|
|
12
|
+
"navigationBarTitleText": "首页"
|
|
8
13
|
}
|
|
9
14
|
}
|
|
10
15
|
],
|
|
11
16
|
"globalStyle": {
|
|
12
17
|
"navigationBarTextStyle": "black",
|
|
13
18
|
"navigationBarTitleText": "uni-app",
|
|
19
|
+
"navigationBarTitleSize": "18px",
|
|
20
|
+
"navigationBarTitleWeight": "bold",
|
|
14
21
|
"navigationBarBackgroundColor": "#F8F8F8",
|
|
15
22
|
"backgroundColor": "#F8F8F8"
|
|
16
23
|
}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
1
|
+
@import "tailwindcss/preflight";
|
|
2
|
+
@import "tailwindcss/utilities";
|
|
Binary file
|
|
File without changes
|
|
Binary file
|
|
@@ -1,237 +1,219 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<image
|
|
8
|
-
class="u-icon__img"
|
|
9
|
-
v-if="isImg"
|
|
10
|
-
:src="name"
|
|
11
|
-
:mode="imgMode"
|
|
12
|
-
:style="[imgStyle, addStyle(customStyle)]"
|
|
13
|
-
></image>
|
|
14
|
-
<text
|
|
15
|
-
v-else
|
|
16
|
-
class="u-icon__icon"
|
|
17
|
-
:class="uClasses"
|
|
18
|
-
:style="[iconStyle, addStyle(customStyle)]"
|
|
19
|
-
:hover-class="hoverClass"
|
|
20
|
-
>{{icon}}</text>
|
|
2
|
+
<view class="u-icon" @tap="clickHandler" :class="['u-icon--' + labelPos]">
|
|
3
|
+
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle, addStyle(customStyle)]">
|
|
4
|
+
</image>
|
|
5
|
+
<text v-else class="u-icon__icon" :class="uClasses" :style="[iconStyle, addStyle(customStyle)]"
|
|
6
|
+
:hover-class="hoverClass">{{ icon }}</text>
|
|
21
7
|
<!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
|
|
22
|
-
<text
|
|
23
|
-
v-if="label !== ''"
|
|
24
|
-
class="u-icon__label"
|
|
25
|
-
:style="{
|
|
8
|
+
<text v-if="label !== ''" class="u-icon__label" :style="{
|
|
26
9
|
color: labelColor,
|
|
27
10
|
fontSize: addUnit(labelSize),
|
|
28
11
|
marginLeft: labelPos == 'right' ? addUnit(space) : 0,
|
|
29
12
|
marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
|
|
30
13
|
marginRight: labelPos == 'left' ? addUnit(space) : 0,
|
|
31
14
|
marginBottom: labelPos == 'top' ? addUnit(space) : 0,
|
|
32
|
-
}"
|
|
33
|
-
>{{ label }}</text>
|
|
15
|
+
}">{{ label }}</text>
|
|
34
16
|
</view>
|
|
35
17
|
</template>
|
|
36
18
|
|
|
37
19
|
<script>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
20
|
+
// 引入图标名称,已经对应的unicode
|
|
21
|
+
import icons from './icons';
|
|
22
|
+
import { props } from './props';
|
|
23
|
+
import config from '../../libs/config/config';
|
|
24
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
25
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
26
|
+
import { addUnit, addStyle } from '../../libs/function/index';
|
|
27
|
+
import fontUtil from './util';
|
|
28
|
+
/**
|
|
29
|
+
* icon 图标
|
|
30
|
+
* @description 基于字体的图标集,包含了大多数常见场景的图标。
|
|
31
|
+
* @tutorial https://ijry.github.io/uview-plus/components/icon.html
|
|
32
|
+
* @property {String} name 图标名称,见示例图标集
|
|
33
|
+
* @property {String} color 图标颜色,可接受主题色 (默认 color['u-content-color'] )
|
|
34
|
+
* @property {String | Number} size 图标字体大小,单位px (默认 '16px' )
|
|
35
|
+
* @property {Boolean} bold 是否显示粗体 (默认 false )
|
|
36
|
+
* @property {String | Number} index 点击图标的时候传递事件出去的index(用于区分点击了哪一个)
|
|
37
|
+
* @property {String} hoverClass 图标按下去的样式类,用法同uni的view组件的hoverClass参数,详情见官网
|
|
38
|
+
* @property {String} customPrefix 自定义扩展前缀,方便用户扩展自己的图标库 (默认 'uicon' )
|
|
39
|
+
* @property {String | Number} label 图标右侧的label文字
|
|
40
|
+
* @property {String} labelPos label相对于图标的位置,只能right或bottom (默认 'right' )
|
|
41
|
+
* @property {String | Number} labelSize label字体大小,单位px (默认 '15px' )
|
|
42
|
+
* @property {String} labelColor 图标右侧的label文字颜色 ( 默认 color['u-content-color'] )
|
|
43
|
+
* @property {String | Number} space label与图标的距离,单位px (默认 '3px' )
|
|
44
|
+
* @property {String} imgMode 图片的mode
|
|
45
|
+
* @property {String | Number} width 显示图片小图标时的宽度
|
|
46
|
+
* @property {String | Number} height 显示图片小图标时的高度
|
|
47
|
+
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下,让图标垂直居中的用途 (默认 0 )
|
|
48
|
+
* @property {Boolean} stop 是否阻止事件传播 (默认 false )
|
|
49
|
+
* @property {Object} customStyle icon的样式,对象形式
|
|
50
|
+
* @event {Function} click 点击图标时触发
|
|
51
|
+
* @event {Function} touchstart 事件触摸时触发
|
|
52
|
+
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
|
|
53
|
+
*/
|
|
54
|
+
export default {
|
|
55
|
+
name: 'u-icon',
|
|
56
|
+
beforeCreate() {
|
|
57
|
+
fontUtil.loadFont();
|
|
58
|
+
},
|
|
59
|
+
data() {
|
|
60
|
+
return {
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
emits: ['click'],
|
|
64
|
+
mixins: [mpMixin, mixin, props],
|
|
65
|
+
computed: {
|
|
66
|
+
uClasses() {
|
|
67
|
+
let classes = []
|
|
68
|
+
classes.push(this.customPrefix + '-' + this.name)
|
|
69
|
+
// uview-plus内置图标类名为u-iconfont
|
|
70
|
+
if (this.customPrefix == 'uicon') {
|
|
71
|
+
classes.push('u-iconfont')
|
|
72
|
+
} else {
|
|
73
|
+
// 不能缺少这一步,否则自定义图标会无效
|
|
74
|
+
classes.push(this.customPrefix)
|
|
79
75
|
}
|
|
76
|
+
// 主题色,通过类配置
|
|
77
|
+
if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
|
78
|
+
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
|
|
79
|
+
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
|
|
80
|
+
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
|
81
|
+
classes = classes.join(' ')
|
|
82
|
+
//#endif
|
|
83
|
+
return classes
|
|
80
84
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
//
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
classes.push(this.customPrefix)
|
|
93
|
-
}
|
|
94
|
-
// 主题色,通过类配置
|
|
95
|
-
if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
|
96
|
-
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
|
|
97
|
-
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
|
|
98
|
-
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
|
99
|
-
classes = classes.join(' ')
|
|
100
|
-
//#endif
|
|
101
|
-
return classes
|
|
102
|
-
},
|
|
103
|
-
iconStyle() {
|
|
104
|
-
let style = {}
|
|
105
|
-
style = {
|
|
106
|
-
fontSize: addUnit(this.size),
|
|
107
|
-
lineHeight: addUnit(this.size),
|
|
108
|
-
fontWeight: this.bold ? 'bold' : 'normal',
|
|
109
|
-
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
|
|
110
|
-
top: addUnit(this.top)
|
|
111
|
-
}
|
|
112
|
-
if (this.customPrefix !== 'uicon') {
|
|
113
|
-
style.fontFamily = this.customPrefix
|
|
114
|
-
}
|
|
115
|
-
// 非主题色值时,才当作颜色值
|
|
116
|
-
if (this.color && !config.type.includes(this.color)) style.color = this.color
|
|
117
|
-
|
|
118
|
-
return style
|
|
119
|
-
},
|
|
120
|
-
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
|
|
121
|
-
isImg() {
|
|
122
|
-
return this.name.indexOf('/') !== -1
|
|
123
|
-
},
|
|
124
|
-
imgStyle() {
|
|
125
|
-
let style = {}
|
|
126
|
-
// 如果设置width和height属性,则优先使用,否则使用size属性
|
|
127
|
-
style.width = this.width ? addUnit(this.width) : addUnit(this.size)
|
|
128
|
-
style.height = this.height ? addUnit(this.height) : addUnit(this.size)
|
|
129
|
-
return style
|
|
130
|
-
},
|
|
131
|
-
// 通过图标名,查找对应的图标
|
|
132
|
-
icon() {
|
|
133
|
-
// 使用自定义图标的时候页面上会把name属性也展示出来,所以在这里处理一下
|
|
134
|
-
if (this.customPrefix !== "uicon") {
|
|
135
|
-
return config.customIcons[this.name] || this.name;
|
|
136
|
-
}
|
|
137
|
-
// 如果内置的图标中找不到对应的图标,就直接返回name值,因为用户可能传入的是unicode代码
|
|
138
|
-
return icons['uicon-' + this.name] || this.name
|
|
85
|
+
iconStyle() {
|
|
86
|
+
let style = {}
|
|
87
|
+
style = {
|
|
88
|
+
fontSize: addUnit(this.size),
|
|
89
|
+
lineHeight: addUnit(this.size),
|
|
90
|
+
fontWeight: this.bold ? 'bold' : 'normal',
|
|
91
|
+
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
|
|
92
|
+
top: addUnit(this.top)
|
|
93
|
+
}
|
|
94
|
+
if (this.customPrefix !== 'uicon') {
|
|
95
|
+
style.fontFamily = this.customPrefix
|
|
139
96
|
}
|
|
97
|
+
// 非主题色值时,才当作颜色值
|
|
98
|
+
if (this.color && !config.type.includes(this.color)) style.color = this.color
|
|
99
|
+
|
|
100
|
+
return style
|
|
101
|
+
},
|
|
102
|
+
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
|
|
103
|
+
isImg() {
|
|
104
|
+
return this.name.indexOf('/') !== -1
|
|
105
|
+
},
|
|
106
|
+
imgStyle() {
|
|
107
|
+
let style = {}
|
|
108
|
+
// 如果设置width和height属性,则优先使用,否则使用size属性
|
|
109
|
+
style.width = this.width ? addUnit(this.width) : addUnit(this.size)
|
|
110
|
+
style.height = this.height ? addUnit(this.height) : addUnit(this.size)
|
|
111
|
+
return style
|
|
140
112
|
},
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
this
|
|
146
|
-
// 是否阻止事件冒泡
|
|
147
|
-
this.stop && this.preventEvent(e)
|
|
113
|
+
// 通过图标名,查找对应的图标
|
|
114
|
+
icon() {
|
|
115
|
+
// 使用自定义图标的时候页面上会把name属性也展示出来,所以在这里处理一下
|
|
116
|
+
if (this.customPrefix !== "uicon") {
|
|
117
|
+
return config.customIcons[this.name] || this.name;
|
|
148
118
|
}
|
|
119
|
+
// 如果内置的图标中找不到对应的图标,就直接返回name值,因为用户可能传入的是unicode代码
|
|
120
|
+
return icons['uicon-' + this.name] || this.name
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
methods: {
|
|
124
|
+
addStyle,
|
|
125
|
+
addUnit,
|
|
126
|
+
clickHandler(e) {
|
|
127
|
+
this.$emit('click', this.index, e)
|
|
128
|
+
// 是否阻止事件冒泡
|
|
129
|
+
this.stop && this.preventEvent(e)
|
|
149
130
|
}
|
|
150
131
|
}
|
|
132
|
+
}
|
|
151
133
|
</script>
|
|
152
134
|
|
|
153
135
|
<style lang="scss" scoped>
|
|
136
|
+
// 变量定义
|
|
137
|
+
$u-icon-primary: $u-primary !default;
|
|
138
|
+
$u-icon-success: $u-success !default;
|
|
139
|
+
$u-icon-info: $u-info !default;
|
|
140
|
+
$u-icon-warning: $u-warning !default;
|
|
141
|
+
$u-icon-error: $u-error !default;
|
|
142
|
+
$u-icon-label-line-height: 1 !default;
|
|
143
|
+
|
|
144
|
+
/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
|
|
145
|
+
// 2025/04/09在App/微信/支付宝/鸿蒙元服务已改用uni.loadFontFace加载字体
|
|
146
|
+
@font-face {
|
|
147
|
+
font-family: 'uicon-iconfont';
|
|
148
|
+
src: url('./font_2225171_8kdcwk4po24.ttf') format('truetype');
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* #endif */
|
|
152
|
+
|
|
153
|
+
.u-icon {
|
|
154
|
+
/* #ifndef APP-NVUE */
|
|
155
|
+
display: flex;
|
|
156
|
+
/* #endif */
|
|
157
|
+
align-items: center;
|
|
154
158
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
$u-icon-info: $u-info !default;
|
|
159
|
-
$u-icon-warning: $u-warning !default;
|
|
160
|
-
$u-icon-error: $u-error !default;
|
|
161
|
-
$u-icon-label-line-height:1 !default;
|
|
162
|
-
|
|
163
|
-
/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
|
|
164
|
-
// 2025/04/09在App/微信/支付宝/鸿蒙元服务已改用uni.loadFontFace加载字体
|
|
165
|
-
@font-face {
|
|
166
|
-
font-family: 'uicon-iconfont';
|
|
167
|
-
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
|
|
159
|
+
&--left {
|
|
160
|
+
flex-direction: row-reverse;
|
|
161
|
+
align-items: center;
|
|
168
162
|
}
|
|
169
|
-
/* #endif */
|
|
170
163
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
display: flex;
|
|
174
|
-
/* #endif */
|
|
164
|
+
&--right {
|
|
165
|
+
flex-direction: row;
|
|
175
166
|
align-items: center;
|
|
167
|
+
}
|
|
176
168
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
169
|
+
&--top {
|
|
170
|
+
flex-direction: column-reverse;
|
|
171
|
+
justify-content: center;
|
|
172
|
+
}
|
|
181
173
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
174
|
+
&--bottom {
|
|
175
|
+
flex-direction: column;
|
|
176
|
+
justify-content: center;
|
|
177
|
+
}
|
|
186
178
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
179
|
+
&__icon {
|
|
180
|
+
font-family: uicon-iconfont;
|
|
181
|
+
position: relative;
|
|
182
|
+
@include flex;
|
|
183
|
+
align-items: center;
|
|
191
184
|
|
|
192
|
-
&--
|
|
193
|
-
|
|
194
|
-
justify-content: center;
|
|
185
|
+
&--primary {
|
|
186
|
+
color: $u-icon-primary;
|
|
195
187
|
}
|
|
196
188
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
@include flex;
|
|
201
|
-
align-items: center;
|
|
202
|
-
|
|
203
|
-
&--primary {
|
|
204
|
-
color: $u-icon-primary;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
&--success {
|
|
208
|
-
color: $u-icon-success;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
&--error {
|
|
212
|
-
color: $u-icon-error;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
&--warning {
|
|
216
|
-
color: $u-icon-warning;
|
|
217
|
-
}
|
|
189
|
+
&--success {
|
|
190
|
+
color: $u-icon-success;
|
|
191
|
+
}
|
|
218
192
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
}
|
|
193
|
+
&--error {
|
|
194
|
+
color: $u-icon-error;
|
|
222
195
|
}
|
|
223
196
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
height: auto;
|
|
227
|
-
will-change: transform;
|
|
228
|
-
/* #endif */
|
|
197
|
+
&--warning {
|
|
198
|
+
color: $u-icon-warning;
|
|
229
199
|
}
|
|
230
200
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
line-height: $u-icon-label-line-height;
|
|
234
|
-
/* #endif */
|
|
201
|
+
&--info {
|
|
202
|
+
color: $u-icon-info;
|
|
235
203
|
}
|
|
236
204
|
}
|
|
205
|
+
|
|
206
|
+
&__img {
|
|
207
|
+
/* #ifndef APP-NVUE */
|
|
208
|
+
height: auto;
|
|
209
|
+
will-change: transform;
|
|
210
|
+
/* #endif */
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&__label {
|
|
214
|
+
/* #ifndef APP-NVUE */
|
|
215
|
+
line-height: $u-icon-label-line-height;
|
|
216
|
+
/* #endif */
|
|
217
|
+
}
|
|
218
|
+
}
|
|
237
219
|
</style>
|
|
@@ -1,75 +1,90 @@
|
|
|
1
1
|
import config from '../../libs/config/config';
|
|
2
2
|
// 定义高阶函数
|
|
3
3
|
function once(fn) {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
let called = false;
|
|
5
|
+
let result;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
return function (...args) {
|
|
8
|
+
if (!called) {
|
|
9
|
+
result = fn.apply(this, args);
|
|
10
|
+
called = true;
|
|
11
|
+
}
|
|
12
|
+
return result;
|
|
13
|
+
};
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
// 使用高阶函数
|
|
17
17
|
const loadFont = once(() => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
18
|
+
// console.log('这个函数只能执行一次');
|
|
19
|
+
// #ifdef APP-NVUE
|
|
20
|
+
// nvue通过weex的dom模块引入字体,相关文档地址如下:
|
|
21
|
+
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
|
22
|
+
const domModule = weex.requireModule('dom');
|
|
23
|
+
domModule.addRule('fontFace', {
|
|
24
|
+
'fontFamily': "uicon-iconfont",
|
|
25
|
+
'src': `url('${config.iconUrl}')`
|
|
26
|
+
});
|
|
27
|
+
if (config.customIcon.family) {
|
|
28
|
+
domModule.addRule('fontFace', {
|
|
29
|
+
'fontFamily': config.customIcon.family,
|
|
30
|
+
'src': `url('${config.customIcon.url}')`
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
// #endif
|
|
34
|
+
// #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
|
|
35
|
+
console.log('📦 开始加载 uView Plus 字体:', config.iconUrl);
|
|
36
|
+
uni.loadFontFace({
|
|
37
|
+
global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效,需在 app.vue 中调用。
|
|
38
|
+
family: 'uicon-iconfont',
|
|
39
|
+
source: 'url("' + config.iconUrl + '")',
|
|
40
|
+
success() {
|
|
41
|
+
console.log('✅ uView Plus 字体加载成功:', config.iconUrl);
|
|
42
|
+
},
|
|
43
|
+
fail(err) {
|
|
44
|
+
console.error('❌ uView Plus 字体加载失败:', config.iconUrl, err);
|
|
45
|
+
// 如果主路径失败,尝试备用路径
|
|
46
|
+
const fallbackUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf';
|
|
47
|
+
console.log('🔄 尝试备用字体路径:', fallbackUrl);
|
|
48
|
+
uni.loadFontFace({
|
|
49
|
+
global: true,
|
|
50
|
+
family: 'uicon-iconfont',
|
|
51
|
+
source: 'url("' + fallbackUrl + '")',
|
|
52
|
+
success() {
|
|
53
|
+
console.log('✅ 备用字体加载成功:', fallbackUrl);
|
|
54
|
+
},
|
|
55
|
+
fail(fallbackErr) {
|
|
56
|
+
console.error('❌ 备用字体也加载失败:', fallbackUrl, fallbackErr);
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
if (config.customIcon.family) {
|
|
62
|
+
uni.loadFontFace({
|
|
63
|
+
global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效,需在 app.vue 中调用。
|
|
64
|
+
family: config.customIcon.family,
|
|
65
|
+
source: 'url("' + config.customIcon.url + '")',
|
|
66
|
+
success() {
|
|
67
|
+
// console.log('扩展字体图标加载成功');
|
|
68
|
+
},
|
|
69
|
+
fail() {
|
|
70
|
+
// console.error('扩展字体图标加载出错');
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
// #endif
|
|
75
|
+
// #ifdef APP-NVUE
|
|
76
|
+
if (this.customFontFamily) {
|
|
77
|
+
domModule.addRule('fontFace', {
|
|
78
|
+
'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
|
|
79
|
+
'src': `url('${this.customFontUrl}')`
|
|
80
|
+
})
|
|
81
|
+
}
|
|
82
|
+
// #endif
|
|
83
|
+
return true;
|
|
69
84
|
});
|
|
70
85
|
|
|
71
86
|
let fontUtil = {
|
|
72
|
-
|
|
87
|
+
loadFont
|
|
73
88
|
}
|
|
74
89
|
|
|
75
90
|
export default fontUtil
|
|
@@ -6,45 +6,45 @@ if (process.env.NODE_ENV === 'development') {
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
9
|
+
v: version,
|
|
10
|
+
version,
|
|
11
|
+
// 主题名称
|
|
12
|
+
type: [
|
|
13
|
+
'primary',
|
|
14
|
+
'success',
|
|
15
|
+
'info',
|
|
16
|
+
'error',
|
|
17
|
+
'warning'
|
|
18
|
+
],
|
|
19
|
+
// 颜色部分,本来可以通过scss的:export导出供js使用,但是奈何nvue不支持
|
|
20
|
+
color: {
|
|
21
|
+
'u-primary': '#2979ff',
|
|
22
|
+
'u-warning': '#ff9900',
|
|
23
|
+
'u-success': '#19be6b',
|
|
24
|
+
'u-error': '#fa3534',
|
|
25
|
+
'u-info': '#909399',
|
|
26
|
+
'u-main-color': '#303133',
|
|
27
|
+
'u-content-color': '#606266',
|
|
28
|
+
'u-tips-color': '#909399',
|
|
29
|
+
'u-light-color': '#c0c4cc',
|
|
30
|
+
'up-primary': '#2979ff',
|
|
31
|
+
'up-warning': '#ff9900',
|
|
32
|
+
'up-success': '#19be6b',
|
|
33
|
+
'up-error': '#fa3534',
|
|
34
|
+
'up-info': '#909399',
|
|
35
|
+
'up-main-color': '#303133',
|
|
36
|
+
'up-content-color': '#606266',
|
|
37
|
+
'up-tips-color': '#909399',
|
|
38
|
+
'up-light-color': '#c0c4cc'
|
|
39
|
+
},
|
|
40
|
+
// 字体图标地址
|
|
41
|
+
iconUrl: '/static/font_2225171_8kdcwk4po24.ttf',
|
|
42
|
+
// 自定义图标
|
|
43
|
+
customIcon: {
|
|
44
|
+
family: '',
|
|
45
|
+
url: ''
|
|
46
|
+
},
|
|
47
|
+
customIcons: {}, // 自定义图标与unicode对应关系
|
|
48
48
|
// 默认单位,可以通过配置为rpx,那么在用于传入组件大小参数为数值时,就默认为rpx
|
|
49
49
|
unit: 'px',
|
|
50
50
|
// 拦截器
|
|
Binary file
|
package/template/tsconfig.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": "@vue/tsconfig/tsconfig.json",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
+
"moduleResolution": "bundler",
|
|
4
5
|
"sourceMap": true,
|
|
5
6
|
"baseUrl": ".",
|
|
6
7
|
"paths": {
|
|
@@ -13,14 +14,23 @@
|
|
|
13
14
|
"dom"
|
|
14
15
|
],
|
|
15
16
|
"types": [
|
|
16
|
-
"
|
|
17
|
+
"vite/client",
|
|
18
|
+
"@dcloudio/types",
|
|
19
|
+
"@uni-helper/uni-app-types",
|
|
20
|
+
"@uni-helper/uni-ui-types"
|
|
17
21
|
],
|
|
18
22
|
"verbatimModuleSyntax": true,
|
|
19
23
|
},
|
|
24
|
+
"vueCompilerOptions": {
|
|
25
|
+
"plugins": [
|
|
26
|
+
"@uni-helper/uni-app-types/volar-plugin"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
20
29
|
"include": [
|
|
21
30
|
"src/**/*.ts",
|
|
22
31
|
"src/**/*.d.ts",
|
|
23
32
|
"src/**/*.tsx",
|
|
24
|
-
"src/**/*.vue"
|
|
33
|
+
"src/**/*.vue",
|
|
34
|
+
"*.d.ts"
|
|
25
35
|
]
|
|
26
36
|
}
|