增加cell swipe组件 (#39)

* add cell swipe

* cell swipe

* bugfix

* test

* style
This commit is contained in:
tsxuehu
2017-06-15 19:13:19 +08:00
committed by 张敏
parent cfe9ebaf86
commit 857da3a5ee
12 changed files with 495 additions and 0 deletions
+39
View File
@@ -0,0 +1,39 @@
<template><section class="demo-cell"><h1 class="demo-title">Cell Swipe 滑动单元格</h1><example-block title="基础用法">
<van-cell-swipe :right-width="65" :left-width="65">
<van-cell-group>
<van-cell title="单元格1" value="单元格1内容"></van-cell>
</van-cell-group>
<span slot="right" class="swipe-delete-btn">
删除
</span>
<span slot="left" class="swipe-check-btn">
选择
</span>
</van-cell-swipe>
</example-block></section></template>
<style>
.swipe-delete-btn {
background-color: #FF4444;
color: #FFFFFF;
font-size: 16px;
width: 65px;
height: 44px;
display: inline-block;
text-align: center;
line-height: 44px;
}
.swipe-check-btn {
background-color: #84c483;
color: #FFFFFF;
font-size: 16px;
width: 65px;
height: 44px;
display: inline-block;
text-align: center;
line-height: 44px;
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
+3
View File
@@ -3,6 +3,9 @@
</example-block><example-block title="基础用法">
<van-search placeholder="搜索商品" type="showcase"></van-search>
</example-block><example-block title="监听对应事件">
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>