!46 日期组件和Dropdown组件的部分小优化

Merge pull request !46 from 鄢鹏权/develop

example/docs/zh-CN/components/datePicker.md

@@ -62,6 +62,33 @@ export default {
 
 :::
 
+::: title 禁止修改
+:::
+
+::: demo
+
+<template>
+  <!-- 选择的时间：{{endTime3}} -->
+  <lay-date-picker disabled type="year" v-model="endTime3"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime3 = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime3
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 年份选择
 :::
 
@@ -168,6 +195,35 @@ export default {
 
 :::
 
+::: title 一次性选择
+:::
+
+::: describe 只需要点击一次后自动关闭，无需点击确认按钮
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker v-model="endTime7" simple></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime7 = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime7
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Date Picker 属性
 :::
 
@@ -177,6 +233,8 @@ export default {
 | ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
 | v-model      | 当前时间                                                     | `string`         | --    | —             |
 | type        | 选择类型                                                   | `string`         | `date`    | `date` `datetime` `year` `month` `time` `yearmonth`             |
+| disabled      | 是否禁止修改                                                     | `boolean`         | false    | —             |
+| simple      | 一次性选择，无需点击确认按钮                                         | `boolean`         | false    | —             |
 
 :::
 

example/docs/zh-CN/components/dropdown.md

@@ -80,6 +80,71 @@ export default {
 }
 </script>
 
+
+:::
+::: title 禁用弹出
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown disabled>
+    <lay-button type="primary" >禁用弹出</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+
+:::
+::: title 事件处理
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown @open="stat='开启'" @hide="stat='关闭'">
+    <lay-button type="primary" >当前状态:{{stat}}</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const stat=ref("关闭")
+    return {
+      stat
+    }
+  }
+}
+</script>
+
 :::
 
 ::: title Dropdown 属性
@@ -90,6 +155,7 @@ export default {
 | 属性    | 描述     | 可选值          |
 | ------- | -------- | --------------- |
 | trigger | 触发方式 | `click` `hover` |
+| disabled | 是否禁用触发 | `true` `false` |
 
 :::
 
@@ -105,6 +171,17 @@ export default {
 :::
 
  
+::: title Dropdown 事件
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| hide | 隐藏下拉内容后触发 | --     |
+| open | 显示下拉内容后触发 | --     |
+
+:::
 
 ::: previousNext dropdown
 :::

src/component/datePicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <lay-dropdown ref="dropdownRef">
+    <lay-dropdown ref="dropdownRef" :disabled="props.disabled">
       <lay-input :name="name" :value="dateValue || modelValue" readonly>
         <template #prefix>
           <lay-icon type="layui-icon-date"></lay-icon>
@@ -217,11 +217,17 @@ export interface LayDatePickerProps {
   modelValue?: string;
   type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
   name?: string;
+  max?: string;
+  min?: string;
+  disabled?: boolean;
+  simple?: boolean
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
   modelValue: "",
   type: "date",
+  disabled: false,
+  simple: false,
 });
 
 const dropdownRef = ref(null);
@@ -312,6 +318,9 @@ const dateValue = computed<string>(() => {
       break;
   }
   $emits("update:modelValue", momentVal);
+  if (props.simple) {
+    ok()
+  }
   return momentVal;
 });
 
@@ -368,6 +377,7 @@ watch(
 
 // 确认事件
 const ok = () => {
+  if (dropdownRef.value)
     // @ts-ignore
     dropdownRef.value.hide();
 };

src/component/dropdown/index.vue

@@ -12,12 +12,14 @@ import { DropdownTrigger } from "./interface";
 
 export interface LayDropdownProps {
   trigger?: DropdownTrigger;
+  disabled?: boolean
 }
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
+  disabled: false
 });
-
+const emit = defineEmits(['open', 'hide'])
 const openState = ref(false);
 const dropdownRef = ref<null | HTMLElement>(null);
 
@@ -26,15 +28,24 @@ onClickOutside(dropdownRef, (event) => {
 });
 
 const open = function () {
+  if (props.disabled === false) {
     openState.value = true;
+    emit('open')
+  }
 };
 
 const hide = function () {
   openState.value = false;
+  emit('hide')
 };
 
 const toggle = function () {
-  openState.value = !openState.value;
+  if (props.disabled === false)
+    if (openState.value) {
+      hide()
+    } else {
+      open()
+    }
 };
 
 provide("openState", openState);