init

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

@@ -0,0 +1,24 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeStringProp, truthProp } from '../_utils'
+
+export const dividerProps = {
+  ...commonProps,
+  /**
+   * @description 内容位置，可选值为 `left`、`right`、`center`
+   */
+  contentPosition: makeStringProp<'left' | 'right' | 'center'>('center'),
+  /**
+   * @description 是否使用虚线
+   */
+  dashed: Boolean,
+  /**
+   * @description 是否使用 `0.5px` 线
+   */
+  hairline: truthProp,
+  /**
+   * @description 水平还是垂直类型，可选值 `vertical`和`horizontal`
+   */
+  direction: makeStringProp<'vertical' | 'horizontal'>('horizontal'),
+}
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>

uni_modules/nutui-uni/components/divider/divider.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, defineComponent, useSlots } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { dividerProps } from './divider'
+
+const props = defineProps(dividerProps)
+const slotDefault = !!useSlots().default
+const classes = computed(() => {
+  let classesObj = {
+
+  }
+  if (props.direction === 'horizontal') {
+    classesObj = {
+      [`${componentName}-center`]: slotDefault,
+      [`${componentName}-left`]: props.contentPosition === 'left',
+      [`${componentName}-right`]: props.contentPosition === 'right',
+      [`${componentName}-dashed`]: props.dashed,
+      [`${componentName}-hairline`]: props.hairline,
+    }
+  }
+  else {
+    classesObj = {
+      [`${componentName}-vertical`]: props.direction === 'vertical',
+    }
+  }
+
+  return getMainClass(props, componentName, classesObj)
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-divider`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view v-if="direction === 'horizontal'" :class="classes" :style="customStyle">
+    <slot />
+  </view>
+  <view v-else :class="classes" :style="customStyle" />
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/divider/index.scss

@@ -0,0 +1,63 @@
+.nut-divider {
+  display: flex;
+  align-items: center;
+  margin: $divider-margin;
+  font-size: $divider-text-font-size;
+  color: $divider-text-color;
+
+  &::before,
+  &::after {
+    flex: 1;
+    height: $divider-line-height;
+    content: "";
+    border: $divider-line-height solid currentColor;
+    border-width: $divider-line-height 0 0;
+  }
+
+  &.nut-divider-center,
+  &.nut-divider-left,
+  &.nut-divider-right {
+    &::before {
+      margin-right: $divider-before-margin-right;
+    }
+
+    &::after {
+      margin-left: $divider-after-margin-left;
+    }
+  }
+
+  &.nut-divider-left {
+    &::before {
+      max-width: 10%;
+    }
+  }
+
+  &.nut-divider-right {
+    &::after {
+      max-width: 10%;
+    }
+  }
+
+  &.nut-divider-dashed {
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  &.nut-divider-hairline {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  &.nut-divider-vertical {
+    position: relative;
+    top: $divider-vertical-top;
+    display: inline-block;
+    height: $divider-vertical-height;
+    margin: $divider-vertical-margin;
+    border-left: 1px solid $divider-vertical-border-left;
+  }
+}

uni_modules/nutui-uni/components/divider/index.ts

@@ -0,0 +1 @@
+export * from './divider'