您的位置：首页 > 产品设计 > UI/UE

使用vue组件来写一个折叠面板

2017-11-15 15:47 716 查看

一、之前在写折叠面板时都是使用的JQ的slideToggle，昨天对这一块代码进行重构，使用vue来进行开发

二、附上之前的代码段

for (var i = 0; i < ret.rows.length; i++) {

var liId = 'li' + i,

divId = 'div' + i;

var data = '应出勤:' + ret.rows[i].empNum + ', 实出勤:' + ret.rows[i].onworkNum + ', 请假:' + ret.rows[i].vacNum + ', 出差:' + ret.rows[i].otNum + ', 缺卡:' + ret.rows[i].nocardNum;

var li = document.createElement('li');

li.innerHTML = '<div class="cp-depart" id="' + liId + '"><div class="cp-depart-p">' + ret.rows[i].departName + ' 出勤率:' + (ret.rows[i].onworkNum / ret.rows[i].empNum * 100).toFixed(2) + '%</div></div>';

var kqdata = document.createElement('li');

kqdata.innerHTML = '<div class="cp-p" id="' + divId + '">' + data + '</div></br>';

a.appendChild(li);

a.appendChild(kqdata);

}

document.getElementById('li0').onclick = function() {

$('#div0').slideToggle();

}

三、使用vue重构时写的demo

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue组件实现折叠面板</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<script src="http://cdn.bootcss.com/vue/2.0.3/vue.js"></script>

</head>

<body>

<div id="app">

<div v-for="i in mainData">

<c1 :item="i">

<p>{{ i }}</p>

</c1>

</div>

</div>

<template id="c1">

<div>

<button type="button" @click="open=!open">{{ open ? 'hide' : 'show' }}</button>

<div v-show="open">

<slot></slot>

</div>

</div>

</template>

<script>

Vue.component('c1', {

template: '#c1',

data() {

return {

open: true

}

}

})

var vm = new Vue({

el: '#app',

data: {

mainData:[1,2,3,4]

}

})

</script>

</body>

</html>

四、效果图

之前上传图片都不显示，这里把上面的demo在网页里面打开即可，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航