<zan-cell-group>\n <zan-cell title=\"单元格1\" value=\"单元格1内容\"></zan-cell>\n <zan-cell title=\"单元格2\" value=\"单元格2内容\"></zan-cell>\n</zan-cell-group>\n
\n传入label
属性,属性值为描述信息的值。
<zan-cell-group>\n <zan-cell title=\"单元格1\" label=\"描述信息\" is-link url=\"javascript:void(0)\" @click=\"handleClick\"></zan-cell>\n <zan-cell title=\"单元格2\" label=\"描述信息\"></zan-cell>\n</zan-cell-group>\n
\n传入icon
属性。
<zan-cell-group>\n <zan-cell title=\"起码运动馆\" icon=\"home\"></zan-cell>\n <zan-cell title=\"线下门店\" icon=\"location\"></zan-cell>\n</zan-cell-group>\n
\n传入url
属性,传入isLink
属性则会在右侧显示箭头。
<zan-cell-group>\n <zan-cell title=\"起码运动馆\" value=\"进入店铺\" icon=\"home\" url=\"http://youzan.com\" is-link></zan-cell>\n <zan-cell title=\"线下门店\" icon=\"location\" url=\"http://youzan.com\" is-link></zan-cell>\n</zan-cell-group>\n
\n如以上用法不能满足你的需求,可以使用对应的slot
来自定义显示的内容。包含三个slot
,默认slot
,icon
和title
的slot
。
<zan-cell-group>\n <zan-cell value=\"进入店铺\" icon=\"home\" url=\"http://youzan.com\" is-link>\n <template slot=\"title\">\n <span class=\"zan-cell-text\">起码运动馆</span>\n <img src=\"//su.yzcdn.cn/v2/image/account/icon_guan_160421.png\" class=\"official-img\">\n </template>\n </zan-cell>\n <zan-cell title=\"线下门店\" icon=\"location\" url=\"http://youzan.com\" is-link></zan-cell>\n</zan-cell-group>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
icon | \n左侧图标 | \nstring | \n'' | \n'' | \n
title | \n左侧标题 | \nstring | \n'' | \n'' | \n
value | \n右侧内容 | \nstring | \n'' | \n'' | \n
isLink | \n是否为链接,链接会在右侧出现箭头 | \nboolean | \n'' | \n'' | \n
url | \n跳转链接 | \nstring | \n'' | \n'' | \n
label | \n描述信息,显示在标题下方 | \nstring | \n'' | \n'' | \n
name | \n描述 | \n
---|---|
- | \n自定义显示内容 | \n
icon | \n自定义icon | \n
title | \n自定义title | \n
<zan-button @click=\"handleAlertClick\">alert</zan-button>\n\n<zan-button @click=\"handleConfirmClick\">confirm</zan-button>\n\n<script>\nimport { Dialog } from 'src/index';\n\nexport default {\n methods: {\n handleAlertClick() {\n Dialog.alert({\n title: 'alert标题',\n message: '弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。'\n }).then((action) => {\n console.log(action);\n });\n },\n\n handleConfirmClick() {\n Dialog.confirm({\n title: 'confirm标题',\n message: '弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。'\n }).then((action) => {\n console.log(action);\n }, (error) => {\n console.log(error);\n });\n }\n }\n};\n</script>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
title | \n标题 | \nString | \n'' | \n\n |
message | \n内容 | \nString | \n'' | \n\n |
<zan-radio name=\"1\" v-model=\"radio1\">单选框1</zan-radio>\n<zan-radio name=\"2\" v-model=\"radio1\">单选框2</zan-radio>\n\n<script>\nexport default {\n data() {\n return {\n radio1: '1'\n }\n }\n};\n</script>\n
\n<zan-radio name=\"1\" v-model=\"radio2\" disabled>未选中禁用</zan-radio>\n<zan-radio name=\"2\" v-model=\"radio2\" disabled>选中且禁用</zan-radio>\n\n<script>\nexport default {\n data() {\n return {\n radio2: '2'\n }\n }\n};\n</script>\n
\n<zan-radio-group v-model=\"radio3\">\n <zan-radio name=\"1\">单选框1</zan-radio>\n <zan-radio name=\"2\">单选框2</zan-radio>\n</zan-radio-group>\n\n<script>\nexport default {\n data() {\n return {\n radio3: '1'\n }\n }\n};\n</script>\n
\n<zan-radio-group v-model=\"radio4\">\n <zan-cell-group>\n <zan-cell><zan-radio name=\"1\">单选框1</zan-radio></zan-cell>\n <zan-cell><zan-radio name=\"2\">单选框2</zan-radio></zan-cell>\n </zan-cell-group>\n</zan-radio-group>\n\n<script>\nexport default {\n data() {\n return {\n radio4: '1'\n }\n }\n};\n</script>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
disabled | \n是否禁用单选框 | \nBoolean | \nfalse | \n\n |
name | \n根据这个来判断radio是否选中 | \nBoolean | \nfalse | \n\n |
参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
disabled | \n是否禁用单选框 | \nBoolean | \nfalse | \n\n |
<zan-cell-group>\n <zan-cell title=\"单元格1\" value=\"单元格1内容\"></zan-cell>\n <zan-cell title=\"单元格2\" value=\"单元格2内容\"></zan-cell>\n</zan-cell-group>\n
\n传入label
属性,属性值为描述信息的值。
<zan-cell-group>\n <zan-cell title=\"单元格1\" label=\"描述信息\" is-link url=\"javascript:void(0)\" @click=\"handleClick\"></zan-cell>\n <zan-cell title=\"单元格2\" label=\"描述信息\"></zan-cell>\n</zan-cell-group>\n
\n传入icon
属性。
<zan-cell-group>\n <zan-cell title=\"起码运动馆\" icon=\"home\"></zan-cell>\n <zan-cell title=\"线下门店\" icon=\"location\"></zan-cell>\n</zan-cell-group>\n
\n传入url
属性,传入isLink
属性则会在右侧显示箭头。
<zan-cell-group>\n <zan-cell title=\"起码运动馆\" value=\"进入店铺\" icon=\"home\" url=\"http://youzan.com\" is-link></zan-cell>\n <zan-cell title=\"线下门店\" icon=\"location\" url=\"http://youzan.com\" is-link></zan-cell>\n</zan-cell-group>\n
\n如以上用法不能满足你的需求,可以使用对应的slot
来自定义显示的内容。包含三个slot
,默认slot
,icon
和title
的slot
。
<zan-cell-group>\n <zan-cell value=\"进入店铺\" icon=\"home\" url=\"http://youzan.com\" is-link>\n <template slot=\"title\">\n <span class=\"zan-cell-text\">起码运动馆</span>\n <img src=\"//su.yzcdn.cn/v2/image/account/icon_guan_160421.png\" class=\"official-img\">\n </template>\n </zan-cell>\n <zan-cell title=\"线下门店\" icon=\"location\" url=\"http://youzan.com\" is-link></zan-cell>\n</zan-cell-group>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
icon | \n左侧图标 | \nstring | \n'' | \n'' | \n
title | \n左侧标题 | \nstring | \n'' | \n'' | \n
value | \n右侧内容 | \nstring | \n'' | \n'' | \n
isLink | \n是否为链接,链接会在右侧出现箭头 | \nboolean | \n'' | \n'' | \n
url | \n跳转链接 | \nstring | \n'' | \n'' | \n
label | \n描述信息,显示在标题下方 | \nstring | \n'' | \n'' | \n
name | \n描述 | \n
---|---|
- | \n自定义显示内容 | \n
icon | \n自定义icon | \n
title | \n自定义title | \n
<zan-button @click=\"handleAlertClick\">alert</zan-button>\n\n<zan-button @click=\"handleConfirmClick\">confirm</zan-button>\n\n<script>\nimport { Dialog } from 'src/index';\n\nexport default {\n methods: {\n handleAlertClick() {\n Dialog.alert({\n title: 'alert标题',\n message: '弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。'\n }).then((action) => {\n console.log(action);\n });\n },\n\n handleConfirmClick() {\n Dialog.confirm({\n title: 'confirm标题',\n message: '弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。'\n }).then((action) => {\n console.log(action);\n }, (error) => {\n console.log(error);\n });\n }\n }\n};\n</script>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
title | \n标题 | \nString | \n'' | \n\n |
message | \n内容 | \nString | \n'' | \n\n |
<zan-radio name=\"1\" v-model=\"radio1\">单选框1</zan-radio>\n<zan-radio name=\"2\" v-model=\"radio1\">单选框2</zan-radio>\n\n<script>\nexport default {\n data() {\n return {\n radio1: '1'\n }\n }\n};\n</script>\n
\n<zan-radio name=\"1\" v-model=\"radio2\" disabled>未选中禁用</zan-radio>\n<zan-radio name=\"2\" v-model=\"radio2\" disabled>选中且禁用</zan-radio>\n\n<script>\nexport default {\n data() {\n return {\n radio2: '2'\n }\n }\n};\n</script>\n
\n<zan-radio-group v-model=\"radio3\">\n <zan-radio name=\"1\">单选框1</zan-radio>\n <zan-radio name=\"2\">单选框2</zan-radio>\n</zan-radio-group>\n\n<script>\nexport default {\n data() {\n return {\n radio3: '1'\n }\n }\n};\n</script>\n
\n<zan-radio-group v-model=\"radio4\">\n <zan-cell-group>\n <zan-cell><zan-radio name=\"1\">单选框1</zan-radio></zan-cell>\n <zan-cell><zan-radio name=\"2\">单选框2</zan-radio></zan-cell>\n </zan-cell-group>\n</zan-radio-group>\n\n<script>\nexport default {\n data() {\n return {\n radio4: '1'\n }\n }\n};\n</script>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
disabled | \n是否禁用单选框 | \nBoolean | \nfalse | \n\n |
name | \n根据这个来判断radio是否选中 | \nBoolean | \nfalse | \n\n |
参数 | \n说明 | \n类型 | \n默认值 | \n可选值 | \n
---|---|---|---|---|
disabled | \n是否禁用单选框 | \nBoolean | \nfalse | \n\n |
事件名称 | \n说明 | \n回调参数 | \n
---|---|---|
change | \n当绑定值变化时触发的事件 | \n当前组件的值 | \n