报名工具小程序初始代码
This commit is contained in:
liupopo
186
components/item-drop/item-drop.vue
Normal file
186
components/item-drop/item-drop.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view style="display: flex;flex-direction: column;box-sizing: border-box;">
|
||||
|
||||
<view v-if="border == 1 || border ==3" class="border"></view>
|
||||
|
||||
<view style="width: 100%;height: 30rpx;"></view>
|
||||
<view style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;margin-right: 15rpx;">
|
||||
<text style="font-size: 26rpx;color: #101010;" :class="{ 'enabled': !enabled }">{{title}}</text>
|
||||
<image v-if="required" src="../../static/asterisk.png"
|
||||
style="width: 14rpx;height: 16rpx;margin-left: 12rpx;flex-shrink: 0;"></image>
|
||||
</view>
|
||||
<view style="width: 100%;height: 30rpx;"></view>
|
||||
<view style="margin-left: 16rpx;margin-right: 15rpx;" :class="{ 'enabled': !enabled }">
|
||||
|
||||
<!--自定义类型的选择器-->
|
||||
<!--自定义数据 需提供数据源 以及 取值key-->
|
||||
<picker v-if="type==0" :disabled="!enabled" :range-key="dataDetailKey" :range="data" @change="custom">
|
||||
<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
|
||||
<view v-if="select == undefined || select == null || select === ''"
|
||||
style="font-size: 28rpx;color: #BCBCBC;">{{hint}}</view>
|
||||
<view v-if="select != undefined && select != null || select != ''"
|
||||
style="font-size: 28rpx;color: #2E2D2D;">{{select}}</view>
|
||||
<view style="flex: 1;"></view>
|
||||
<image src="../../static/drop.png"
|
||||
style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
|
||||
</image>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<!--内置选择器 支持 男女 以及 是否-->
|
||||
<picker v-if="type==1||type==2" :disabled="!enabled" range-key="detail" :range="type==1?sex:yes"
|
||||
@change="preset">
|
||||
<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
|
||||
<view v-if="select == undefined || select == null || select === ''"
|
||||
style="font-size: 28rpx;color: #BCBCBC;">{{hint}}</view>
|
||||
<view v-if="select != undefined && select != null || select != ''"
|
||||
style="font-size: 28rpx;color: #2E2D2D;">{{select}}</view>
|
||||
<view style="flex: 1;"></view>
|
||||
<image src="../../static/drop.png"
|
||||
style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
|
||||
</image>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<!--用户自行实现 选择的方式-->
|
||||
<view v-if="type!=0&&type!=1&&type!=2"
|
||||
style="display: flex;flex-direction: row;align-items: center;width: 100%;" @click="impl">
|
||||
<view v-if="select == undefined || select == null || select === ''"
|
||||
style="font-size: 28rpx;color: #BCBCBC;">{{hint}}</view>
|
||||
<view v-if="select != undefined && select != null || select != ''"
|
||||
style="font-size: 28rpx;color: #2E2D2D;">{{select}}</view>
|
||||
<view style="flex: 1;"></view>
|
||||
<image src="../../static/drop.png"
|
||||
style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view style="width: 100%;height: 25rpx;"></view>
|
||||
|
||||
<view v-if="border == 2 || border ==3" class="border"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "item-drop",
|
||||
props: {
|
||||
// 是否必填，即是否显示星号
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 提示信息
|
||||
hint: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 显示的内容
|
||||
content: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 分割线
|
||||
// 0 无上线分割线
|
||||
// 1 只有上分割线
|
||||
// 2 只有下分割线
|
||||
// 3 上下都有分割线
|
||||
border: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
// 是否可使用
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 下拉类型
|
||||
// 0自定义数据
|
||||
// 1男女
|
||||
// 2是否
|
||||
// 3自己实现
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 弹出数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 弹出数据选择取值key
|
||||
dataDetailKey: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.select = this.content
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sex: [{
|
||||
"detail": "男",
|
||||
"value": "0001"
|
||||
},
|
||||
{
|
||||
"detail": "女",
|
||||
"value": "0002"
|
||||
}
|
||||
],
|
||||
yes: [{
|
||||
"detail": "是",
|
||||
"value": "0001"
|
||||
},
|
||||
{
|
||||
"detail": "否",
|
||||
"value": "0002"
|
||||
}
|
||||
],
|
||||
select: "",
|
||||
selector: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
custom(e) {
|
||||
let index = e.detail.value
|
||||
// 选中的
|
||||
this.selector = this.data[index]
|
||||
// 选择的值
|
||||
this.select = this.selector[this.dataDetailKey]
|
||||
console.log("选择+")
|
||||
console.log(this.selector)
|
||||
},
|
||||
preset(e) {
|
||||
let index = e.detail.value
|
||||
// 选中的
|
||||
this.selector = this.type == 1 ? this.sex[index] : this.yes[index]
|
||||
// 选择的值
|
||||
console.log("选择+")
|
||||
console.log(this.selector)
|
||||
},
|
||||
impl() {
|
||||
if (this.enabled)
|
||||
// 对方提供监听
|
||||
this.$emit("select")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.border {
|
||||
height: 1rpx;
|
||||
background-color: #DFDFDF;
|
||||
}
|
||||
|
||||
.enabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user