Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 434319c0 编写于 作者: Y yangxiaolu3
浏览文件
操作

Merge branch 'weapp-demo' of https://github.com/jdf2e/nutui into weapp-demo

上级 d7097645 dbaa20c8
隐藏空白更改
内联 并排
Showing with 1063 addition and 75 deletion
src/config.json
浏览文件 @ 434319c0
......@@ -1098,6 +1098,17 @@
"tarodoc": false,
"type": "component",
"author": "liukun"
},
{
"version": "3.0.0",
"name": "TrendArrow",
"cType": "展示组件",
"cName": "趋势箭头",
"desc": "带有箭头指示的百分比数字,用以展示指标趋势",
"show": true,
"tarodoc": false,
"type": "component",
"author": "liukun"
}
]
},
......@@ -1263,4 +1274,4 @@
]
}
]
}
\ No newline at end of file
}
src/packages/__VUE/trendarrow/__tests__/trendarrow.spec.ts 0 → 100644
浏览文件 @ 434319c0
import { config, DOMWrapper, mount } from '@vue/test-utils';
import Trendarrow from '../index.vue';
import NutIcon from '../../icon/index.vue';
import { nextTick, toRefs, reactive } from 'vue';
beforeAll(() => {
config.global.components = {
NutIcon
};
});
afterAll(() => {
config.global.components = {};
});
test('should render rate when used ', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 12.325
}
});
expect(wrapper.find('.nut-trendarrow-rate').text()).toBe('12.33%');
});
test('should render digits when used ', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 12.325,
digits: 1
}
});
expect(wrapper.find('.nut-trendarrow-rate').text()).toBe('12.3%');
});
test('should render digits when used ', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 12.325,
digits: 1
}
});
expect(wrapper.find('.nut-trendarrow-rate').text()).toBe('12.3%');
});
test('should render showSign when used ', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 12.325,
showSign: true
}
});
expect(wrapper.find('.nut-trendarrow-rate').text()).toBe('+12.33%');
});
test('should render showZero when used ', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 0,
showSign: true,
showZero: true
}
});
expect(wrapper.find('.nut-trendarrow-rate').text()).toBe('0.00%');
});
test('should not render 0 when showZero is false ', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 0,
showSign: true,
showZero: false
}
});
expect(wrapper.find('.nut-trendarrow-rate').text()).toBe('--');
});
test('should render left icon when arrowLeft', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 10,
arrowLeft: true
}
});
expect(wrapper.findAll('.nut-trendarrow-icon-before').length).toBe(1);
expect(wrapper.findAll('.nut-trendarrow-icon-after').length).toBe(0);
});
test('should render sync text color when syncTextColor is true', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 10,
syncTextColor: true
}
});
const span = wrapper.find<HTMLElement>('.nut-trendarrow-rate');
expect(span.element.style.color).toContain('250, 44, 25');
});
test('should render text color when textColor used', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 10,
textColor: 'rgb(39,197,48)',
syncTextColor: false
}
});
const span = wrapper.find<HTMLElement>('.nut-trendarrow-rate');
expect(span.element.style.color).toContain('(39, 197, 48)');
});
test('should render triangle color when riseColor used', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: 10,
riseColor: 'rgb(73,143,242)'
}
});
const span = wrapper.find<HTMLElement>('.nut-trendarrow-rate');
expect(span.element.style.color).toContain('(73, 143, 242)');
});
test('should render triangle color when dropColor used', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: -10,
dropColor: 'rgb(73,143,242)',
showSign: true
}
});
const span = wrapper.find<HTMLElement>('.nut-trendarrow-rate');
expect(span.element.style.color).toContain('(73, 143, 242)');
});
test('should render triangle size when set iconsize', async () => {
const wrapper = mount(Trendarrow, {
props: {
rate: -10,
iconSize: '14px'
}
});
await nextTick();
await nextTick();
expect(wrapper.html()).toMatchSnapshot();
const span = wrapper.find<HTMLElement>('.nut-icon');
expect(span.element.style.fontSize).toContain('14px');
});
src/packages/__VUE/trendarrow/demo.vue 0 → 100644
浏览文件 @ 434319c0
<template>
<div class="demo">
<h2>{{ translate('basic') }}</h2>
<nut-cell>
<nut-trendarrow :sync-text-color="false" :rate="1" />
<nut-trendarrow :sync-text-color="false" :rate="-0.2535" />
</nut-cell>
<view class="title">{{ translate('title1') }}</view>
<nut-cell>
<nut-trendarrow :rate="10.2365" />
<nut-trendarrow :rate="-0.2535" />
</nut-cell>
<view class="title">{{ translate('title2') }}</view>
<nut-cell>
<nut-trendarrow :digits="1" :rate="10.2365" />
<nut-trendarrow :digits="3" :rate="-0.2535" />
</nut-cell>
<view class="title">{{ translate('title3') }}</view>
<nut-cell>
<nut-trendarrow arrowLeft :rate="0.2535" />
<nut-trendarrow arrowLeft :rate="-0.2535" />
</nut-cell>
<view class="title">{{ translate('title4') }}</view>
<nut-cell>
<nut-trendarrow showSign :rate="1" />
<nut-trendarrow showSign :rate="-0.2535" />
</nut-cell>
<view class="title">{{ translate('title5') }}</view>
<nut-cell>
<nut-trendarrow showSign :rate="0" />
<nut-trendarrow showSign showZero :rate="0" />
</nut-cell>
<view class="title">{{ translate('title6') }}</view>
<nut-cell>
<nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)" />
<nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
<nut-trendarrow
:sync-text-color="false"
showSign
:rate="-0.2535"
text-color="rgb(39,197,48)"
drop-color="rgb(255, 190, 13)"
/>
</nut-cell>
<view class="title">{{ translate('title7') }}</view>
<nut-cell>
<nut-trendarrow :rate="10.2365" :up-icon-name="'success'" />
<nut-trendarrow :rate="-10.2365" :down-icon-name="'failure'" />
<nut-trendarrow :rate="10.2365">
<nut-icon name="heart-fill" color="#fa2c19" size="12px"></nut-icon>
</nut-trendarrow>
</nut-cell>
</div>
</template>
<script lang="ts">
import { createComponent } from '@/packages/utils/create';
const { createDemo, translate } = createComponent('trendarrow');
import { reactive, toRefs, getCurrentInstance, onMounted, ref } from 'vue';
import { useTranslate } from '@/sites/assets/util/useTranslate';
const initTranslate = () =>
useTranslate({
'zh-CN': {
basic: '基本用法',
title1: '改变文字颜色',
title2: '指定小数位',
title3: '箭头在前面',
title4: '显示正负号',
title5: '是否展示0',
title6: '自定义颜色',
title7: '自定义图标'
},
'en-US': {
basic: 'Basic Usage',
title1: 'Change text color',
title2: 'Specify decimal places',
title3: 'Arrow ahead',
title4: 'show sign',
title5: 'Whether to show 0',
title6: 'Custom color',
title7: 'Custom icon'
}
});
export default createDemo({
props: {},
setup() {
initTranslate();
return { translate };
}
});
</script>
<style lang="scss" scoped>
.demo {
.title {
font-size: 14px;
color: rgb(144, 156, 164);
padding: 0 10px;
font-weight: normal;
}
.nut-trendarrow {
margin-right: 10px;
}
}
</style>
src/packages/__VUE/trendarrow/doc.en-US.md 0 → 100644
浏览文件 @ 434319c0
# trendarrow
### Intro
### Install
```javascript
import { createApp } from 'vue';
// vue
import { TrendArrow } from '@nutui/nutui';
// taro
import { TrendArrow } from '@nutui/nutui-taro';
const app = createApp();
app.use(TrendArrow);
```
### Basic Usage
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :show-text-color="false" :rate="1"/>
<nut-trendarrow :show-text-color="false" :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### Change text color
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :rate="10.2365"/>
<nut-trendarrow :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### Specify decimal places
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :digits="0" :rate="10.2365"/>
<nut-trendarrow :digits="0" :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### Arrow ahead
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow arrowLeft :rate="0.2535"/>
<nut-trendarrow arrowLeft :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### Show sign
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow showSign :rate="1"/>
<nut-trendarrow showSign :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### Whether to show 0
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow showSign :rate="0"/>
<nut-trendarrow showSign showZero :rate="0"/>
</nut-cell>
</template>
```
:::
### Custom color
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
<nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
<nut-trendarrow
:show-text-color="false"
showSign
:rate="-0.2535"
text-color="rgb(39,197,48)"
drop-color="rgb(255, 190, 13)"
/>
</nut-cell>
</template>
```
:::
## API
### Props
| Attribute | Description | Type | Default |
|--------------|----------------------------------|--------|------------------|
| rate | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0 | Number | - |
| digits | decimal precision | Number | 2 |
| show-sign | Whether to display plus and minus signs | Boolean | false |
| show-zero |whether to show 0 | Boolean | false |
| arrow-left | whether to show an arrow to the left of the number | Boolean | false |
| sync-text-color | Whether the text color is in sync with the arrow | Boolean | true |
| text-color | text color | String | '#333333' |
| rise-color | up arrow color | String | '#fa2c19' |
| drop-color | down arrow color | String | ‘#64b578’ |
| icon-size | arrow size | String | '12px' |
| up-icon-name | custom up arrow icon | String | 'triangle-up' |
| down-icon-name | custom down arrow icon | String | 'triangle-down' |
### Slots
| Name | Description |
|---------|--------------|
| default | The default slot is used to customize the icon |
\ No newline at end of file
src/packages/__VUE/trendarrow/doc.md 0 → 100644
浏览文件 @ 434319c0
# trendarrow
### 介绍
带有箭头指示的百分比数字,用以展示指标趋势
### 安装
```javascript
import { createApp } from 'vue';
// vue
import { TrendArrow } from '@nutui/nutui';
// taro
import { TrendArrow } from '@nutui/nutui-taro';
const app = createApp();
app.use(TrendArrow);
```
### 基础用法
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :show-text-color="false" :rate="1"/>
<nut-trendarrow :show-text-color="false" :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### 改变文字颜色
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :rate="10.2365"/>
<nut-trendarrow :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### 指定小数位
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :digits="0" :rate="10.2365"/>
<nut-trendarrow :digits="0" :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### 箭头在前面
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow arrowLeft :rate="0.2535"/>
<nut-trendarrow arrowLeft :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### 显示正负号
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow showSign :rate="1"/>
<nut-trendarrow showSign :rate="-0.2535"/>
</nut-cell>
</template>
```
:::
### 是否展示0
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow showSign :rate="0"/>
<nut-trendarrow showSign showZero :rate="0"/>
</nut-cell>
</template>
```
:::
### 自定义颜色
:::demo
```html
<template>
<nut-cell>
<nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
<nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
<nut-trendarrow
:show-text-color="false"
showSign
:rate="-0.2535"
text-color="rgb(39,197,48)"
drop-color="rgb(255, 190, 13)"
/>
</nut-cell>
</template>
```
:::
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| rate | 数值，大于0时箭头向上，小于0时箭头向下 | Number | - |
| digits | 小数位精度 | Number | 2 |
| show-sign | 是否显示加减号 | Boolean | false |
| show-zero | 是否显示 0 | Boolean | false |
| arrow-left | 是否在数字左侧显示箭头 | Boolean | false |
| sync-text-color | 文字颜色是否与箭头同步 | Boolean | true |
| text-color | 文字颜色 | String | '#333333' |
| rise-color | 向上箭头颜色 | String | '#fa2c19' |
| drop-color | 向下箭头颜色 | String | ‘#64b578’ |
| icon-size | 箭头大小 | String | '12px' |
| up-icon-name | 自定义向上箭头icon | String | 'triangle-up' |
| down-icon-name | 自定义向下箭头icon | String | 'triangle-down' |
### Slots
| 名称 | 说明 |
|---------|--------------|
| default | 默认slot，用以自定义Icon内容 |
src/packages/__VUE/trendarrow/index.scss 0 → 100644
浏览文件 @ 434319c0
.nut-trendarrow {
display: inline-block;
font-size: $trendarrow-font-size;
&-icon-before {
margin-right: $trendarrow-before-icon-margin;
}
&-icon-after {
margin-left: $trendarrow-before-icon-margin;
}
&-rate {
vertical-align: middle;
display: inline;
}
.nut-icon {
vertical-align: middle;
}
}
src/packages/__VUE/trendarrow/index.taro.vue 0 → 100644
浏览文件 @ 434319c0
<template>
<view :class="classes" @click="handleClick">
<span v-if="!arrowLeft" class="nut-trendarrow-icon-before nut-trendarrow-rate" :style="calcStyle">{{
calcRate
}}</span>
<slot>
<nut-icon
v-if="Number(rate) !== 0"
:size="calcIconProps.size"
:name="calcIconProps.name"
:color="calcIconProps.color"
/>
</slot>
<span v-if="arrowLeft" class="nut-trendarrow-icon-after nut-trendarrow-rate" :style="calcStyle">{{
calcRate
}}</span>
</view>
</template>
<script lang="ts">
import { reactive, toRefs, computed } from 'vue';
import { myFixed } from '@/packages/utils/util';
import { createComponent } from '@/packages/utils/create';
const { componentName, create } = createComponent('trendarrow');
export default create({
props: {
rate: {
type: Number,
default: 0
},
digits: {
type: Number,
default: 2
},
showSign: {
type: Boolean,
default: false
},
showZero: {
type: Boolean,
default: false
},
arrowLeft: {
type: Boolean,
default: false
},
syncTextColor: {
type: Boolean,
default: true
},
textColor: {
type: String,
default: '#333'
},
riseColor: {
type: String,
default: '#fa2c19'
},
dropColor: {
type: String,
default: '#64b578'
},
iconSize: {
type: String,
default: '12px'
},
upIconName: {
type: String,
default: 'triangle-up'
},
downIconName: {
type: String,
default: 'triangle-down'
}
},
setup(props) {
const state = reactive({
rateTrend: props.rate > 0 ? true : false
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const calcRate = computed(() => {
const { rate, digits, showSign, showZero } = props;
state.rateTrend = rate > 0 ? true : false;
const absRate = Math.abs(rate);
if (!showZero && rate === 0) {
return '--';
}
let resultRate = `${showSign && rate !== 0 ? (state.rateTrend ? '+' : '-') : ''}${myFixed(
Number(absRate),
digits
)}%`;
return resultRate;
});
const calcStyle = computed(() => {
const { dropColor, riseColor, syncTextColor, textColor, rate } = props;
let style = {
color: rate === 0 ? textColor : syncTextColor ? (state.rateTrend ? riseColor : dropColor) : textColor
};
return style;
});
const calcIconProps = computed(() => {
const { dropColor, riseColor, iconSize, upIconName, downIconName } = props;
let iconProps = {
name: state.rateTrend ? upIconName : downIconName,
color: state.rateTrend ? riseColor : dropColor,
size: iconSize
};
return iconProps;
});
return { ...toRefs(state), classes, calcRate, calcStyle, calcIconProps };
}
});
</script>
src/packages/__VUE/trendarrow/index.vue 0 → 100644
浏览文件 @ 434319c0
<template>
<view :class="classes" @click="handleClick">
<span v-if="!arrowLeft" class="nut-trendarrow-icon-before nut-trendarrow-rate" :style="calcStyle">{{
calcRate
}}</span>
<slot>
<nut-icon
v-if="Number(rate) !== 0"
:size="calcIconProps.size"
:name="calcIconProps.name"
:color="calcIconProps.color"
/>
</slot>
<span v-if="arrowLeft" class="nut-trendarrow-icon-after nut-trendarrow-rate" :style="calcStyle">{{
calcRate
}}</span>
</view>
</template>
<script lang="ts">
import { reactive, toRefs, computed } from 'vue';
import { myFixed } from '@/packages/utils/util';
import { createComponent } from '@/packages/utils/create';
const { componentName, create } = createComponent('trendarrow');
export default create({
props: {
rate: {
type: Number,
default: 0
},
digits: {
type: Number,
default: 2
},
showSign: {
type: Boolean,
default: false
},
showZero: {
type: Boolean,
default: false
},
arrowLeft: {
type: Boolean,
default: false
},
syncTextColor: {
type: Boolean,
default: true
},
textColor: {
type: String,
default: '#333'
},
riseColor: {
type: String,
default: '#fa2c19'
},
dropColor: {
type: String,
default: '#64b578'
},
iconSize: {
type: String,
default: '12px'
},
upIconName: {
type: String,
default: 'triangle-up'
},
downIconName: {
type: String,
default: 'triangle-down'
}
},
setup(props) {
const state = reactive({
rateTrend: props.rate > 0 ? true : false
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const calcRate = computed(() => {
const { rate, digits, showSign, showZero } = props;
state.rateTrend = rate > 0 ? true : false;
const absRate = Math.abs(rate);
if (!showZero && rate === 0) {
return '--';
}
let resultRate = `${showSign && rate !== 0 ? (state.rateTrend ? '+' : '-') : ''}${myFixed(
Number(absRate),
digits
)}%`;
return resultRate;
});
const calcStyle = computed(() => {
const { dropColor, riseColor, syncTextColor, textColor, rate } = props;
let style = {
color: rate === 0 ? textColor : syncTextColor ? (state.rateTrend ? riseColor : dropColor) : textColor
};
return style;
});
const calcIconProps = computed(() => {
const { dropColor, riseColor, iconSize, upIconName, downIconName } = props;
let iconProps = {
name: state.rateTrend ? upIconName : downIconName,
color: state.rateTrend ? riseColor : dropColor,
size: iconSize
};
return iconProps;
});
return { ...toRefs(state), classes, calcRate, calcStyle, calcIconProps };
}
});
</script>
src/packages/styles/font/config.json
浏览文件 @ 434319c0
......@@ -96,7 +96,9 @@
"heart1",
"heart-fill",
"star-n",
"star-fill-n"
"star-fill-n",
"triangle-down",
"triangle-up"
]
},
{
......
src/packages/styles/font/demo_index.html
浏览文件 @ 434319c0
......@@ -3,8 +3,8 @@
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
......@@ -54,6 +54,18 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon nutui-iconfont">&#xeb6d;</span>
<div class="name">下箭头</div>
<div class="code-name">&amp;#xeb6d;</div>
</li>
<li class="dib">
<span class="icon nutui-iconfont">&#xeb6e;</span>
<div class="name">上箭头</div>
<div class="code-name">&amp;#xeb6e;</div>
</li>
<li class="dib">
<span class="icon nutui-iconfont">&#xe60a;</span>
<div class="name">image-error</div>
......@@ -786,9 +798,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'nutui-iconfont';
src: url('iconfont.woff2?t=1654497552263') format('woff2'),
url('iconfont.woff?t=1654497552263') format('woff'),
url('iconfont.ttf?t=1654497552263') format('truetype');
src: url('iconfont.woff2?t=1662618531522') format('woff2'),
url('iconfont.woff?t=1662618531522') format('woff'),
url('iconfont.ttf?t=1662618531522') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -814,6 +826,24 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon nutui-iconfont nut-icon-triangle-down"></span>
<div class="name">
下箭头
</div>
<div class="code-name">.nut-icon-triangle-down
</div>
</li>
<li class="dib">
<span class="icon nutui-iconfont nut-icon-triangle-up"></span>
<div class="name">
上箭头
</div>
<div class="code-name">.nut-icon-triangle-up
</div>
</li>
<li class="dib">
<span class="icon nutui-iconfont nut-icon-image-error"></span>
<div class="name">
......@@ -1912,6 +1942,22 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#nut-icon-triangle-down"></use>
</svg>
<div class="name">下箭头</div>
<div class="code-name">#nut-icon-triangle-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#nut-icon-triangle-up"></use>
</svg>
<div class="name">上箭头</div>
<div class="code-name">#nut-icon-triangle-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#nut-icon-image-error"></use>
......
src/packages/styles/font/iconfont.css
浏览文件 @ 434319c0
@font-face {
font-family: "nutui-iconfont"; /* Project id 2166874 */
src: url('iconfont.woff2?t=1654497552263') format('woff2'),
url('iconfont.woff?t=1654497552263') format('woff'),
url('iconfont.ttf?t=1654497552263') format('truetype');
src: url('iconfont.woff2?t=1662618531522') format('woff2'),
url('iconfont.woff?t=1662618531522') format('woff'),
url('iconfont.ttf?t=1662618531522') format('truetype');
}
.nutui-iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.nut-icon-triangle-down:before {
content: "\eb6d";
}
.nut-icon-triangle-up:before {
content: "\eb6e";
}
.nut-icon-image-error:before {
content: "\e60a";
}
......
src/packages/styles/font/iconfont.js
浏览文件 @ 434319c0
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
src/packages/styles/font/iconfont.json
浏览文件 @ 434319c0
......@@ -5,6 +5,20 @@
"css_prefix_text": "nut-icon-",
"description": "nutui 3.0字体管理",
"glyphs": [
{
"icon_id": "4175511",
"name": "下箭头",
"font_class": "triangle-down",
"unicode": "eb6d",
"unicode_decimal": 60269
},
{
"icon_id": "4175512",
"name": "上箭头",
"font_class": "triangle-up",
"unicode": "eb6e",
"unicode_decimal": 60270
},
{
"icon_id": "30188161",
"name": "image-error",
......
src/packages/styles/variables-jdb.scss
浏览文件 @ 434319c0
......@@ -896,5 +896,9 @@ $watermark-z-index: 2000 !default;
// invoice
$invoice-padding: 10px 10px 20px !default;
// TrendArrow
$trendarrow-font-size: 14px !default;
$trendarrow-before-icon-margin: 4px !default;
@import './mixins/index';
@import './animation/index';
src/packages/styles/variables-jdt.scss
浏览文件 @ 434319c0
......@@ -802,5 +802,9 @@ $watermark-z-index: 2000 !default;
// invoice
$invoice-padding: 10px 10px 20px !default;
// TrendArrow
$trendarrow-font-size: 14px !default;
$trendarrow-before-icon-margin: 4px !default;
@import './mixins/index';
@import './animation/index';
src/packages/styles/variables.scss
浏览文件 @ 434319c0
......@@ -827,5 +827,9 @@ $watermark-z-index: 2000 !default;
// invoice
$invoice-padding: 10px 10px 20px !default;
// TrendArrow
$trendarrow-font-size: 14px !default;
$trendarrow-before-icon-margin: 4px !default;
@import './mixins/index';
@import './animation/index';
src/packages/utils/util.ts
浏览文件 @ 434319c0
......@@ -104,3 +104,11 @@ export const deepMerge = (target: any, newObj: any) => {
});
return target;
};
export function myFixed(num: any, digit: number = 2) {
if (Object.is(parseFloat(num), NaN)) {
return console.log(`传入的值：${num}不是一个数字`);
}
num = parseFloat(num);
return (Math.round((num + Number.EPSILON) * Math.pow(10, digit)) / Math.pow(10, digit)).toFixed(digit);
}
src/sites/mobile-taro/vue/src/app.config.ts
浏览文件 @ 434319c0
......@@ -87,7 +87,8 @@ const subPackages = [
'pages/table/index',
'pages/animate/index',
'pages/ellipsis/index',
'pages/watermark/index'
'pages/watermark/index',
'pages/trendarrow/index'
]
},
{
......
src/sites/mobile-taro/vue/src/exhibition/pages/trendarrow/index.config.ts 0 → 100644
浏览文件 @ 434319c0
export default { navigationBarTitleText: 'TrendArrow' };
src/sites/mobile-taro/vue/src/exhibition/pages/trendarrow/index.vue 0 → 100644
浏览文件 @ 434319c0
<template>
<div class="trendarrow-demo demo">
<h2>基本用法</h2>
<nut-cell>
<nut-trendarrow :sync-text-color="false" :rate="1" />
<nut-trendarrow :sync-text-color="false" :rate="-0.2535" />
</nut-cell>
<view class="title">改变文字颜色</view>
<nut-cell>
<nut-trendarrow :rate="10.2365" />
<nut-trendarrow :rate="-0.2535" />
</nut-cell>
<view class="title">指定小数位</view>
<nut-cell>
<nut-trendarrow :digits="3" :rate="10.2365" />
<nut-trendarrow :digits="1" :rate="-0.2535" />
</nut-cell>
<view class="title">箭头在前面</view>
<nut-cell>
<nut-trendarrow arrowLeft :rate="0.2535" />
<nut-trendarrow arrowLeft :rate="-0.2535" />
</nut-cell>
<view class="title">显示正负号</view>
<nut-cell>
<nut-trendarrow showSign :rate="1" />
<nut-trendarrow showSign :rate="-0.2535" />
</nut-cell>
<view class="title">是否展示0</view>
<nut-cell>
<nut-trendarrow showSign :rate="0" />
<nut-trendarrow showSign showZero :rate="0" />
</nut-cell>
<view class="title">自定义颜色</view>
<nut-cell>
<nut-trendarrow :rate="10.2365" rise-color="rgb(73,143,242)" />
<nut-trendarrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
<nut-trendarrow
:sync-text-color="false"
showSign
:rate="-0.2535"
text-color="rgb(39,197,48)"
drop-color="rgb(255, 190, 13)"
/>
</nut-cell>
<view class="title">自定义图标</view>
<nut-cell>
<nut-trendarrow :rate="10.2365" :up-icon-name="'success'" />
<nut-trendarrow :rate="-10.2365" :down-icon-name="'failure'" />
<nut-trendarrow :rate="10.2365">
<nut-icon name="heart-fill" color="#fa2c19" size="12px"></nut-icon>
</nut-trendarrow>
</nut-cell>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {},
setup() {
return {};
}
});
</script>
<style lang="scss">
.trendarrow-demo {
.title {
font-size: 14px;
color: rgb(144, 156, 164);
padding: 0 10px;
font-weight: normal;
}
.nut-trendarrow {
margin-right: 10px;
}
}
</style>
src/sites/mobile-taro/vue/src/exhibition/pages/watermark/index.vue
浏览文件 @ 434319c0
<template>
<div class="demo">
<div class="demo watermark-demo">
<h2>基础用法</h2>
<nut-cell class="wrap">
<nut-button @click="showTextMark">文字水印</nut-button>
......@@ -41,8 +41,8 @@ export default defineComponent({
}
});
</script>
<style lang="scss" scoped>
.demo {
<style lang="scss">
.watermark-demo {
.wrap {
width: 100%;
height: 240px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或