前言

九月份我们发布了 Wot Design Uni 的第一个版本，如今组件库的组件数量已超过60！

最近一个月我们做了什么

• WaterMark 水印
• Swiper 轮播
• Circle 环形进度条
• Segmented 分段控制器
• Tabbar 标签栏
• Navbar 导航条

接下来要做什么

• Sidebar 侧边栏
• Fab 悬浮按钮
• CountDown 倒计时
• NumberKeyboard 数字键盘
• PasswordInput 密码输入框
• Form 表单
• Table 表格
• Signature 签名

组件库介绍

非常感谢朋友们对我的支持和帮助，让组件库稳步的发展，关于组件库的特性和使用，可以参考本章节的内容。

<p align="center">

<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
</a>

<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>

<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>

<a href="https://www.npmjs.com/package/wot-design-uni">
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
</a>

<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
</a>

<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
</a>

</p>

<p align="center">
<a href="https://wot-design-uni.cn/">文档网站 (官网)</a> 
<a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
</p>

✨ 特性

• 支持 APP、H5、微信小程序 等平台.
• 70+ 个高质量组件，覆盖移动端主流场景.
• 使用 Typescript 构建，提供良好的组件类型系统.
• 采用 Vue3 最新特性，提升组件性能.
• 提供丰富的文档和组件示例.
• 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
• 支持暗黑模式

预览

扫描二维码访问演示：

<p>
<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200" style="margin-right:30px"/>
<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
</p>

快速上手

详细说明见 快速上手。

链接

• 意见反馈
• 更新日志
• 常见问题
• Discussions 讨论区
• QQ 群

贡献指南

修改代码请阅读我们的 贡献指南。

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。

贡献者们

感谢以下所有给 Wot Design Uni 贡献过代码的 开发者。

<a href="https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors">
<img src="https://contrib.rocks/image?repo=Moonofweisheng/wot-design-uni" />
</a>

LICENSE

MIT

请观看

使用教程
第一步 引入图标
在项目中的App.vue内添加下面代码

<style>  
    /*引入图标路径 */  
    @import 'uni_modules/TC-qianming/libs/css/iconfont.css';  
</style>

第二步 引入组件即可

<template>  
    <view>  
   <TC-qianming></TC-qianming>  
    </view>  
</template>

下载链接（点击）

提需求 问题反馈 联系作者 V：ANKR6699
有什么不足之处所以留言提出，我将更新和更改

公众号也望大家关注一下

1. 精通react ,vue
2. 熟悉各种类型业务
3. 完美还原设计稿UI图
4. 有大量时间

微信: h877488642

文档 - https://vitesse-docs.netlify.app
GitHub - http://github.com/uni-helper
官网 - https://uni-helper.js.org

为了进一步落实网信办各专项行动要求，营造良好网上舆论氛围，即日起开设「违法与不良信息信息举报」专项受理渠道。

• 「清朗·生活服务类平台信息内容整治」专项行动
• 「清朗·打击网络谣言和虚假信息」专项行动
• 「清朗·规范重点流量环节网络传播秩序」专项行动

另外如果您发现用户发布的内容、用户昵称等存在违法、违规或其它不良信息，也可通过下述方式向DCloud官方进行举报。

举报受理方式
举报邮箱：service@dcloud.io

Navbar 导航栏

为页面提供导航功能，常用于页面顶部。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

:: tip 常见问题

右图标被小程序胶囊挡住？

在小程序平台开启自定义顶部导航时，右上角会固定显示胶囊，所以此时右侧插槽及选项是不建议使用。

如何设置为背景透明？

通过 custom-style 设置组件 background-color 为 transparent。

<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>

组件会被 video 覆盖？

基础用法

通过 title 属性设置导航栏标题。

<wd-navbar title="标题"></wd-navbar>

返回上级

在导航栏实现返回上级功能。

<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>

function handleClickLeft() {  
  uni.navigateBack()  
}

右侧按钮

在导航栏右侧添加可点击的按钮。

<wd-toast></wd-toast>  

<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>

import { useToast } from '@/uni_modules/wot-design-uni'  

const { show: showToast } = useToast()  

function handleClickRight() {  
  showToast('按钮')  
}

使用插槽

可以通过 left 和 right 插槽自定义导航栏两侧的内容。

<wd-navbar title="标题" left-text="返回" left-arrow>  
  <template #right>  
    <wd-icon name="search" size="18" />  
  </template>  
</wd-navbar>

固定在顶部

通过 fixed 可以设置导航条固定在页面顶部，通过设置 placeholder 可以在顶部生成占位空间，通过设置 safeAreaInsetTop 可以开启顶部安全区的适配。

<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>  

禁用按钮

通过 left-disabled 或 right-disabled 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。

<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>

胶囊样式

通过 capsule 插槽和 navbar-capsule 组件定制返回胶囊。

<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>  
  <template #capsule>  
    <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />  
  </template>  
</wd-navbar>

function handleBack() {  
  uni.navigateBack({})  
}  

function handleBackHome() {  
  uni.reLaunch({ url: '/pages/index/Index' })  
}

带搜索栏

通过 title 插槽，自定义标题。

<wd-navbar left-text="返回" right-text="设置" left-arrow>  
  <template #title>  
    <view class="search-box">  
      <wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>  
    </view>  
  </template>  
</wd-navbar>

.search-box {  
  display: flex;  
  height: 100%;  
  align-items: center;  
  --wot-search-padding: 0;  
  --wot-search-side-padding: 0;  
}

Attributes

Events

Capsule Events

Slot

外部样式类

地址

Github
文档网站
插件市场
QQ群

一个盒子里面有一个image，image右侧会出现一个2像素的白边这是啥问题

问题：使用v-html渲染html字符串时，html字符串内容过多且html内容渲染出来后超出可视区域

1. 在H5和app中解决方案
   在h5中可使用canvas是绘制生成图片实现，app是通过缩放实现，为了适配不同机型需要动态计算一个缩放比，且缩放原点为style="transform-origin: top left;
   • 下载 npm install html2canvas
   • 在渲染html的页面引入html2canvas

import html2canvas from 'html2canvas'

• 在template中编写

    <!-- #ifdef APP-PLUS -->  
    <view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <!-- #ifdef H5 -->  
    <view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">  
        <!-- #ifdef APP-PLUS -->  
        <view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>  
        <!-- #endif -->  
        <!-- #ifdef H5 -->  
        <img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>  
        <!-- #endif -->  
    </scroll-view>

• 在data() {},中定义

    data() {  
            return {  
                html: null,  
                pdfImage: null,  
                ratioX: null,  
            };  
        },

• 重点：通过接口获得html字符串并且生成图片

  async onLoad(option) {  
            await this.getPrictOrder()  
        await this.$nextTick()  
       setTimeout(async () => {  
           // #ifdef H5  
       await this.convertToPDF()  
      // #endif  
      // #ifdef APP-PLUS  
      await this.toGetContentToConvert()  
      // #endif  
      }, 0)                                                                                                                                                     
  }         
  methods: {  
                    //计算ratioX，缩放比  
          toGetContentToConvert() {  
              let winInfo = uni.getSystemInfoSync();  
              const query = uni.createSelectorQuery().in(this);  
              query.select('#contentToConvert').boundingClientRect(data => {  
                  if (data.width === 0) {  
                      this.toGetContentToConvert()  
                      return  
                  }  
                  this.ratioX = winInfo.windowWidth / data.width  
              }).exec();  
          },  
          convertToPDF() {  
              return new Promise((resolve) => {  
                  setTimeout(() => {  
                      // #capture 就是我们要获取截图对应的 DOM 元素选择器  
                      html2canvas(document.getElementById('contentToConvert'), {  
                          useCORS: true, // 【重要】开启跨域配置  
                          allowTaint: true, // 允许跨域图片  
                      }).then((canvas) => {  
                          this.pdfImage = canvas.toDataURL('image/jpeg');  
                      });  
                      uni.hideLoading()  
                  }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成  
              });  
          },  
  }                

在uni-app开发中，经常会使用弹出框、遮罩层以及日期选择器等组件，但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这可能会影响用户体验。为了解决这个问题，我们可以采用以下方法。

滚动穿透是什么？

滚动穿透问题通常在使用弹出层、遮罩层或日期选择器等组件时出现。用户在组件内滚动内容时，当内容滚动到底部后，继续滑动可能导致底层页面也滚动，这不符合用户的期望。以下是两种解决方法。

解决方案

1. 禁止蒙版的滚动穿透

如果你想要禁止蒙版下的页面滚动，可以使用以下方法：

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

在上述代码中，我们使用了 page-meta 组件来动态修改页面的 overflow 属性，通过绑定 show10 变量的值来控制页面的滚动。当 show10 为 true 时，底层页面的滚动被禁止，从而解决了滚动穿透问题。

2. 禁止Popup内容区域的滚动穿透

注意：在h5平台可以通过动态修改body标签的样式，设置 overflow:hidden 即可解决滚动穿透，无循进行本章节的配置

a) 使用 page-meta 组件动态修改 page-meta 的 overflow 属性

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

这个方法与上述禁止蒙版滚动穿透的方法类似，但它专门用于禁止Popup内容区域的滚动穿透。

b) 将页面包裹在 <scroll-view> 标签中，并设置高度为100vh

<scroll-view style="height: 100vh;">  
  <!-- 页面内容 -->  
</scroll-view>

通过将页面内容包裹在 <scroll-view> 标签中，并设置高度为100vh（即视口的高度），可以有效地防止Popup内容区域的滚动穿透。这种方法不需要额外的组件配置，非常简单。

关于 page-meta

page-meta 是一个用于指定页面属性和监听页面事件的组件，它可以部分替代 pages.json 的功能。它的引入使得在vue文件中配置页面属性成为可能，从而实现更灵活的页面管理。

尽管 page-meta 具有一定的替代作用，但在性能方面不如 pages.json 的配置。在新页面加载时，使用 pages.json 的方式更为高效。

综上所述，通过合理使用上述方法，你可以轻松解决uni-app中的滚动穿透问题，提升用户体验

完整实现

可以参考 wot-design-uni 组件库的 popup 组件的实现。
Github
文档网站
插件市场
QQ群

此需求已经有人帮忙实现。。结题。

有个管理后台的小需求，有偿求助。 [表情]
需求是对A表数据进行筛选。
有3个unicloud的表：
一张A表，
一张B表，
一张AB关联表（存的是A_id,B_id）。
需求是对A表数据进行筛选。操作看下图。在A表列表上，通过下拉选择1个B_id, 然后查询AB表，找出所有与B_id关联的A_id. 然后在A表中把这些数据显示出来 。

星之链社区-通用前端模板

让你的项目无缝接入社区功能，组件高可复用，全端兼容

插件市场地址：https://ext.dcloud.net.cn/plugin?id=14841