js特效网站模板,开展网站建设,中国室内设计网站官网,河南工程建筑信息网描述
H5#xff1a;1. 模拟横屏。2. 提示信息、模拟态也通过模拟横屏显示 小程序#xff1a;1. 自动横屏展示 APP#xff1a;1. 自动横屏展示
rn-signature 个性签名组件 组件名 rn-signature 签名组件兼容H5、APP、小程序。横屏签名效果。 效果展示
h5端 小程序端 APP 端…描述
H51. 模拟横屏。2. 提示信息、模拟态也通过模拟横屏显示 小程序1. 自动横屏展示 APP1. 自动横屏展示
rn-signature 个性签名组件 组件名 rn-signature 签名组件兼容H5、APP、小程序。横屏签名效果。 效果展示
h5端 小程序端 APP 端 使用方式
首先在【插件市场】进行下载引入
view stylewidth: 100%;display: flex;justify-content: center;align-items: center; margin: 20px 0; flex-direction: column;rn-signature :optionsoptions :datadata /view stylemargin: 10rpx;/viewrn-signature :optionsoptions :datadata1 /
/view配置
script
export default {data() {return {options: {art:{enable: true,},clear:{show: true,slot: false,customClass: btn_clear_wrap},placeholder: {content: 请设置个性签名,},style: { //设置签名容器宽高width: 600rpx,height: 300rpx,borderRadius: 20rpx}},data: {url: ,//签名生成的图片地址。}}}
}
/scriptoptions 配置
属性说明类型默认值可选值clear清除按钮相关配置项Objectclear配置项-placeholder占位符提示信息Objectplaceholder配置项-style个性签名样式配置项Objectstyle配置项-art艺术字Objectart配置项- clear配置项
属性说明类型默认值可选值show是否显示清除按钮Booleantrue-slot清除按钮插槽名称“clearSlot”Booleanfalse-customClass自定义类名需配合slot 使用Stringbtn_clear_wrap- 自定义类名使用方式 ::v-deep .btn_clear_wrap {}art配置项
属性说明类型默认值可选值enable是否启用Booleanfalse- placeholder 配置项
属性说明类型默认值可选值content提示内容String请设置个性签名-fontSize字体大小Number40-textBaseline字体对其方式Stringmiddle-textAlign对其方式Stringcenter-fillStyle字体颜色String#888- style 配置项
属性说明类型默认值可选值width宽度String100%-height高度String300rpx-background背景色String#fff-border边框String1px solid-borderRadius圆角String20rpx-–其他样式属性都可以—----—---- Slot 插槽
名称说明clearSlot清除按钮插槽用于清除生成好的签名图片
rn-signature 插件市场下载安装
地址rn-signature
工具-插件安装-前往插件市场安装 全部-搜索-rn-signature 下载插件并导出HBuilderX 4. 点击注册
测试用例
templateview classsub_car_pollingview stylewidth: 100%;display: flex;justify-content: center;align-items: center; margin: 20px 0; flex-direction: column;rn-signature :optionsoptions :datadata /view stylemargin: 10rpx;/viewrn-signature :optionsoptions :datadata1/rn-signature/view/view
/templatescriptexport default {data() {return {options: {clear: {show: true,slot: false,customClass: btn_clear_wrap},placeholder: {content: 请设置个性签名,},style: { //设置签名容器宽高width: 600rpx,height: 300rpx,border: none,box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4)}},data: {url: },data1: {url: }};},onLoad() {},methods: {}}
/scriptstyle langscss scoped.sub_car_polling {}::v-deep .btn_clear_wrap {}
/style效果图
