program_lcode_vue/src/components/mdp-ui/mdp-date-range/README.md

mdp-date-range

该组件相对于el-date-range，进行了以下两项优化：

一、showStyle

• 提供origin\tag\x三种样式
• 可以直接传入一个对象，指定start-key,end-key，自动更新对象对应的属性。免去一堆的转换过程

1. origin

<mdp-date-range show-style="origin" :value="formData"/>
...
  data() {
    return {
      formData:
        [ '2024-01-09 00:00:00','2024-03-09 00:00:00']
    }
  },

2. x

    <mdp-date-range show-style="x" :value="formData" style="border: 1px solid">
            <template v-slot:avater><p>&#9733;</p></template> 				<!--  自定义图标-->
            <template v-slot:info>自定义内容</template>
    </mdp-date-range>

3. tag

    <mdp-date-range show-style="tag" style="border: 1px solid">
      <!-- 默认图标-->
      <template v-slot:info>自定义内容</template>
    </mdp-date-range>

二、value + @change事件

<mdp-date-range :value="formData" @change="change"/>

data() {
  return {
    status: "login",
    formData:
      ['2024-01-09 00:00:00', '2024-03-09 00:00:00'] // 初始化值
  }
},

methods: {
  change(dates) {
    this.formData = dates
  }
},

三、startKey 和 endKey

当传入的value是一个对象时，可以设置starKey和endKey来指定key

<mdp-date-range show-style="origin" :value="formData" start-key="startDate" end-key="endDate"
@change="change">

data() {
  return {
    formData: {
      account:'xxxxx',
      ....
      startDate: '2024-01-09 00:00:00', 
      endDate: '2024-03-09 00:00:00'
    }
  }
},
  
methods: {
  change(dates) {
    this.formData = dates
  }
},

四、styleObj

组件的样式

<mdp-date-range :styleObj="{ backgroundColor: 'green' }"/>

五、autoDefault 和 defaultRange

autoDefault 是否根据 defaultRange 生成一个时间跨度

defaultRange = [-1, 1] = [ 当前时间 -1, 当前时间 +1 ]

<mdp-date-range :auto-default="true" :default-range="[-1, 1]"/>

六 icon

与Attributes表的 prefix-icon 想同，自定义头部图标，只有 x 和 tag 样式下

<mdp-date-range show-style="x" icon="el-icon-phone"/>

<mdp-date-range show-style="tag" icon="el-icon-phone"/>

showavater Disabled label type

自定义属性

参数	说明	类型	可选值	默认值
showStyle	设置组件的样式	String	—	origin
disabled	是否禁止鼠标事件的触发	Boolean	—	false

用法

对象的方式

var formData={startDate:'',endDate:''}

<mdp-date-range v-model="formData" start-key='startDate' end-key="endDate"/>

数组的方式

var dates=[]

<mdp-date-range v-model="dates"/>

element ui

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DatePicker) / array(DateRangePicker)	—	—
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	开始日期
end-placeholder	范围选择时结束日期的占位内容	string	—	结束日期
type	显示类型	string	year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd
align	对齐方式	string	left, center, right	left
popper-class	DatePicker 下拉框的类名	string	—	—
picker-options	当前时间日期选择器特有的选项参考下表	object	—	[{...略...}}]
range-separator	选择范围时的分隔符	string	—	'~'
default-value	可选，选择器打开时默认显示的时间	Date	可被new Date()解析	—
default-time	范围选择时选中日期所使用的当日内具体时刻	string[]	数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式	yyyy-MM-dd HH:mm:ss
name	原生属性	string	—	—
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	—	false
prefix-icon	自定义头部图标的类名	string	—	el-icon-date
clear-icon	自定义清空图标的类名	string	—	el-icon-circle-close
validate-event	输入时是否触发表单的校验	boolean	-	true
append-to-body	DetePicker 自身是否插入至 body 元素上。	boolean	—	true

Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表	Object[]	—	—
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
cellClassName	设置日期的 className	Function(Date)	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7
onPick	选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效	Function({ maxDate, minDate })	—	—

Shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	string	—	—
onClick	选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())	function	—	—

Events

事件名称	说明	回调参数
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致，可受 value-format 控制
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

Methods

方法名	说明	参数
focus	使 input 获取焦点	—