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

src/config.json

@@ -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 @@
       ]
     }
   ]
-}
+}

src/packages/__VUE/trendarrow/__tests__/trendarrow.spec.ts

@@ -0,0 +1,142 @@
+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,0 +1,103 @@
+<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,0 +1,150 @@
+# 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 |

src/packages/__VUE/trendarrow/doc.md

@@ -0,0 +1,152 @@
+# 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,0 +1,17 @@
+.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,0 +1,121 @@
+<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,0 +1,121 @@
+<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

@@ -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

@@ -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">
@@ -55,6 +55,18 @@
           <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>
                 <div class="code-name">&amp;#xe60a;</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>
@@ -815,6 +827,24 @@
         <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">
               image-error
@@ -1914,6 +1944,22 @@
           
             <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>
                 </svg>
                 <div class="name">image-error</div>

src/packages/styles/font/iconfont.css

@@ -1,8 +1,8 @@
 @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.json

@@ -6,6 +6,20 @@
   "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",
       "font_class": "image-error",

src/packages/styles/variables-jdb.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,0 +1 @@
+export default { navigationBarTitleText: 'TrendArrow' };

src/sites/mobile-taro/vue/src/exhibition/pages/trendarrow/index.vue

@@ -0,0 +1,76 @@
+<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

@@ -1,5 +1,5 @@
 <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;