taro-ui-vue3/lib/divider/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {View} from "@tarojs/components";
import {pxTransform} from "../utils/common";
const AtDivider = defineComponent({
  name: "AtDivider",
  props: {
    content: {
      type: String,
      default: ""
    },
    height: {
      type: [Number, String],
      default: 0
    },
    fontColor: {
      type: String,
      default: ""
    },
    fontSize: {
      type: [Number, String],
      default: 0
    },
    lineColor: {
      type: String,
      default: ""
    }
  },
  setup(props, {attrs, slots}) {
    const rootStyle = computed(() => ({
      height: props.height ? `${pxTransform(Number(props.height))}` : ""
    }));
    const fontStyle = computed(() => ({
      color: props.fontColor,
      fontSize: props.fontSize ? `${pxTransform(Number(props.fontSize))}` : ""
    }));
    const lineStyle = computed(() => ({
      backgroundColor: props.lineColor
    }));
    return () => h(View, mergeProps(attrs, {
      class: "at-divider",
      style: rootStyle.value
    }), {
      default: () => [
        h(View, {
          class: "at-divider__content",
          style: fontStyle.value
        }, {
          default: () => props.content === "" ? slots.default && slots.default() : props.content
        }),
        h(View, {
          class: "at-divider__line",
          style: lineStyle.value
        })
      ]
    });
  }
});
var divider_default = AtDivider;
export {
  divider_default as default
};