demo 原始链接:https://vux.li/demos/v2/#/component/cell
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <cell :title=\"$t('My Account')\" :value=\"$t('Protected')\" @click.native=\"onClick\"></cell>\n <cell :title=\"$t('Money')\" @click.native=\"onClick\" :is-loading=\"!money\" :value=\"money\"></cell>\n <cell :title=\"$t('Withdraw')\" disabled is-link></cell>\n </group>\n\n <group :title=\"$t('Use is-link to show arrow')\">\n <cell is-link>\n <span slot=\"title\" style=\"color:green;\"><span style=\"vertical-align:middle;\">{{ $t('Messages') }}</span> <badge text=\"1\"></badge></span>\n </cell>\n <cell :title=\"$t('Notifications')\" is-link></cell>\n <cell :title=\"$t('Privacy')\" is-link></cell>\n <cell :title=\"$t('General')\" is-link>\n <img slot=\"icon\" width=\"20\" style=\"display:block;margin-right:5px;\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=\">\n </cell>\n </group>\n\n <group label-width=\"5em\" title=\"Align-items\">\n <cell primary=\"content\" title=\"default\" value=\"long long long longlong longlong longlong longlong longlong longlong longlong longlong long\"></cell>\n <cell title=\"flex-start\" align-items=\"flex-start\" value=\"long long long longlong longlong longlong longlong longlong longlong longlong longlong long\"></cell>\n </group>\n\n <group :title=\"$t('Collapse')\">\n <cell\n :title=\"$t('Title 001')\"\n is-link\n :border-intent=\"false\"\n :arrow-direction=\"showContent001 ? 'up' : 'down'\"\n @click.native=\"showContent001 = !showContent001\"></cell>\n\n <template v-if=\"showContent001\">\n <cell-box :border-intent=\"false\" class=\"sub-item\" is-link>content 001</cell-box>\n <cell-box class=\"sub-item\" is-link>content 001</cell-box>\n <cell-box class=\"sub-item\" is-link>content 001</cell-box>\n </template>\n\n <cell\n :title=\"$t('Title 002')\"\n is-link\n :border-intent=\"false\"\n :arrow-direction=\"showContent002 ? 'up' : 'down'\"\n @click.native=\"showContent002 = !showContent002\"></cell>\n\n <template v-if=\"showContent002\">\n <cell-form-preview :border-intent=\"false\" :list=\"list\"></cell-form-preview>\n </template>\n\n <cell\n :title=\"$t('Title 003')\"\n is-link\n :border-intent=\"false\"\n :arrow-direction=\"showContent003 ? 'up' : 'down'\"\n @click.native=\"showContent003 = !showContent003\"></cell>\n\n <template v-if=\"showContent003\">\n <cell-box :border-intent=\"false\" class=\"sub-item\">I'm content 003</cell-box>\n </template>\n\n <cell\n :title=\"$t('Animated')\"\n is-link\n :border-intent=\"false\"\n :arrow-direction=\"showContent004 ? 'up' : 'down'\"\n @click.native=\"showContent004 = !showContent004\"></cell>\n\n <p class=\"slide\" :class=\"showContent004?'animate':''\">blablabla...<br/>blablabla...<br/>blablabla...<br/>blablabla...</p>\n\n </group>\n\n <group>\n <cell :title=\"$t('Notifications')\" :value=\"$t('Enabled')\"></cell>\n </group>\n\n <group :title=\"$t('Use slot for complicated content')\">\n <cell :title=\"$t('Slot content')\">\n <div>\n <span style=\"color: green\">{{$t('Hi, I\\'m Vux.')}}</span>\n </div>\n </cell>\n </group>\n\n <group :title=\"$t('is-link is set to true automatically when link exists')\">\n <cell :title=\"$t('Go to Radio Demo')\" link=\"/component/radio\" inline-desc='link=\"/component/radio\"'></cell>\n <cell :title=\"$t('Go to Demo')\" :link=\"{path:'/demo'}\" inline-desc=':link={path:\"/demo\"}'></cell>\n <cell :title=\"$t('Http link')\" link=\"https://vux.li\" inline-desc='link=\"https://vux.li\"'></cell>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'\n\nexport default {\n mounted () {\n setTimeout(() => {\n this.money = -1024\n }, 2000)\n },\n components: {\n Group,\n Cell,\n CellFormPreview,\n CellBox,\n Badge\n },\n methods: {\n onClick () {\n console.log('on click')\n }\n },\n data () {\n return {\n list: [{\n label: 'Apple',\n value: '3.29'\n }, {\n label: 'Banana',\n value: '1.04'\n }, {\n label: 'Fish',\n value: '8.00'\n }],\n money: null,\n showContent001: false,\n showContent002: false,\n showContent003: false,\n showContent004: false\n }\n }\n}\n</script>\n\n<style scoped>\n.sub-item {\n color: #888;\n}\n.slide {\n padding: 0 20px;\n overflow: hidden;\n max-height: 0;\n transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;\n}\n.animate {\n max-height: 9999px;\n transition-timing-function: cubic-bezier(0.5, 0, 1, 0);\n transition-delay: 0s;\n}\n</style>\n\n
\n