写一个 js picker vue组件

好的，我可以为您提供一个 js picker vue 组件的代码示例：

<template>
<div class="picker">
<div class="picker-header">
<span class="picker-title">{{ title }}</span>
<span class="picker-cancel" @click="cancel">{{ cancelText }}</span>
<span class="picker-confirm" @click="confirm">{{ confirmText }}</span>
</div>
<div class="picker-body">
<div class="picker-column" v-for="(column, index) in columns" :key="index">
<ul class="picker-list">
<li
v-for="(item, itemIndex) in column.items"
:key="itemIndex"
:class="{ active: itemIndex === column.activeIndex }"
@click="selectItem(index, itemIndex)"
>
{{ item }}
</li>
</ul>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'Picker',
props: {
title: {
type: String,
default: '请选择'
},
cancelText: {
type: String,
default: '取消'
},
confirmText: {
type: String,
default: '确定'
},
columns: {
type: Array,
default: () => []
}
},
data() {
return {
activeIndexs: this.columns.map(() => 0)
}
},
methods: {
selectItem(columnIndex, itemIndex) {
this.activeIndexs.splice(columnIndex, 1, itemIndex)
},
cancel() {
this.$emit('cancel')
},
confirm() {
const selectedItems = this.activeIndexs.map((activeIndex, columnIndex) => {
return this.columns[columnIndex].items[activeIndex]
})
this.$emit('confirm', selectedItems)
}
}
}
</script>

<style scoped>
.picker {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.picker-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 44px;
padding: 0 16px;
background-color: #f5f5f5;
font-size: 16px;
color: #333;
}

.picker-title {
flex: 1;
text-align: center;
}

.picker-cancel,
.picker-confirm {
width: 60px;
text-align: center;
color: #007aff;
cursor: pointer;
}

.picker-body {
display: flex;
justify-content: space-around;
align-items: center;
height: 216px;
background-color: #fff;
}

.picker-column {
flex: 1;
height: 100%;
overflow: hidden;
}

.picker-list {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}

.picker-list li {
height: 36px;
line-height: 36px;
text-align: center;
color: #333;
font-size: 14px;
cursor: pointer;
}

.picker-list li.active {
color: #007aff;
}
</style>