init

uni_modules/nutui-uni/components/trendarrow/index.scss

@@ -0,0 +1,21 @@
+.nut-trend-arrow {
+  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 {
+    display: inline;
+    vertical-align: middle;
+  }
+
+  .nut-icon {
+    vertical-align: middle;
+  }
+}

uni_modules/nutui-uni/components/trendarrow/index.ts

@@ -0,0 +1 @@
+export * from './trendarrow'

uni_modules/nutui-uni/components/trendarrow/trendarrow.ts

@@ -0,0 +1,62 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumberProp, makeStringProp, truthProp } from '../_utils'
+
+export const trendarrowProps = {
+  ...commonProps,
+  /**
+   * @description 数值，大于0时箭头向上，小于0时箭头向下
+   * - 类型为 `number`
+   * - 默认值为 `0`
+   */
+  rate: makeNumberProp(0),
+  /**
+   * @description 小数位精度
+   * - 类型为 `number`
+   * - 默认值为 `2`
+   */
+  digits: makeNumberProp(2),
+  /**
+   * @description 是否显示加减号
+   * - 类型为 `boolean`
+   * - 默认值为 `false`
+   */
+  showSign: Boolean,
+  /**
+   * @description 是否显示 0
+   * - 类型为 `boolean`
+   * - 默认值为 `false`
+   */
+  showZero: Boolean,
+  /**
+   * @description 是否在数字左侧显示箭头
+   * - 类型为 `boolean`
+   * - 默认值为 `false`
+   */
+  arrowLeft: Boolean,
+  /**
+   * @description 文字颜色是否与箭头同步
+   * - 类型为 `boolean`
+   * - 默认值为 `true`
+   */
+  syncTextColor: truthProp,
+  /**
+   * @description 文字颜色
+   * - 类型为 `string`
+   * - 默认值为 `'#333'`
+   */
+  textColor: makeStringProp('#333'),
+  /**
+   * @description 向上箭头颜色
+   * - 类型为 `string`
+   * - 默认值为 `'#fa2c19'`
+   */
+  riseColor: makeStringProp('#fa2c19'),
+  /**
+   * @description 向下箭头颜色
+   * - 类型为 `string`
+   * - 默认值为 `'#64b578'`
+   */
+  dropColor: makeStringProp('#64b578'),
+}
+
+export type TrendArrowProps = ExtractPropTypes<typeof trendarrowProps>

uni_modules/nutui-uni/components/trendarrow/trendarrow.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, defineComponent, reactive } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass, myFixed } from '../_utils'
+import NutIcon from '../icon/icon.vue'
+import { trendarrowProps } from './trendarrow'
+
+const props = defineProps(trendarrowProps)
+
+const state = reactive({
+  rateTrend: props.rate > 0,
+})
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+const calcRate = computed(() => {
+  const { rate, digits, showSign, showZero } = props
+  /* eslint-disable vue/no-side-effects-in-computed-properties */
+  state.rateTrend = rate > 0
+  const absRate = Math.abs(rate)
+  if (!showZero && rate === 0)
+    return '--'
+
+  const resultRate = `${showSign && rate !== 0 ? (state.rateTrend ? '+' : '-') : ''}${myFixed(Number(absRate), digits)}%`
+
+  return resultRate
+})
+const calcStyle = computed(() => {
+  const { dropColor, riseColor, syncTextColor, textColor, rate } = props
+  const style = {
+    color: rate === 0 ? textColor : syncTextColor ? (state.rateTrend ? riseColor : dropColor) : textColor,
+  }
+  return style
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-trend-arrow`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+    <slot v-if="Number(rate) !== 0 && state.rateTrend" name="upIcon">
+      <NutIcon name="triangle-up" :custom-color="riseColor" />
+    </slot>
+    <slot v-if="Number(rate) !== 0 && !state.rateTrend" name="downIcon">
+      <NutIcon name="triangle-down" :custom-color="dropColor" />
+    </slot>
+    <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>