208 lines
5.9 KiB
Vue
208 lines
5.9 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-calendar组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">日历选择器</view>
|
||
<view class="content">
|
||
显示日历，选择某个日期<br />
|
||
可定制周框和日框显示效果。<br />
|
||
原生开发，无依赖。<br />
|
||
</view>
|
||
</view>
|
||
<form @submit="submitlog">
|
||
<view class="tip">默认效果:</view>
|
||
<ciy-calendar name="ciy1" v-model="formvalue" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)"></ciy-calendar>
|
||
|
||
<view class="tip">简单定制:</view>
|
||
<view style="margin: 0 2em;background:linear-gradient(45deg,var(--man7),var(--man4))">
|
||
<ciy-calendar name="ciy2" weekmonday clearbtn hasmore bordercolor="#ff0000" selecttextcolor="#ff0000" selectbg="linear-gradient(335deg, #8fffac, #32bcf1);" :value="formvalue" mindate="2024-6-10" :maxdate="maxdate" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)"></ciy-calendar>
|
||
</view>
|
||
<view class="tip">
|
||
多语言:
|
||
<text v-for="(item,index) in locales" class="lang" :class="{selected:locale == item.id}" @tap="setlocale(item.id)">{{item.name}}</text>
|
||
</view>
|
||
<view class="tip">选择月份:</view>
|
||
<view>
|
||
<ciy-calendar name="ciy3" selectmonth weekmonday clearbtn hasmore :value="formvalue" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)"></ciy-calendar>
|
||
</view>
|
||
|
||
<view class="tip">Slot定制:</view>
|
||
<view style="margin: 0 0.5em;background:#ffffff;border-radius: 0.5em;border:1px solid #dddddd;box-shadow: 2px 2px 5px #cccccc;">
|
||
<ciy-calendar name="ciy4" height="29em" :value="formvalue" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)">
|
||
<template v-slot:header="{itm}">
|
||
<view class="week">周{{itm.week}}</view>
|
||
</template>
|
||
<template v-slot:data="{itm}">
|
||
<view class="day" :class="{qdday:qd(itm),qdsel:itm.select}">{{itm.day}}</view>
|
||
</template>
|
||
</ciy-calendar>
|
||
</view>
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
<button class="btn" @tap="formvalue=1723456700">改变值</button>
|
||
</view>
|
||
|
||
<view class="ciy-card formcard" v-if="formdata">
|
||
<view class="content">
|
||
<view v-html="tobr(formdata, true)" class="formdata"></view>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">name,value,v-model</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">initevent</view>
|
||
<view class="tip">
|
||
是否产生初始事件。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">hasmore</view>
|
||
<view class="tip">
|
||
是否form携带更多格式的数据。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">bordercolor</view>
|
||
<view class="tip">
|
||
选中日期边框和周列分隔线颜色。<br />
|
||
默认 var(--bg6)
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">selecttextcolor</view>
|
||
<view class="tip">
|
||
选中日期、选择年、选择月的文字色。<br />
|
||
默认 var(--man5)
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">selectbg</view>
|
||
<view class="tip">
|
||
选中日期背景色。<br />
|
||
默认 var(--bg1)
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">height</view>
|
||
<view class="tip">
|
||
组件高度。<br />
|
||
默认 23em
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">selectmonth</view>
|
||
<view class="tip">
|
||
选择月份模式。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">weekmonday</view>
|
||
<view class="tip">
|
||
是否周一在第一列。<br />
|
||
默认 false 周日在第一列
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">mindate,maxdate</view>
|
||
<view class="tip">
|
||
可选日期范围，如果不设则不限制。<br />
|
||
数据格式: 2020-12-12、1607702400
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">clearbtn</view>
|
||
<view class="tip">
|
||
是否显示不选日期按钮。点击则清空日期<br />
|
||
默认 false 不显示
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change, update:modelValue</view>
|
||
<view class="tip">
|
||
数值变更事件<br />
|
||
from: init,click,today,nodate
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@viewchange</view>
|
||
<view class="tip">
|
||
数值变更事件<br />
|
||
from: year,month
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
|
||
.week {
|
||
text-align: center;
|
||
line-height: 2em;
|
||
background: linear-gradient(0deg, #ffffff, #d3ebf3);
|
||
border-right: 1px solid #ffffff;
|
||
}
|
||
|
||
.day {
|
||
line-height: 4em;
|
||
}
|
||
|
||
.qdday {
|
||
background: linear-gradient(45deg, var(--man4), var(--man7));
|
||
color: var(--bg1);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.qdday::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1.8em;
|
||
right: 0;
|
||
background-color: var(--bg3);
|
||
width: 2em;
|
||
height: 2em;
|
||
border: 1px solid var(--man5);
|
||
transform: rotate(45deg);
|
||
transform-origin: right bottom;
|
||
}
|
||
|
||
.qdsel {
|
||
color: var(--dag6);
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
formvalue: 0,
|
||
maxdate: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.maxdate = this.tostamp() + 86400 * 7;
|
||
},
|
||
methods: {
|
||
qd(e) {
|
||
if (e.day == '')
|
||
return false;
|
||
return Math.random() > 0.7;
|
||
}
|
||
}
|
||
}
|
||
</script> |