提交 54546608 编写于 作者: VK1688's avatar VK1688

优化组件属性的可选值的代码提示

上级 f193aa57
<template>
<view>
<u-button @click="openMaterials">弹出popup</u-button>
<view v-for="(item, index) in 108" :key="index">{{ item }}</view>
<!-- 放入材料弹出层 -->
<u-popup class="materials-popup" v-model="showMaterials" mode="bottom" border-radius="40" :closeable="true" height="1400" :mask="true" :safe-area-inset-bottom="true">
<view class="popup-container">
<view class="popup-title">
<text>请选择所需的材料藏品</text>
</view>
<view class="popup-content">
<scroll-view scroll-y="true" style="height: 1185rpx;" @touchmove.stop.prevent>
<view class="content-item" v-for="(item, index) in 18" :key="index">
<text class="item-name">藏品名称</text>
<text class="item-num">0/2</text>
<button class="item-btn">去获取</button>
</view>
</scroll-view>
</view>
</view>
<view class="popup-bottom" @click="showMaterials=false">
<text>取消</text>
</view>
</u-popup>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 放入材料弹出层
const showMaterials = ref(false)
const openMaterials = () => {
showMaterials.value = true
}
</script>
<style lang="less">
</style>
...@@ -42,8 +42,15 @@ let base64Avatar = ...@@ -42,8 +42,15 @@ let base64Avatar =
* @property {String} bg-color 背景颜色,一般显示文字时用(默认#ffffff) * @property {String} bg-color 背景颜色,一般显示文字时用(默认#ffffff)
* @property {String} src 头像路径,如加载失败,将会显示默认头像 * @property {String} src 头像路径,如加载失败,将会显示默认头像
* @property {String Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值,单位rpx(默认default) * @property {String Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值,单位rpx(默认default)
* @value large 大
* @value default 常规
* @value mini 小
* @property {String} mode 显示类型,见上方说明(默认circle) * @property {String} mode 显示类型,见上方说明(默认circle)
* @value circle 圆型
* @value square 方型
* @property {String} sex-icon 性别图标,man-男,woman-女(默认man) * @property {String} sex-icon 性别图标,man-男,woman-女(默认man)
* @value man 男
* @value woman 女
* @property {String} level-icon 等级图标(默认level) * @property {String} level-icon 等级图标(默认level)
* @property {String} sex-bg-color 性别图标背景颜色 * @property {String} sex-bg-color 性别图标背景颜色
* @property {String} level-bg-color 等级图标背景颜色 * @property {String} level-bg-color 等级图标背景颜色
......
...@@ -60,16 +60,54 @@ ...@@ -60,16 +60,54 @@
* @description Button 按钮 * @description Button 按钮
* @tutorial https://www.uviewui.com/components/button.html * @tutorial https://www.uviewui.com/components/button.html
* @property {String} size 按钮的大小 * @property {String} size 按钮的大小
* @value large 大
* @value normal 常规
* @value mini 小
* @property {Boolean} ripple 是否开启点击水波纹效果 * @property {Boolean} ripple 是否开启点击水波纹效果
* @property {String} ripple-bg-color 水波纹的背景色,ripple为true时有效 * @property {String} ripple-bg-color 水波纹的背景色,ripple为true时有效
* @property {String} type 按钮的样式类型 * @property {String} type 按钮的样式类型
* @value info 默认按钮
* @value primary 主要按钮
* @value error 危险按钮
* @value warning 警告按钮
* @value success 成功按钮
* @property {Boolean} plain 按钮是否镂空,背景色透明 * @property {Boolean} plain 按钮是否镂空,背景色透明
* @property {Boolean} disabled 是否禁用 * @property {Boolean} disabled 是否禁用
* @property {Boolean} hair-line 是否显示按钮的细边框(默认true) * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
* @property {Boolean} shape 按钮外观形状,见文档说明 * @property {Boolean} shape 按钮外观形状,见文档说明
* @value square 矩形
* @value circle 圆角
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈) * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈)
* @property {String} form-type 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件 * @property {String} form-type 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
* @property {String} open-type 开放能力 * @property {String} openType 开放能力
* @value feedback 通用 - 打开“意见反馈”页面,用户可提交反馈内容并上传日志(App、微信小程序、QQ小程序)
* @value share 通用 - 触发用户转发(微信小程序、百度小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序)
* @value getUserInfo 通用 - 获取用户信息(微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序)
* @value contact 通用 - 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 回调中获得具体信息(微信小程序、百度小程序、快手小程序、字节小程序)
* @value getPhoneNumber 通用 - 获取用户手机号(微信小程序、百度小程序、字节跳动小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆)
* @value launchApp 通用 - 小程序中打开APP,可以通过app-parameter属性设定向APP传的参数 (微信小程序、QQ小程序、快手小程序、京东小程序)
* @value openSetting 通用 - 打开授权设置页(微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序)
* @value chooseAvatar 微信小程序 - 获取用户头像
* @value uploadDouyinVideo 抖音小程序 - 发布抖音视频
* @value im 抖音小程序 - 跳转到抖音IM客服
* @value getAuthorize 支付宝小程序 - 授权
* @value lifestyle 支付宝小程序 - 关注生活号
* @value contactShare 支付宝小程序 - 分享到通讯录好友
* @value openGroupProfile QQ小程序 - 呼起QQ群资料卡页面,可以通过group-id属性设定需要打开的群资料卡的群号,同时manifest.json中必须配置groupIdList
* @value openGuildProfile QQ小程序 - 呼起频道页面,可以通过guild-id属性设定需要打开的频道ID
* @value openPublicProfile QQ小程序 - 打开公众号资料卡,可以通过public-id属性设定需要打开的公众号资料卡的号码,同时manifest.json中必须配置publicIdList
* @value shareMessageToFriend QQ小程序 - 在自定义开放数据域组件中,向指定好友发起分享据
* @value addFriend QQ小程序 - 添加好友, 对方需要通过该小程序进行授权,允许被加好友后才能调用成功用户授权
* @value addColorSign QQ小程序 - 添加彩签,点击后添加状态有用户提示,无回调
* @value addGroupApp QQ小程序 - 添加群应用(只有管理员或群主有权操作),添加后给button绑定@addgroupapp事件接收回调数据
* @value addToFavorites QQ小程序 - 收藏当前页面,点击按钮后会触发Page.onAddToFavorites方法
* @value chooseAddress 百度小程序 - 选择用户收货地址
* @value chooseInvoiceTitle 百度小程序 - 选择用户发票抬头
* @value login 百度小程序 - 登录,可以从@login回调中确认是否登录成功
* @value subscribe 百度小程序 - 订阅类模板消息,需要用户授权才可发送
* @value favorite 快手小程序 - 触发用户收藏
* @value watchLater 快手小程序 - 触发用户稍后再看
* @value openProfile 快手小程序 - 触发打开用户主页
* @property {String} data-name 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取 * @property {String} data-name 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
* @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果(App-nvue 平台暂不支持) * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果(App-nvue 平台暂不支持)
* @property {Number} hover-start-time 按住后多久出现点击态,单位毫秒 * @property {Number} hover-start-time 按住后多久出现点击态,单位毫秒
......
...@@ -44,6 +44,20 @@ ...@@ -44,6 +44,20 @@
* @tutorial https://uviewui.com/components/image.html * @tutorial https://uviewui.com/components/image.html
* @property {String} src 图片地址 * @property {String} src 图片地址
* @property {String} mode 裁剪模式,见官网说明 * @property {String} mode 裁剪模式,见官网说明
* @value scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
* @value aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
* @value aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
* @value widthFix 宽度不变,高度自动变化,保持原图宽高比不变
* @value heightFix 高度不变,宽度自动变化,保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
* @value top 不缩放图片,只显示图片的顶部区域
* @value bottom 不缩放图片,只显示图片的底部区域
* @value center 不缩放图片,只显示图片的中间区域
* @value left 不缩放图片,只显示图片的左边区域
* @value right 不缩放图片,只显示图片的右边区域
* @value top left 不缩放图片,只显示图片的左上边区域
* @value top right 不缩放图片,只显示图片的右上边区域
* @value bottom left 不缩放图片,只显示图片的左下边区域
* @value bottom right 不缩放图片,只显示图片的右下边区域
* @property {String | Number} width 宽度,单位任意,如果为数值,则为rpx单位(默认100%) * @property {String | Number} width 宽度,单位任意,如果为数值,则为rpx单位(默认100%)
* @property {String | Number} height 高度,单位任意,如果为数值,则为rpx单位(默认 auto) * @property {String | Number} height 高度,单位任意,如果为数值,则为rpx单位(默认 auto)
* @property {String} shape 图片形状,circle-圆形,square-方形(默认square) * @property {String} shape 图片形状,circle-圆形,square-方形(默认square)
......
...@@ -98,6 +98,11 @@ import Emitter from "../../libs/util/emitter.js"; ...@@ -98,6 +98,11 @@ import Emitter from "../../libs/util/emitter.js";
* @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。 * @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。
* @tutorial http://uviewui.com/components/input.html * @tutorial http://uviewui.com/components/input.html
* @property {String} type 模式选择,见官网说明 * @property {String} type 模式选择,见官网说明
* @value text 文本输入键盘
* @value number 数字输入键盘
* @value idcard 身份证输入键盘
* @value digit 带小数点的数字键盘
* @value password 密码输入键盘
* @property {Boolean} clearable 是否显示右侧的清除图标(默认true) * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
* @property {} v-model 用于双向绑定输入框的值 * @property {} v-model 用于双向绑定输入框的值
* @property {String} input-align 输入框文字的对齐方式(默认left) * @property {String} input-align 输入框文字的对齐方式(默认left)
......
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
* @description 警此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。 * @description 警此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
* @tutorial https://www.uviewui.com/components/loading.html * @tutorial https://www.uviewui.com/components/loading.html
* @property {String} mode 模式选择,见官网说明(默认circle) * @property {String} mode 模式选择,见官网说明(默认circle)
* @value circle 圆型
* @value flower 花型
* @property {String} color 动画活动区域的颜色,只对 mode = flower 模式有效(默认#c7c7c7) * @property {String} color 动画活动区域的颜色,只对 mode = flower 模式有效(默认#c7c7c7)
* @property {String Number} size 加载图标的大小,单位rpx(默认34) * @property {String Number} size 加载图标的大小,单位rpx(默认34)
* @property {Boolean} show 是否显示动画(默认true) * @property {Boolean} show 是否显示动画(默认true)
......
...@@ -51,6 +51,11 @@ ...@@ -51,6 +51,11 @@
* @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义 * @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html * @tutorial https://www.uviewui.com/components/popup.html
* @property {String} mode 弹出方向(默认left) * @property {String} mode 弹出方向(默认left)
* @value left 左侧弹出
* @value top 顶部弹出
* @value right 右侧弹出
* @value bottom 底部弹出
* @value center 中间弹出
* @property {Boolean} mask 是否显示遮罩(默认true) * @property {Boolean} mask 是否显示遮罩(默认true)
* @property {Stringr | Number} length mode=left | 见官网说明(默认auto) * @property {Stringr | Number} length mode=left | 见官网说明(默认auto)
* @property {Boolean} zoom 是否开启缩放动画,只在mode为center时有效(默认true) * @property {Boolean} zoom 是否开启缩放动画,只在mode为center时有效(默认true)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册