时间跨度选择器

该组件是个时间跨度选择器。
基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器

点击选框，下拉列表中有四个选项，点击自定义时间，后边会出现日期时间范围选择

代码分析

<template><div class="flex"><my-select v-model="space" :dataList="dataList" themeColor width="124px" @change="spaceHandle"></my-select><my-date-times-picker class="mar-l-10" v-model="customTime" themeColor @change="customTimeHandle" v-if="customData"></my-date-times-picker></div>
</template><script>
export default {name: 'MyTimeSpace',components:{// 组件 my-select 和 my-date-times-picker 以进行 全局注册，这里就不再引入},props: {value: {  // type: [String, Number, Array],require: true,default: ''},customId: {// 自定义时间Idtype: [String, Number],require: false,default: function () {return '4'}},defineDataList: {// 自定义时间跨度列表type: Array,require: false,default: function () {return []}}},data() {return {space: '',customTime: [],dataList: [{name: '1天',id: '1'},{name: '2天',id: '2'},{name: '3天',id: '3'},{name: '自定义时间',id: '4'}]}},computed: {customData() {  // 该字段 决定是否展示 日期时间范围选择器return this.space === this.customId}},methods: {updateVal(val) { // 更新 value 值this.$emit('input', val)this.$nextTick(() => {this.$emit('change', val)// 以下代码可以触发  el-form-item 的change 校验try {this.$parent.validate('change')} catch (error) {}})},spaceHandle() {  // 触发修改 valuelet postData = ''if (this.space === this.customId) {postData = [...this.customTime]} else {postData = this.space}this.updateVal(postData)},customTimeHandle() { // 触发修改 valuethis.updateVal(this.customTime)}},created() {const String = Object.prototype.toStringif (String.call(this.value) === '[object Array]') { // 传入 数组时，默认展示 自定义时间this.space = this.customIdthis.customTime = [...this.value]} else {this.space = this.value}if (this.defineDataList.length) { // 当传入 defineDataList 字段，替换 dataList this.dataList = [...this.defineDataList]}}
}
</script><style scoped>
</style>

组件使用（基础组件可进行全局注册，直接使用）

<ym-time-space v-model="time_period" :customId="customId":defineDataList="defineDataList"@change="timeSpaceHandle"
></ym-time-space>
<script>
export default {data(){return {time_period: '1'，customId: '17',defineDataList：[{name: '16天',id: '16'},{name: '自定义时间选择',id: '17'}]}},methods: {timeSpaceHandle(time_period) {console.log(time_period)}}
}
</script>

属性

参数	说明	类型	require	默认值
v-model	绑定值	Array、String、Number	true	无
customId	自定义时间Id	String、Number	false	4
defineDataList	自定义时间跨度列表	Array	false	[]

方法

事件名称	说明	回调参数
change	点击确定时触发	([value1,value2,…])

组件实试用注意事项

v-mode 绑定时，初始值给定 16 时，组件默认选中【16天】，初始值给定 [“2022-02-15 00:00”, “2022-02-15 23:59”]时，默认选中【自定义时间选择】
当不需要自定义时间跨度列表时，defineDataList 不需要传入
当不需要自定义时间Id时，customId不需要传入

Vue自定义组件之时间跨度选择器相关推荐

vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...
Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...
vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
Vue自定义组件 Vue.component
Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教 ...

Vue自定义组件之时间跨度选择器

时间跨度选择器

代码分析

组件使用（基础组件可进行全局注册，直接使用）

属性

方法

组件实试用注意事项

Vue自定义组件之时间跨度选择器相关推荐

最新文章

热门文章