first commit
This commit is contained in:
@jyuhsin
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<van-popup :round="true" :safe-area-inset-bottom="false" :close-on-click-overlay="ableClose" v-model="show">
|
||||
<div class="van-text-dialog__wrapper">
|
||||
<!-- 关闭图标 -->
|
||||
<van-icon v-if="ableClose" role="button" tabindex="0" name="cross" class="van-text-dialog__close-icon" @click="close"></van-icon>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="van-text-dialog__title">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</div>
|
||||
|
||||
<!-- 内容主体 -->
|
||||
<div class="van-text-dialog__body">
|
||||
<template v-if="$slots.body">
|
||||
<slot name="body"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-if="typeof body === 'string'" class="van-text-dialog__content">
|
||||
{{ body }}
|
||||
</div>
|
||||
<template v-else-if="Array.isArray(body)">
|
||||
<div v-for="(item, index) in body" :key="index" class="van-text-dialog__part">
|
||||
<div v-if="item.title" class="van-text-dialog__subtitle">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="van-text-dialog__content">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 底部线 & 遮罩 -->
|
||||
<div v-if="mask" class="van-text-dialog__line van-hairline--bottom">
|
||||
<div class="van-text-dialog__mask"></div>
|
||||
</div>
|
||||
|
||||
<!-- 复选框 -->
|
||||
<div v-if="checkboxLabel || $slots.checkboxLabel" class="van-text-dialog__checkbox">
|
||||
<van-checkbox plain :icon-size="16" :disabled="!ableCheck" v-model="proxyCheck">
|
||||
<slot name="checkbox-label">{{ checkboxLabel }}</slot>
|
||||
</van-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- 确认按钮 -->
|
||||
<van-button v-if="buttonText" type="primary" :disabled="!ableConfirm" block class="van-text-dialog__button" @click="confirm">
|
||||
{{ buttonText }}
|
||||
</van-button>
|
||||
|
||||
<!-- 默认插槽 -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "vantTextDialog",
|
||||
props: {
|
||||
show: Boolean,
|
||||
title: String,
|
||||
body: [Array, String],
|
||||
mask: Boolean,
|
||||
check: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkboxLabel: String,
|
||||
buttonText: String,
|
||||
ableClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
ableCheck: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
ableConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
proxyCheck: {
|
||||
get() {
|
||||
return this.check
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("toggle", val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit("close")
|
||||
},
|
||||
confirm() {
|
||||
this.$emit("confirm")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.van-text-dialog__wrapper {
|
||||
min-width: 300px;
|
||||
background: #fff;
|
||||
padding: 18px 20px 20px;
|
||||
}
|
||||
.van-text-dialog__close-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.van-text-dialog__title {
|
||||
margin: 0 14px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
.van-text-dialog__body {
|
||||
margin-top: 18px;
|
||||
position: relative;
|
||||
overflow-y: scroll;
|
||||
max-height: 350px;
|
||||
}
|
||||
.van-text-dialog__part {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.van-text-dialog__subtitle {
|
||||
margin-bottom: 4px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
}
|
||||
.van-text-dialog__content {
|
||||
margin-bottom: 16px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
.van-text-dialog__line {
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
.van-text-dialog__line::after {
|
||||
border-color: #e2e2e2;
|
||||
}
|
||||
.van-text-dialog__mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 58px;
|
||||
z-index: 999;
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 50%, #fff 100%);
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 50%, #fff 100%);
|
||||
}
|
||||
.van-text-dialog__checkbox {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.van-text-dialog__checkbox-label {
|
||||
margin-left: 8px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.van-text-dialog__button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<van-dropdown-item :options="yearOptions" @change="yearChange" v-model="year"></van-dropdown-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "year-van-dropdown-item",
|
||||
props: {
|
||||
num: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: new Date().getFullYear()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (val) {
|
||||
this.year = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
year: new Date().getFullYear()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
yearChange(val) {
|
||||
this.$emit("input", val)
|
||||
this.$emit("change", val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
for (let i = new Date().getFullYear() - this.num; i <= new Date().getFullYear(); i++) {
|
||||
this.yearOptions.unshift({ value: i, text: i + "年" })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user