Commit 6740667d authored by 王博文's avatar 王博文

删除修改信息,同步主分支

parent ba8b6ba8
{
"easycom": {
"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
"path": "pages/example/components",
"style": {
"navigationBarTitleText": "组件"
}
},
// avatarCropper-头像裁剪
{
"path": "uview/components/u-avatar-cropper/u-avatar-cropper",
"style": {
"navigationBarTitleText": "头像裁剪",
"navigationBarBackgroundColor": "#000000"
}
},
// 演示-工具
{
"path": "pages/example/js",
"style": {
"navigationBarTitleText": "工具"
}
},
// 演示-模板
{
"path": "pages/example/template",
"style": {
"navigationBarTitleText": "模板"
}
}
,{
"path" : "pages/componentsC/model/index",
"style" : {}
}
],
"subPackages": [{
"root": "pages/componentsC",
"pages": [
// test-测试
{
"path": "test/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"navigationStyle": "custom" ,// 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色
}
},
// gap-间隔槽
{
"path": "gap/index",
"style": {
"navigationBarTitleText": "gap-间隔槽"
}
},
// subsection分段器
{
"path": "subsection/index",
"style": {
"navigationBarTitleText": "subsection-分段器"
}
},
// section 查看更多
{
"path": "section/index",
"style": {
"navigationBarTitleText": "section-查看更多"
}
},
// link链接
{
"path": "link/index",
"style": {
"navigationBarTitleText": "link-链接"
}
},
// mask遮罩层
{
"path": "mask/index",
"style": {
"navigationBarTitleText": "mask-遮罩层"
}
},
// countTo数字滚动
{
"path": "countTo/index",
"style": {
"navigationBarTitleText": "countTo-数字滚动"
}
},
// color颜色
{
"path": "color/index",
"style": {
"navigationBarTitleText": "color-颜色"
}
},
// countDown倒计时
{
"path": "countDown/index",
"style": {
"navigationBarTitleText": "countDown-倒计时"
}
},
// progress进度条
{
"path": "progress/index",
"style": {
"navigationBarTitleText": "progress-进度条"
}
},
// alertTips警告提示
{
"path": "alertTips/index",
"style": {
"navigationBarTitleText": "alertTips-警告提示"
}
},
// badge 徽标数
{
"path": "badge/index",
"style": {
"navigationBarTitleText": "badge-徽标数"
}
},
// button按钮
{
"path": "button/index",
"style": {
"navigationBarTitleText": "button-按钮"
}
},
// collapse折叠面板
{
"path": "collapse/index",
"style": {
"navigationBarTitleText": "collapse-折叠面板"
}
},
// actionSheet操作菜单
{
"path": "actionSheet/index",
"style": {
"navigationBarTitleText": "actionSheet-操作菜单"
}
},
// messageInput验证码输入
{
"path": "messageInput/index",
"style": {
"navigationBarTitleText": "messageInput-验证码输入"
}
},
// popup弹窗
{
"path": "popup/index",
"style": {
"navigationBarTitleText": "popup-弹窗"
}
},
// listCell
{
"path": "cell/index",
"style": {
"navigationBarTitleText": "listCell-列表"
}
},
// numberBox数字输入框
{
"path": "numberBox/index",
"style": {
"navigationBarTitleText": "numberBox-步进器"
}
},
// grid宫格布局
{
"path": "grid/index",
"style": {
"navigationBarTitleText": "grid-宫格布局"
}
},
// layout栅格布局
{
"path": "layout/index",
"style": {
"navigationBarTitleText": "layout-栅格布局"
}
},
// 加载更多
{
"path": "loadmore/index",
"style": {
"navigationBarTitleText": "loadmore-加载更多"
}
}
]
},
{
"root": "pages/template",
"pages": [
// mallMenu商城分类
{
"path": "mallMenu/index2",
"style": {
"navigationBarTitleText": "mallMenu-商城分类"
}
},
// mallMenu商城分类
{
"path": "mallMenu/index1",
"style": {
"navigationBarTitleText": "mallMenu-商城分类"
}
},
// coupon优惠券
{
"path": "coupon/index",
"style": {
"navigationBarTitleText": "coupon-优惠券"
}
},
{
"path": "login/index",
"style": {
"navigationBarTitleText": "美团登录"
}
},
// SubmitBar提交订单栏
{
"path": "submitBar/index",
"style": {
"navigationBarTitleText": "提交订单栏"
}
},
// comment评论
{
"path": "comment/index",
"style": {
"navigationBarTitleText": "评论"
}
},
// comment评论详情
{
"path": "comment/reply",
"style": {
"navigationBarTitleText": "评论详情"
}
},
// order订单
{
"path": "order/index",
"style": {
"navigationBarTitleText": "订单"
}
},
// login登录获取验证码
{
"path": "login/code",
"style": {
"navigationBarTitleText": "登录获取验证码"
}
},
// address用户地址
{
"path": "address/index",
"style": {
"navigationBarTitleText": "用户地址"
}
},
// address添加用户地址
{
"path": "address/addSite",
"style": {
"navigationBarTitleText": "添加用户地址"
}
}
]
},
{
"root": "pages/library",
"pages": [
// getRect-元素节点
{
"path": "getRect/index",
"style": {
"navigationBarTitleText": "getRect-元素节点"
}
},
// timeFrom-多久之前
{
"path": "timeFrom/index",
"style": {
"navigationBarTitleText": "timeFrom-多久之前"
}
},
// globalData-全局变量
{
"path": "globalVariable/globalData",
"style": {
"navigationBarTitleText": "globalData-全局变量"
}
},
// prototype-全局变量
{
"path": "globalVariable/prototype",
"style": {
"navigationBarTitleText": "prototype-全局变量"
}
},
// vuex-全局变量
{
"path": "globalVariable/vuex",
"style": {
"navigationBarTitleText": "vuex-全局变量"
}
},
// globalVariable-全局变量
{
"path": "globalVariable/index",
"style": {
"navigationBarTitleText": "globalVariable-全局变量"
}
},
// http-请求
{
"path": "http/index",
"style": {
"navigationBarTitleText": "http-请求"
}
},
// test-规则验证
{
"path": "test/index",
"style": {
"navigationBarTitleText": "test-规则验证"
}
},
// mpShare-小程序分享
{
"path": "mpShare/index",
"style": {
"navigationBarTitleText": "mpShare-小程序分享"
}
},
// color-JS调用颜色
{
"path": "color/index",
"style": {
"navigationBarTitleText": "color-JS调用颜色"
}
},
// trim-去除空格
{
"path": "trim/index",
"style": {
"navigationBarTitleText": "trim-去除空格"
}
},
// random-随机数生成
{
"path": "random/index",
"style": {
"navigationBarTitleText": "random-随机数生成"
}
},
// md5加密
{
"path": "md5/index",
"style": {
"navigationBarTitleText": "md5-加密"
}
},
// colorSwitch颜色转换
{
"path": "colorSwitch/index",
"style": {
"navigationBarTitleText": "colorSwitch-颜色转换"
}
},
// randomArray数组乱序
{
"path": "randomArray/index",
"style": {
"navigationBarTitleText": "randomArray-数组乱序"
}
},
// guid全局唯一标识符
{
"path": "guid/index",
"style": {
"navigationBarTitleText": "guid-全局唯一标识符"
}
},
// timeFormat时间格式化
{
"path": "timeFormat/index",
"style": {
"navigationBarTitleText": "timeFormat-时间格式化"
}
}, // route-路由
{
"path": "route/index",
"style": {
"navigationBarTitleText": "route-路由"
}
},
// route-路由跳转
{
"path": "route/routeTo",
"style": {
"navigationBarTitleText": "route-路由跳转"
}
},
// queryParams-对象转URL参数
{
"path": "queryParams/index",
"style": {
"navigationBarTitleText": "queryParams-对象转URL参数"
}
}
]
},
{
"root": "pages/componentsA",
"pages": [
// navbar-自定义导航栏
{
"path": "navbar/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"navigationStyle": "custom" ,// 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色
}
},
// field-输入框
{
"path": "field/index",
"style": {
"navigationBarTitleText": "field-输入框"
}
},
// indexList索引列表
{
"path": "indexList/index",
"style": {
"navigationBarTitleText": "indexList-索引列表"
}
},
// empty内容为空
{
"path": "empty/index",
"style": {
"navigationBarTitleText": "empty-内容为空"
}
},
// avatarCropper-头像裁剪
{
"path": "avatarCropper/index",
"style": {
"navigationBarTitleText": "avatarCropper-头像裁剪"
}
}, // noNetwork没有网络
{
"path": "noNetwork/index",
"style": {
"navigationBarTitleText": "noNetwork-没有网络"
}
}, // icon字体图标
{
"path": "icon/index",
"style": {
"navigationBarTitleText": "icon-字体图标"
}
}, // avatar-用户头像展示
{
"path": "avatar/index",
"style": {
"navigationBarTitleText": "avatar-用户头像展示"
}
}, // keyboard键盘
{
"path": "keyboard/index",
"style": {
"navigationBarTitleText": "keyboard-键盘"
}
}, // 图片懒加载
{
"path": "lazyLoad/index",
"style": {
"navigationBarTitleText": "lazyLoad-懒加载"
}
},
// tabs切换
{
"path": "tabs/index",
"style": {
"navigationBarTitleText": "Tabs-切换"
}
},
// tag标签
{
"path": "tag/index",
"style": {
"navigationBarTitleText": "tag-标签"
}
},
// timeLine时间轴
{
"path": "timeLine/index",
"style": {
"navigationBarTitleText": "timeLine-时间轴"
}
},
// toast轻提示
{
"path": "toast/index",
"style": {
"navigationBarTitleText": "toast-轻提示"
}
},
// topTips消息提示
{
"path": "topTips/index",
"style": {
"navigationBarTitleText": "topTips-消息提示"
}
},
// Code-验证码倒计时
{
"path": "verificationCode/index",
"style": {
"navigationBarTitleText": "Code-验证码倒计时"
}
}
]
},
{
"root": "pages/componentsB",
"pages": [
// divider-分割线
{
"path": "divider/index",
"style": {
"navigationBarTitleText": "divider-分割线"
}
},
// picker选择器
{
"path": "picker/index",
"style": {
"navigationBarTitleText": "picker-选择器"
}
}, // noticeBar通告栏
{
"path": "noticeBar/index",
"style": {
"navigationBarTitleText": "noticeBar-通告栏"
}
},
// checkbox-复选框
{
"path": "checkbox/index",
"style": {
"navigationBarTitleText": "checkbox-复选框"
}
},
// radio-单选框
{
"path": "radio/index",
"style": {
"navigationBarTitleText": "radio-单选框"
}
},
// loading-加载动画
{
"path": "loading/index",
"style": {
"navigationBarTitleText": "loading-加载动画"
}
},
// switch-开关选择器
{
"path": "switch/index",
"style": {
"navigationBarTitleText": "switch-开关选择器"
}
},
// 骨架屏
{
"path": "skeleton/index",
"style": {
"navigationBarTitleText": "skeleton-骨架屏"
}
}, // upload上传
{
"path": "upload/index",
"style": {
"navigationBarTitleText": "upload-上传"
}
}, // validation表单验证
{
"path": "validation/index",
"style": {
"navigationBarTitleText": "validation-表单验证"
}
}, // waterfall瀑布流
{
"path": "waterfall/index",
"style": {
"navigationBarTitleText": "waterfall-瀑布流"
}
},
// table表格
{
"path": "table/index",
"style": {
"navigationBarTitleText": "table-表格"
}
},
// rate评分
{
"path": "rate/index",
"style": {
"navigationBarTitleText": "rate-评分"
}
},
// readMore显示更多
{
"path": "readMore/index",
"style": {
"navigationBarTitleText": "readMore-查看更多"
}
},
// search搜索框
{
"path": "search/index",
"style": {
"navigationBarTitleText": "search-搜索框"
}
},
// steps步骤条
{
"path": "steps/index",
"style": {
"navigationBarTitleText": "steps-步骤条"
}
},
// sticky吸顶
{
"path": "sticky/index",
"style": {
"navigationBarTitleText": "sticky-吸顶"
}
},
// swiper轮播图
{
"path": "swiper/index",
"style": {
"navigationBarTitleText": "swiper-轮播图"
}
},
// swipeAction-左滑删除
{
"path": "swipeAction/index",
"style": {
"navigationBarTitleText": "swipeAction-左滑删除"
}
}
]
}
],
"preloadRule": {
"pages/example/components": {
"network": "all",
"packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF"
},
"tabBar": {
"color": "#909399",
"selectedColor": "#303133",
"backgroundColor": "#FFFFFF",
// #ifdef APP-PLUS
"blurEffect": "light",
// #endif
"borderStyle": "black",
"list": [{
"pagePath": "pages/example/components",
"iconPath": "static/uview/example/component.png",
"selectedIconPath": "static/uview/example/component_select.png",
"text": "组件"
},
{
"pagePath": "pages/example/js",
"iconPath": "static/uview/example/js.png",
"selectedIconPath": "static/uview/example/js_select.png",
"text": "工具"
},
{
"pagePath": "pages/example/template",
"iconPath": "static/uview/example/template.png",
"selectedIconPath": "static/uview/example/template_select.png",
"text": "模板"
}
]
}
}
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<view class="u-badge-wrap"><u-badge :is-center="isCenter" :type="type" :count="count" :is-dot="isDot" :offset="offset" :size="size"></u-badge></view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">数值显示</view>
<u-subsection current="1" vibrateShort :list="[0, 8, 15, 106, 209]" @change="countChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主题选择</view>
<u-subsection vibrateShort current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示点</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">尺寸</view>
<u-subsection vibrateShort :list="['default', 'mini']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">位置偏移</view>
<u-subsection vibrateShort current="1" :list="['[20, 20]', '[-8, -8]', '[-20, -20]']" @change="offsetChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">中心点与父右上角重合</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="isCenterChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
count: 8,
type: 'error',
isDot: false,
offset: [-8, -8],
size: 'default',
isCenter: false
};
},
methods: {
countChange(index) {
this.count = index == 0 ? 0 : index == 1 ? 8 : index == 2 ? 15 : index == 3 ? 106 : 209;
},
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
},
sizeChange(index) {
this.size = index == 0 ? 'default' : 'mini';
},
isDotChange(index) {
this.isDot = index == 0 ? true : false;
},
offsetChange(index) {
this.offset = index == 0 ? [20, 20] : index == 1 ? [-8, -8] : [-20, -20];
},
isCenterChange(index) {
this.isCenter = index == 0 ? true : false;
}
}
};
</script>
<style lang="scss" scoped>
.u-badge-wrap {
width: 60px;
height: 60px;
border-radius: 6px;
background-color: $u-light-color;
position: relative;
margin: auto;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
<u-modal @ :show="show" @close="show = false" @confirm="show = false" :show-title="showTitle" :zoom="zoom" :duration="duration">
<!-- <view class="warp" v-if="content"><view class="rect" @tap.stop></view></view> -->
</u-modal>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示标题</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">动画时长(ms)</view>
<u-subsection vibrateShort current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
zoom: false,
duration: 300,
content: false,
showTitle:false
};
},
computed: {
current() {
return this.show ? 0 : 1;
}
},
methods: {
showChange(index) {
this.show = index == 0 ? true : false;
},
titleChange(index) {
this.showTitle = index == 0 ? true : false;
this.show = true;
},
durationChange(index) {
this.duration = index == 0 ? 100 : index == 1 ? 300 : 800;
this.show = true;
},
contentChange(index) {
this.content = index == 0 ? true : false;
this.show = true;
}
}
};
</script>
<style scoped lang="scss">
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
</style>
export default [{
groupName: '基础组件',
list: [{
path: '/pages/componentsC/color/index',
icon: 'color',
title: 'Color 色彩',
}, {
path: '/pages/componentsA/icon/index',
icon: 'icon',
title: 'Icon 图标',
}, {
path: '/pages/componentsC/button/index',
icon: 'button',
title: 'Button 按钮',
}, {
path: '/pages/componentsC/layout/index',
icon: 'layout',
title: 'Layout 布局',
}, {
path: '/pages/componentsC/cell/index',
icon: 'cell',
title: 'Cell 单元格',
}, {
path: '/pages/componentsC/badge/index',
icon: 'badge',
title: 'Badge 徽标数',
}, {
path: '/pages/componentsA/tag/index',
icon: 'tag',
title: 'Tag 标签',
}]
},
{
groupName: '表单组件',
list: [{
path: '/pages/componentsA/keyboard/index',
icon: 'keyboard',
title: 'Keyboard 键盘',
}, {
path: '/pages/componentsB/picker/index',
icon: 'picker',
title: 'Picker 选择器',
}, {
path: '/pages/componentsB/rate/index',
icon: 'rate',
title: 'Rate 评分',
}, {
path: '/pages/componentsB/search/index',
icon: 'search',
title: 'Search 搜索',
}, {
path: '/pages/componentsC/numberBox/index',
icon: 'numberBox',
title: 'NumberBox 步进器',
}, {
path: '/pages/componentsB/upload/index',
icon: 'upload',
title: 'Upload 上传',
}, {
path: '/pages/componentsA/verificationCode/index',
icon: 'verificationCode',
title: 'VerificationCode 验证码倒计时',
}, {
path: '/pages/componentsA/field/index',
icon: 'field',
title: 'Field 输入框',
}, {
path: '/pages/componentsB/checkbox/index',
icon: 'checkbox',
title: 'Checkbox 复选框',
}, {
path: '/pages/componentsB/radio/index',
icon: 'radio',
title: 'Radio 单选框',
}, {
path: '/pages/componentsB/switch/index',
icon: 'switch',
title: 'Switch 开关选择器',
}]
}, {
groupName: '数据组件',
list: [{
path: '/pages/componentsC/progress/index',
icon: 'progress',
title: 'Progress 进度条',
}, {
path: '/pages/componentsB/table/index',
icon: 'table',
title: 'Table 表格',
}, {
path: '/pages/componentsC/countDown/index',
icon: 'countDown',
title: 'CountDown 倒计时',
}, {
path: '/pages/componentsC/countTo/index',
icon: 'countTo',
title: 'CountTo 数字滚动',
}]
}, {
groupName: '反馈组件',
list: [{
path: '/pages/componentsC/actionSheet/index',
icon: 'actionSheet',
title: 'ActionSheet 操作菜单',
}, {
path: '/pages/componentsC/alertTips/index',
icon: 'alertTips',
title: 'AlertTips 警告提示',
}, {
path: '/pages/componentsA/toast/index',
icon: 'toast',
title: 'Toast 消息提示',
}, {
path: '/pages/componentsB/noticeBar/index',
icon: 'noticeBar',
title: 'NoticeBar 滚动通知',
}, {
path: '/pages/componentsA/topTips/index',
icon: 'topTips',
title: 'TopTips 顶部提示',
}, {
path: '/pages/componentsB/swipeAction/index',
icon: 'swipeAction',
title: 'SwipeAction 滑动单元格',
}, {
path: '/pages/componentsC/collapse/index',
icon: 'collapse',
title: 'Collapse 折叠面板',
}, {
path: '/pages/componentsC/popup/index',
icon: 'popup',
title: 'Popup 弹出层',
}]
}, {
groupName: '布局组件',
list: [{
path: '/pages/componentsC/mask/index',
icon: 'mask',
title: 'Mask 遮罩层',
}, {
path: '/pages/componentsC/model/index',
icon: 'model',
title: 'Model 弹窗',
},{
path: '/pages/componentsA/noNetwork/index',
icon: 'noNetwork',
title: 'NoNetwork 无网络提示',
}, {
path: '/pages/componentsC/grid/index',
icon: 'grid',
title: 'Grid 宫格布局',
}, {
path: '/pages/componentsB/swiper/index',
icon: 'swiper',
title: 'Swiper 轮播图',
}, {
path: '/pages/componentsA/timeLine/index',
icon: 'timeLine',
title: 'TimeLine 时间轴',
}, {
path: '/pages/componentsB/skeleton/index',
icon: 'skeleton',
title: 'Skeleton 骨架屏',
}, {
path: '/pages/componentsB/sticky/index',
icon: 'sticky',
title: 'Sticky 吸顶',
}, {
path: '/pages/componentsB/waterfall/index',
icon: 'waterfall',
title: 'Waterfall 瀑布流',
}, {
path: '/pages/componentsB/divider/index',
icon: 'divider',
title: 'Divider 分割线',
}]
}, {
groupName: '导航组件',
list: [{
path: '/pages/componentsA/navbar/index',
icon: 'navbar',
title: 'Navbar 导航栏',
},{
path: '/pages/componentsA/tabs/index',
icon: 'tabs',
title: 'Tabs 标签',
},{
path: '/pages/template/order/index',
icon: 'tabsSwiper',
title: 'TabsSwiper 全屏选项卡',
}, {
path: '/pages/componentsC/subsection/index',
icon: 'subsection',
title: 'Subsection 分段器',
}, {
path: '/pages/componentsA/indexList/index',
icon: 'indexList',
title: 'IndexList 索引列表',
}, {
path: '/pages/componentsB/steps/index',
icon: 'steps',
title: 'Steps 步骤条',
}, {
path: '/pages/componentsA/empty/index',
icon: 'empty',
title: 'Empty 内容为空',
}, {
path: '/pages/componentsC/section/index',
icon: 'section',
title: 'Section 查看更多',
}]
}, {
groupName: '其他组件',
list: [{
path: '/pages/componentsC/messageInput/index',
icon: 'messageInput',
title: 'MessageInput 验证码输入',
}, {
path: '/pages/componentsA/avatarCropper/index',
icon: 'avatarCropper',
title: 'AvatarCropper 头像裁剪',
}, {
path: '/pages/componentsC/loadmore/index',
icon: 'loadmore',
title: 'Loadmore 加载更多',
}, {
path: '/pages/componentsB/readMore/index',
icon: 'readMore',
title: 'ReadMore 展开阅读更多',
}, {
path: '/pages/componentsA/lazyLoad/index',
icon: 'lazyLoad',
title: 'LazyLoad 懒加载',
}, {
path: '/pages/componentsC/gap/index',
icon: 'gap',
title: 'Gap 间隔槽',
}, {
path: '/pages/componentsA/avatar/index',
icon: 'avatar',
title: 'Avatar 头像',
}, {
path: '/pages/componentsC/link/index',
icon: 'link',
title: 'Link 超链接',
}, {
path: '/pages/componentsB/loading/index',
icon: 'loading',
title: 'loading 加载动画',
}]
},
]
<template>
<view
v-if="show"
class="u-badge-box"
:class="[isDot ? 'u-badge-dot' : 'u-badge', size == 'mini' ? 'u-badge-mini' : '']"
:style="[{
top: offset[0] + 'rpx',
right: offset[1] + 'rpx',
fontSize: fontSize + 'rpx',
position: absolute ? 'absolute' : 'static',
color: color,
backgroundColor: backgroundColor
}, boxStyle]"
>{{showText}}</view>
</template>
<script>
export default {
props: {
// primary,warning,success,error,info
type: {
type: String,
default: "error"
},
// default, mini
size: {
type: String,
default: "default"
},
//是否是圆点
isDot: {
type: Boolean,
default: false
},
// 显示的数值内容
count: {
type: [Number, String]
},
// 展示封顶的数字值
overflowCount: {
type: Number,
default: 99
},
// 当数值为 0 时,是否展示 Badge
showZero: {
type: Boolean,
default: false
},
// 位置偏移
offset: {
type: Array,
default: () => {
return [20, 20];
}
},
// 是否开启绝对定位,开启了offset才会起作用
absolute: {
type: Boolean,
default: true
},
// 字体大小
fontSize: {
type: [String, Number],
default: "24"
},
// 字体演示
color: {
type: String,
default: "#ffffff"
},
// badge的背景颜色
bgColor: {
type: String,
default: ""
},
// 是否让badge组件的中心点和父组件右上角重合,配置的话,offset将会失效
isCenter: {
type: Boolean,
default: false
}
},
computed: {
// 是否将badge中心与父组件右上角重合
boxStyle() {
let style = {};
if (this.isCenter) {
style.top = 0;
style.right = 0;
// Y轴-50%,意味着badge向上移动了badge自身高度一半,X轴50%,意味着向右移动了自身宽度一半
style.transform = "translateY(-50%) translateX(50%)";
} else {
style.top = this.offset[0] + "rpx";
style.right = this.offset[1] + "rpx";
style.transform = "translateY(0) translateX(0)";
}
return style;
},
// isDot类型时,不显示文字
showText() {
if (this.isDot) return "";
else {
if (this.count > this.overflowCount)
return `${this.overflowCount}+`;
else return this.count;
}
},
// 是否显示组件
show() {
// 如果count的值为0,并且showZero设置为false,不显示组件
if (this.count == 0 && this.showZero == false) return false;
else return true;
},
// 获取背景颜色,如果定义了bgColor参数,就放弃type主题色
backgroundColor() {
return this.bgColor ? this.bgColor : this.$u.color[this.type];
}
}
};
</script>
<style lang="scss" scoped>
.u-badge-box {
display: inline-flex;
justify-content: center;
align-items: center;
}
.u-badge {
line-height: 24rpx;
padding: 4rpx 8rpx;
border-radius: 100rpx;
}
.u-badge-dot {
height: 16rpx;
width: 16rpx;
border-radius: 100rpx;
line-height: 1;
}
.u-badge-mini {
transform: scale(0.8);
transform-origin: center center;
}
// .u-primary {
// background: $u-type-primary;
// color: #fff;
// }
// .u-error {
// background: $u-type-error;
// color: #fff;
// }
// .u-warning {
// background: $u-type-warning;
// color: #fff;
// }
// .u-success {
// background: $u-type-success;
// color: #fff;
// }
// .u-black {
// background: #585858;
// color: #fff;
// }
.u-info {
background: $u-type-info;
color: #fff;
}
</style>
\ No newline at end of file
<template>
<view>
<view class="u-mask" :style="[maskStyle]" :class="[show ? 'u-mask-show' : '']" @touchmove.stop.prevent>
<view class="u-model" :style="[modalStyle]">
<view v-if="showTitle" class="u-model-title hairline-bottom">{{title}}</view>
<view class="u-model-content">
<slot >
<view class="u-model-content-meeeage">
弹窗内容
</view>
</slot>
</view>
<view class="u-model-footer hairline-top">
<view class="u-model-footer-button" type="default" @click="confirm">取消</view>
<view class="u-model-footer-button hairline-left" @tap="close">确定</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 是否显示遮罩
show: {
type: Boolean,
default: true
},
// 层级z-index
zIndex: {
type: [Number, String],
default: ''
},
// 用户自定义样式
customStyle: {
type: Object,
default() {
return {};
}
},
duration: {
type: [Number, String],
default: 300
},
title:{
type:[String],
default:'提醒'
},
width :{
type:[Number,String],
default:600
},
showTitle:{
type:Boolean,
default:true
}
},
computed: {
maskStyle(){
let style = {};
style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.modal;
style.transition = `all ${this.duration / 1000}s ease-in-out`;
// 判断用户传递的对象是否为空
if (Object.keys(this.customStyle).length) style = { ...style, ...this.customStyle };
return style;
},
modalStyle() {
let style = {};
// style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
// style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.modal;
// style.transition = `all ${this.duration / 1000}s ease-in-out`;
style.width=this.width+'rpx'
// 缩放
// if (this.zoom == true) style.transform = 'scale(1.2, 1.2)';
// 判断用户传递的对象是否为空
// if (Object.keys(this.customStyle).length) style = { ...style, ...this.customStyle };
// 合并自定义的样式
//Object.assign(style, customStyle);
return style;
}
},
methods: {
confirm(){
this.$emit('confirm')
},
close(){
this.$emit('close')
}
}
};
</script>
<style lang="scss" scoped>
.u-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
}
.u-mask-show {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.u-model {
position: absolute;
height: auto;
top: 45% !important;
left: 50%;
overflow: hidden;
font-size: 16px;
border-radius: 16px;
border-radius: 16px;
background-color: #fff;
transform: translate3d(-50%, -50%, 0);
&-title {
padding-top: 48rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
}
&-content {
&-meeeage{
padding: 48rpx;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
}
}
&-footer {
display: flex;
&-button {
flex: 1;
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
box-sizing: border-box;
cursor: pointer;
text-align: center;
border-radius: 4rpx;
}
}
[class*='hairline']::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #ebedf0;
transform: scale(0.5);
}
.hairline-left,
.hairline-bottom,
.hairline-top {
position: relative;
}
.hairline-top::after {
border-top-width: 1rpx;
}
.hairline-left::after {
border-left-width: 1rpx;
}
.hairline-bottom::after {
// border-bottom-width: 1rpx;
}
}
</style>
// uniapp在H5中各API的z-index值如下:
/**
* actionsheet: 999
* modal: 999
* navigate: 998
* tabbar: 998
*/
export default {
toast: 1090,
noNetwork: 1080,
// popup包含popup,actionsheet,keyboard,picker的值
popup: 1075,
mask: 1070,
navbar: 980,
topTips: 975,
sticky: 970,
indexListSticky: 965,
modal:960
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment