vue组件与方法知识点

知识一:写法

“:” 是指令 “v-bind:”的缩写,“@”是指令“v-on:”的缩写;“.”是修饰符。

修饰符
修饰符 (Modifiers) 是以半⾓句号 . 指明的特殊后缀,⽤于指出⼀个指令应该以特殊⽅式绑定。例如,.prevent 修饰符告诉 v-on 指令对于
触发的事件调⽤ event.preventDefault():

<form v-on:submit.prevent="onSubmit">...</form>


知识二:组件传参

element-ui-admin中有个日期组件,现在要外面能控制这个日期的值,还要在用户改变日期时捕获到值的变化。

1.页面初始时使用组件,并向组件传参

a.定义在ComDatePicker.vue中

<el-date-picker
        v-if='timeShow'
        :append-to-body="false"
        :class="pickerTextColor"
        v-model="pickerValue"
        :value-format="dateym"
        @change="selectTimeChange"
        :type="timeType"
        unlink-panels
        range-separator="至"
        placeholder="选择日期"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @blur="dateControlBlur"
        :picker-options="pickerOptions"
></el-date-picker>

可以看到v-model是pickerValue,还有 @change="selectTimeChange"后面要用。

js

export default {
    props:{
        timeType:{
            default : 'date',
            type : String
        },
        pickerValue:{
            default: '',
            type: String
        }
    },
    data() {
        return {
            timeShow: true,
            //pickerValue: '',
            //pickerValue: '2013-01-01 至 2022-01-01',
            pickerValue: this.pickerValue,
            allTime: ['', '', '', []],
            dateym: "yyyy-MM-dd",
            //timeType: "date", //时间控件改变
            //timeType:"daterange",
            timeType: this.timeType,
            pickerOptions: {
                shortcuts: [{
                    text: '年',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "year"
                        this.dateym = "yyyy";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[0];
                    }
                }, {
                    text: '月',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "month"
                        this.dateym = "yyyy-MM";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[1];
                    }
                }, {
                    text: '日',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "date";
                        this.dateym = "yyyy-MM-dd";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[2];
                    }
                }, {
                    text: '时间段',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "daterange"
                        this.dateym = "yyyy-MM-dd";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[3];
                    }
                }
             ]
            }
        }
    },
    methods: {
        // 选中切换时间
        selectTimeChange() {
            this.$emit("pickerValue", this.pickerValue);
            this.allTime[this.timeType === 'year' ? 0 : this.timeType === "month" ? 1 : this.timeType === 'date' ? 2 : 3] = this.pickerValue;
            
        },
         // 日期控件失去焦点时
        dateControlBlur() {
            this.timeShow = false;
            this.$nextTick(() => {
                this.timeShow = true; 
            })
        },
    },
    // 计算属性根据class来切换字体选中颜色
    computed:{
        pickerTextColor:function(){
            return this.timeType === 'year' ? 'ComDatePicker-yearColor' : this.timeType === 'month' ? 'ComDatePicker-monthColor' : this.timeType === 'date' ? 'ComDatePicker-dateColor' : 'ComDatePicker-daterangeColor';
        }
    }
}


b.使用

js

import DateTime from '@/frame/components/ComDatePicker.vue'


export default {
	data() {
	    return {
	        pickerValue:null,
	    }
	},
	components: {
	    DateTime,
	},
	methods: {
		initPickerValue(){
			var pickerValue=[];
			const start = new Date()

			let year1, month1, day1;

			[year1, month1, day1] = [start.getFullYear(), start.getMonth(), start.getDate()]

			const date1 = new Date(year1, month1, day1, 7)

			pickerValue.push(date1.Format('yyyy-MM-dd'))

			const end = new Date()

			let year2, month2, day2

			end.setTime(end.getTime() - 24 * 60 * 60 * 1000 * 6);

			[year2, month2, day2] = [end.getFullYear(), end.getMonth(), end.getDate()]

			const date2 = new Date(year2, month2, day2, 7)

			pickerValue.unshift(date2.Format('yyyy-MM-dd'))
			return pickerValue;
	    },
		initWarn(dateObj){
			this.pickerValue=dateObj;
			let param=this.getParam();
			this.initWarnTrendChart(param);
			this.queryAlarmUnit(param);
			this.queryAlarmType(param);
		},
    },
    mounted() {
	    //初始化时间
	    this.pickerValue=this.initPickerValue();
    }
}
        
vue

<date-time v-bind:timeShow="true" :pickerValue="pickerValue" timeType="daterange" @pickerValue="initWarn"></date-time> 


这里:pickerValue用上了上面的知识。下面要用@了。


2. 用户改变日期时获取到值

改变值方法会调用组件里的selectTimeChange方法,里面有this.$emit("pickerValue", this.pickerValue);

这句代码意思是,触发配置的@pickerValue对应的事件,参数是this.pickerValue。

上面代码可以看到@pickerValue="initWarn",就是调用initWarn函数,上面也可以查到。

注意initWarn方法里的this.pickerValue与组件里的this.pickerValue不是同一个对象。

文/程忠 浏览次数:0次   2022-06-24 10:30:15

相关阅读


评论:
点击刷新