demo 原始链接:https://vux.li/demos/v2/#/component/swipeout
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <div class=\"vux-1px-t\">\n \n <swipeout>\n\n <swipeout-item @on-close=\"handleEvents('on-close')\" @on-open=\"handleEvents('on-open')\" transition-mode=\"follow\">\n <div slot=\"right-menu\">\n <swipeout-button @click.native=\"onButtonClick('fav')\" type=\"primary\">{{$t('Yes')}}</swipeout-button>\n <swipeout-button @click.native=\"onButtonClick('delete')\" type=\"warn\">{{$t('Right')}}</swipeout-button>\n </div>\n <div slot=\"content\" class=\"demo-content vux-1px-t\">\n {{$t('JavaScript is the best language')}}\n </div>\n </swipeout-item>\n\n <swipeout-item :threshold=\".5\" underlay-color=\"#ccc\">\n <div slot=\"right-menu\">\n <swipeout-button @click.native=\"onButtonClick('fav')\" background-color=\"#336DD6\">{{$t('Fav')}}</swipeout-button>\n <swipeout-button @click.native=\"onButtonClick('delete')\" background-color=\"#D23934\">{{$t('Delete')}}</swipeout-button>\n </div>\n <div slot=\"content\" class=\"demo-content vux-1px-tb\">\n {{$t('threshold = 0.5')}}\n </div>\n </swipeout-item>\n\n <swipeout-item :disabled=\"disabled\" ref=\"swipeoutItem\" :right-menu-width=\"210\" :sensitivity=\"15\">\n <div slot=\"right-menu\">\n <swipeout-button @click.native=\"onButtonClick('fav')\" type=\"primary\" :width=\"70\">{{$t('Fav')}}</swipeout-button>\n <swipeout-button @click.native=\"onButtonClick('delete')\" type=\"warn\" :width=\"70\">{{$t('Delete')}}</swipeout-button>\n <swipeout-button @click.native=\"onButtonClick('ignore')\" type=\"default\" :width=\"70\">{{$t('Ignore')}}</swipeout-button>\n </div>\n\n <div slot=\"left-menu\">\n <swipeout-button @click.native=\"onButtonClick('fav')\" type=\"primary\">{{$t('Fav')}}</swipeout-button>\n <swipeout-button @click.native=\"onButtonClick('delete')\" type=\"warn\">{{$t('Delete')}}</swipeout-button>\n </div>\n\n <div slot=\"content\" class=\"demo-content vux-1px-b\">\n {{$t('now ' + (disabled ? 'disabled' : 'enabled'))}}\n </div>\n </swipeout-item>\n\n </swipeout>\n </div>\n \n\n <div style=\"padding:15px;\">\n <x-button @click.native=\"disabled = false\" type=\"primary\" :disabled=\"!disabled\">{{ $t('set Enabled') }}</x-button>\n <x-button @click.native=\"disabled = true\" type=\"warn\" :disabled=\"disabled\">{{ $t('set Disabled') }}</x-button>\n <x-button @click.native=\"$refs.swipeoutItem.open('left')\" type=\"primary\">{{ $t('open left menu') }}</x-button>\n <x-button @click.native=\"$refs.swipeoutItem.open('right')\" type=\"primary\">{{ $t('open right menu') }}</x-button>\n <x-button @click.native=\"$refs.swipeoutItem.close()\" type=\"warn\">{{ $t('close menu') }}</x-button>\n </div>\n <br>\n <group-title>use vux-1px to style items</group-title>\n <swipeout class=\"vux-1px-tb\">\n <swipeout-item transition-mode=\"follow\" v-for=\"i in 3\" :key=\"i\">\n <div slot=\"right-menu\">\n <swipeout-button type=\"primary\">{{$t('Yes')}}</swipeout-button>\n <swipeout-button type=\"warn\">{{$t('Right')}}</swipeout-button>\n </div>\n <div slot=\"content\" :class=\"{'vux-1px-b': i !== 3, 'vux-1px-t': i === 1}\" style=\"padding:12px;\">{{ $t('JavaScript is the best language') }}</div>\n </swipeout-item>\n </swipeout>\n <br>\n <br>\n </div>\n</template>\n\n\n\n<script>\nimport { GroupTitle, Swipeout, SwipeoutItem, SwipeoutButton, XButton } from 'vux'\n\nexport default {\n components: {\n GroupTitle,\n Swipeout,\n SwipeoutItem,\n SwipeoutButton,\n XButton\n },\n methods: {\n onButtonClick (type) {\n alert('on button click ' + type)\n },\n handleEvents (type) {\n console.log('event: ', type)\n }\n },\n data () {\n return {\n disabled: false\n }\n }\n}\n</script>\n\n<style lang=\"less\">\n.demo-content {\n padding: 10px 10px;\n}\n</style>\n\n
\n