公共 Utils ​

<!--  -->
<template>
  <div>
    <h3><view class="header" style="margin-top: 12px">公共Utils</view></h3>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">deepClone(xxxx) // 深拷贝</view>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">toThousandFilter(1200) => {{ toThousandFilter(1200) }}</view>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">isEmpty(0) => {{ isEmpty(0) }}</view>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">isEmpty({}) => {{ isEmpty({}) }}</view>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">isEmpty([]) => {{ isEmpty([]) }}</view>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">isEmpty(null) => {{ isEmpty(null) }}</view>
    <view class="jp-line-1 mt-2 mb-1"></view>
    <view class="cell">isEmpty('') => {{ isEmpty('') }}</view>
  </div>
</template>

<script lang="ts" setup>
import { toThousandFilter, isEmpty } from '@/utils/index'
</script>
<style scoped lang="scss"></style>

<!--  -->
<template>
  <div class="">
    <view v-for="(item, index) in attribute.dataCssArr" :key="index" class="flex flex-col box">
      <view class="card">
        <h3>
          <view class="header">{{ item.title }}</view>
        </h3>
        <view v-for="(em, i) in item.value" :key="i" class="cell">{{ em.detail }}</view>
      </view>
    </view>

    <view class="box">
      <view class="card">
        <h3>
          <view class="header">文本（最大支持10行）</view>
        </h3>
        <view class="cell flex flex-col">
          <text style="line-height: 30px">
            <text>line-clamp-1:</text>
            <text class="line-clamp-1">一行展示一行展示一行展示一行展示一行展示一行展示一行展示一行展示一行展示一行展示</text>
          </text>
        </view>
        <view class="cell flex flex-col">
          <text style="line-height: 30px">
            <text>line-clamp-2:</text>
            <text class="line-clamp-2">
              2行展示,2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示2行展示
            </text>
          </text>
        </view>
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  testObj: {
    date: new Date(),
    price: 1200
  },
  dataCssArr: [
    {
      title: 'css 采用tailwindcss，https://tailwindcss.com/docs/display，涉及到主题色的获取，一律从 src/static/css/global.scss 文件中获取',
      value: []
    },
    {
      title: '线条',
      value: [
        { detail: 'jp-line-1: 一条横线， 高度1/1=1' },
        { detail: 'jp-line-2: 一条横线， 高度1/2=0.5' },
        { detail: 'jp-line-3: 一条横线， 高度1/3=0.3' },
        { detail: 'jp-line-4: 一条横线， 高度1/4=0.25' }
      ]
    },
    {
      title: '间隙',
      value: [
        { detail: 'jp-gap-1: 一条间隔， 高度1*2rpx' },
        { detail: 'jp-gap-2: 一条间隔， 高度2*2rpx' },
        { detail: 'jp-gap-3: 一条间隔， 支持1-50' }
      ]
    }
  ]
})
</script>
<style scoped>
.box {
  box-sizing: border-box;
  padding: 0 24rpx 16rpx;
  width: 100vw;
  background-color: #f3f5f9;
}
.card {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px 0 rgba(196, 209, 236, 0.2);
}
</style>