code refactor

2026-05-15 15:37:33 +08:00 · 2020-12-19 01:49:15 +08:00
parent a59baf2f9f
commit 543da19e6d
3 changed files with 76 additions and 20 deletions
@@ -0,0 +1,68 @@
+<template>
+    <f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-toolbar>
+            <div class="left"></div>
+            <div class="right">
+                <f7-link sheet-close :text="$t('Done')"></f7-link>
+            </div>
+        </f7-toolbar>
+        <f7-page-content>
+            <f7-list no-hairlines class="no-margin-top no-margin-bottom">
+                <f7-list-item link="#" no-chevron
+                              v-for="(item, index) in items"
+                              :key="valueType === 'index' ? index : (keyField ? item[keyField] : item)"
+                              :value="valueType === 'index' ? index : (valueField ? item[valueField] : item)"
+                              :title="titleField ? item[titleField] : item"
+                              @click="onItemClicked(item, index)">
+                    <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSelected(item, index)"></f7-icon>
+                </f7-list-item>
+            </f7-list>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'valueType', // item or index
+        'keyField', // for value type = item
+        'valueField',
+        'titleField',
+        'items',
+        'show'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            currentValue: self.value
+        }
+    },
+    methods: {
+        onItemClicked(item, index) {
+            if (this.valueType === 'index') {
+                this.currentValue = index;
+            } else {
+                this.currentValue = item;
+            }
+
+            this.$emit('input', this.currentValue);
+            this.$emit('update:show', false);
+        },
+        onSheetOpen() {
+            this.currentValue = this.value;
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        isSelected(item, index) {
+            if (this.valueType === 'index') {
+                return this.currentValue === index;
+            } else {
+                return this.currentValue === item;
+            }
+        }
+    }
+}
+</script>