demo 原始链接:https://vux.li/demos/v2/#/component/rater
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group title=\"Normal Usage\">\n <cell title=\"set default score = 5\" inline-desc=\"total 5 stars if not specified\">\n <rater v-model=\"data3\"></rater>\n </cell>\n <cell title=\"change color\">\n <rater v-model=\"data3\" :max=\"6\" active-color=\"#04BE02\"></rater>\n </cell>\n </group>\n\n <group title=\"disabled = true\">\n <cell title=\"Your history score\">\n <rater v-model=\"data4\" disabled></rater>\n </cell>\n <cell :title=\"'Decimal score ' + data41 \">\n <rater v-model=\"data41\" active-color=\"#04BE02\" disabled></rater>\n </cell>\n <cell title=\"custom font-size(15px)\">\n <rater v-model=\"data42\" active-color=\"#04BE02\" :font-size=\"15\" disabled></rater>\n </cell>\n </group>\n\n <group title=\"custom star, some symbols like ♥ ❤ are not proper.\">\n <cell title=\"loving\">\n <rater v-model=\"data4\" star=\"♡\" active-color=\"red\" :margin=\"15\"></rater>\n </cell>\n <cell title=\"Use html\">\n <rater v-model=\"data41\" star=\"<span>X</span>\" active-color=\"red\" :margin=\"15\"></rater>\n </cell>\n <cell title=\"Sunshine\">\n <rater v-model=\"data5\" star=\"☼\" active-color=\"#FF9900\" :margin=\"4\"></rater>\n </cell>\n <cell title=\"Smilies\">\n <rater v-model=\"data5\" star=\"☻\" active-color=\"#FF9900\" :margin=\"4\"></rater>\n </cell>\n <cell title=\"Different stars\">\n <rater v-model=\"data5\" star=\"✩\" active-color=\"#FF9900\" :margin=\"4\"></rater>\n </cell>\n <cell title=\"How embarrass\">\n <rater v-model=\"data5\" star=\"囧\" active-color=\"#FF9900\" :margin=\"4\"></rater>\n </cell>\n </group>\n\n <group title=\"two way binding\">\n <cell title=\"Your history score\">\n <rater v-model=\"data6\" active-color=\"#04BE02\"></rater>\n </cell>\n <cell title=\"range\" primary=\"content\" :inline-desc=\"data6 + ''\">\n <range v-model=\"data6\" :step=\"1\" :min=\"0\" :max=\"5\"></range>\n </cell>\n </group>\n\n <group title=\"set min\">\n <cell title=\"min = 3\">\n <rater v-model=\"data7\" :min=\"3\"></rater>\n </cell>\n </group>\n\n </div>\n</template>\n\n<script>\nimport { Rater, Group, Cell, Range } from 'vux'\n\nexport default {\n components: {\n Rater,\n Group,\n Cell,\n Range\n },\n data () {\n return {\n data1: 0,\n data2: 5,\n data3: '5',\n data4: 3,\n data41: 3.7,\n data42: 3.5,\n data5: 3,\n data6: 3,\n data7: 0\n }\n }\n}\n</script>\n\n
\n