屏幕快照 2018-03-15 上午11.49.45.png
<template>
<div>
<cell
:title="('Title 002')"
is-link
:border-intent="false"
:arrow-direction="showContent002 ? 'up' : 'down'"
@click.native="showContent002 = !showContent002"></cell>
<template v-if="showContent002">
<cell-form-preview :border-intent="false" :list="list"></cell-form-preview>
</template>
</div>
</template>
<script>
import { Cell, CellFormPreview } from 'vux'
export default {
mounted () {
},
components: {
Cell,
CellFormPreview,
},
methods: {
onClick () {
console.log('on click')
}
},
data () {
return {
list: [{
label: 'Apple',
value: '3.29'
}, {
label: 'Banana',
value: '1.04'
}, {
label: 'Fish',
value: '8.00'
}],
money: null,
showContent002: false,
}
}
}
</script>
<style lang="less" scoped>
.sub-item {
color: #888;
}
</style>
屏幕快照 2018-03-15 下午12.43.05.png
<template>
<div class="zhengwen">
<group >
<cell
:title="'动画'"
is-link
:border-intent="true"
:arrow-direction="showContent004 ? 'up' : 'down'"
@click.native="showContent004 = !showContent004"></cell>
<p class="slide" :class="showContent004?'animate':''">blablabla...<br/>blablabla...<br/>blablabla...<br/>blablabla...</p>
</group>
</div>
</template>
<script>
import { Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'
export default {
name: 'ApprovalOpinion',
data () {
return {
showContent004: false
}
},
components: {
Group,
Cell,
CellFormPreview,
CellBox,
Badge
},
methods: {
},
}
</script>
<style lang="less" scoped>
.slide {
padding: 0 20px;
overflow: hidden;
max-height: 0;
transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
max-height: 9999px;
transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
transition-delay: 0s;
}
</style>
