forked from opentiny/tiny-vue
51 lines
995 B
Vue
51 lines
995 B
Vue
<template>
|
|
<div>
|
|
<tiny-button @click="addlist">增加一项</tiny-button>
|
|
<tiny-button @click="removelist">删除一项</tiny-button>
|
|
<tiny-button @click="removeAll">删除所有项</tiny-button>
|
|
<br />
|
|
<br />
|
|
<tiny-floatbar class="custom">
|
|
<ul>
|
|
<li v-for="(item, index) in lists" :key="index">
|
|
<a>{{ item }}</a>
|
|
</li>
|
|
</ul>
|
|
</tiny-floatbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Floatbar, Button } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyFloatbar: Floatbar,
|
|
TinyButton: Button
|
|
},
|
|
data() {
|
|
return {
|
|
lists: ['custom-A', 'custom-B', 'custom-C', 'custom-D']
|
|
}
|
|
},
|
|
methods: {
|
|
addlist() {
|
|
this.lists.push('custom-Add')
|
|
},
|
|
removelist() {
|
|
this.lists.splice(this.lists.length - 1, 1)
|
|
},
|
|
removeAll() {
|
|
this.lists.splice(0, this.lists.length)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom {
|
|
position: static;
|
|
width: 200px;
|
|
}
|
|
</style>
|