uni-app 开发 App 、 H5 横屏签名(基于lime-signature)

所用插件:lime-signature

使用到 CSS 特性

  1. 绝对定位
  2. transform 旋转
  3. transform-origin transform 原点

复习一下定位元素(相对定位、绝对定位、粘性定位)

代码#

html 复制代码
<template>
  <view class="signature-page">
    <view class="operate-box">
      <button @click="handleSignatureClick('back')">
        {{ $t("common.back") }}
      </button>
      <button @click="handleSignatureClick('clear')">
        {{ $t("maintenance.signatureBtns[0]") }}
      </button>
      <button @click="handleSignatureClick('undo')">
        {{ $t("maintenance.signatureBtns[1]") }}
      </button>
      <button @click="handleSignatureClick('save')">
        {{ $t("maintenance.signatureBtns[2]") }}
      </button>
    </view>
    <view class="canvas-box">
      <l-signature
        disableScroll
        backgroundColor="#fff"
        ref="signatureRef"
        :penColor="penColor"
        :penSize="penSize"
        :openSmooth="openSmooth"
        :landscape="IsLandscape"
      ></l-signature>
    </view>
  </view>
</template>

<script>
/**
 * 签名-横屏
 * @author demon3443002624@outlook.com
 * @version 1.0.0
 */
import { dataURLtoFile, changeUrl } from "@/common/utils.js";
const UPLOAD_FILE_URL_MAINTENANCE5 =
  changeUrl("/Lease/UploadLeaseMaintenanceNewV2File") + "?type=5";
export default {
  data() {
    return {
      type: null,
      penColor: "#000",
      penSize: 5,
      openSmooth: true,
      IsLandscape: false,
    };
  },
  onLoad(params) {
    const _this = this;
    const eventChannel = this.getOpenerEventChannel();
    // 监听acceptData事件,获取上一页通过eventChannel传送到当前页面的数据
    eventChannel.on("acceptData", function (data) {
      _this.type = data.type;
    });
    // 横屏签名
    this.IsLandscape = true;

    // #ifdef APP-PLUS
    // this.IsLandscape = true
    // plus.screen.lockOrientation('landscape-primary') // App 屏幕旋转
    // #endif
  },
  onUnload() {
    // #ifdef APP-PLUS
    // plus.screen.lockOrientation('portrait-primary') // App 屏幕旋转
    // #endif
  },
  methods: {
    handleSignatureClick(type) {
      if (type == "back") {
        uni.navigateBack();
        return;
      }
      if (type == "openSmooth") {
        this.openSmooth = !this.openSmooth;
        return;
      }
      const signatureRefStr = "signatureRef";
      if (type == "save") {
        this.$refs[signatureRefStr].canvasToTempFilePath({
          success: (res) => {
            // App 生成的图片路径, H5 生成的base64 处理方式不同
            const commonHandler = (resultInner) => {
              if (resultInner.statusCode === 200) {
                const responseDataJson = resultInner.data;
                if (responseDataJson) {
                  const responseData = JSON.parse(responseDataJson);
                  const eventChannel = this.getOpenerEventChannel();
                  // 向上一页通过事件传递数据
                  eventChannel.emit("editData", {
                    type: this.type,
                    url: responseData.Data,
                  });
                  uni.navigateBack();
                }
              }
            };

            // #ifdef H5
            uni.uploadFile({
              url: UPLOAD_FILE_URL_MAINTENANCE5,
              file: dataURLtoFile(res.tempFilePath, "file.png"), // ** 没有文件名,后台出错
              name: "file",
              success: (result) => {
                commonHandler(result);
              },
              fail: (err) => {},
            });
            // #endif
            // #ifdef APP
            uni.uploadFile({
              url: UPLOAD_FILE_URL_MAINTENANCE5,
              filePath: res.tempFilePath,
              name: "file",
              success: (result) => {
                commonHandler(result);
              },
              fail: (err) => {},
            });
            // #endif
          },
        });
        return;
      }
      if (this.$refs[signatureRefStr]) this.$refs[signatureRefStr][type]();
    },
  },
};
</script>

<style lang="scss">
$operate-btn-width: 100rpx;
.signature-page {
  margin-top: var(--status-bar-height);
  height: calc(
    100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom)
  );
  width: 100%;
  position: relative;
  .canvas-box {
    height: 100%;
    margin-left: $operate-btn-width;
  }

  .operate-box {
    position: absolute;
    display: flex;
    transform: rotate(90deg);
    transform-origin: top left;
    height: $operate-btn-width;
    width: calc(
      100vh - var(--window-top) - var(--status-bar-height) -
        var(--window-bottom)
    );
    top: 0;
    left: $operate-btn-width;
    z-index: 1;
    uni-button {
      flex: 1;
      margin: 5rpx 10rpx;
    }
  }
}
</style>

结果


相关推荐
Bellafu666几秒前
selenium 常用xpath写法
前端·selenium·测试工具
superxxd5 分钟前
跨平台音频IO处理库libsoundio实践
开发语言·qt·音视频
_OP_CHEN2 小时前
C++基础:(十二)list类的基础使用
开发语言·数据结构·c++·stl·list类·list核心接口·list底层原理
2501_915921433 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者3 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls4 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks