demo 原始链接:https://vux.li/demos/v2/#/component/group
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group label-width=\"4.5em\" label-margin-right=\"2em\" label-align=\"right\">\n <cell title=\"Cell\" value=\"value\" is-link></cell>\n <cell title=\"Cell\" value=\"value\" is-link value-align=\"left\"></cell>\n <x-input title=\"上报人\" v-model=\"value1\"></x-input>\n <x-input placeholder=\"I'm placeholder\">\n <img slot=\"restricted-label\" style=\"display:inline-block;vertical-align:middle;\" src=\"http://dn-placeholder.qbox.me/110x110/FF2D55/000\" width=\"24\" height=\"24\">\n </x-input>\n <x-input title=\"上<i class='vux-blank-half'></i>报<i class='vux-blank-half'></i>人\" v-model=\"value1\"></x-input>\n <x-number title=\"Quantity\" align=\"left\" v-model=\"numberValue\" button-style=\"round\" :min=\"0\" :max=\"5\"></x-number>\n <datetime title=\"时   间\" v-model=\"time1\" value-text-align=\"left\"></datetime>\n <selector title=\"隐患类别\" :options=\"['工艺技术', '其他']\" v-model=\"value2\"></selector>\n <selector title=\"隐患类别\" placeholder=\"Placeholder\" :options=\"['工艺技术', '其他']\" v-model=\"value7\"></selector>\n <selector title=\"隐患类别\" :options=\"['工艺技术', '其他']\" v-model=\"value8\"></selector>\n <x-input title=\"隐患部位\" placeholder=\"必填\" v-model=\"value3\"></x-input>\n <x-input title=\"密码\" type=\"password\" placeholder=\"必填\" v-model=\"value4\"></x-input>\n <popup-picker title=\"请选择\" :data=\"list\" v-model=\"value5\" value-text-align=\"left\"></popup-picker>\n <popup-picker title=\"请选择\" placeholder=\"Required\" :data=\"list\" v-model=\"value6\" value-text-align=\"left\"></popup-picker>\n <x-address title=\"地址选择\" v-model=\"addressValue\" raw-value :list=\"addressData\" value-text-align=\"left\"></x-address>\n <x-textarea title=\"详细信息\" placeholder=\"请填写详细信息\" :show-counter=\"false\" :rows=\"3\"></x-textarea>\n <x-textarea placeholder=\"请填写详细信息\" :show-counter=\"false\" :rows=\"3\">\n <img slot=\"restricted-label\" style=\"display:inline-block;vertical-align:middle;\" src=\"http://dn-placeholder.qbox.me/110x110/FF2D55/000\" width=\"24\" height=\"24\">\n </x-textarea>\n </group>\n <br>\n <group>\n <group-title slot=\"title\">I'm a title<span style=\"float:right;\">right</span></group-title>\n <cell title=\"cell\"></cell>\n </group>\n <br>\n <group title=\"justify\" label-width=\"5.5em\" label-margin-right=\"2em\" label-align=\"justify\">\n <cell title=\"哈哈\" value=\"value\" is-link></cell>\n <cell title=\"哈哈哈哈哈\" value=\"value\" is-link value-align=\"left\"></cell>\n <x-input title=\"上报人\" v-model=\"value1\"></x-input>\n <x-number title=\"Quantity\" align=\"left\" v-model=\"numberValue\" button-style=\"round\" :min=\"0\" :max=\"5\"></x-number>\n <datetime title=\"时间\" v-model=\"time1\" value-text-align=\"left\"></datetime>\n <selector title=\"隐患类别\" :options=\"['工艺技术', '其他']\" v-model=\"value2\"></selector>\n <popup-picker title=\"请选择\" :data=\"list\" v-model=\"value5\" value-text-align=\"left\"></popup-picker>\n <x-address title=\"地址选择\" v-model=\"addressValue\" raw-value :list=\"addressData\" value-text-align=\"left\" label-align=\"justify\"></x-address>\n <x-switch title=\"选择\"></x-switch>\n <x-textarea title=\"详细信息\" placeholder=\"请填写详细信息\" :show-counter=\"false\" :rows=\"3\"></x-textarea>\n </group>\n <br>\n </div>\n</template>\n\n<script>\n import { GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, ChinaAddressData, XAddress, XTextarea, XSwitch } from 'vux'\n\n export default {\n components: {\n Group,\n GroupTitle,\n Cell,\n XInput,\n Selector,\n PopupPicker,\n XAddress,\n Datetime,\n XNumber,\n XTextarea,\n XSwitch\n },\n data () {\n return {\n addressData: ChinaAddressData,\n addressValue: ['广东省', '深圳市', '南山区'],\n value1: '张三',\n value2: '工艺技术',\n value3: '',\n value7: '',\n value8: '',\n value4: '',\n time1: '2017-06-01',\n value5: ['A'],\n value6: [],\n list: [['A', 'B', 'C']],\n numberValue: 0\n }\n }\n }\n</script>\n\n
\n