init

uni_modules/nutui-uni/components/tabs/tabs.ts

@@ -0,0 +1,79 @@
+import type { ExtractPropTypes, RendererElement, RendererNode, VNode } from 'vue'
+import { CHANGE_EVENT, CLICK_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
+import { commonProps, isString, makeNumericProp, makeStringProp, truthProp } from '../_utils'
+
+export const TAB_KEY = Symbol('tabs')
+
+export const tabsProps = {
+  ...commonProps,
+  /**
+   * @description 绑定当前选中标签的标识符
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * @description 标签选中色
+   */
+  customColor: String,
+  /**
+   * @description 使用横纵方向,可选值`horizontal`、`vertical`
+   */
+  direction: makeStringProp<'horizontal' | 'vertical'>('horizontal'),
+  /**
+   * @description 标签栏字体尺寸大小,可选值`large` `normal` `small`
+   */
+  size: makeStringProp<'large' | 'normal' | 'small'>('normal'),
+  /**
+   * @description 选中底部展示样式,可选值 `line`、`smile`
+   */
+  type: makeStringProp<'line' | 'card' | 'smile'>('line'),
+  /**
+   * @description 标签栏是否可以滚动
+   */
+  titleScroll: Boolean,
+  /**
+   * @description 是否省略过长的标题文字
+   */
+  ellipsis: truthProp,
+  /**
+   * @description 是否开启手势左右滑动切换
+   */
+  swipeable: Boolean,
+  /**
+   * @description 自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tab-pane 的高度而发生变化,使用此属性时必须设置nut-tabs的`pane-key`
+   */
+  autoHeight: Boolean,
+  /**
+   * @description 标签栏背景颜色
+   */
+  background: String,
+  /**
+   * @description 切换动画时长，单位 ms。0 代表无动画，此时必须设置 pane-key
+   */
+  animatedTime: makeNumericProp(300),
+  /**
+   * @description 标签间隙
+   */
+  titleGutter: makeNumericProp(0),
+  /**
+   * @description 横轴方向的标题对齐方式，可选值 left、center
+   */
+  align: makeStringProp<'left' | 'center'>('center'),
+}
+
+export type TabsProps = ExtractPropTypes<typeof tabsProps>
+
+export const tabsEmits = {
+  [CLICK_EVENT]: (val: Title) => val instanceof Object,
+  [CHANGE_EVENT]: (val: Title) => val instanceof Object,
+  [UPDATE_MODEL_EVENT]: (val: string) => isString(val),
+}
+
+export type TabsEmits = typeof tabsEmits
+
+export class Title {
+  title = ''
+  titleSlot?: VNode<RendererNode, RendererElement, { [key: string]: any }>
+  paneKey = ''
+  disabled = false
+  constructor() { }
+}