feat(nvue): navigator

packages/uni-components/dist/components.js

@@ -81,21 +81,40 @@ export function initComponents(uni, Vue, weex) {
         }
       };
     }
-    function useHoverClass(hoverClass) {
-      if (hoverClass && hoverClass !== "none") {
-        return {};
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+    const hasOwn = (val, key) => hasOwnProperty.call(val, key);
+    function useHoverClass(props) {
+      if (props.hoverClass && props.hoverClass !== "none") {
+        const hoverAttrs = { hoverClass: props.hoverClass };
+        if (hasOwn(props, "hoverStartTime")) {
+          hoverAttrs.hoverStartTime = props.hoverStartTime;
+        }
+        if (hasOwn(props, "hoverStayTime")) {
+          hoverAttrs.hoverStayTime = props.hoverStayTime;
+        }
+        if (hasOwn(props, "hoverStopPropagation")) {
+          hoverAttrs.hoverStopPropagation = props.hoverStopPropagation;
+        }
+        return hoverAttrs;
       }
-      return { hoverClass };
+      return {};
     }
+    const navigatorStyles = [{
+      "navigator-hover": {
+        backgroundColor: "rgba(0,0,0,0.1)",
+        opacity: 0.7
+      }
+    }];
     var Navigator = vue.defineComponent({
       name: "Navigator",
       props: navigatorProps,
+      styles: navigatorStyles,
       setup(props, {
         slots
       }) {
         const onClick = createNavigatorOnClick(props);
         return () => {
-          return vue.createVNode("div", vue.mergeProps(useHoverClass(props.hoverClass), {
+          return vue.createVNode("view", vue.mergeProps(useHoverClass(props), {
             "onClick": onClick
           }), [slots.default && slots.default()]);
         };

packages/uni-components/src/nvue/navigator/index.tsx

@@ -5,16 +5,26 @@ import {
 } from '../../components/navigator'
 import { useHoverClass } from '../utils'
 
+const navigatorStyles: Record<string, Record<string, string | number>>[] = [
+  {
+    'navigator-hover': {
+      backgroundColor: 'rgba(0,0,0,0.1)',
+      opacity: 0.7,
+    },
+  },
+]
+
 export default defineComponent({
   name: 'Navigator',
   props: navigatorProps,
+  styles: navigatorStyles,
   setup(props, { slots }) {
     const onClick = createNavigatorOnClick(props)
     return () => {
       return (
-        <div {...useHoverClass(props.hoverClass)} onClick={onClick}>
+        <view {...useHoverClass(props)} onClick={onClick}>
           {slots.default && slots.default()}
-        </div>
+        </view>
       )
     }
   },

packages/uni-components/src/nvue/utils.ts

-export function useHoverClass(hoverClass: string) {
-  if (hoverClass && hoverClass !== 'none') {
-    return {}
+import { hasOwn } from '@vue/shared'
+
+interface HoverProps {
+  hoverClass?: string
+  hoverStartTime?: number | string
+  hoverStayTime?: number | string
+  hoverStopPropagation?: boolean
+}
+export function useHoverClass(props: HoverProps) {
+  if (props.hoverClass && props.hoverClass !== 'none') {
+    const hoverAttrs: HoverProps = { hoverClass: props.hoverClass }
+    if (hasOwn(props, 'hoverStartTime')) {
+      hoverAttrs.hoverStartTime = props.hoverStartTime
+    }
+    if (hasOwn(props, 'hoverStayTime')) {
+      hoverAttrs.hoverStayTime = props.hoverStayTime
+    }
+    if (hasOwn(props, 'hoverStopPropagation')) {
+      hoverAttrs.hoverStopPropagation = props.hoverStopPropagation
+    }
+    return hoverAttrs
   }
-  return { hoverClass }
+  return {}
 }