demo 原始链接:https://vux.li/demos/v2/#/component/range
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group title=\"default range\">\n <cell title=\"Default\" :inline-desc=\"'value: '+data1\" primary=\"content\">\n <range v-model=\"data1\" @on-change=\"onChange\"></range>\n </cell>\n <cell title=\"allow decimals\" :inline-desc=\"'value is: '+data2\" primary=\"content\">\n <range v-model=\"data2\" decimal></range>\n </cell>\n <cell title=\"value=20\" :inline-desc=\"'value is: '+data3\" primary=\"content\">\n <range v-model=\"data3\"></range>\n </cell>\n </group>\n <group title=\"min and max\">\n <cell title=\"min=8\" :inline-desc=\"'value is: '+data4\" primary=\"content\">\n <range v-model=\"data4\" :min=\"8\"></range>\n </cell>\n <cell title=\"max=88\" :inline-desc=\"'value is: '+data5\" primary=\"content\">\n <range v-model=\"data5\" :max=\"88\"></range>\n </cell>\n <cell title=\"min and max\" :inline-desc=\"'value is: '+data6\" primary=\"content\">\n <range v-model=\"data6\" :min=\"7\" :max=\"77\"></range>\n </cell>\n <cell title=\"change min and max\" primary=\"content\">\n <range v-model=\"dynamiValue\" :min=\"min\" :max=\"max\" :step=\"step\"></range>\n </cell>\n <cell title=\"current value\" :value=\"dynamiValue + ''\"></cell>\n </group>\n <br>\n <div style=\"margin:0 10px;\">\n <x-button type=\"primary\" @click.native=\"update\">update min = {{min}}, max = {{max}} and step = {{step}}</x-button>\n </div>\n\n <group title=\"Step\">\n <cell title=\"step=10\" :inline-desc=\"'valus is: '+data7\" primary=\"content\">\n <range v-model=\"data7\" :min=\"7\" :max=\"77\" :step=\"10\"></range>\n </cell>\n </group>\n\n <group title=\"disabled\">\n <cell title=\"disabled=true\" :inline-desc=\"'valus is: '+data8\" primary=\"content\">\n <range v-model=\"data8\" disabled></range>\n </cell>\n <cell title=\"Opacity\" :inline-desc=\"'valus is: '+data8\" primary=\"content\">\n <range v-model=\"data8\" disabled :disabled-opacity=\"0.1\"></range>\n </cell>\n </group>\n\n <group title=\"bar height\">\n <cell title=\"Line width\" :inline-desc=\"'value is: '+data9\" primary=\"content\">\n <range v-model=\"data9\" :range-bar-height=\"4\"></range>\n </cell>\n </group>\n\n <group title=\"custom min and max html\">\n <cell title=\"文字大小\" :inline-desc=\"'font size: ' + data10\" primary=\"content\">\n <range v-model=\"data10\" :min=\"12\" :max=\"22\" min-HTML=\"<span style='font-size:12px;'>小</span>\" max-HTML=\"<span style='font-size:22px;'>大</span>\"></range>\n </cell>\n <cell title=\"bcontentness\" :inline-desc=\"'value is: ' + data11 + '%'\" primary=\"content\">\n <range v-model=\"data11\" min-HTML=\"<span style='font-size:16px;color:#F90;'>☼</span>\" max-HTML=\"<span style='font-size:30px;color:#F90;'>☼</span>\"></range>\n </cell>\n </group>\n\n <group title=\"two way binding\">\n <cell title=\"Default\" primary=\"content\">\n <range v-model=\"data12\"></range>\n </cell>\n <cell title=\"Default\" primary=\"content\">\n <range v-model=\"data12\"></range>\n </cell>\n </group>\n\n <group :title=\"'use v-show ' + 'data: ' + data13\">\n <cell title=\"Default\" primary=\"content\">\n <range :step=\"10\" v-model=\"data13\" v-show=\"showData13\"></range>\n </cell>\n </group>\n\n </div>\n</template>\n\n<script>\nimport { XButton, Range, Group, GroupTitle, Cell } from 'vux'\n\nexport default {\n components: {\n Range,\n Group,\n GroupTitle,\n Cell,\n XButton\n },\n mounted () {\n setTimeout(() => {\n this.showData13 = true\n }, 2000)\n },\n data () {\n return {\n data1: 0,\n data2: 0,\n data3: 20,\n data4: 18,\n data5: 28,\n data6: 37,\n data7: 17,\n data8: 25,\n data9: 50,\n data10: 14,\n data11: 30,\n data12: 0,\n data13: 10,\n showData13: false,\n min: 0,\n max: 100,\n step: 1,\n dynamiValue: 0\n }\n },\n methods: {\n onChange (val) {\n console.log('change', val)\n },\n update () {\n this.min = Math.floor(Math.random() * 30)\n this.max = Math.floor(50 + Math.random() * 100)\n this.step = 1 + Math.floor(Math.random() * 10)\n }\n }\n}\n</script>\n\n
\n