vivo-ui
Version:
vivo ui component lib for vue
118 lines (117 loc) • 3.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Swipeout 滑动删除</title>
<link rel="stylesheet" type="text/css" href="./rest.css" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="../../dist/lib.js"></script>
<style>
.test {
padding: 10px;
border-bottom: #eee 1px solid;
}
.vui-swipeout-button {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
text-align: center;
justify-content: center;
-webkit-justify-content: center;
}
.btn{
width: 100%;
height: 32px;
text-align: center;
line-height: 32px;
background: rgb(51, 109, 214);
color: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content">
<div>
<swipeout
:style="{ fontWeight: 500 }"
@on-open="onOpen"
@on-close="onClose"
:threshold="0.4"
ref="swipeoutone"
>
<div slot="left-button">
<swipeout-button @on-click="onClick" :auto-close="false" :type="'success'">收藏</swipeout-button>
<swipeout-button :type="'delete'">删除</swipeout-button>
<swipeout-button :type="'gray'">忽略</swipeout-button>
</div>
<div slot="right-button">
<swipeout-button>
收藏
</swipeout-button>
<swipeout-button :type="'delete'">删除</swipeout-button>
</div>
<div class="test">vui-swipeout</div>
</swipeout>
<swipeout :style="{ fontWeight: 500 }" :disabled="disabled" ref="swipeouttewo">
<div slot="left-button">
<swipeout-button @on-click="onClick" :auto-close="false" :type="'info'">收藏</swipeout-button>
<swipeout-button :type="'delete'">删除</swipeout-button>
<swipeout-button :type="'gray'">忽略</swipeout-button>
</div>
<div slot="right-button">
<swipeout-button :type="'warning'">
收藏
</swipeout-button>
<swipeout-button :type="'delete'">删除</swipeout-button>
</div>
<div class="test">{{disabled?"不可操作":"可操作"}}</div>
</swipeout>
</div>
<div class="btn" @click="toggle">切换设置({{disabled?"不可操作":"可操作"}})</div>
<div class="btn" @click="open('left')">打开左侧</div>
<div class="btn" @click="open('right')">打开右侧</div>
<div class="btn" @click="close">关闭</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#content',
data () {
return {
disabled: false
}
},
methods: {
toggle () {
this.disabled = !this.disabled
console.log(this.disabled)
},
open (position) {
this.$refs.swipeouttewo.open(position)
},
close () {
this.$refs.swipeouttewo.close()
},
onOpen () {
console.log('打开了')
},
onClose () {
console.log('关闭了')
},
onClick () {
if (confirm('确认删除？')) {
this.$refs.swipeoutone.close()
}
}
},
components: {
Swipeout: VUI.Swipeout,
SwipeoutButton: VUI.SwipeoutButton
}
});
</script>
</body>
</html>