样式更改，修改响应事件

src/components/picker/timepicker.css.ts

@@ -36,7 +36,7 @@ export const timepickerStyles: CSSResult = css`
     right: 0;
     bottom: 30%;
     padding: 15px;
-    border-radius: 10px 10px 0 0;
+    border-radius: 20px;
     background: #fff;
     user-select: none;
     text-align: center;

src/components/picker/timepicker.ts

@@ -1,15 +1,11 @@
-import {
-  LitElement,
-  CSSResultArray,
-  html
-} from 'lit'
+import {LitElement, CSSResultArray, html} from 'lit'
 import {customElement} from 'lit/decorators.js'
 import {timepickerStyles} from './timepicker.css'
 
 export class Picker {
   public options: any
   public isPointerdown: boolean
-  public itemHeight = 40 // 列表项高度
+  public itemHeight: number
   public maxY: number
   public minY: number
   public lastY: number
@@ -141,27 +137,35 @@ export class TimePicker extends LitElement {
     return [timepickerStyles]
   }
 
+  public openState:number = 0
+
   // test
-  public test() {
+  protected firstUpdated() {
     const btnOpen = this.shadowRoot!.querySelector('.btn-open') as HTMLElement
     const btnSure = this.shadowRoot!.querySelector('.btn-sure') as HTMLElement
-    const btnCancel = this.shadowRoot!.querySelector('.btn-cancel') as HTMLElement
+    const btnCancel = this.shadowRoot!.querySelector(
+      '.btn-cancel'
+    ) as HTMLElement
     const mask = this.shadowRoot!.querySelector('.mask') as HTMLElement
     const slide = this.shadowRoot!.querySelector('.slide-box') as HTMLElement
-    btnOpen!.addEventListener('click', function () {
+    if(this.openState==1){
+      
+    }
+    btnOpen.addEventListener('click', function () {
       mask.hidden = false
       mask.classList.add('fade-in')
       slide.classList.add('slide-up')
-    })
-    mask.addEventListener('click', function (e) {
-      let elm = e.target as HTMLElement
-      if (elm.className.includes('mask')) {
-        mask.classList.remove('fade-in')
-        mask.classList.add('fade-out')
-        slide.classList.remove('slide-up')
-        slide.classList.add('slide-down')
-      }
-    })
+    }, true)
+    // 点击非选择器区域关闭选择器
+    // mask.addEventListener('click', function (e) {
+    //   let elm = e.target as HTMLElement
+    //   if (elm.className.includes('mask')) {
+    //     mask.classList.remove('fade-in')
+    //     mask.classList.add('fade-out')
+    //     slide.classList.remove('slide-up')
+    //     slide.classList.add('slide-down')
+    //   }
+    // })
     btnCancel.addEventListener('click', function (e) {
       let elm = e.target as HTMLElement
       if (elm.className.includes('btn-cancel')) {
@@ -170,7 +174,7 @@ export class TimePicker extends LitElement {
         slide.classList.remove('slide-up')
         slide.classList.add('slide-down')
       }
-    })
+    }, true)
     mask.addEventListener('animationend', function (e) {
       let elm = e.target as HTMLElement
       if (elm.className.includes('fade-out')) {
@@ -178,11 +182,12 @@ export class TimePicker extends LitElement {
         mask.classList.remove('fade-out')
         slide.classList.remove('slide-down')
       }
-    })
+    }, true)
     btnSure.addEventListener('click', function (e) {
-      alert(hourPicker.result + ' : ' + minutePicker.result)
+      var a = new Date()
+      alert(hourPicker.result + ' : ' + minutePicker.result + a)
       e.preventDefault()
-    })
+    }, true)
     // 调用方式
     function createList(start: number, end: number) {
       const list = []
@@ -209,14 +214,19 @@ export class TimePicker extends LitElement {
 
   render() {
     return html`
-      <button class="btn btn-open" type="button" @click="${this.test}">
+      <button
+        class="btn btn-open"
+        type="button"
+      >
         时间选择器
       </button>
       <div hidden class="mask">
         <div class="slide-box">
           <div id="checkbar">
             <button class="btn btn-cancel" type="button">取消</button>
-            <span class="picker_label" style="display: inline-block">开始时间</span>
+            <span class="picker_label" style="display: inline-block">
+              开始时间
+            </span>
             <button class="btn btn-sure" type="button">确定</button>
           </div>
           <div class="picker-group">
@@ -237,4 +247,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'star-timepicker': TimePicker
   }
-}
+}