import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Range \u533A\u95F4\u9009\u62E9\u5668

\u4ECB\u7ECD

\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Range } from '@nutui/nutui';
//taro
import { Range } from '@nutui/nutui-taro';

const app = createApp();
app.use(Range);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-range v-model="value" @change="onChange"></nut-range>

import { ref } from 'vue';
import { Toast } from '@nutui/nutui';

export default {
  setup() {
    const value = ref(40);
    const onChange = (value) => Toast.text('\u5F53\u524D\u503C\uFF1A' + value);
    return {
      value,
      onChange,
    };
  },
};

\u53CC\u6ED1\u5757

<nut-range range v-model="value" @change="onChange"></nut-range>

import { ref } from 'vue';
import { Toast } from '@nutui/nutui';

export default {
  setup() {
    const value = ref([20, 80]);
    const onChange = (value) => Toast.text('\u5F53\u524D\u503C\uFF1A' + value);
    return {
      value,
      onChange,
    };
  },
};

\u6307\u5B9A\u8303\u56F4

<nut-range v-model="value" :max="10" :min="-10" @change="onChange"></nut-range>

\u8BBE\u7F6E\u6B65\u957F

<nut-range v-model="value" :step="5" @change="onChange"></nut-range>

\u9690\u85CF\u8303\u56F4

<nut-range v-model="value" hidden-range @change="onChange"></nut-range>

\u9690\u85CF\u6807\u7B7E

<nut-range v-model="value" hidden-tag @change="onChange"></nut-range>

\u7981\u7528

<nut-range v-model="value" disabled @change="onChange"></nut-range>

\u81EA\u5B9A\u4E49\u6837\u5F0F

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

\u81EA\u5B9A\u4E49\u6309\u94AE

<nut-range v-model="value" @change="onChange">
  <template #button>
    <div class="custom-button">{{ value }}</div>
  </template>
</nut-range>

<style>
  .custom-button {
    width: 26px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 100px;
  }
</style>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4	Number\u3001Number[]	`0`
range	\u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F	Boolean	`false`
max	\u6700\u5927\u503C	Number\u3001String	`100`
min	\u6700\u5C0F\u503C	Number\u3001String	`0`
step	\u6B65\u957F	Number\u3001String	`1`
disabled	\u662F\u5426\u7981\u7528\u6ED1\u5757	Boolean	`false`
hidden-range	\u662F\u5426\u9690\u85CF\u8303\u56F4\u503C	Boolean	`false`
hidden-tag	\u662F\u5426\u9690\u85CF\u6807\u7B7E	Boolean	`false`
active-color	\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272	String	`rgba(250, 44, 25, 1)`
inactive-color	\u8FDB\u5EA6\u6761\u975E\u6FC0\u6D3B\u6001\u989C\u8272	String	`rgba(255, 163, 154, 1)`
button-color	\u6309\u94AE\u989C\u8272	String	`rgba(250, 44, 25, 1)`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u8FDB\u5EA6\u53D8\u5316\u4E14\u7ED3\u675F\u62D6\u52A8\u540E\u89E6\u53D1	value: \u5F53\u524D\u8FDB\u5EA6
drag-start	\u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1	-
drag-end	\u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1	-

Slots

\u540D\u79F0	\u8BF4\u660E
button	\u81EA\u5B9A\u4E49\u6ED1\u52A8\u6309\u94AE

`,33),e=[p],g={setup(c,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,e))}};export{g as default};