Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 7cc6c77d 编写于 作者: 郭 郭晓 提交者： GitHub
浏览文件
操作

fix: review price rate avatar 组件 (#397) 

* fix: 优化

* fix: review price组件，优化input组件

* fix: 优化rate avatar 组件
Co-authored-by: Nguoxiaoxiao8 <guoxiao158@126.com>
Co-authored-by: richard_1015's avatarrichard1015 <51844712@qq.com>
上级 70361ac4
隐藏空白更改
内联 并排
Showing with 122 addition and 48 deletion
package.json
浏览文件 @ 7cc6c77d
......@@ -36,7 +36,7 @@
"CHANGELOG.md"
],
"scripts": {
"checked":"npm run generate:file && rm -rf dist/ && tsc",
"checked": "npm run generate:file && rm -rf dist/ && tsc",
"dev": "npm run checked && vite --open",
"build:site": "npm run checked && vite build",
"build": "npm run checked && vite build --config vite.config.build.ts && npm run generate:types",
......
src/packages/avatar/demo.vue
浏览文件 @ 7cc6c77d
......@@ -20,6 +20,12 @@
bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
</nut-cell>
<h2>修改形状</h2>
<!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
<nut-cell>
<nut-avatar shape="square"></nut-avatar>
<nut-avatar shape="round"></nut-avatar>
</nut-cell>
<h2>修改背景色</h2>
<nut-cell>
<nut-avatar bg-color="#FA2C19"></nut-avatar>
......
src/packages/avatar/doc.md
浏览文件 @ 7cc6c77d
......@@ -22,17 +22,29 @@ app.use(Avatar);
内置 smal / normal / large 三种尺寸规格
``` html
<nut-avatar size="large"></nut-avatar>
<nut-avatar size="normal"></nut-avatar>
<nut-avatar size="small"></nut-avatar>
<nut-avatar
size="80"
bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar
size="large"
bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar
size="normal"
bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar
size="small"
bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
```
### 修改形状类型
``` html
<nut-avatar size="large" shape="square"></nut-avatar>
<nut-avatar size="normal" shape="square"></nut-avatar>
<nut-avatar size="small" shape="square"></nut-avatar>
<nut-avatar shape="square"></nut-avatar>
<nut-avatar shape="round"></nut-avatar>
```
### 修改背景色
......@@ -41,28 +53,20 @@ app.use(Avatar);
<nut-avatar bg-color="#f0250f"></nut-avatar>
```
### 设置头像的文本内容
### 修改背景icon
``` html
<nut-avatar size="large" bg-icon>U</nut-avatar>
<nut-avatar
bg-icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
></nut-avatar>
```
### 设置背景图片
### 设置头像的文本内容
``` html
<nut-avatar
bg-icon
bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
></nut-avatar>
<nut-avatar bg-icon>N</nut-avatar>
```
### 设置头像ICON图标
``` html
<nut-avatar
bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
></nut-avatar>
```
### 点击头像，触发事件
......@@ -75,7 +79,7 @@ app.use(Avatar);
| 字段 |说明|类型|默认值|
|--|--|--|--|
|bg-color|设置头像背景色|String|#eee
|size|设置头像的大小，提供三种：large/normal/small|String|normal
|size|设置头像的大小，提供三种：large/normal/small，支持直接输入数字|String|normal
|shape|设置头像的形状，默认是圆形，可以设置为square方形|String|round
|bg-image|设置头像的背景图片|String|''
|bg-icon|设置头像的icon图标, 优先级低于bg-image,类似Icon组件的name属性，支持名称和链接|String|''
......
src/packages/input/index.vue
浏览文件 @ 7cc6c77d
......@@ -52,8 +52,10 @@
<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { createComponent } from '@/utils/create';
const { create } = createComponent('input');
import { formatNumber } from './util';
const { create } = createComponent('input');
export default create({
props: {
type: {
......@@ -76,14 +78,26 @@ export default create({
type: Boolean,
default: false
},
rows: String,
label: String,
rows: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请输入信息'
},
readonly: Boolean,
disabled: Boolean,
readonly: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
autosize: {
type: Boolean,
default: false
......@@ -97,11 +111,18 @@ export default create({
default: false
}
},
emits: ['change', 'update:value', 'blur', 'focus', 'clear'],
emits: ['change', 'update:value', 'blur', 'focus', 'clear', 'error'],
setup(props, { emit }) {
interface Events {
eventName: 'change' | 'focus' | 'blur';
eventName:
| 'change'
| 'focus'
| 'blur'
| 'clear'
| 'update:value'
| 'error';
params: (string | number | Event)[];
}
......@@ -130,9 +151,9 @@ export default create({
rize
};
});
const emitChange = envs => {
envs.forEach(item => {
emit(item.eventName, ...item.params);
const emitChange = (envs: Array<Events>) => {
envs.forEach((item: Events) => {
return emit(item.eventName, ...item.params);
});
};
const valueChange = (e: Event) => {
......
src/packages/price/doc.md
浏览文件 @ 7cc6c77d
......@@ -54,5 +54,6 @@ app.use(Price);
|--|--|--|--|
|price|价格数量|Number|0|
|need-symbol|是否需要加上人民币符号|Boolean|true|
|symbol|符号类型|String|"$"|
|decimal-digits|小数位位数|Number|2|
|thousands|是否按照千分号形式显示|Boolean|false|
\ No newline at end of file
src/packages/price/index.vue
浏览文件 @ 7cc6c77d
......@@ -17,6 +17,10 @@ export default create({
type: Boolean,
default: true
},
symbol: {
type: String,
default: '$'
},
decimalDigits: {
type: Number,
default: 2
......@@ -30,7 +34,7 @@ export default create({
setup(props) {
const priceShow = computed(() => {
const symbol = props.needSymbol
? '<view class="price-symbol">￥</view>'
? `<view class="price-symbol">${props.symbol}</view>`
: '';
return symbol + formatToHump(props.price);
});
......@@ -68,7 +72,7 @@ export default create({
const formatToHump = (price: string | number) => {
if (Number(price) == 0) {
return [0];
return 0;
}
if (checkPoint(price)) {
price = Number(price).toFixed(props.decimalDigits);
......
src/packages/rate/demo.vue
浏览文件 @ 7cc6c77d
......@@ -5,7 +5,7 @@
<nut-rate v-model:value="state.val"></nut-rate>
</div>
<h2>自定义图标</h2>
<h2>自定义 icon </h2>
<div>
<nut-rate
checked-icon="heart-fill1"
......@@ -34,10 +34,14 @@
<nut-rate :value="2" :read-only="true"></nut-rate>
</div>
<h2>监听 change 事件,{{ state.result }}</h2>
<h2>绑定事件,{{ state.result }}</h2>
<div>
<nut-rate @click="onClick"></nut-rate>
</div>
<h2>自定义尺寸</h2>
<div>
<nut-rate :size="35"></nut-rate>
</div>
</div>
</template>
......
src/packages/rate/doc.md
浏览文件 @ 7cc6c77d
......@@ -19,10 +19,51 @@ app.use(Rate);
### 基础用法
```html
<nut-rate
v-model:value="state.val"
>
</nut-rate>
<nut-rate
v-model:value="state.val"
>
</nut-rate>
```
### 自定义icon
```html
<nut-rate
checked-icon="heart-fill1"
unchecked-icon="heart"
v-model:value="state.val3"
>
</nut-rate>
```
### 自定义数量
```html
<nut-rate
:total="6"
v-model:value="state.val4"
>
</nut-rate>
```
### 自定义颜色
```html
<nut-rate
active-color="#FFC800"
v-model:value="state.val5"
>
</nut-rate>
```
### 禁用状态
```html
<nut-rate
:disabled="true"
v-model:value="state.val6"
>
</nut-rate>
```
### 只读
......@@ -54,14 +95,7 @@ app.use(Rate);
</nut-rate>
```
### 自定义ICON
```html
<nut-rate
:checkedIcon="`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`"
:uncheckedIcon="`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`"
></nut-rate>
```
## Prop
......
tsconfig.json
浏览文件 @ 7cc6c77d
......@@ -8,7 +8,7 @@
"strict": true,
"jsx": "preserve",
"sourceMap": false,
"declaration": true,
"declaration": false,
"removeComments":true,
"resolveJsonModule": true,
"esModuleInterop": true,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或