You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.1 KiB
134 lines
3.1 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" >
|
||
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
||
|
|
<meta http-equiv="Expires" content="0" />
|
||
|
|
<title>微信API</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.write('<script type="text/javascript" src="src/utils/import-util.js?t=' + new Date().getTime() + '"><\/script>')
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/* .list-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(60px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-enter-from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(60px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-enter-active,
|
||
|
|
.list-leave-active {
|
||
|
|
transition: all 0.6s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-move {
|
||
|
|
transition: transform 0.6s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-leave-active {
|
||
|
|
position: absolute;
|
||
|
|
} */
|
||
|
|
/* .list-complete-item {
|
||
|
|
transition: all 0.8s ease;
|
||
|
|
display: inline-block;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-complete-enter-from,
|
||
|
|
.list-complete-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-complete-leave-active {
|
||
|
|
position: absolute;
|
||
|
|
} */
|
||
|
|
|
||
|
|
.list-complete-item {
|
||
|
|
transition: all 0.8s ease;
|
||
|
|
display: inline-block;
|
||
|
|
margin-right: 10px;
|
||
|
|
width: 100%;
|
||
|
|
border: 1px solid red;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-complete-enter-from,
|
||
|
|
.list-complete-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-complete-leave-active {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app"
|
||
|
|
v-cloak>
|
||
|
|
|
||
|
|
<div id="list-complete-demo"
|
||
|
|
class="demo">
|
||
|
|
<button @click="shuffle">Shuffle</button>
|
||
|
|
<button @click="add">Add</button>
|
||
|
|
<button @click="remove">Remove</button>
|
||
|
|
|
||
|
|
<div style="position: fixed;">
|
||
|
|
<transition-group name="list-complete">
|
||
|
|
<div v-for="item in items"
|
||
|
|
:key="item"
|
||
|
|
class="list-complete-item">
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
</transition-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/babel">
|
||
|
|
Vue.createApp({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
items: [11, 2, 3, 4, 5, 6, 7, 8, 9],
|
||
|
|
nextNum: 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
randomIndex() {
|
||
|
|
return Math.floor(Math.random() * this.items.length)
|
||
|
|
},
|
||
|
|
add() {
|
||
|
|
this.items.splice(this.randomIndex(), 0, this.nextNum++)
|
||
|
|
},
|
||
|
|
remove() {
|
||
|
|
this.items.splice(this.randomIndex(), 1)
|
||
|
|
},
|
||
|
|
shuffle() {
|
||
|
|
// this.items = _.shuffle(this.items)
|
||
|
|
|
||
|
|
this.items.sort((a, b) => {
|
||
|
|
return (a > b ? 1 : -1)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}).use(VueConfig)
|
||
|
|
.use(store)
|
||
|
|
.use(VueRouter.createRouter({
|
||
|
|
history: VueRouter.createWebHashHistory(),
|
||
|
|
routes: []
|
||
|
|
}))
|
||
|
|
.mount('#app');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|