更新记录

0.3.17（2022-05-26） 下载此版本

解决了诸多bug

0.3.16（2022-05-20） 下载此版本

• 新增 Loading 加载 组件
• button组件的loading换为组件
• 修改了tabs滑动线的一些逻辑
• cell组件value slot改为默认slot
• 增加了card组件一个unit单位的props字段
• 修复了若干组件的bug
• 修改了一些组件的样式

0.3.15（2022-05-19） 下载此版本

修改了tabs的一些bug

平台兼容性

已实现组件：

Button 按钮、Cell 单元格、Icon 图标、

Layout 布局、Style 内置样式、Search 搜索、

Stepper 步进器、Tag 标签、Tab 标签页、

Card商品卡片、Divider 分割线、

Empty 空状态、Grid 宫格、NavBar 导航栏、

Loading 加载

写在前面：

因为公司业务需要使用到uni，所以一直在找合适的组件库，换了好多套最后发现都不太应心，几乎都是属于那种“作者给配置好能想到的所有属性，傻瓜式上手，你要的属性我都有”，“所有属性都写在view的标签上”的类型，就像taillwind，很难复用（taillwind可以封装css样式，但是组件再封装组件复用就很啰嗦）。想通过css来改写一些样式就很难，比如把cell组件改成一个商品展示组件，10条属性需要写9条!important来覆盖scoped带来的样式隔离，想再适配其他样式或者维护也是难上加难。

之前公司一直用的的vant的组件库，也用顺了手，但是无奈没有合适的uni版的vant，所以就突发奇想自己适配一套vant的组件库，刚开始是因为vant的cell组件在自家项目中应用范围很广，所以只想通过cell来解决一下目前的痛点，目前自家的项目用的都很好。

但是随着项目功能的增加，我发现我的痛点越来越多，所以我只能在不忙的时候扩展组件库的种类，不过扩展的组件完全取决于公司项目需求。且我是个设计人员，并非开发人员，很多功能我写不了或者写的有问题，仅仅只是能满足公司项目需求。

如果有我没测出来的bug也欢迎大家评论或去github提issue。

以上

🗒 说明：

1. 手写的山寨vant组件，因为uni很多属性和vue不一样，所以只是模仿了vant组件的样式，属性和方法是自己硬适配的，并不是官方代码转换的。
2. 有些官方属性可能我没写上，要么是写不了，要么就是公司业务不需要。
3. 可能有bug，随时修复。
4. 有不属于vant的属性/样式，是因为自己公司业务需求自己额外加上的。
5. 部分属性使用了css变量，同vant，可以用变量来覆盖样式。
6. 样式和代码分离，没有scoped样式隔离，样式优先级较低，可被轻易覆盖，用来自定义样式。
7. 默认开启了微信小程序的virtualHost属性（虚拟节点），这个带来的影响尚未确定。
8. 微信小程序和支付宝小程序都是测试过，起码样式啥的是没啥大问题的，其他家的小程序我没测，但是app和h5就不行了，样式和语法都有问题，项目主要针对支付宝和微信的，有时间了我会改改。如果使用H5的话，还是建议直接使用vant的vue版本。

🧑💻 以下是文档：

使用方法

1、从插件市场下载后配置pages.json文件：

"easycom": {
        "autoscan": true,
        "custom": {
            "^van-(.*)": "@/uni_modules/deajax-ui/components/van-$1/index.vue"
        }
}

2、在App.vue的style中引入 基础样式 和 图标库

<style lang="scss">
  //引入基础样式
  @import '@/uni_modules/deajax-ui/common/style.scss';
  //引入图标库
  @import '@/uni_modules/deajax-ui/remixicon/remixicon.scss';
</style>

自定义样式

样式和代码分离，没有scoped样式隔离，样式优先级较低，可被轻易覆盖

比如想增加cell的padding：

vue:

// vue
<view class="big-cell-padding">
    <van-cell title="我想变的大一点" />
</view>

style.scss:

.big-cell-padding {
    .van-cell {
        padding: 16px 24px;
    }
}
//或者
.big-cell-padding {
  --van-cell-vertical-padding: 16px;
  --van-cell-horizontal-padding: 24px;
}

基础样式变量

用以下变量覆盖uni.scss的原有内容或添加在uni.scss中，即可在全局使用此变量。

此变量为 Vant 组件的主题样式规范。

// Color Palette
$van-black: #000;
$van-white: #fff;
$van-gray-1: #f7f8fa;
$van-gray-2: #f2f3f5;
$van-gray-3: #ebedf0;
$van-gray-4: #dcdee0;
$van-gray-5: #c8c9cc;
$van-gray-6: #969799;
$van-gray-7: #646566;
$van-gray-8: #323233;
$van-red: #ee0a24;
$van-blue: #1989fa;
$van-orange: #ff976a;
$van-orange-dark: #ed6a0c;
$van-orange-light: #fffbe8;
$van-green: #07c160;

// Gradient Colors
$van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
$van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
$van-primary-color: $van-blue;
$van-success-color: $van-green;
$van-danger-color: $van-red;
$van-warning-color: $van-orange;
$van-text-color: $van-gray-8;
$van-text-color-2: $van-gray-6;
$van-text-color-3: $van-gray-5;
$van-text-link-color: #576b95;
$van-active-color: $van-gray-2;
$van-active-opacity: 0.6;
$van-disabled-opacity: 0.5;
$van-background-color: $van-gray-1;
$van-background-color-light: $van-white;

// Padding
$van-padding-base: 4px;
$van-padding-xs: 8px;
$van-padding-sm: 12px;
$van-padding-md: 16px;
$van-padding-lg: 24px;
$van-padding-xl: 32px;

// Font
$van-font-size-xs: 10px;
$van-font-size-sm: 12px;
$van-font-size-md: 14px;
$van-font-size-lg: 16px;
$van-font-weight-bold: 500;
$van-line-height-xs: 14px;
$van-line-height-sm: 18px;
$van-line-height-md: 20px;
$van-line-height-lg: 22px;
$van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
$van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;

// Animation
$van-animation-duration-base: 0.3s;
$van-animation-duration-fast: 0.2s;
$van-animation-timing-function-enter: ease-out;
$van-animation-timing-function-leave: ease-in;

// Border
$van-border-color: $van-gray-3;
$van-border-width-base: 1px;
$van-border-radius-sm: 2px;
$van-border-radius-md: 4px;
$van-border-radius-lg: 8px;
$van-border-radius-max: 999px;

内置样式

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用

引入

在 app.vue 中引入内置样式。

@import '@/uni_modules/deajax-ui/common/style.scss';

文字省略

<view class="van-ellipsis">
  这是一段宽度限制 250px 的文字，后面的内容会省略。
</view>

<!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">
  这是一段最多显示两行的文字，后面的内容会省略。
</view>

<!-- 最多显示三行 -->
<view class="van-multi-ellipsis--l3">
  这是一段最多显示三行的文字，后面的内容会省略。
</view>

1px 边框

<!-- 上边框 -->
<view class="van-hairline--top"></view>

<!-- 下边框 -->
<view class="van-hairline--bottom"></view>

<!-- 左边框 -->
<view class="van-hairline--left"></view>

<!-- 右边框 -->
<view class="van-hairline--right"></view>

<!-- 上下边框 -->
<view class="van-hairline--top-bottom"></view>

<!-- 全边框 -->
<view class="van-hairline--surround"></view>

全局字体

推荐在 App.vue 的 style 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;
}

Cell Group 单元格组

示例：

<template>
    <van-cell-group title="组标题">
    <van-cell title="单元格" value="内容"></van-cell>
    <van-cell title="单元格" value="内容" label="描述信息"></van-cell>
  </van-cell-group>
</template>

Props

Slot

Cell 单元格

图标使用Remix icon，可以直接在van-cell中使用，如：<van-cell icon="ri-add-line" />

示例：

<template>
    <van-cell title="单元格" label="描述信息" value="内容"></van-cell>
</template>

Props

Slot

Card 商品卡片

商品卡片并未完全按照vant的样式和属性进行编写，只是为了方便实现业务。

示例：

<template>
    <van-card
                title="商品标题"
                desc="描述信息"
                price="2.00"
                num="2"
                thumb="https://via.placeholder.com/150"
                tag="标签"
                clickable
                @click="onClick"
            >
                <view slot="extra">extra</view>
    </van-card>
</template>

<script>
export default {
    methods: {
        onClick() {
            console.log('click card');
        }
    }
};
</script>

Props

Slot

Tab 标签页

这个组件太™难写了，好多属性实现不了，这个uni的方法都不一样啊，算了先凑合用吧。

⚠️‼️注意：tab必须声明 name，v-model默认为String类型的‘1’，所以如果你的name不是1234，那v-model也必填！

示例：

<template>
  <van-tabs v-model="value">
    <van-tab title="标签1" name="1">内容1</van-tab>
    <van-tab title="标签2" name="2">内容2</van-tab>
    <van-tab title="标签3" name="3">内容3</van-tab>
    <van-tab title="标签4" name="4">内容4</van-tab>
  </van-tabs>
</template>

<script>
export default {
    data() {
        return {
            value: '1',
        };
    }
};
</script>

Tabs Props

Tab Props

Tabs Slot

Tab Slot

Tabs Event

Icon 图标

图标使用了remixicon图标库，图标库拥有2271个图标，可以满足绝大部分场景，且分线、面两种类型，是我们目前项目一直在用的图标库，如果有其他图标库需求，可以在安装完图标库后，直接用图标名+前缀的方式来引用，比如用iconfont：name="iconfont iconfont-name"

remixicon图标库地址：https://remixicon.cn/

remixicon图标库git：https://github.com/Remix-Design/remixicon

示例：

<template>
    <van-icon name="ri-vuejs-line"></van-icon>
</template>

Props

Events

Button 按钮

因为loading组件还没有做，所以写了一个简易版的button loading，和官方的loading效果有区别

0.3.16 已更换为van-loading组件。

示例：

<template>
    <van-button type="primary">主要按钮</van-button>
</template>

Props

Events

Search 搜索

示例：

<template>
    <van-search :value="value" placeholder="请输入搜索关键词" />
</template>

<script>
export default {
    data() {
        return {
            value: ''
        };
    }
};
</script>

Props

Events

Slot

Stepper 步进器

示例：

<template>
    <van-stepper :value="1" @change="onChange" />
</template>

<script>
export default {
    methods: {
        onChange(value) {}
    }
};
</script>

Props

Events

Slot

Layout 布局

示例：

<template>
    <van-row>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
  </van-row>

  <van-row>
    <van-col span="4">span: 4</van-col>
    <van-col span="10" offset="4">offset: 4, span: 10</van-col>
  </van-row>

    <van-row gutter="20" gap="20">
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
  </van-row>
</template>

Row Props

Col Props

Tag 标签

示例：

<template>
    <van-tag type="primary">标签</van-tag>
  <van-tag type="success">标签</van-tag>
  <van-tag type="danger">标签</van-tag>
  <van-tag type="warning">标签</van-tag>
</template>

Props

Slot

Events

Divider 分割线

示例：

<template>
    <van-divider />
</template>

Props

Slot

Empty 空状态

示例：

<template>
    <van-empty description="描述文字" />
</template>

Props

Slots

Grid 宫格

示例：

<template>
    <van-grid>
    <van-grid-item icon="ri-image-line" text="文字" />
    <van-grid-item icon="ri-image-line" text="文字" />
    <van-grid-item icon="ri-image-line" text="文字" />
    <van-grid-item icon="ri-image-line" text="文字" />
  </van-grid>
</template>

Grid Props

GridItem Props

GridItem Events

GridItem Slots

NavBar 导航栏

示例：

<template>
    <van-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  bind:click-left="onClickLeft"
  bind:click-right="onClickRight"
/>
</template>

Props

Slot

Events

Loading 加载

示例：

<template>
    <van-loading />
    <van-loading type="spinner" />
</template>

Props

Slots