[improvement] rename packages dir to src (#3659)

2019-06-27 11:25:57 +08:00
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
@@ -0,0 +1,170 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-picker
+        :columns="$t('column1')"
+        @change="onChange1"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('defaultIndex')">
+      <van-picker
+        :columns="$t('column1')"
+        :default-index="2"
+        @change="onChange1"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-picker
+        show-toolbar
+        :title="$t('title')"
+        :columns="$t('column1')"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('withPopup')">
+      <van-field
+        readonly
+        clickable
+        :label="$t('city')"
+        :value="fieldValue"
+        :placeholder="$t('chooseCity')"
+        @click="onClickField"
+      />
+      <van-popup
+        v-model="showPicker"
+        position="bottom"
+      >
+        <van-picker
+          show-toolbar
+          :columns="$t('column1')"
+          @cancel="onCancel2"
+          @confirm="onConfirm2"
+        />
+      </van-popup>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-picker :columns="$t('column2')" />
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-picker
+        :columns="columns"
+        @change="onChange2"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('loadingStatus')">
+      <van-picker
+        loading
+        :columns="columns"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      city: '城市',
+      title2: '禁用选项',
+      title3: '展示顶部栏',
+      title4: '多列联动',
+      defaultIndex: '默认选中项',
+      withPopup: '搭配弹出层使用',
+      chooseCity: '选择城市',
+      column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      column2: [
+        { text: '杭州', disabled: true },
+        { text: '宁波' },
+        { text: '温州' }
+      ],
+      column3: {
+        浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+        福建: ['福州', '厦门', '莆田', '三明', '泉州']
+      },
+      toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`
+    },
+    'en-US': {
+      city: 'City',
+      title2: 'Disable Option',
+      title3: 'Show Toolbar',
+      title4: 'Multi Columns',
+      defaultIndex: 'Default Index',
+      withPopup: 'With Popup',
+      chooseCity: 'Choose City',
+      column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+      column2: [
+        { text: 'Delaware', disabled: true },
+        { text: 'Florida' },
+        { text: 'Georqia' }
+      ],
+      column3: {
+        Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+        Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas']
+      },
+      toastContent: (value, index) => `Value: ${value}, Index：${index}`
+    }
+  },
+
+  data() {
+    return {
+      showPicker: false,
+      fieldValue: ''
+    };
+  },
+
+  computed: {
+    columns() {
+      const column = this.$t('column3');
+      return [
+        {
+          values: Object.keys(column),
+          className: 'column1'
+        },
+        {
+          values: column[Object.keys(column)[0]],
+          className: 'column2',
+          defaultIndex: 2
+        }
+      ];
+    }
+  },
+
+  methods: {
+    onChange1(picker, value, index) {
+      this.$toast(this.$t('toastContent', value, index));
+    },
+
+    onChange2(picker, values) {
+      picker.setColumnValues(1, this.$t('column3')[values[0]]);
+    },
+
+    onConfirm(value, index) {
+      this.$toast(this.$t('toastContent', value, index));
+    },
+
+    onCancel() {
+      this.$toast(this.$t('cancel'));
+    },
+
+    onClickField() {
+      this.showPicker = true;
+    },
+
+    onConfirm2(value) {
+      this.showPicker = false;
+      this.fieldValue = value;
+    },
+
+    onCancel2() {
+      this.showPicker = false;
+    }
+  }
+};
+</script>