feat: migrate SwipeCell component

2020-07-12 15:07:32 +08:00
parent ccf2c7da31
commit 8c4c51fea1
10 changed files with 1068 additions and 10 deletions
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <demo-section>
+      <demo-block :title="t('basicUsage')">
+        <van-swipe-cell>
+          <template #left>
+            <van-button square type="primary" :text="t('select')" />
+          </template>
+          <van-cell :border="false" :title="t('title')" :value="t('content')" />
+          <template #right>
+            <van-button square type="danger" :text="t('delete')" />
+            <van-button square type="primary" :text="t('collect')" />
+          </template>
+        </van-swipe-cell>
+      </demo-block>
+
+      <demo-block :title="t('customContent')">
+        <van-swipe-cell>
+          <van-card
+            num="2"
+            price="2.00"
+            :desc="t('desc')"
+            :title="t('cardTitle')"
+            :thumb="imageURL"
+          />
+          <template #right>
+            <van-button
+              square
+              type="danger"
+              class="delete-button"
+              :text="t('delete')"
+            />
+          </template>
+        </van-swipe-cell>
+      </demo-block>
+
+      <demo-block :title="t('beforeClose')">
+        <van-swipe-cell :before-close="beforeClose">
+          <template #left>
+            <van-button square type="primary" :text="t('select')" />
+          </template>
+          <van-cell :border="false" :title="t('title')" :value="t('content')" />
+          <template #right>
+            <van-button square type="danger" :text="t('delete')" />
+          </template>
+        </van-swipe-cell>
+      </demo-block>
+    </demo-section>
+  </div>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      select: '选择',
+      delete: '删除',
+      collect: '收藏',
+      title: '单元格',
+      confirm: '确定删除吗？',
+      cardTitle: '商品标题',
+      beforeClose: '异步关闭',
+      customContent: '自定义内容',
+    },
+    'en-US': {
+      select: 'Select',
+      delete: 'Delete',
+      collect: 'Collect',
+      title: 'Cell',
+      confirm: 'Are you sure to delete?',
+      cardTitle: 'Title',
+      beforeClose: 'Before Close',
+      customContent: 'Custom Content',
+    },
+  },
+
+  data() {
+    return {
+      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
+    };
+  },
+
+  methods: {
+    beforeClose({ position, instance }) {
+      switch (position) {
+        case 'left':
+        case 'cell':
+        case 'outside':
+          instance.close();
+          break;
+        case 'right':
+          this.$dialog
+            .confirm({
+              message: this.t('confirm'),
+            })
+            .then(() => {
+              instance.close();
+            });
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-swipe-cell {
+  user-select: none;
+
+  .van-card {
+    margin: 0;
+    background-color: @white;
+  }
+
+  .delete-button {
+    height: 100%;
+  }
+}
+</style>