nutui-uniapp

Appearance

Range 区间选择器 ​

介绍 ​

滑动输入条，用于在给定的范围内选择一个值。

基础用法 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range v-model="value" @change="onChange"></nut-range>
  </nut-cell>
</template>

<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(40);
      const onChange = (value) => console.log('当前值：' + value);
      return {
        value,
        onChange,
      };
    },
  };
</script>

双滑块 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range range v-model="value" @change="onChange"></nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref([20, 80]);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

指定范围 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range v-model="value" :max="10" :min="-10" @change="onChange" />
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(0);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

设置步长 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range v-model="value" :step="5" @change="onChange"></nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(20);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

隐藏范围 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range v-model="value" hidden-range @change="onChange"></nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(30);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

隐藏标签 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range v-model="value" :hidden-tag="true" @change="onChange"></nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(40);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

禁用 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range v-model="value" disabled @change="onChange"></nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(50);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

自定义样式 ​

html
<template>
  <nut-cell :style="{padding: '40px 18px'}">
    <nut-range
      v-model="value"
      inactive-color="rgba(163,184,255,1)"
      button-color="rgba(52,96,250,1)"
      active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"
      @change="onChange">
    </nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(40);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

自定义按钮 ​

html
<style>
  .custom-button {
    width: 26px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 100px;
  }
</style>
<template>
  <nut-cell :style="{padding: '40px 18px'}">
   <nut-range v-model="value" @change="onChange">
      <template #button>
        <div class="custom-button">{{ value }}</div>
      </template>
    </nut-range>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value = ref(60);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value,
      onChange,
    };
  },
};
</script>

垂直方向 ​

html
<style>

.vertical_div {
  height: 180px;
  padding: 10px;
}
.div {
  width: 150px;
}
.cell {
  padding: 40px 18px;
}
</style>
<template>
  <nut-cell class="vertical_div">
    <div class="div">
      <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
    </div>
    <div class="div">
      <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
    </div>
  </nut-cell>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
    const value10 = ref(20);
    const value11 = ref([20,80]);
    const onChange = (value) => console.log('当前值：' + value);
    return {
      value10,
      value11,
      onChange,
    };
  },
};
</script>

刻度标记 ​

html
<style>
.vertical_div {
  height: 180px;
  padding: 10px;
}
.div {
  width: 150px;
}
.cell {
  padding: 40px 18px;
}
</style>
<template>
  <div >
    <nut-cell class="cell">
      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
    </nut-cell>
    <nut-cell class="cell">
      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
    </nut-cell>
    <nut-cell class="vertical_div">
      <div class="div">
        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
      </div>
      <div class="div">
        <nut-range
          range
          v-model="value15"
          @change="onChange"
          :vertical="true"
          :marks="marks"
          :hiddenRange="true"
        ></nut-range>
      </div>
    </nut-cell>
  </div>
</template>

<script lang="ts">
import { ref,reactive,toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({
      value12: 60,
      value13: [20, 80],
      value14: 60,
      value15: [20, 80],
    })
    const marks = ref({
      0: 0,
      20: 20,
      40: 40,
      60: 60,
      80: 80,
      100: 100
    });
    const onChange = (value) => console.log('当前值：' + value);
    return {
      ...toRefs(state),
      marks,
      onChange,
    };
  },
};
</script>

API ​

Props ​

参数说明类型可选值默认值
v-model当前进度百分比number / number[]-0
range是否开启双滑块模式boolean-false
max最大值number / string-100
min最小值number / string-0
step步长number / string-1
disabled是否禁用滑块boolean-false
vertical是否竖向展示boolean-false
hidden-range是否隐藏范围值boolean-false
hidden-tag是否隐藏标签boolean-false
active-color进度条激活态颜色string-rgba(250, 44, 25, 1)
inactive-color进度条非激活态颜色string-rgba(255, 163, 154, 1)
button-color按钮颜色string-rgba(250, 44, 25, 1)
marks刻度标示object-{}

Events ​

事件名说明回调参数
change进度变化且结束拖动后触发value: number | number[]
drag-start开始拖动时触发-
drag-end结束拖动时触发-

Slots ​

名称说明
button自定义滑动按钮

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-range-tip-font-color#333333
--nut-range-bg-colorvar(--nut-primary-color)
--nut-range-bg-color-tick#fa958c
--nut-range-bar-bg-colorlinear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)
--nut-range-bar-btn-bg-colorvar(--nut-white)
--nut-range-bar-btn-width24px
--nut-range-bar-btn-height24px
--nut-range-bar-btn-border1px solid var(--nut-primary-color)

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者