/*! For license information please see 1542.0c273ed5.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["1542"],{96503:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Rate \u8BC4\u5206

\n

\u4ECB\u7ECD

\n

\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Rate } from 'vant';\n\nconst app = createApp();\napp.use(Rate);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u901A\u8FC7 v-model \u6765\u7ED1\u5B9A\u5F53\u524D\u8BC4\u5206\u503C\u3002

\n
<van-rate v-model="value" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(3);\n    return { value };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u56FE\u6807

\n

\u901A\u8FC7 icon \u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u65F6\u7684\u56FE\u6807\uFF0Cvoid-icon \u5C5E\u6027\u8BBE\u7F6E\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u3002

\n
<van-rate v-model="value" icon="like" void-icon="like-o" />\n
\n

\u81EA\u5B9A\u4E49\u6837\u5F0F

\n

\u901A\u8FC7 size \u5C5E\u6027\u8BBE\u7F6E\u56FE\u6807\u5927\u5C0F\uFF0Ccolor \u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u65F6\u7684\u989C\u8272\uFF0Cvoid-color \u8BBE\u7F6E\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272\u3002

\n
<van-rate\n  v-model="value"\n  :size="25"\n  color="#ffd21e"\n  void-icon="star"\n  void-color="#eee"\n/>\n
\n

\u534A\u661F

\n

\u8BBE\u7F6E allow-half \u5C5E\u6027\u540E\u53EF\u4EE5\u9009\u4E2D\u534A\u661F\u3002

\n
<van-rate v-model="value" allow-half />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(2.5);\n    return { value };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u6570\u91CF

\n

\u901A\u8FC7 count \u5C5E\u6027\u8BBE\u7F6E\u8BC4\u5206\u603B\u6570\u3002

\n
<van-rate v-model="value" :count="6" />\n
\n

\u53EF\u6E05\u7A7A

\n

\u5F53 clearable \u5C5E\u6027\u8BBE\u7F6E\u4E3A true\uFF0C\u518D\u6B21\u70B9\u51FB\u76F8\u540C\u7684\u503C\u65F6\uFF0C\u53EF\u4EE5\u5C06\u503C\u91CD\u7F6E\u4E3A 0\u3002

\n
<van-rate v-model="value" clearable />\n
\n

\u7981\u7528\u72B6\u6001

\n

\u901A\u8FC7 disabled \u5C5E\u6027\u6765\u7981\u7528\u8BC4\u5206\u3002

\n
<van-rate v-model="value" disabled />\n
\n

\u53EA\u8BFB\u72B6\u6001

\n

\u901A\u8FC7 readonly \u5C5E\u6027\u5C06\u8BC4\u5206\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001\u3002

\n
<van-rate v-model="value" readonly />\n
\n

\u53EA\u8BFB\u72B6\u6001\u663E\u793A\u5C0F\u6570

\n

\u8BBE\u7F6E readonly \u548C allow-half \u5C5E\u6027\u540E\uFF0CRate \u7EC4\u4EF6\u53EF\u4EE5\u5C55\u793A\u4EFB\u610F\u5C0F\u6570\u7ED3\u679C\u3002

\n
<van-rate v-model="value" readonly allow-half />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(3.3);\n    return { value };\n  },\n};\n
\n

\u76D1\u542C change \u4E8B\u4EF6

\n

\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 change \u4E8B\u4EF6\u3002

\n
<van-rate v-model="value" @change="onChange" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const value = ref(3);\n    const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n    return {\n      value,\n      onChange,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F53\u524D\u5206\u503Cnumber-
count\u56FE\u6807\u603B\u6570number | string5
size\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxnumber | string20px
gutter\u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxnumber | string4px
color\u9009\u4E2D\u65F6\u7684\u989C\u8272string#ee0a24
void-color\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272string#c8c9cc
disabled-color\u7981\u7528\u65F6\u7684\u989C\u8272string#c8c9cc
icon\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringstar
void-icon\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringstar-o
icon-prefix\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027stringvan-icon
allow-half\u662F\u5426\u5141\u8BB8\u534A\u9009booleanfalse
clearable v4.6.0\u662F\u5426\u5141\u8BB8\u518D\u6B21\u70B9\u51FB\u540E\u6E05\u9664booleanfalse
readonly\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u4FEE\u6539\u8BC4\u5206booleanfalse
disabled\u662F\u5426\u7981\u7528\u8BC4\u5206booleanfalse
touchable\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206booleantrue
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6currentValue: number
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type { RateProps } from 'vant';\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-rate-icon-size20px-
--van-rate-icon-guttervar(--van-padding-base)-
--van-rate-icon-void-colorvar(--van-gray-5)-
--van-rate-icon-full-colorvar(--van-danger-color)-
--van-rate-icon-disabled-colorvar(--van-gray-5)-
\n
'},null,8,e))}}}]);