demo 原始链接:https://vux.li/demos/v2/#/component/x-button
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <divider>iOS Gradients(v2.7.4)</divider>\n <box gap=\"10px 10px\">\n <x-button :gradients=\"['#1D62F0', '#19D5FD']\">iOS Gradients</x-button>\n <x-button :gradients=\"['#A644FF', '#FC5BC4']\">iOS Gradients</x-button>\n <x-button :gradients=\"['#FF2719', '#FF61AD']\">iOS Gradients</x-button>\n <x-button :gradients=\"['#6F1BFE', '#9479DF']\">iOS Gradients</x-button>\n <x-button :gradients=\"['#FF5E3A', '#FF9500']\">iOS Gradients</x-button>\n </box>\n <divider>default</divider>\n <box gap=\"10px 10px\">\n <x-button>submit</x-button>\n <x-button type=\"primary\">primary</x-button>\n <x-button type=\"warn\">Delete</x-button>\n\n <divider>link</divider>\n <x-button type=\"primary\" link=\"/demo\">Go to demo list</x-button>\n <x-button type=\"default\" link=\"BACK\">Back</x-button>\n\n <divider>action type</divider>\n <x-button type=\"primary\" action-type=\"button\">submit</x-button>\n <x-button type=\"warn\" action-type=\"reset\">reset</x-button>\n\n <divider>loading</divider>\n <x-button type=\"default\" show-loading>submit</x-button>\n <x-button type=\"primary\" show-loading>submit</x-button>\n <x-button type=\"warn\" show-loading>submit</x-button>\n\n <divider>mini</divider>\n <x-button mini>submit</x-button>\n <x-button mini type=\"primary\">primary</x-button>\n <x-button mini type=\"warn\">Delete</x-button>\n <br>\n <x-button mini plain>submit</x-button>\n <x-button mini plain type=\"primary\">primary</x-button>\n\n <divider>plain</divider>\n <x-button plain>submit</x-button>\n <x-button plain type=\"primary\">primary</x-button>\n\n <divider>you can custom styles</divider>\n <x-button plain type=\"primary\" style=\"border-radius:99px;\">primary</x-button>\n <x-button plain type=\"primary\" class=\"custom-primary-red\">primary</x-button>\n\n <divider>disabled</divider>\n <x-button disabled>disable submit</x-button>\n <x-button type=\"primary\" disabled>disable primary</x-button>\n <x-button type=\"warn\" disabled>disable Delete</x-button>\n\n <x-button mini disabled>disable mini submit</x-button>\n <x-button mini type=\"primary\" disabled>disable mini primary</x-button>\n <x-button mini type=\"warn\" disabled>disable mini Delete</x-button>\n\n <x-button plain disabled>disable plain</x-button>\n <x-button plain type=\"primary\" disabled>disable plain primary</x-button>\n\n <divider>use :text and :disabled</divider>\n <x-button :text=\"submit001\" :disabled=\"disable001\" @click.native=\"processButton001\" type=\"primary\"></x-button>\n\n <divider>combined with flexbox</divider>\n <flexbox>\n <flexbox-item>\n <x-button type=\"primary\">primary</x-button>\n </flexbox-item>\n <flexbox-item>\n <x-button type=\"warn\">Delete</x-button>\n </flexbox-item>\n </flexbox>\n <divider>combined with flexbox</divider>\n <flexbox>\n <flexbox-item>\n <x-button type=\"default\">default</x-button>\n </flexbox-item>\n <flexbox-item>\n <x-button type=\"primary\">primary</x-button>\n </flexbox-item>\n <flexbox-item>\n <x-button type=\"warn\">Delete</x-button>\n </flexbox-item>\n </flexbox>\n\n </box>\n\n </div>\n</template>\n\n<script>\nimport { XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider } from 'vux'\n\nexport default {\n components: {\n XButton,\n Box,\n GroupTitle,\n Group,\n Flexbox,\n FlexboxItem,\n Divider\n },\n methods: {\n change (value) {\n console.log('change:', value)\n },\n processButton001 () {\n this.submit001 = 'processing'\n this.disable001 = true\n }\n },\n data () {\n return {\n submit001: 'click me',\n disable001: false\n }\n }\n}\n</script>\n\n<style lang=\"less\">\n.custom-primary-red {\n border-radius: 99px!important;\n border-color: #CE3C39!important;\n color: #CE3C39!important;\n &:active {\n border-color: rgba(206, 60, 57, 0.6)!important;\n color: rgba(206, 60, 57, 0.6)!important;\n background-color: transparent;\n }\n}\n</style>\n\n
\n