4月9日记录
vue-datepicker（日期选择器）
利用css做出一个三角形
```css
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: red;
```
css属性outline
```css
.div{
outline: none;//取消聚焦边框
}
```
user-select：none；取消默认选中
```css
div{
user-select: none;//取消默认选中
}
```
弹性盒属性：justify-content：space-around
```css
div{
display: flex;
justify-content: space-around;
}
```
cursor：pointer；
```css
div{
cursor：pointer；
}
```
picker-panel 的显示和隐藏
- 创建一个控制变量
data(){
return{
showPanel:false;
}
}
- 配合v-if或者v-show进行显示隐藏控制连接
<div class="xxx" v-if="showPanel">
- 创建函数changePanel(),显示隐藏控制切换
methods:{
changePanel(flag){
this.showPanel = flag;
}
}
- 监听整个文档的点击事件，判断是否聚焦在整个插件上,插件该指令v-click-outside
directives:{
'click-outside':{
bind(el,binding,vnode){
//vnode 获取绑定元素的虚拟dom
//el 获取绑定元素区域
const vm = vnode.context;
document.onclick = function(e){
const dom = e.target;
//e.target 目标区域
const isElSon = el.contains(dom);
if(isElSon&&!vm.showPanel){
//加入vm.showPanel是为了优化性能
vm.changePanel(true);
}else if(!isElSon&&vm.showPanel){
vm.changePanel(false);
}
}
}
}
- 调整插件内容盒区域
.date-picker{
display:inline-block;
}//插件主体
.picker-panel{
position:absolute;
}//插件负载，脱离主体文档
focus和blur事件
focus聚焦事件
blur失焦事件
关联组件主体和组件负载信息
- 创建一个控制变量
data(){
return{
showDate:{
year:0,
month:0,
day:0,
}
}
}
- 创建一个功能函数getShowDate来进行时间获取
methods:{
getShowDate(){
const year = this.date.getFullYear();
const month = this.date.getMonth();
const day = this.date.getDate();
this.showDate={
year,
month,
day,
}
}
}
- 在生命周期函数中运行函数getShowDate()
created(){
this.getShowDate();
}
日历日期显示
- 创建计算属性，动态控制变量
showDay(){
const{year,month} =this.showDate;//获取当前年月
const firstDay = new Date(year,month,1)//获取当前年月的第一天
const week = firstDay.getDay();//获取该月第一天的星期数
console.log(week)
const starDay = firstDay-week*24*60*60*1000;//确定第一天所在的位置
var arr = [];//最终输出数组，进行循环遍历
for(let i=0;i<42;i++){
let tarDay =new Date(starDay + i * 24 *60*60*1000)//24*60*60*1000代表一天的毫秒数
arr.push(tarDay);//修改目标数组
}
return arr;//返回数组
},
- 利用date.getDate()和date.getTime()方法处理绑定问题
<div
v-for="date in showDay"
:key="date.getTime()"//获取时间戳
>{{date.getDate()}}//获取
</div>
- 处理日期的特殊样式，创建一个方法函数isCur()
isCur(date){
const chooseDate = new Date(this.chooseDate);
const {year:yearNow,month:monthNow,day:dayNow}=this.getYearMonthDay(new Date());//获取目前的时期数据
const {year:yearChoose,month:monthChoose,day:dayChoose}=this.getYearMonthDay(chooseDate);//获取日期选择后的时期数据
const{year:yearShow,month:monthShow}=this.showDate;//拉取当前月份的时期数据
const{year,month,day}=this.getYearMonthDay(date);//获取所有的时期数据,传入date
return{
month:year===yearShow&&month===monthShow,//判断该日是否是当前月份
select:year===yearChoose&&month===monthChoose&&day===dayChoose,//判断是否是选择的日期
today:year===yearNow&&month===monthNow&&day===dayNow,//判断是否是当前日期
}
},
- 并且在目标元素中进行class绑定
<div
v-for="date in showDay"
:key="date.getTime()"
:class="{
'other-month':!isCur(date).month,//绑定class
'is-select':isCur(date).select,//绑定class
'is-today':isCur(date).today,//绑定class
}"
>{{date.getDate()}}</div>
日期选择
- 创建监听事件
<div @cilck="onChooseDate(date)"></div>
- 创建方法函数onChooseDate()
onChooseDate(date){
this.$emit('choose-date',date);//触发点击事件后在父组件中触发自定义事件，并将date传入
},
- 在父组件添加自定义监听事件choose-date
<date-picker :date="date" @choose-date="chooseDate"/>
//添加监听事件并触发chooseDate函数
- 创建方法函数chooseDate()
methods:{
chooseDate(date){
this.date = date;//将子组件的点击事件的date数据传入父组件进行显示date的改变
}
}
更改月份
- 创建点击事件，并传入状态prev或者next
<span class="picker-btn iconfont icon-prev-month" @click="onChooseMonth('prev')"/>
<span class="picker-btn iconfont icon-next-month" @click="onChooseMonth('next')"/>
- 创建方法函数进行月份的切换
两种方法
–1--
onChooseMonth(type){
const monthMove = type==='prev'?-1:1;//根据type判断月份的运动方向
const monthMin = 0;//规定月份运动的下限
const monthMax = 11;//规定月份运动的上限
let{year,month}= this.showDate;//获取展示的时期数据
month+=monthMove;//将展示的月份数据进行替换
if(month<monthMin){
//设置当月份运动到边界的情况
month=monthMax;
year--;
}else if(month>monthMax){
month=monthMin;
year++;
}
this.showDate.month=month;//将新的月份数据返回给展示的时期数据
this.showDate.year=year;//将新的年份数据返回给展示的时期数据
}
–2--
onChooseMonth(type){
const{year,month,day}=this.showDate;//获取展示的时期数据
const monthMove = type==='prev'?-1:1;//根据type判断月份的运动方向
const newDate = new Date(year,month,day);//新构造一个新展示的时期数据
newDate.setMonth(month+monthMove);//利用Date构造函数中的方法setMonth()来设置月份
const{year:yearNew,month:monthNew}=this.getYearMonthDay(newDate);//用新的时期数据获取新的年月数据
this.showDate.month=monthNew;//将新的月份数据进行覆盖
this.showDate.year = yearNew;//将新的年份数据进行覆盖
}
更改年份
- 创建监听事件
<span class="picker-btn iconfont icon-prev-year" @click="onChooseYear('prev')"/>
<span class="picker-btn iconfont icon-next-year" @click="onChooseYear('next')"/>
- 创建方法函数
onChooseYear(type){
const yearMove = type==='prev'?-1:1;//根据type判断年份运动方向
this.showDate.year+=yearMove;//直接将展示时期数据进行改变
},
v-model设置
- model特性prop，event
modle:{
prop:'date',
event:'choose-date',
}
- 父组件改变
<date-picker v-model="date"/>
<!-- :date="date" @choose-date="chooseDate" -->
// methods:{
// chooseDate(date){
// this.date = date;
// }
// }
vertical-align:middle
vue-tree
数据注册
- 子组件注册数据类型等参数
props:{
data:{
type:Array,
required:true,//数据必须传输
}
},
- 父组件添加数据和绑定数据
<base-tree :data="data"/>
data() {
return {
data: [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1"
}
]
}
]
},
defaultProps
- 数据预处理
props:{
data: {
type: Array,//规定数据类型
required: true//是否必要
},
defaultProps: {
type: Object,//预处理键值对
default: () => ({//默认键值对
label: "label",
children: "children"
})
}
}
<i
v-if="node[defaultProps.children]"/使用预处理键值对/
class="iconfont" :class="{
'icon-down':!showChlidren[index],
'icon-right':showChlidren[index],
}"
/>
$set处理数组变量
handleClick(index) {
// this.showChlidren = !this.showChlidren;
const flag = !this.showChlidren[index];//设置切换变量
this.$set(this.showChlidren, index, flag);//将新变量设置到对应位置
//如果使用变异方法splice，数组的原始长度为0
}
实例
可以保存实例对象状态
不足总结
- Date构造函数不熟悉
- 部分css遗忘[outline,user-select,flex,cursor,vertical-align]
Date(p733)
Date构造函数
- new Date() 根据当前日期和时间创建一个Date对象。
传入数字参数时，数字当作日期的内部数字表示形式，单位为ms，值等于对应的getTime()方法的返回值。
传入一个字符串参数时，当作日期的字符串表示形式，格式为Date.parse()方法可接受的格式。
其他情况下，应该传入2~7个数字参数，用于指定日期及时间的各个字段。除了年月两个参数必选，其余参数都可选。
注意：使用的是本地时间指定的，而不是国际协调时间(UTC),可以利用Date.UTC()
细节：Date()也可以不带new操作符，Date()将忽略掉所有传入的参数，并返回当前日期和时间的一个字符串表示 - new Date(milliseconds) 需要的时间与1970年1月1日午夜(UTC)之间的毫秒数。
例如，传入5000将创建一个表示1970-01-01午夜之后5秒的日期。 - new Date(datestring) 一个以字符串形式定义日期(以及时间，可选)的参数。
格式为Date.parse()可接受的格式 - new Date(year,month,day,hours,minutes,seconds,ms)
{
注意，年份和月份的数字必选，其余参数都可选
year:年份，4位数字；如果是2位数字，则自动补上19xx，来兼容早期的JS，
month:月份，[0（1月）~11（12月）]，
day:月份中的第几天，[1~31],注意，只有这个参数使用1作为最小值，其他参数使用0作为最小值，
hours:小时，[0(午夜)~23(晚上11点)],
minutes:分钟，[0~59],
seconds:秒数，[0~59],
ms:毫秒数，[0~999]
}
方法
注意，Date对象没有可以直接读/写的属性，所有对日期及时间值的访问都需要通过方法。
细节，Date的方法只能在Date对象上使用，否则会抛出TypeError异常
在方法中添加”[UTC]“则表示也可以对世界时间进行操作
get类型方法
get[UTC]Date():返回Date对象的月份中的日期值，几号
get[UTC]Day():返回Date对象的一周中的日期值，星期几
get[UTC]FullYear():返回日期的年份，完整的4位数字的格式，xxxx年
get[UTC]Hours():返回Date对象的小时值，几点
get[UTC]Milliseconds():返回Date对象的毫秒值，几毫秒
get[UTC]Minutes():返回Date对象的分钟值，几分
get[UTC]Month():返回Date对象的月份值，几月
get[UTC]Seconds():返回Date对象的秒数值，几秒
getTime():返回Date对象的内部毫秒表示形式，注意，这个值与时区无关，所以没有getUTCTime()方法
getTimezoneOffset():返回当前日期的本地表示与UTC表示之间相差的分钟数，注意，返回值依赖于指定日期的夏令时是否有效
getYear():返回Date对象的年份值。这个方法已经过时，建议使用getFullYear()方法
set类型方法
set[UTC]Date():设置Date对象的月份中的日期值，几号
set[UTC]FullYear():设置日期的年份（月 日），完整的4位数字的格式，xxxx年（x月x日）
set[UTC]Hours():设置Date对象的小时值（分钟 秒 毫秒），几点（x分x秒x毫秒）
set[UTC]Milliseconds():设置Date对象的毫秒值，几毫秒
set[UTC]Minutes():设置Date对象的分钟值（秒 毫秒），几分（x秒x毫秒）
set[UTC]Month():设置Date对象的月份值（日），几月（x日）
set[UTC]Seconds():设置Date对象的秒数值（毫秒），几秒（x毫秒）
to类型方法
toDateString():返回一个表示当前日期的日期部分的字符串，[本地时区]
toGMTString():使用GMT时区，将一个Date转换为一个字符串。已弃用[GMT时区]
toISOString():将一个Date转为字符串，使用ISO-8601标准来组合日期/时间格式和UTC[ISO时区]
toJSON():将一个 Date对象JSON序列化
toLocaleDateString():返回一个当前日期的日期部分的字符串[本地时区，本地时间格式]
toLocaleString():将一个Date转换为字符串[本地时区，本地时间格式]
toLocalTimeString():返回一个表示当前日期的时间部分的字符串[本地时区，本地时间格式]
toString():使用本地时区将一个Date转换为字符串
toTimeString():返回一个表示指定日期的时间部分的字符串[本地时区]
toUTCString():将一个Date转换为字符串，[UTC格式]
value方法
valueOf():将一个Date转换为对应的内部毫秒格式
静态方法
Date.now():返回当前时间，自纪元开始后的毫秒数
Date.parse():解析一个日期及时间的字符串表示，返回该日期的内部毫秒表示
Date.UTC():返回指定的UTC日期及时间的毫秒表示
扫一扫
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
