ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: fe7f7c7a0b
ブランチ タグ
nutui
/
3.1.5
/
doc.c90f3adf.js

doc.c90f3adf.js 10 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as n}from"./vendor.6bc94963.js";const t={class:"markdown-body"},l=[n('<h1>Range 区间选择器</h1><h3>介绍</h3><p>滑动输入条，用于在给定的范围内选择一个值。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-comment">//vue</span>\n<span class="hljs-keyword">import</span> { Range } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">//taro</span>\n<span class="hljs-keyword">import</span> { Range } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Range);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> value = ref(<span class="hljs-number">40</span>);\n    <span class="hljs-keyword">const</span> onChange = <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> Toast.text(<span class="hljs-string">&#39;当前值：&#39;</span> + value);\n    <span class="hljs-keyword">return</span> {\n      value,\n      onChange,\n    };\n  },\n};\n</code></pre><h3>双滑块</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> value = ref([<span class="hljs-number">20</span>, <span class="hljs-number">80</span>]);\n    <span class="hljs-keyword">const</span> onChange = <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> Toast.text(<span class="hljs-string">&#39;当前值：&#39;</span> + value);\n    <span class="hljs-keyword">return</span> {\n      value,\n      onChange,\n    };\n  },\n};\n</code></pre><h3>指定范围</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">:min</span>=<span class="hljs-string">&quot;-10&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><h3>设置步长</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">:step</span>=<span class="hljs-string">&quot;5&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><h3>隐藏范围</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">hidden-range</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><h3>隐藏标签</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">hidden-tag</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><h3>禁用</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">disabled</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><h3>自定义样式</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span>\n  <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span>\n  <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;rgba(163,184,255,1)&quot;</span>\n  <span class="hljs-attr">button-color</span>=<span class="hljs-string">&quot;rgba(52,96,250,1)&quot;</span>\n  <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%&quot;</span>\n  @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n</code></pre><h3>自定义按钮</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-range</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">button</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-button&quot;</span>&gt;</span>{{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-range</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">\n  <span class="hljs-selector-class">.custom-button</span> {\n    <span class="hljs-attribute">width</span>: <span class="hljs-number">26px</span>;\n    <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;\n    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">10px</span>;\n    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">18px</span>;\n    <span class="hljs-attribute">text-align</span>: center;\n    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ee0a24</span>;\n    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100px</span>;\n  }\n</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>当前进度百分比</td><td>Number、Number[]</td><td><code>0</code></td></tr><tr><td>range</td><td>是否开启双滑块模式</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>max</td><td>最大值</td><td>Number、String</td><td><code>100</code></td></tr><tr><td>min</td><td>最小值</td><td>Number、String</td><td><code>0</code></td></tr><tr><td>step</td><td>步长</td><td>Number、String</td><td><code>1</code></td></tr><tr><td>disabled</td><td>是否禁用滑块</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>hidden-range</td><td>是否隐藏范围值</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>hidden-tag</td><td>是否隐藏标签</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>active-color</td><td>进度条激活态颜色</td><td>String</td><td><code>rgba(250, 44, 25, 1)</code></td></tr><tr><td>inactive-color</td><td>进度条非激活态颜色</td><td>String</td><td><code>rgba(255, 163, 154, 1)</code></td></tr><tr><td>button-color</td><td>按钮颜色</td><td>String</td><td><code>rgba(250, 44, 25, 1)</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>进度变化且结束拖动后触发</td><td>value: 当前进度</td></tr><tr><td>drag-start</td><td>开始拖动时触发</td><td>-</td></tr><tr><td>drag-end</td><td>结束拖动时触发</td><td>-</td></tr></tbody></table><h3>Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>button</td><td>自定义滑动按钮</td></tr></tbody></table>',33)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
    2.