demo 原始链接:https://vux.li/demos/v2/#/component/badge
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <badge text=\"1\"></badge>\n <br>\n <badge text=\"123\"></badge>\n <br>\n <group :title=\"$t('Used in a Cell')\">\n <cell :title=\"$t('Red dot')\" is-link>\n <div class=\"badge-value\">\n <span class=\"vertical-middle\">{{ $t('New Messages') }} </span>\n <badge></badge>\n </div>\n </cell>\n <cell :title=\"$t('Single digit')\" is-link>\n <div class=\"badge-value\">\n <span class=\"vertical-middle\">{{ $t('New Messages') }} </span>\n <badge text=\"8\"></badge>\n </div>\n </cell>\n <cell :title=\"$t('Big Number')\" is-link>\n <div class=\"badge-value\">\n <span class=\"vertical-middle\">{{ $t('New Messages') }} </span>\n <badge text=\"888\"></badge>\n </div>\n </cell>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { Badge, Group, Cell } from 'vux'\n\nexport default {\n components: {\n Badge,\n Group,\n Cell\n }\n}\n</script>\n\n<style lang=\"less\">\n.badge-value {\n display: inline-block ;\n}\n.vertical-middle {\n vertical-align: middle;\n}\n</style>\n\n
\n