写一个 js picker vue组件

好的，我可以为您提供一些关于编写 js picker vue 组件的建议。首先，您需要确定您的组件需要支持哪些功能，例如日期选择、时间选择、颜色选择等。然后，您可以使用 Vue.js 框架来编写您的组件，使用 Vue.js 可以使您的组件更易于维护和扩展。您可以使用一些现有的 js picker 库，例如 flatpickr 或者 Pikaday，来帮助您实现您的组件。最后，您需要将您的组件打包成一个可重用的 Vue 组件，以便其他开发人员可以轻松地使用它。希望这些建议能够帮助您编写出一个高质量的 js picker vue 组件。

相关问题

写一个 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>

写一个 js picker vue组件的代码

非常感谢您的提问，以下是一个简单的 js picker vue 组件的代码：

<template>
<div class="picker">
<input type="text" v-model="selectedValue" @click="showPicker" readonly>
<div class="picker-overlay" v-show="show">
<div class="picker-container">
<div class="picker-header">
<span class="picker-cancel" @click="hidePicker">取消</span>
<span class="picker-title">{{title}}</span>
<span class="picker-confirm" @click="confirmPicker">确定</span>
</div>
<div class="picker-body">
<ul class="picker-list">
<li v-for="(item, index) in data" :key="index" :class="{active: selectedIndex === index}" @click="selectItem(index)">
{{item}}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'Picker',
props: {
title: {
type: String,
default: '请选择'
},
data: {
type: Array,
default: () => []
},
value: {
type: String,
default: ''
}
},
data() {
return {
show: false,
selectedValue: this.value,
selectedIndex: -1
}
},
watch: {
value(val) {
this.selectedValue = val
}
},
methods: {
showPicker() {
this.show = true
},
hidePicker() {
this.show = false
},
selectItem(index) {
this.selectedIndex = index
},
confirmPicker() {
if (this.selectedIndex !== -1) {
this.selectedValue = this.data[this.selectedIndex]
this.$emit('input', this.selectedValue)
}
this.hidePicker()
}
}
}
</script>

<style scoped>
.picker {
position: relative;
display: inline-block;
}

.picker input {
width: 100%;
height: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}

.picker-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}

.picker-container {
width: 80%;
max-width: 500px;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
}

.picker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f5f5f5;
font-size: 16px;
font-weight: bold;
}

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

.picker-body {
max-height: 300px;
overflow-y: auto;
}

.picker-list {
list-style: none;
margin: 0;
padding: 0;
}

.picker-list li {
height: 40px;
line-height: 40px;
padding: 0 10px;
cursor: pointer;
}

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