fix(ui/picker): 设计了基本的样式和基本dom结构 完成了基本的滚动

affects: @varlet/ui

packages/varlet-ui/src/picker/Picker.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="var-picker" v-bind="$attrs">
+    <div class="var-picker__columns" :style="{ height: `${optionCount * optionHeight}px` }">
+      <div
+        class="var-picker__column"
+        v-for="c in scrollColumns"
+        :key="c"
+        @touchstart="handleTouchstart($event, c)"
+        @touchmove="handleTouchmove($event, c)"
+        @touchend="handleTouchend($event, c)"
+      >
+        <div class="var-picker__scroller" :style="{ transform: `translateY(${c.translate}px)` }">
+          <div class="var-picker__option" :style="{ height: `${optionHeight}px` }" v-for="t in c.column.texts" :key="t">
+            {{ t }}
+          </div>
+        </div>
+      </div>
+      <div
+        class="var-picker__picked"
+        :style="{
+          top: `${center}px`,
+          height: `${optionHeight}px`,
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, Ref, computed, ComputedRef } from 'vue'
+import { NormalColumn, props } from './props'
+
+interface ScrollColumn {
+  touching: boolean
+  prevY: number | undefined
+  column: NormalColumn
+  translate: number
+}
+
+export default defineComponent({
+  name: 'VarPicker',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const scrollColumns: Ref<ScrollColumn[]> = ref([])
+    const center: ComputedRef<number> = computed(
+      () => (props.optionCount * props.optionHeight) / 2 - props.optionCount / 2
+    )
+
+    const handleTouchstart = (event: TouchEvent, scrollColumn: ScrollColumn) => {
+      scrollColumn.touching = true
+    }
+
+    const handleTouchmove = (event: TouchEvent, scrollColumn: ScrollColumn) => {
+      if (!scrollColumn.touching) {
+        return
+      }
+
+      const { clientY } = event.touches[0]
+      const moveY = scrollColumn.prevY !== undefined ? clientY - scrollColumn.prevY : 0
+      scrollColumn.prevY = clientY
+
+      scrollColumn.translate += moveY
+    }
+
+    const handleTouchend = () => {
+      scrollColumns.value.forEach((scrollColumn: ScrollColumn) => {
+        scrollColumn.touching = false
+        scrollColumn.prevY = undefined
+      })
+    }
+
+    watch(
+      () => props.columns,
+      (newValue: any) => {
+        scrollColumns.value = newValue.map((column: NormalColumn) => {
+          return {
+            prevY: undefined,
+            touching: false,
+            translate: center.value,
+            column,
+          }
+        })
+      },
+      { immediate: true }
+    )
+
+    return {
+      scrollColumns,
+      center,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './picker';
+</style>

packages/varlet-ui/src/picker/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const Picker = require('../../../cjs/picker').default
+const { render } = require('@testing-library/vue')
+
+test('test picker', async () => {
+  const wrapper = render(Picker)
+  console.log(wrapper)
+})

packages/varlet-ui/src/picker/example/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="example">
+    <var-picker :columns="columns" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import Picker from '..'
+
+export default defineComponent({
+  name: 'PickerExample',
+  components: {
+    [Picker.name]: Picker,
+  },
+  setup() {
+    return {
+      columns: ref([
+        {
+          texts: ['1', '2', '3'],
+        },
+      ]),
+    }
+  },
+})
+</script>
+
+<style scoped>
+.example {
+  background: #ddd;
+  width: 100%;
+  min-height: 80vh;
+  padding-top: 50px;
+}
+</style>

packages/varlet-ui/src/picker/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Picker from './Picker.vue'
+
+Picker.install = function (app: App) {
+  app.component(Picker.name, Picker)
+}
+
+export default Picker

packages/varlet-ui/src/picker/picker.less

@@ -0,0 +1,38 @@
+@picker-background: #fff;
+@picker-picked-border: 1px solid #ddd;
+
+.var-picker {
+  width: 100%;
+  background: @picker-background;
+
+  &__columns {
+    position: relative;
+    display: flex;
+    width: 100%;
+  }
+
+  &__column {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  &__scroller {
+    width: 100%;
+  }
+
+  &__option {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__picked {
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    left: 0;
+    border-top: @picker-picked-border;
+    border-bottom: @picker-picked-border;
+  }
+}

packages/varlet-ui/src/picker/props.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue'
+
+export interface NormalColumn {
+  texts: any[]
+  initialIndex?: number
+}
+
+export interface CascadeColumn {
+  [textKey: string]: any
+  children: CascadeColumn[]
+}
+
+export const props = {
+  columns: {
+    type: Array as PropType<NormalColumn[] | CascadeColumn[]>,
+    default: [],
+  },
+  title: {
+    type: String,
+  },
+  textKey: {
+    type: String,
+    default: 'text',
+  },
+  toolbar: {
+    type: Boolean,
+    default: true,
+  },
+  optionHeight: {
+    type: Number,
+    default: 44,
+  },
+  optionCount: {
+    type: Number,
+    default: 6,
+  },
+  confirmButtonText: {
+    type: String,
+    default: '确认',
+  },
+  cancelButtonText: {
+    type: String,
+    default: '取消',
+  },
+}