czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化组件/更新

Browse Source
This commit is contained in:
gyq
2025-12-03 10:13:55 +08:00
parent 92f9776a35
commit 09b6e36a52
261 changed files with 22080 additions and 7238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
uni_modules/lime-clipper/readme.md
View File

@@ -1,9 +1,5 @@
# Clipper 图片裁剪
> uniapp 图片裁剪，可用于图片头像等裁剪处理
> [查看更多 站点1](https://limeui.qcoon.cn/#/clipper) <br>
> [查看更多 站点2](http://liangei.gitee.io/limeui/#/clipper) <br>
> Q群：1169785031
> 图片裁剪，可用于图片头像等裁剪处理
## 平台兼容
@@ -12,9 +8,10 @@
| √ | √ | √ | 未测 | √ | √ | √ |
## 安装
在市场导入**[图片剪刀](https://ext.dcloud.net.cn/plugin?id=3594)uni_modules**版本的即可，无需`import`
插件市场导入即可
## 文档
[clipper](https://limex.qcoon.cn/components/clipper.html)
## 代码演示
### 基本用法
@@ -66,23 +63,13 @@ export default {
### 确定按钮颜色
样式变量名：`--clipper_confirm_color`, `nvue` 无效, `nvue`需要通过挂载全局样式表实现。
可放到全局样式的 `page` 里或节点的 `style`
```html
<l-clipper class="clipper" style="--clipper_confirm_color: linear-gradient(to right, #ff6034, #ee0a24)" />
```
```css
// css 中为组件设置 CSS 变量
.clipper {
--clipper_confirm_color: linear-gradient(to right, #ff6034, #ee0a24)
}
// 全局
page {
--clipper_confirm_color: linear-gradient(to right, #ff6034, #ee0a24)
}
<l-clipper class="clipper" confirm-bg-color="linear-gradient(to right, #ff6034, #ee0a24)" />
```
### 使用插槽
共五个插槽 `cancel` 取消按钮、 `photo` 选择图片按钮、 `rotate` 旋转按钮、 `confirm` 确定按钮和默认插槽。
@@ -108,38 +95,48 @@ page {
<view slot="rotate">旋转</view>
<view slot="confirm">确定</view>
<!-- 默认插槽 -->
<view class="tools">
<view>显示取消按钮
<switch :checked="isShowCancelBtn" @change="isShowCancelBtn = $event.target.value" />
</view>
<view>显示选择图片按钮
<switch :checked="isShowPhotoBtn" @change="isShowPhotoBtn = $event.target.value" />
</view>
<view>显示旋转按钮
<switch :checked="isShowRotateBtn" @change="isShowRotateBtn = $event.target.value" />
</view>
<view>显示确定按钮
<switch :checked="isShowConfirmBtn" @change="isShowConfirmBtn = $event.target.value" />
</view>
<view>锁定裁剪框宽度
<switch :checked="isLockWidth" @change="isLockWidth = $event.target.value" />
</view>
<view>锁定裁剪框高度
<switch :checked="isLockHeight" @change="isLockHeight = $event.target.value" />
</view>
<view>锁定裁剪框比例
<switch :checked="isLockRatio" @change="isLockRatio = $event.target.value" />
</view>
<view>限制移动范围
<switch :checked="isLimitMove" @change="isLimitMove = $event.target.value" />
</view>
<view>禁止缩放
<switch :checked="isDisableScale" @change="isDisableScale = $event.target.value" />
</view>
<view>禁止旋转
<switch :checked="isDisableRotate" @change="isDisableRotate = $event.target.value" />
</view>
<view class="tools" style="flex-direction: row; flex-wrap: wrap;">
<view>
<text style="color: white;">显示取消按钮{{isShowCancelBtn}}</text>
<switch :checked="isShowCancelBtn" @change="($event: UniSwitchChangeEvent) => {isShowCancelBtn = $event.detail.value}"/>
</view>
<view>
<text style="color: white;">显示选择图片按钮</text>
<switch :checked="isShowPhotoBtn" @change="($event: UniSwitchChangeEvent) => {isShowPhotoBtn = $event.detail.value}" />
</view>
<view>
<text style="color: white;">显示旋转按钮</text>
<switch :checked="isShowRotateBtn" @change="($event: UniSwitchChangeEvent) => {isShowRotateBtn = $event.detail.value}" />
</view>
<view>
<text style="color: white;">显示确定按钮</text>
<switch :checked="isShowConfirmBtn" @change="($event: UniSwitchChangeEvent) => {isShowConfirmBtn = $event.detail.value}" />
</view>
<view>
<text style="color: white;">锁定裁剪框宽度</text>
<switch :checked="isLockWidth" @change="($event: UniSwitchChangeEvent) => {isLockWidth = $event.detail.value}" />
</view>
<view>
<text style="color: white;">锁定裁剪框高度</text>
<switch :checked="isLockHeight" @change="($event: UniSwitchChangeEvent) => {isLockHeight = $event.detail.value}" />
</view>
<view>
<text style="color: white;">锁定裁剪框比例</text>
<switch :checked="isLockRatio" @change="($event: UniSwitchChangeEvent) => {isLockRatio = $event.detail.value}" />
</view>
<view>
<text style="color: white;">限制移动范围</text>
<switch :checked="isLimitMove" @change="($event: UniSwitchChangeEvent) => {isLimitMove = $event.detail.value}" />
</view>
<view>
<text style="color: white;">禁止缩放</text>
<switch :checked="isDisableScale" @change="($event: UniSwitchChangeEvent) => {isDisableScale = $event.detail.value}" />
</view>
<view>
<text style="color: white;">禁止旋转</text>
<switch :checked="isDisableRotate" @change="($event: UniSwitchChangeEvent) => {isDisableRotate = $event.detail.value}" />
</view>
</view>
</l-clipper>
<button @tap="show = true">裁剪</button>
```
@@ -191,6 +188,7 @@ export default {
| image-url | 图片路径 | <em>string</em> | |
| quality | 图片的质量，取值范围为 [0, 1]，不在范围内时当作1处理 | <em>number</em> | `1` |
| source | `{album: '从相册中选择'}`key为图片来源类型，value为选项说明 | <em>Object</em> | |
| fixedBoxWidth | 固定裁剪框宽度，作用是拖拽裁剪框后，依然保持输入的宽度。单位为 `rpx` | <em>number</em> | `-` |
| width | 裁剪框宽度，单位为 `rpx` | <em>number</em> | `400` |
| height | 裁剪框高度 | <em>number</em> | `400` |
| min-width | 裁剪框最小宽度 | <em>number</em> | `200` |
@@ -211,6 +209,7 @@ export default {
| is-show-rotate-btn | 是否显示转按钮 | <em>boolean</em> | `true` |
| is-show-confirm-btn | 是否显示确定按钮 | <em>boolean</em> | `true` |
| is-show-cancel-btn | 是否显示关闭按钮 | <em>boolean</em> | `true` |
| confirm-bg-color | 确定按钮背景色 | <em>string</em> | `` |