stellar-ui-plus 1.21.2 → 1.21.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/components/ste-goods-list/ste-goods-list.vue +1 -1
- package/components/ste-login-info/ATTRIBUTES.md +5 -7
- package/components/ste-login-info/README.md +13 -52
- package/components/ste-login-info/props.ts +11 -5
- package/components/ste-login-info/ste-login-info.easycom.json +12 -24
- package/components/ste-login-info/ste-login-info.vue +11 -7
- package/components/ste-login-info/type.d.ts +4 -5
- package/components/ste-search-box/ATTRIBUTES.md +1 -1
- package/components/ste-search-box/props.ts +1 -1
- package/components/ste-search-box/ste-search-box.easycom.json +0 -4
- package/components/ste-user-info/ste-user-info.vue +4 -2
- package/package.json +1 -1
- package/types/components.d.ts +10 -6
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
#### Props
|
|
2
2
|
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
|
|
3
3
|
| ----- | ----- | --- | ------- | ------ | -------- |
|
|
4
|
-
| `
|
|
5
|
-
| `
|
|
6
|
-
| `
|
|
7
|
-
| `
|
|
8
|
-
| `
|
|
9
|
-
| `subTitleIcon` | 副标题图标code | `string` | `` | - | - |
|
|
10
|
-
| `fontFamily` | icon的字体名 | `string` | `ste-iconfont-1709689042473` | - | - |
|
|
4
|
+
| `avatar` | 头像url | `string` | `` | - | - |
|
|
5
|
+
| `nickname` | 昵称 | `string` | `` | - | - |
|
|
6
|
+
| `loginStatus` | 登录状态 0未登录 1已登录 | `number` | `0` | - | - |
|
|
7
|
+
| `showTitleIcon` | 是否显示主标题后面的图标 | `boolean` | `false` | - | - |
|
|
8
|
+
| `fontFamily` | icon的字体名 | `string` | `` | - | - |
|
|
11
9
|
| `loginStatus` | 登录状态 | `Number` | `1` | `0`：未登录<br/>`1`：登录 | - |
|
|
12
10
|
| `loginSrc` | 未登录头像 | `string` | `` | - | - |
|
|
13
11
|
| `loginTitle` | 未登录标题 | `string` | `` | - | - |
|
|
@@ -7,32 +7,17 @@
|
|
|
7
7
|
```html
|
|
8
8
|
<template>
|
|
9
9
|
<view style="width: 100%">
|
|
10
|
-
<ste-login-info
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
@user-click="handleUserClick"
|
|
19
|
-
/>
|
|
10
|
+
<ste-login-info nickname="小百食的名称" avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" :login-status="1" @avatar-click="handleAvatarClick" @user-click="handleUserClick">
|
|
11
|
+
<template #desc>
|
|
12
|
+
<view class="desc">
|
|
13
|
+
<ste-icon code="" color="#EC3E1A" size="26" margin-bottom="2"></ste-icon>
|
|
14
|
+
<view class="title">中百食堂</view>
|
|
15
|
+
</view>
|
|
16
|
+
</template>
|
|
17
|
+
</ste-login-info>
|
|
20
18
|
</view>
|
|
21
19
|
</template>
|
|
22
20
|
<script lang="ts" setup>
|
|
23
|
-
import { reactive } from 'vue';
|
|
24
|
-
|
|
25
|
-
const data1 = reactive({
|
|
26
|
-
avatarUrl: 'https://image.whzb.com/chain/StellarUI/头像/付宇威1.png',
|
|
27
|
-
title: '小百食的名称',
|
|
28
|
-
subTitle: '武汉数智云科技有限公司',
|
|
29
|
-
subTitleIcon: '',
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
const handleDataClick = (item: any) => {
|
|
33
|
-
console.log('item is 1', item);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
21
|
const handleAvatarClick = () => {
|
|
37
22
|
console.log('avatar click');
|
|
38
23
|
};
|
|
@@ -43,42 +28,18 @@
|
|
|
43
28
|
</script>
|
|
44
29
|
```
|
|
45
30
|
|
|
46
|
-
####
|
|
31
|
+
#### 未登录
|
|
47
32
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<ste-login-info :title="data1.title" :avatarUrl="data1.avatarUrl" />
|
|
52
|
-
</view>
|
|
53
|
-
</template>
|
|
54
|
-
<script lang="ts" setup>
|
|
55
|
-
import { reactive } from 'vue';
|
|
56
|
-
|
|
57
|
-
const data1 = reactive({
|
|
58
|
-
avatarUrl: 'https://image.whzb.com/chain/StellarUI/头像/付宇威1.png',
|
|
59
|
-
title: '小百食的名称',
|
|
60
|
-
subTitle: '武汉数智云科技有限公司',
|
|
61
|
-
});
|
|
62
|
-
</script>
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
#### 类型2
|
|
33
|
+
- 通过 `loginStatus`设置登录状态，`0`：未登录，`1`：登录，默认为`1`
|
|
34
|
+
- 通过 `loginSrc`设置未登录头像，默认为``
|
|
35
|
+
- 通过 `loginTitle`设置未登录标题，默认为``
|
|
66
36
|
|
|
67
37
|
```html
|
|
68
38
|
<template>
|
|
69
39
|
<view style="width: 100%">
|
|
70
|
-
<ste-login-info mainColor="#757575" :
|
|
40
|
+
<ste-login-info mainColor="#757575" :loginStatus="0" loginSrc="https://image.whzb.com/chain/StellarUI/%E5%9B%BE%E7%89%87.jpg" loginTitle="请登录" />
|
|
71
41
|
</view>
|
|
72
42
|
</template>
|
|
73
|
-
<script lang="ts" setup>
|
|
74
|
-
import { reactive } from 'vue';
|
|
75
|
-
|
|
76
|
-
const data1 = reactive({
|
|
77
|
-
avatarUrl: 'https://image.whzb.com/chain/StellarUI/头像/付宇威1.png',
|
|
78
|
-
title: '小百食的名称',
|
|
79
|
-
subTitle: '武汉数智云科技有限公司',
|
|
80
|
-
});
|
|
81
|
-
</script>
|
|
82
43
|
```
|
|
83
44
|
|
|
84
45
|
---$
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
import type { LoginStatus } from './type';
|
|
3
|
+
|
|
1
4
|
const loginInfoProps = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
/** 头像 */
|
|
6
|
+
avatar: { type: String, default: '' },
|
|
7
|
+
/** 昵称 */
|
|
8
|
+
nickname: { type: String, default: '' },
|
|
6
9
|
subTitle: { type: String, default: '' },
|
|
7
10
|
subTitleIcon: { type: String, default: '' },
|
|
8
11
|
fontFamily: { type: String, default: 'ste-iconfont-1709689042473' },
|
|
9
|
-
|
|
12
|
+
/** 登录状态 0未登录 1已登录 */
|
|
13
|
+
loginStatus: { type: Number as PropType<LoginStatus>, default: 1 },
|
|
14
|
+
/** 未登录头像 */
|
|
10
15
|
loginSrc: { type: String, default: '' },
|
|
16
|
+
/** 未登录标题 */
|
|
11
17
|
loginTitle: { type: String, default: '' },
|
|
12
18
|
};
|
|
13
19
|
|
|
@@ -5,46 +5,34 @@
|
|
|
5
5
|
"tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=main-info",
|
|
6
6
|
"attributes": [
|
|
7
7
|
{
|
|
8
|
-
"name": "
|
|
9
|
-
"description": "主颜色",
|
|
10
|
-
"type": "string",
|
|
11
|
-
"default": ""
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"name": "showAvatar",
|
|
15
|
-
"description": "是否显示头像，若未配置头像url也不显示头像",
|
|
16
|
-
"type": "boolean",
|
|
17
|
-
"default": "true"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"name": "avatarUrl",
|
|
8
|
+
"name": "avatar",
|
|
21
9
|
"description": "头像url",
|
|
22
10
|
"type": "string",
|
|
23
11
|
"default": ""
|
|
24
12
|
},
|
|
25
13
|
{
|
|
26
|
-
"name": "
|
|
27
|
-
"description": "
|
|
14
|
+
"name": "nickname",
|
|
15
|
+
"description": "昵称",
|
|
28
16
|
"type": "string",
|
|
29
17
|
"default": ""
|
|
30
18
|
},
|
|
31
19
|
{
|
|
32
|
-
"name": "
|
|
33
|
-
"description": "
|
|
34
|
-
"type": "
|
|
35
|
-
"default":
|
|
20
|
+
"name": "loginStatus",
|
|
21
|
+
"description": "登录状态 0未登录 1已登录",
|
|
22
|
+
"type": "number",
|
|
23
|
+
"default": 0
|
|
36
24
|
},
|
|
37
25
|
{
|
|
38
|
-
"name": "
|
|
39
|
-
"description": "
|
|
40
|
-
"type": "
|
|
41
|
-
"default":
|
|
26
|
+
"name": "showTitleIcon",
|
|
27
|
+
"description": "是否显示主标题后面的图标",
|
|
28
|
+
"type": "boolean",
|
|
29
|
+
"default": false
|
|
42
30
|
},
|
|
43
31
|
{
|
|
44
32
|
"name": "fontFamily",
|
|
45
33
|
"description": "icon的字体名",
|
|
46
34
|
"type": "string",
|
|
47
|
-
"default": "
|
|
35
|
+
"default": ""
|
|
48
36
|
},
|
|
49
37
|
{
|
|
50
38
|
"name": "loginStatus",
|
|
@@ -2,19 +2,18 @@
|
|
|
2
2
|
<view class="ste-main-info--root" :style="[compRootStyle]">
|
|
3
3
|
<view class="user-block">
|
|
4
4
|
<view class="avatar" @click="handleAvatarClick">
|
|
5
|
-
<ste-image :src="loginStatus == 1 ?
|
|
5
|
+
<ste-image :src="loginStatus == 1 ? avatar : loginSrc" width="92" height="92" radius="50%" />
|
|
6
6
|
</view>
|
|
7
7
|
<view class="user-info" @click="handleUserClick" v-if="loginStatus == 1">
|
|
8
8
|
<view class="name">
|
|
9
|
-
<text class="name-text">{{
|
|
10
|
-
<ste-icon code="" size="28" color="#000" marginLeft="8" :fontFamily="fontFamily" />
|
|
9
|
+
<text class="name-text">{{ nickname }}</text>
|
|
11
10
|
</view>
|
|
12
|
-
<view class="desc"
|
|
11
|
+
<view class="desc">
|
|
13
12
|
<ste-icon v-if="subTitleIcon" :code="subTitleIcon" size="26" :color="compMainColor" marginRight="4" :fontFamily="fontFamily" />
|
|
14
13
|
<text>{{ subTitle }}</text>
|
|
15
14
|
</view>
|
|
16
15
|
</view>
|
|
17
|
-
<view class="user-info" @click="loginTitleClick" v-else>
|
|
16
|
+
<view class="user-info user-info-login" @click="loginTitleClick" v-else>
|
|
18
17
|
<view class="name">
|
|
19
18
|
<text class="name-text">{{ loginTitle }}</text>
|
|
20
19
|
<ste-icon code="" size="28" color="#000" marginLeft="8" :fontFamily="fontFamily" />
|
|
@@ -77,11 +76,17 @@ const loginTitleClick = () => {
|
|
|
77
76
|
border-radius: 50%;
|
|
78
77
|
margin-right: 24rpx;
|
|
79
78
|
}
|
|
79
|
+
.user-info-login {
|
|
80
|
+
justify-content: center;
|
|
81
|
+
}
|
|
80
82
|
.user-info {
|
|
81
83
|
flex: 1;
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
justify-content: space-between;
|
|
87
|
+
|
|
82
88
|
.name {
|
|
83
89
|
display: flex;
|
|
84
|
-
flex-warp: nowrap;
|
|
85
90
|
align-items: center;
|
|
86
91
|
.name-text {
|
|
87
92
|
overflow: hidden;
|
|
@@ -95,7 +100,6 @@ const loginTitleClick = () => {
|
|
|
95
100
|
.desc {
|
|
96
101
|
display: inline-flex;
|
|
97
102
|
align-items: center;
|
|
98
|
-
margin-top: 10rpx;
|
|
99
103
|
color: var(--main-color);
|
|
100
104
|
font-size: var(--font-size-24, 24rpx);
|
|
101
105
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* 登录状态 0:未登录 1:已登录
|
|
3
|
+
*/
|
|
4
|
+
export type LoginStatus = 0 | 1;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
|
|
3
3
|
| ----- | ----- | --- | ------- | ------ | -------- |
|
|
4
4
|
| `value` | 当前值（支持v-model双向绑定） | `string / number` | `` | - | - |
|
|
5
|
-
| `type` | 头部操作类型 | `string` | `text` | `
|
|
5
|
+
| `type` | 头部操作类型 | `string` | `text` | `date`：日期选择<br/>`dateRange`：日期范围选择 | - |
|
|
6
6
|
| `headerValue` | 头部显示的值 | `string / number / string[] / number[]` | `` | - | - |
|
|
7
7
|
| `placeholder` | 占位提示符 | `string` | `请输入` | - | - |
|
|
8
8
|
| `height` | 高度 | `number / string` | - | - | - |
|
|
@@ -169,6 +169,10 @@ function loginBtnClick() {
|
|
|
169
169
|
margin-right: 12rpx;
|
|
170
170
|
}
|
|
171
171
|
.right {
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
justify-content: space-between;
|
|
175
|
+
|
|
172
176
|
.name {
|
|
173
177
|
color: #000;
|
|
174
178
|
font-size: var(--font-size-24, 24rpx);
|
|
@@ -190,7 +194,6 @@ function loginBtnClick() {
|
|
|
190
194
|
}
|
|
191
195
|
|
|
192
196
|
.desc {
|
|
193
|
-
margin-top: 14rpx;
|
|
194
197
|
}
|
|
195
198
|
|
|
196
199
|
.info {
|
|
@@ -198,7 +201,6 @@ function loginBtnClick() {
|
|
|
198
201
|
color: #757575;
|
|
199
202
|
height: 34rpx;
|
|
200
203
|
line-height: 34rpx;
|
|
201
|
-
margin-top: 8rpx;
|
|
202
204
|
}
|
|
203
205
|
}
|
|
204
206
|
}
|
package/package.json
CHANGED
package/types/components.d.ts
CHANGED
|
@@ -78,11 +78,12 @@ import steUpload from "../components/ste-upload/ste-upload.vue"
|
|
|
78
78
|
import steUserInfo from "../components/ste-user-info/ste-user-info.vue"
|
|
79
79
|
import steVideo from "../components/ste-video/ste-video.vue"
|
|
80
80
|
import steWatermark from "../components/ste-watermark/ste-watermark.vue"
|
|
81
|
-
import '@vue/runtime-core'
|
|
82
81
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
import '@vue/runtime-core'
|
|
83
|
+
|
|
84
|
+
declare module '@vue/runtime-core' {
|
|
85
|
+
export interface GlobalComponents {
|
|
86
|
+
SteAnimate: typeof steAnimate;
|
|
86
87
|
SteAreaChart: typeof steAreaChart;
|
|
87
88
|
SteBadge: typeof steBadge;
|
|
88
89
|
SteBarChart: typeof steBarChart;
|
|
@@ -162,5 +163,8 @@ declare module '@vue/runtime-core' {
|
|
|
162
163
|
SteUserInfo: typeof steUserInfo;
|
|
163
164
|
SteVideo: typeof steVideo;
|
|
164
165
|
SteWatermark: typeof steWatermark;
|
|
165
|
-
|
|
166
|
-
}
|
|
166
|
+
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
|