demo 原始链接:https://vux.li/demos/v2/#/component/x-number
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group :title=\"$t('Default')\">\n <x-number :name=\"$t('Quantity')\" :title=\"$t('Quantity')\"></x-number>\n </group>\n\n <group :title=\"$t('listen')\">\n <x-number :title=\"$t('Quantity')\" v-model=\"changeValue\" :min=\"0\" @on-change=\"change\"></x-number>\n </group>\n\n <group :title=\"$t('set width=100px')\">\n <x-number :title=\"$t('Quantity')\" width=\"100px\"></x-number>\n </group>\n\n <group :title=\"$t('round style')\">\n <x-number :title=\"$t('Quantity')\" v-model=\"roundValue\" button-style=\"round\" :min=\"0\" :max=\"5\"></x-number>\n </group>\n\n <group :title=\"$t('set step=0.5')\">\n <x-number :title=\"$t('Quantity')\" :step=\"0.5\"></x-number>\n </group>\n\n <group :title=\"$t('set value=1, min=-5 and max=8')\">\n <x-number :title=\"$t('Quantity')\" :min=\"-5\" :max=\"8\" :value=\"1\"></x-number>\n </group>\n\n <group :title=\"$t('fillable = true')\">\n <x-number :value=\"10\" :title=\"$t('Quantity')\" fillable></x-number>\n </group>\n\n </div>\n</template>\n\n\n\n<script>\nimport { Group, XNumber, XSwitch, Divider } from 'vux'\n\nexport default {\n components: {\n XNumber,\n Group,\n XSwitch,\n Divider\n },\n data () {\n return {\n changeValue: 0,\n roundValue: 0\n }\n },\n methods: {\n change (val) {\n console.log('change', val)\n }\n }\n}\n</script>\n\n
\n