| @ -1,39 +1,3 @@ | |||
| # uniapp项目开发模板 | |||
|  | |||
| #### 介绍 | |||
| {**以下是 Gitee 平台说明,您可以替换此简介** | |||
| Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台(同时支持 SVN)。专为开发者提供稳定、高效、安全的云端软件开发协作平台 | |||
| 无论是个人、团队、或是企业,都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)} | |||
| #### 软件架构 | |||
| 软件架构说明 | |||
| #### 安装教程 | |||
| 1. xxxx | |||
| 2. xxxx | |||
| 3. xxxx | |||
| #### 使用说明 | |||
| 1. xxxx | |||
| 2. xxxx | |||
| 3. xxxx | |||
| #### 参与贡献 | |||
| 1. Fork 本仓库 | |||
| 2. 新建 Feat_xxx 分支 | |||
| 3. 提交代码 | |||
| 4. 新建 Pull Request | |||
| #### 特技 | |||
| 1. 使用 Readme\_XXX.md 来支持不同的语言,例如 Readme\_en.md, Readme\_zh.md | |||
| 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) | |||
| 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 | |||
| 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目 | |||
| 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) | |||
| 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) | |||
|  | |||
| @ -0,0 +1,137 @@ | |||
| <template> | |||
| <uni-popup ref="privacyPopup" type="center" :is-mask-click="true"> | |||
| <view class="privacyPopup"> | |||
| <view class="title"> | |||
| <view class="title_circle"></view> | |||
| <view>惠享服务圈</view> | |||
| </view> | |||
| <view class="content_pri"> | |||
| <text>在你使用【惠享服务圈】服务之前,请仔细阅读</text> | |||
| <text style="color: #1793ee;" @click="goToPrivacy">《惠享服务圈小程序隐私保护指引》</text>。 | |||
| <text>如你同意惠享服务圈小程序隐私保护指引,请点击“同意”开始使用【惠享服务圈】。</text> | |||
| </view> | |||
| <view class="pri_btn"> | |||
| <button class="confuse_btn" @click="confusePrivacy">拒绝</button> | |||
| <button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization" | |||
| @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> | |||
| </view> | |||
| </view> | |||
| </uni-popup> | |||
| </template> | |||
| <script setup> | |||
| export default { | |||
| name: 'PrivacyAgreementPoup', | |||
| data() { | |||
| return { | |||
| resolvePrivacyAuthorization: {}, | |||
| } | |||
| }, | |||
| methods: { | |||
| //初始化 | |||
| init(resolve) { | |||
| this.$refs.privacyPopup.open() | |||
| this.resolvePrivacyAuthorization = resolve | |||
| }, | |||
| // 打开隐私协议 | |||
| goToPrivacy() { | |||
| wx.openPrivacyContract({ | |||
| success: () => { | |||
| console.log('打开成功'); | |||
| }, // 打开成功 | |||
| fail: () => { | |||
| uni.showToast({ | |||
| title: '打开失败,稍后重试', | |||
| icon: 'none' | |||
| }) | |||
| } // 打开失败 | |||
| }) | |||
| }, | |||
| // 拒绝 | |||
| confusePrivacy() { | |||
| this.$refs.privacyPopup.close() | |||
| this.resolvePrivacyAuthorization({ | |||
| event: 'disagree' | |||
| }) | |||
| }, | |||
| // 同意 | |||
| handleAgreePrivacyAuthorization() { | |||
| // 告知平台用户已经同意,参数传同意按钮的id | |||
| this.resolvePrivacyAuthorization({ | |||
| buttonId: 'agree-btn', | |||
| event: 'agree' | |||
| }) | |||
| this.$refs.privacyPopup.close() | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| // *{ | |||
| // box-sizing: border-box; | |||
| // } | |||
| .privacyPopup { | |||
| width: 520rpx; | |||
| /* height: 500rpx; */ | |||
| background-color: #fff; | |||
| border-radius: 50rpx; | |||
| padding: 20rpx 40rpx; | |||
| } | |||
| .title { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: start; | |||
| margin: 20rpx 0; | |||
| font-size: 38rpx; | |||
| font-weight: 600; | |||
| } | |||
| .title .title_circle { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| background-color: #efefef; | |||
| border-radius: 50%; | |||
| margin-right: 20rpx; | |||
| } | |||
| .content_pri { | |||
| width: 480rpx; | |||
| margin: 0 auto; | |||
| font-size: 34rpx; | |||
| line-height: 1.5; | |||
| } | |||
| .pri_btn { | |||
| width: 100%; | |||
| height: 158rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-evenly; | |||
| } | |||
| .pri_btn .confuse_btn, | |||
| .pri_btn .confirm_btn { | |||
| width: 200rpx; | |||
| height: 90rpx; | |||
| border-radius: 20rpx; | |||
| font-size: 34rpx; | |||
| } | |||
| .pri_btn .confuse_btn { | |||
| background-color: #eee; | |||
| color: #52bf6b; | |||
| } | |||
| .pri_btn .confirm_btn { | |||
| background-color: #52bf6b; | |||
| color: #fff; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,85 @@ | |||
| <template> | |||
| <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0"> | |||
| <view class="toast"> | |||
| <view class="title"> | |||
| 提示 | |||
| </view> | |||
| <view class="content"> | |||
| 本小程序需要登录之后才可以正常使用 | |||
| </view> | |||
| <view class="btnstwo"> | |||
| <view class="btn c" @click="cancel"> | |||
| 取消 | |||
| </view> | |||
| <view class="btn c" @click="$store.commit('login')"> | |||
| 登录 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uni-popup> | |||
| </template> | |||
| <script setup> | |||
| export default { | |||
| name: 'ShowLogin', | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| methods: { | |||
| checkLogin() { | |||
| if (!uni.getStorageSync('token')) { | |||
| this.$refs.popup.open('center'); | |||
| return true | |||
| } | |||
| }, | |||
| cancel() { | |||
| this.$refs.popup.close('center') | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .toast { | |||
| width: 500rpx; | |||
| background: white; | |||
| .title { | |||
| min-height: 70rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| font-size: 32rpx; | |||
| } | |||
| .content { | |||
| font-size: 28rpx; | |||
| min-height: 300rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| .btnstwo { | |||
| display: flex; | |||
| .btn { | |||
| flex: 1; | |||
| // background: $uni-linear-gradient-btn-color; | |||
| // color: #fff; | |||
| padding: 20rpx 0; | |||
| text-align: center; | |||
| } | |||
| .c { | |||
| background: #fff; | |||
| border-top: 1px solid #999; | |||
| color: #333; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -0,0 +1,241 @@ | |||
| <template> | |||
| <view class=""> | |||
| <uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="个人中心" /> | |||
| <view class="content"> | |||
| <view class="topBox"> | |||
| <view class="users"> | |||
| <view class="u-top"> | |||
| <image | |||
| src="https://img2.baidu.com/it/u=2953585264,744730101&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" | |||
| mode=""></image> | |||
| <view class="tit"> | |||
| 登录 / 注册 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="listBox"> | |||
| <view class="lists"> | |||
| <uni-section title="我的订单" type="line" titleFontSize="34rpx" style="border-radius: 10rpx;"></uni-section> | |||
| <view class="order-list"> | |||
| <view v-for="(item,index) in 10" :key="index" class="order-item"> | |||
| <view class="order-item-top"> | |||
| <view class="order-id">420000243620240</view> | |||
| <view class="time">2024-12-12 12:12</view> | |||
| </view> | |||
| <div class="order-item-main"> | |||
| <div class="title">付款金额</div> | |||
| <view class="money-detail"> | |||
| <view class="unie">¥</view> | |||
| <view class="number">666</view> | |||
| </view> | |||
| </div> | |||
| </view> | |||
| </view> | |||
| <view v-if="false" class="no-data"> | |||
| <image src="@/static/empty/noData.png" mode=""></image> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <showLogin ref="login"></showLogin> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import showLogin from '../../components/showLogin/showLogin.vue' | |||
| export default { | |||
| name : 'Center', | |||
| components : { showLogin }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| onShow(){ | |||
| this.getUserInfo() | |||
| }, | |||
| methods: { | |||
| //获取个人信息 | |||
| getUserInfo(){ | |||
| this.$api('infoGetInfo', res => { | |||
| console.log(res); | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .content { | |||
| background: #F1F5F8; | |||
| min-height: 100vh; | |||
| } | |||
| /* 弧形背景 */ | |||
| .topBox { | |||
| width: 100%; | |||
| position: relative; | |||
| z-index: 1; | |||
| overflow: hidden; | |||
| padding: 60rpx 20rpx 20rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| .topBox::after { | |||
| content: ""; | |||
| width: 140%; | |||
| height: 100px; | |||
| position: absolute; | |||
| left: -20%; | |||
| top: 0; | |||
| z-index: -1; | |||
| border-radius: 0 0 30% 50%; | |||
| background: #00aaff; | |||
| } | |||
| .txt { | |||
| color: #fff; | |||
| font-size: 30rpx; | |||
| } | |||
| .set-right .uni-icons { | |||
| margin-right: 10rpx; | |||
| } | |||
| .users { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-top: 0rpx; | |||
| padding: 0rpx 30rpx; | |||
| box-sizing: border-box; | |||
| height: 200rpx; | |||
| background-color: #fff; | |||
| box-shadow: 1px 10rpx 20rpx #ececec; | |||
| border-radius: 12rpx; | |||
| } | |||
| .u-top { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| } | |||
| .users .u-top image { | |||
| width: 130rpx; | |||
| height: 130rpx; | |||
| border-radius: 50%; | |||
| margin-right: 20rpx; | |||
| } | |||
| .u-top .tit { | |||
| font-size: 30rpx; | |||
| font-weight: 700; | |||
| color: #333; | |||
| } | |||
| .u-item { | |||
| text-align: center; | |||
| } | |||
| .u-item .u-tit { | |||
| color: #757575; | |||
| font-size: 26rpx; | |||
| margin-top: 10rpx; | |||
| } | |||
| .u-item .num { | |||
| color: #000000; | |||
| font-size: 33rpx; | |||
| font-weight: 700; | |||
| } | |||
| .bottomBox { | |||
| padding: 20rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| .order-list { | |||
| padding-top: 20rpx; | |||
| } | |||
| .order-item { | |||
| width: 100%; | |||
| background: white; | |||
| border-radius: 20rpx; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .order-item .order-item-top { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| height: 80rpx; | |||
| font-size: 24rpx; | |||
| box-sizing: border-box; | |||
| padding: 0rpx 20rpx; | |||
| } | |||
| .order-item .order-item-main { | |||
| padding: 60rpx 0rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| } | |||
| .order-item-main .title { | |||
| color: #5a5a5a; | |||
| } | |||
| .order-item-main .money-detail { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-top: 20rpx; | |||
| } | |||
| .money-detail .unit { | |||
| font-size: 34rpx; | |||
| } | |||
| .money-detail .number { | |||
| font-size: 60rpx; | |||
| } | |||
| .no-data { | |||
| padding: 30rpx; | |||
| box-sizing: border-box; | |||
| background-color: #fff; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| } | |||
| .o-item { | |||
| width: 25%; | |||
| text-align: center; | |||
| } | |||
| .o-item image { | |||
| width: 65rpx; | |||
| height: 55rpx; | |||
| } | |||
| .o-item .tit { | |||
| font-size: 28rpx; | |||
| margin-top: 10rpx; | |||
| } | |||
| .listBox { | |||
| margin: -10rpx auto 0; | |||
| padding: 20rpx; | |||
| box-sizing: border-box; | |||
| border-radius: 12rpx; | |||
| border-radius: 20rpx; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,130 @@ | |||
| <template> | |||
| <view class="login"> | |||
| <view class="title"> | |||
| 帧视界 | |||
| </view> | |||
| <view class="title"> | |||
| 申请获取你的头像、昵称 | |||
| </view> | |||
| <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> | |||
| <view class="line"> | |||
| <view class=""> | |||
| 头像 | |||
| </view> | |||
| <view class=""> | |||
| <image :src="userInfo.headImage" v-if="userInfo.headImage" style="width: 60rpx;height: 60rpx;" | |||
| mode=""></image> | |||
| <image src="/static/login/6.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image> | |||
| </view> | |||
| </view> | |||
| </button> | |||
| <view class="line"> | |||
| <view class=""> | |||
| 昵称 | |||
| </view> | |||
| <view class=""> | |||
| <input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" | |||
| v-model="userInfo.nickName" /> | |||
| </view> | |||
| </view> | |||
| <view class="btn" @click="submit"> | |||
| 确认 | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| userInfo: { | |||
| headImage: '', | |||
| nickName: '', | |||
| } | |||
| }; | |||
| }, | |||
| onShow() {}, | |||
| computed: {}, | |||
| methods: { | |||
| onChooseAvatar(res) { | |||
| let self = this | |||
| self.$Oss.ossUpload(res.target.avatarUrl) | |||
| .then(url => { | |||
| self.userInfo.headImage = url | |||
| }) | |||
| }, | |||
| submit() { | |||
| let self = this | |||
| uni.createSelectorQuery().in(this) | |||
| .select("#nickName") | |||
| .fields({ | |||
| properties: ["value"], | |||
| }) | |||
| .exec((res) => { | |||
| const nickName = res?.[0]?.value | |||
| self.userInfo.nickName = nickName | |||
| }) | |||
| if (this.$utils.verificationAll(this.userInfo, { | |||
| headImage: '请选择头像', | |||
| nickName: '请填写昵称', | |||
| })) { | |||
| return | |||
| } | |||
| this.$api('infoUpdateInfo', this.userInfo, res => { | |||
| if (res.code == 200) { | |||
| uni.navigateBack(-1) | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .login { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 80vh; | |||
| .title { | |||
| line-height: 45rpx; | |||
| font-weight: 900; | |||
| } | |||
| .line { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| width: 80%; | |||
| border-bottom: 1px solid #00000023; | |||
| padding: 30rpx 0; | |||
| margin: 0 auto; | |||
| } | |||
| .chooseAvatar { | |||
| width: 100%; | |||
| padding: 0; | |||
| margin: 0; | |||
| margin-top: 10vh; | |||
| border: none; | |||
| } | |||
| .btn { | |||
| // background: $uni-linear-gradient-btn-color; | |||
| background: lightblue; | |||
| color: #fff; | |||
| width: 80%; | |||
| padding: 20rpx 0; | |||
| text-align: center; | |||
| border-radius: 15rpx; | |||
| margin-top: 10vh; | |||
| } | |||
| } | |||
| </style> | |||
| @ -0,0 +1,225 @@ | |||
| <template> | |||
| <view class="payment"> | |||
| <uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="加油" /> | |||
| <view class="container"> | |||
| <uni-section title="油号" type="line" titleFontSize="34rpx"></uni-section> | |||
| <view class="select-oil"> | |||
| <view class="oil-item"> | |||
| <view class="oil active-oil"> | |||
| <!-- <view class="unit">¥</view> --> | |||
| <view class="number">#95</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <uni-section title="输入金额" type="line" titleFontSize="34rpx"></uni-section> | |||
| <view class="money-input"> | |||
| <image src="../../static/payment/money.png" mode="widthFix"></image> | |||
| <input v-model="form.money" @focus="focus" placeholder="请输入加油金额" type="number" /> | |||
| </view> | |||
| <view v-if="form.money" class="tip"> | |||
| 折后共计{{ form.money * 0.99 }}元 | |||
| </view> | |||
| <view class="select-money"> | |||
| <view v-for="(item, index) in rechargeList" class="money-item" :key="index"> | |||
| <view @click="selectMoney(item.price,index)" :class="{ 'active-money' : currentIndex == index }" | |||
| class="money"> | |||
| <view class="unit">¥</view> | |||
| <view class="number">{{ item.price }}</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="sumit" @click="submit">提交订单</view> | |||
| </view> | |||
| <PrivacyAgreementPoup ref="showPrivacy"></PrivacyAgreementPoup> | |||
| <uni-fab ref="fab" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" | |||
| @trigger="clickMenu" /> | |||
| <showLogin ref="login"></showLogin> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| import PrivacyAgreementPoup from "../../components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue"; | |||
| import showLogin from "../../components/showLogin/showLogin.vue"; | |||
| export default { | |||
| name: 'Payment', | |||
| component: { | |||
| PrivacyAgreementPoup, | |||
| showLogin | |||
| }, | |||
| data() { | |||
| return { | |||
| form: { | |||
| money: '' | |||
| }, | |||
| resolvePrivacyAuthorization: {}, | |||
| currentIndex: 0, | |||
| content: [{ | |||
| iconPath: '/static/payment/wedding-celebration.png', | |||
| text: '婚庆服务', | |||
| active: false, | |||
| path: '/pages/weddingCelebration/weddingCelebration' | |||
| }], | |||
| horizontal: 'right', | |||
| vertical: 'bottom', | |||
| direction: 'vertical', | |||
| rechargeList : [] | |||
| } | |||
| }, | |||
| onShow() { | |||
| if (wx.onNeedPrivacyAuthorization) { | |||
| console.log('onNeedPrivacyAuthorization'); | |||
| wx.onNeedPrivacyAuthorization(resolve => { | |||
| console.log('onNeedPrivacyAuthorization'); | |||
| this.resolvePrivacyAuthorization = resolve | |||
| this.$refs.showPrivacy.value.init(resolve) | |||
| }) | |||
| } | |||
| this.getRechargePage() | |||
| }, | |||
| methods: { | |||
| // 用户选择加油金额 | |||
| selectMoney(money, item) { | |||
| this.form.money = money | |||
| this.currentIndex = item | |||
| }, | |||
| //输入框获得焦点 | |||
| focus() { | |||
| }, | |||
| //用户点击了悬浮按钮 | |||
| clickMenu({ | |||
| item | |||
| }) { | |||
| uni.navigateTo({ | |||
| url: item.path | |||
| }) | |||
| }, | |||
| submit() { | |||
| if (this.$refs.login.checkLogin()) { | |||
| return | |||
| } | |||
| }, | |||
| //获取充值套餐 | |||
| getRechargePage(){ | |||
| this.$api('getRechargePage', res => { | |||
| this.rechargeList = res.result.records | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .payment { | |||
| height: 100vh; | |||
| background: #F1F5F8; | |||
| width: 750rpx; | |||
| margin: 0 auto; | |||
| } | |||
| .container { | |||
| width: 96%; | |||
| margin: 0rpx auto; | |||
| border-radius: 20rpx; | |||
| box-sizing: border-box; | |||
| padding: 20rpx; | |||
| overflow: hidden; | |||
| background: white; | |||
| margin-top: 20rpx; | |||
| } | |||
| .money-input { | |||
| display: flex; | |||
| align-items: center; | |||
| background: #F6F7FB; | |||
| padding: 30rpx 10rpx; | |||
| border-radius: 20rpx; | |||
| } | |||
| .tip { | |||
| color: #00aaff; | |||
| margin-top: 10rpx; | |||
| } | |||
| .money-input image { | |||
| width: 45rpx; | |||
| } | |||
| .money-input input { | |||
| font-size: 36rpx; | |||
| } | |||
| .select-oil, | |||
| .select-money { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| flex-wrap: wrap; | |||
| margin: 30rpx 0rpx; | |||
| } | |||
| .select-oil { | |||
| margin: 0; | |||
| } | |||
| .select-oil .oil-item, | |||
| .select-money .money-item { | |||
| width: 32.33%; | |||
| background: #F1F5F8; | |||
| border-radius: 20rpx; | |||
| margin-bottom: 20rpx; | |||
| overflow: hidden; | |||
| } | |||
| .select-oil .oil, | |||
| .select-money .money { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| padding: 30rpx 0rpx; | |||
| box-sizing: border-box; | |||
| color: #5D5C61; | |||
| } | |||
| .select-oil .active-oil, | |||
| .select-money .active-money { | |||
| background: #00aaff; | |||
| color: white; | |||
| } | |||
| .select-money .unit { | |||
| font-size: 26rpx; | |||
| } | |||
| .select-money .number { | |||
| font-size: 34rpx; | |||
| } | |||
| .sumit { | |||
| background: #33a5fc; | |||
| color: white; | |||
| font-size: 36rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| height: 80rpx; | |||
| border-radius: 20rpx; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,36 @@ | |||
| <template> | |||
| <view class="weddingCelebration"> | |||
| <uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="婚庆服务" @clickLeft="back" left-icon="left"/> | |||
| <uni-section title="婚庆服务" type="line" titleFontSize="34rpx"> | |||
| <uni-card :is-shadow="false"> | |||
| <image style="width: 100%;" src="https://ts1.cn.mm.bing.net/th/id/R-C.b6359b70784d251138d9dc56b650274b?rik=WiMqW3Pnt%2fImmg&riu=http%3a%2f%2fwww.deepp.com%2fimages%2fcode.png&ehk=pWaMA%2fmVIw943tuInsYTSXgBj%2f3oDTqWhx9Hx3hMtRI%3d&risl=&pid=ImgRaw&r=0" mode="widthFix" :show-menu-by-longpress="true"></image> | |||
| </uni-card> | |||
| </uni-section> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name : 'weddingCelebration', | |||
| data(){ | |||
| return { | |||
| } | |||
| }, | |||
| methods : { | |||
| back(){ | |||
| uni.switchTab({ | |||
| url: '/pages/payment/payment' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .weddingCelebration{ | |||
| min-height: 100vh; | |||
| width: 750rpx; | |||
| margin: 0rpx auto; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,26 @@ | |||
| ## 1.3.1(2021-12-20) | |||
| - 修复 在vue页面下略缩图显示不正常的bug | |||
| ## 1.3.0(2021-11-19) | |||
| - 重构插槽的用法 ,header 替换为 title | |||
| - 新增 actions 插槽 | |||
| - 新增 cover 封面图属性和插槽 | |||
| - 新增 padding 内容默认内边距离 | |||
| - 新增 margin 卡片默认外边距离 | |||
| - 新增 spacing 卡片默认内边距 | |||
| - 新增 shadow 卡片阴影属性 | |||
| - 取消 mode 属性,可使用组合插槽代替 | |||
| - 取消 note 属性 ,使用actions插槽代替 | |||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card) | |||
| ## 1.2.1(2021-07-30) | |||
| - 优化 vue3下事件警告的问题 | |||
| ## 1.2.0(2021-07-13) | |||
| - 组件兼容 vue3,如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.1.8(2021-07-01) | |||
| - 优化 图文卡片无图片加载时,提供占位图标 | |||
| - 新增 header 插槽,自定义卡片头部( 图文卡片 mode="style" 时,不支持) | |||
| - 修复 thumbnail 不存在仍然占位的 bug | |||
| ## 1.1.7(2021-05-12) | |||
| - 新增 组件示例地址 | |||
| ## 1.1.6(2021-02-04) | |||
| - 调整为uni_modules目录规范 | |||
| @ -0,0 +1,270 @@ | |||
| <template> | |||
| <view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}" | |||
| :style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}"> | |||
| <!-- 封面 --> | |||
| <slot name="cover"> | |||
| <view v-if="cover" class="uni-card__cover"> | |||
| <image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image> | |||
| </view> | |||
| </slot> | |||
| <slot name="title"> | |||
| <view v-if="title || extra" class="uni-card__header"> | |||
| <!-- 卡片标题 --> | |||
| <view class="uni-card__header-box" @click="onClick('title')"> | |||
| <view v-if="thumbnail" class="uni-card__header-avatar"> | |||
| <image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" /> | |||
| </view> | |||
| <view class="uni-card__header-content"> | |||
| <text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text> | |||
| <text v-if="title&&subTitle" | |||
| class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="uni-card__header-extra" @click="onClick('extra')"> | |||
| <text class="uni-card__header-extra-text">{{ extra }}</text> | |||
| </view> | |||
| </view> | |||
| </slot> | |||
| <!-- 卡片内容 --> | |||
| <view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')"> | |||
| <slot></slot> | |||
| </view> | |||
| <view class="uni-card__actions" @click="onClick('actions')"> | |||
| <slot name="actions"></slot> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| /** | |||
| * Card 卡片 | |||
| * @description 卡片视图组件 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=22 | |||
| * @property {String} title 标题文字 | |||
| * @property {String} subTitle 副标题 | |||
| * @property {Number} padding 内容内边距 | |||
| * @property {Number} margin 卡片外边距 | |||
| * @property {Number} spacing 卡片内边距 | |||
| * @property {String} extra 标题额外信息 | |||
| * @property {String} cover 封面图(本地路径需要引入) | |||
| * @property {String} thumbnail 标题左侧缩略图 | |||
| * @property {Boolean} is-full = [true | false] 卡片内容是否通栏,为 true 时将去除padding值 | |||
| * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影 | |||
| * @property {String} shadow 卡片阴影 | |||
| * @property {Boolean} border 卡片边框 | |||
| * @event {Function} click 点击 Card 触发事件 | |||
| */ | |||
| export default { | |||
| name: 'UniCard', | |||
| emits: ['click'], | |||
| props: { | |||
| title: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| subTitle: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| padding: { | |||
| type: String, | |||
| default: '10px' | |||
| }, | |||
| margin: { | |||
| type: String, | |||
| default: '15px' | |||
| }, | |||
| spacing: { | |||
| type: String, | |||
| default: '0 10px' | |||
| }, | |||
| extra: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| cover: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| thumbnail: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| isFull: { | |||
| // 内容区域是否通栏 | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| isShadow: { | |||
| // 是否开启阴影 | |||
| type: Boolean, | |||
| default: true | |||
| }, | |||
| shadow: { | |||
| type: String, | |||
| default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)' | |||
| }, | |||
| border: { | |||
| type: Boolean, | |||
| default: true | |||
| } | |||
| }, | |||
| methods: { | |||
| onClick(type) { | |||
| this.$emit('click', type) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| $uni-border-3: #EBEEF5 !default; | |||
| $uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | |||
| $uni-main-color: #3a3a3a !default; | |||
| $uni-base-color: #6a6a6a !default; | |||
| $uni-secondary-color: #909399 !default; | |||
| $uni-spacing-sm: 8px !default; | |||
| $uni-border-color:$uni-border-3; | |||
| $uni-shadow: $uni-shadow-base; | |||
| $uni-card-title: 15px; | |||
| $uni-cart-title-color:$uni-main-color; | |||
| $uni-card-subtitle: 12px; | |||
| $uni-cart-subtitle-color:$uni-secondary-color; | |||
| $uni-card-spacing: 10px; | |||
| $uni-card-content-color: $uni-base-color; | |||
| .uni-card { | |||
| margin: $uni-card-spacing; | |||
| padding: 0 $uni-spacing-sm; | |||
| border-radius: 4px; | |||
| overflow: hidden; | |||
| font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; | |||
| background-color: #fff; | |||
| flex: 1; | |||
| .uni-card__cover { | |||
| position: relative; | |||
| margin-top: $uni-card-spacing; | |||
| flex-direction: row; | |||
| overflow: hidden; | |||
| border-radius: 4px; | |||
| .uni-card__cover-image { | |||
| flex: 1; | |||
| // width: 100%; | |||
| /* #ifndef APP-PLUS */ | |||
| vertical-align: middle; | |||
| /* #endif */ | |||
| } | |||
| } | |||
| .uni-card__header { | |||
| display: flex; | |||
| border-bottom: 1px $uni-border-color solid; | |||
| flex-direction: row; | |||
| align-items: center; | |||
| padding: $uni-card-spacing; | |||
| overflow: hidden; | |||
| .uni-card__header-box { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex: 1; | |||
| flex-direction: row; | |||
| align-items: center; | |||
| overflow: hidden; | |||
| } | |||
| .uni-card__header-avatar { | |||
| width: 40px; | |||
| height: 40px; | |||
| overflow: hidden; | |||
| border-radius: 5px; | |||
| margin-right: $uni-card-spacing; | |||
| .uni-card__header-avatar-image { | |||
| flex: 1; | |||
| width: 40px; | |||
| height: 40px; | |||
| } | |||
| } | |||
| .uni-card__header-content { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| flex: 1; | |||
| // height: 40px; | |||
| overflow: hidden; | |||
| .uni-card__header-content-title { | |||
| font-size: $uni-card-title; | |||
| color: $uni-cart-title-color; | |||
| // line-height: 22px; | |||
| } | |||
| .uni-card__header-content-subtitle { | |||
| font-size: $uni-card-subtitle; | |||
| margin-top: 5px; | |||
| color: $uni-cart-subtitle-color; | |||
| } | |||
| } | |||
| .uni-card__header-extra { | |||
| line-height: 12px; | |||
| .uni-card__header-extra-text { | |||
| font-size: 12px; | |||
| color: $uni-cart-subtitle-color; | |||
| } | |||
| } | |||
| } | |||
| .uni-card__content { | |||
| padding: $uni-card-spacing; | |||
| font-size: 14px; | |||
| color: $uni-card-content-color; | |||
| line-height: 22px; | |||
| } | |||
| .uni-card__actions { | |||
| font-size: 12px; | |||
| } | |||
| } | |||
| .uni-card--border { | |||
| border: 1px solid $uni-border-color; | |||
| } | |||
| .uni-card--shadow { | |||
| position: relative; | |||
| /* #ifndef APP-NVUE */ | |||
| box-shadow: $uni-shadow; | |||
| /* #endif */ | |||
| } | |||
| .uni-card--full { | |||
| margin: 0; | |||
| border-left-width: 0; | |||
| border-left-width: 0; | |||
| border-radius: 0; | |||
| } | |||
| /* #ifndef APP-NVUE */ | |||
| .uni-card--full:after { | |||
| border-radius: 0; | |||
| } | |||
| /* #endif */ | |||
| .uni-ellipsis { | |||
| /* #ifndef APP-NVUE */ | |||
| overflow: hidden; | |||
| white-space: nowrap; | |||
| text-overflow: ellipsis; | |||
| /* #endif */ | |||
| /* #ifdef APP-NVUE */ | |||
| lines: 1; | |||
| /* #endif */ | |||
| } | |||
| </style> | |||
| @ -0,0 +1,90 @@ | |||
| { | |||
| "id": "uni-card", | |||
| "displayName": "uni-card 卡片", | |||
| "version": "1.3.1", | |||
| "description": "Card 组件,提供常见的卡片样式。", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "uniui", | |||
| "card", | |||
| "", | |||
| "卡片" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "category": [ | |||
| "前端组件", | |||
| "通用组件" | |||
| ], | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": [ | |||
| "uni-icons", | |||
| "uni-scss" | |||
| ], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "u", | |||
| "联盟": "u" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,12 @@ | |||
| ## Card 卡片 | |||
| > **组件名:uni-card** | |||
| > 代码块: `uCard` | |||
| 卡片视图组件。 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,23 @@ | |||
| ## 1.2.5(2023-03-29) | |||
| - 新增 pattern.icon 属性,可自定义图标 | |||
| ## 1.2.4(2022-09-07) | |||
| 小程序端由于 style 使用了对象导致报错,[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false) | |||
| ## 1.2.3(2022-09-05) | |||
| - 修复 nvue 环境下,具有 tabBar 时,fab 组件下部位置无法正常获取 --window-bottom 的bug,详见:[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310) | |||
| ## 1.2.2(2021-12-29) | |||
| - 更新 组件依赖 | |||
| ## 1.2.1(2021-11-19) | |||
| - 修复 阴影颜色不正确的bug | |||
| ## 1.2.0(2021-11-19) | |||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab) | |||
| ## 1.1.1(2021-11-09) | |||
| - 新增 提供组件设计资源,组件样式调整 | |||
| ## 1.1.0(2021-07-30) | |||
| - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.0.7(2021-05-12) | |||
| - 新增 组件示例地址 | |||
| ## 1.0.6(2021-02-05) | |||
| - 调整为uni_modules目录规范 | |||
| - 优化 按钮背景色调整 | |||
| - 优化 兼容pc端 | |||
| @ -0,0 +1,491 @@ | |||
| <template> | |||
| <view class="uni-cursor-point"> | |||
| <view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{ | |||
| 'uni-fab--leftBottom': leftBottom, | |||
| 'uni-fab--rightBottom': rightBottom, | |||
| 'uni-fab--leftTop': leftTop, | |||
| 'uni-fab--rightTop': rightTop | |||
| }" class="uni-fab" | |||
| :style="nvueBottom" | |||
| > | |||
| <view :class="{ | |||
| 'uni-fab__content--left': horizontal === 'left', | |||
| 'uni-fab__content--right': horizontal === 'right', | |||
| 'uni-fab__content--flexDirection': direction === 'vertical', | |||
| 'uni-fab__content--flexDirectionStart': flexDirectionStart, | |||
| 'uni-fab__content--flexDirectionEnd': flexDirectionEnd, | |||
| 'uni-fab__content--other-platform': !isAndroidNvue | |||
| }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" | |||
| class="uni-fab__content" elevation="5"> | |||
| <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" /> | |||
| <view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" | |||
| class="uni-fab__item" @click="_onItemClick(index, item)"> | |||
| <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" | |||
| mode="aspectFit" /> | |||
| <text class="uni-fab__item-text" | |||
| :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text> | |||
| </view> | |||
| <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" /> | |||
| </view> | |||
| </view> | |||
| <view :class="{ | |||
| 'uni-fab__circle--leftBottom': leftBottom, | |||
| 'uni-fab__circle--rightBottom': rightBottom, | |||
| 'uni-fab__circle--leftTop': leftTop, | |||
| 'uni-fab__circle--rightTop': rightTop, | |||
| 'uni-fab__content--other-platform': !isAndroidNvue | |||
| }" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor, 'bottom': nvueBottom }" @click="_onClick"> | |||
| <uni-icons class="fab-circle-icon" :type="styles.icon" :color="styles.iconColor" size="32" | |||
| :class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons> | |||
| <!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> | |||
| <view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> --> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| let platform = 'other' | |||
| // #ifdef APP-NVUE | |||
| platform = uni.getSystemInfoSync().platform | |||
| // #endif | |||
| /** | |||
| * Fab 悬浮按钮 | |||
| * @description 点击可展开一个图形按钮菜单 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=144 | |||
| * @property {Object} pattern 可选样式配置项 | |||
| * @property {Object} horizontal = [left | right] 水平对齐方式 | |||
| * @value left 左对齐 | |||
| * @value right 右对齐 | |||
| * @property {Object} vertical = [bottom | top] 垂直对齐方式 | |||
| * @value bottom 下对齐 | |||
| * @value top 上对齐 | |||
| * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式 | |||
| * @value horizontal 水平显示 | |||
| * @value vertical 垂直显示 | |||
| * @property {Array} content 展开菜单内容配置项 | |||
| * @property {Boolean} popMenu 是否使用弹出菜单 | |||
| * @event {Function} trigger 展开菜单点击事件,返回点击信息 | |||
| * @event {Function} fabClick 悬浮按钮点击事件 | |||
| */ | |||
| export default { | |||
| name: 'UniFab', | |||
| emits: ['fabClick', 'trigger'], | |||
| props: { | |||
| pattern: { | |||
| type: Object, | |||
| default () { | |||
| return {} | |||
| } | |||
| }, | |||
| horizontal: { | |||
| type: String, | |||
| default: 'left' | |||
| }, | |||
| vertical: { | |||
| type: String, | |||
| default: 'bottom' | |||
| }, | |||
| direction: { | |||
| type: String, | |||
| default: 'horizontal' | |||
| }, | |||
| content: { | |||
| type: Array, | |||
| default () { | |||
| return [] | |||
| } | |||
| }, | |||
| show: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| popMenu: { | |||
| type: Boolean, | |||
| default: true | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| fabShow: false, | |||
| isShow: false, | |||
| isAndroidNvue: platform === 'android', | |||
| styles: { | |||
| color: '#3c3e49', | |||
| selectedColor: '#007AFF', | |||
| backgroundColor: '#fff', | |||
| buttonColor: '#007AFF', | |||
| iconColor: '#fff', | |||
| icon: 'plusempty' | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| contentWidth(e) { | |||
| return (this.content.length + 1) * 55 + 15 + 'px' | |||
| }, | |||
| contentWidthMin() { | |||
| return '55px' | |||
| }, | |||
| // 动态计算宽度 | |||
| boxWidth() { | |||
| return this.getPosition(3, 'horizontal') | |||
| }, | |||
| // 动态计算高度 | |||
| boxHeight() { | |||
| return this.getPosition(3, 'vertical') | |||
| }, | |||
| // 计算左下位置 | |||
| leftBottom() { | |||
| return this.getPosition(0, 'left', 'bottom') | |||
| }, | |||
| // 计算右下位置 | |||
| rightBottom() { | |||
| return this.getPosition(0, 'right', 'bottom') | |||
| }, | |||
| // 计算左上位置 | |||
| leftTop() { | |||
| return this.getPosition(0, 'left', 'top') | |||
| }, | |||
| rightTop() { | |||
| return this.getPosition(0, 'right', 'top') | |||
| }, | |||
| flexDirectionStart() { | |||
| return this.getPosition(1, 'vertical', 'top') | |||
| }, | |||
| flexDirectionEnd() { | |||
| return this.getPosition(1, 'vertical', 'bottom') | |||
| }, | |||
| horizontalLeft() { | |||
| return this.getPosition(2, 'horizontal', 'left') | |||
| }, | |||
| horizontalRight() { | |||
| return this.getPosition(2, 'horizontal', 'right') | |||
| }, | |||
| // 计算 nvue bottom | |||
| nvueBottom() { | |||
| const safeBottom = uni.getSystemInfoSync().windowBottom; | |||
| // #ifdef APP-NVUE | |||
| return 30 + safeBottom | |||
| // #endif | |||
| // #ifndef APP-NVUE | |||
| return 30 | |||
| // #endif | |||
| } | |||
| }, | |||
| watch: { | |||
| pattern: { | |||
| handler(val, oldVal) { | |||
| this.styles = Object.assign({}, this.styles, val) | |||
| }, | |||
| deep: true | |||
| } | |||
| }, | |||
| created() { | |||
| this.isShow = this.show | |||
| if (this.top === 0) { | |||
| this.fabShow = true | |||
| } | |||
| // 初始化样式 | |||
| this.styles = Object.assign({}, this.styles, this.pattern) | |||
| }, | |||
| methods: { | |||
| _onClick() { | |||
| this.$emit('fabClick') | |||
| if (!this.popMenu) { | |||
| return | |||
| } | |||
| this.isShow = !this.isShow | |||
| }, | |||
| open() { | |||
| this.isShow = true | |||
| }, | |||
| close() { | |||
| this.isShow = false | |||
| }, | |||
| /** | |||
| * 按钮点击事件 | |||
| */ | |||
| _onItemClick(index, item) { | |||
| if (!this.isShow) { | |||
| return | |||
| } | |||
| this.$emit('trigger', { | |||
| index, | |||
| item | |||
| }) | |||
| }, | |||
| /** | |||
| * 获取 位置信息 | |||
| */ | |||
| getPosition(types, paramA, paramB) { | |||
| if (types === 0) { | |||
| return this.horizontal === paramA && this.vertical === paramB | |||
| } else if (types === 1) { | |||
| return this.direction === paramA && this.vertical === paramB | |||
| } else if (types === 2) { | |||
| return this.direction === paramA && this.horizontal === paramB | |||
| } else { | |||
| return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" > | |||
| $uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default; | |||
| .uni-fab { | |||
| position: fixed; | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| justify-content: center; | |||
| align-items: center; | |||
| z-index: 10; | |||
| border-radius: 45px; | |||
| box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-cursor-point { | |||
| /* #ifdef H5 */ | |||
| cursor: pointer; | |||
| /* #endif */ | |||
| } | |||
| .uni-fab--active { | |||
| opacity: 1; | |||
| } | |||
| .uni-fab--leftBottom { | |||
| left: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab--leftTop { | |||
| left: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab--rightBottom { | |||
| right: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab--rightTop { | |||
| right: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab__circle { | |||
| position: fixed; | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 55px; | |||
| height: 55px; | |||
| background-color: #3c3e49; | |||
| border-radius: 45px; | |||
| z-index: 11; | |||
| // box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-fab__circle--leftBottom { | |||
| left: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--leftTop { | |||
| left: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--rightBottom { | |||
| right: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--rightTop { | |||
| right: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--left { | |||
| left: 0; | |||
| } | |||
| .uni-fab__circle--right { | |||
| right: 0; | |||
| } | |||
| .uni-fab__circle--top { | |||
| top: 0; | |||
| } | |||
| .uni-fab__circle--bottom { | |||
| bottom: 0; | |||
| } | |||
| .uni-fab__plus { | |||
| font-weight: bold; | |||
| } | |||
| // .fab-circle-v { | |||
| // position: absolute; | |||
| // width: 2px; | |||
| // height: 24px; | |||
| // left: 0; | |||
| // top: 0; | |||
| // right: 0; | |||
| // bottom: 0; | |||
| // /* #ifndef APP-NVUE */ | |||
| // margin: auto; | |||
| // /* #endif */ | |||
| // background-color: white; | |||
| // transform: rotate(0deg); | |||
| // transition: transform 0.3s; | |||
| // } | |||
| // .fab-circle-h { | |||
| // position: absolute; | |||
| // width: 24px; | |||
| // height: 2px; | |||
| // left: 0; | |||
| // top: 0; | |||
| // right: 0; | |||
| // bottom: 0; | |||
| // /* #ifndef APP-NVUE */ | |||
| // margin: auto; | |||
| // /* #endif */ | |||
| // background-color: white; | |||
| // transform: rotate(0deg); | |||
| // transition: transform 0.3s; | |||
| // } | |||
| .fab-circle-icon { | |||
| transform: rotate(0deg); | |||
| transition: transform 0.3s; | |||
| font-weight: 200; | |||
| } | |||
| .uni-fab__plus--active { | |||
| transform: rotate(135deg); | |||
| } | |||
| .uni-fab__content { | |||
| /* #ifndef APP-NVUE */ | |||
| box-sizing: border-box; | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| border-radius: 55px; | |||
| overflow: hidden; | |||
| transition-property: width, height; | |||
| transition-duration: 0.2s; | |||
| width: 55px; | |||
| border-color: #DDDDDD; | |||
| border-width: 1rpx; | |||
| border-style: solid; | |||
| } | |||
| .uni-fab__content--other-platform { | |||
| border-width: 0px; | |||
| box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-fab__content--left { | |||
| justify-content: flex-start; | |||
| } | |||
| .uni-fab__content--right { | |||
| justify-content: flex-end; | |||
| } | |||
| .uni-fab__content--flexDirection { | |||
| flex-direction: column; | |||
| justify-content: flex-end; | |||
| } | |||
| .uni-fab__content--flexDirectionStart { | |||
| flex-direction: column; | |||
| justify-content: flex-start; | |||
| } | |||
| .uni-fab__content--flexDirectionEnd { | |||
| flex-direction: column; | |||
| justify-content: flex-end; | |||
| } | |||
| .uni-fab__item { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 55px; | |||
| height: 55px; | |||
| opacity: 0; | |||
| transition: opacity 0.2s; | |||
| } | |||
| .uni-fab__item--active { | |||
| opacity: 1; | |||
| } | |||
| .uni-fab__item-image { | |||
| width: 20px; | |||
| height: 20px; | |||
| margin-bottom: 4px; | |||
| } | |||
| .uni-fab__item-text { | |||
| color: #FFFFFF; | |||
| font-size: 12px; | |||
| line-height: 12px; | |||
| margin-top: 2px; | |||
| } | |||
| .uni-fab__item--first { | |||
| width: 55px; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,84 @@ | |||
| { | |||
| "id": "uni-fab", | |||
| "displayName": "uni-fab 悬浮按钮", | |||
| "version": "1.2.5", | |||
| "description": "悬浮按钮 fab button ,点击可展开一个图标按钮菜单。", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "uniui", | |||
| "按钮", | |||
| "悬浮按钮", | |||
| "fab" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||
| "type": "component-vue" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": ["uni-scss","uni-icons"], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "u", | |||
| "联盟": "u" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,9 @@ | |||
| ## Fab 悬浮按钮 | |||
| > **组件名:uni-fab** | |||
| > 代码块: `uFab` | |||
| 点击可展开一个图形按钮菜单 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,42 @@ | |||
| ## 2.0.10(2024-06-07) | |||
| - 优化 uni-app x 中,size 属性的类型 | |||
| ## 2.0.9(2024-01-12) | |||
| fix: 修复图标大小默认值错误的问题 | |||
| ## 2.0.8(2023-12-14) | |||
| - 修复 项目未使用 ts 情况下,打包报错的bug | |||
| ## 2.0.7(2023-12-14) | |||
| - 修复 size 属性为 string 时,不加单位导致尺寸异常的bug | |||
| ## 2.0.6(2023-12-11) | |||
| - 优化 兼容老版本icon类型,如 top ,bottom 等 | |||
| ## 2.0.5(2023-12-11) | |||
| - 优化 兼容老版本icon类型,如 top ,bottom 等 | |||
| ## 2.0.4(2023-12-06) | |||
| - 优化 uni-app x 下示例项目图标排序 | |||
| ## 2.0.3(2023-12-06) | |||
| - 修复 nvue下引入组件报错的bug | |||
| ## 2.0.2(2023-12-05) | |||
| -优化 size 属性支持单位 | |||
| ## 2.0.1(2023-12-05) | |||
| - 新增 uni-app x 支持定义图标 | |||
| ## 1.3.5(2022-01-24) | |||
| - 优化 size 属性可以传入不带单位的字符串数值 | |||
| ## 1.3.4(2022-01-24) | |||
| - 优化 size 支持其他单位 | |||
| ## 1.3.3(2022-01-17) | |||
| - 修复 nvue 有些图标不显示的bug,兼容老版本图标 | |||
| ## 1.3.2(2021-12-01) | |||
| - 优化 示例可复制图标名称 | |||
| ## 1.3.1(2021-11-23) | |||
| - 优化 兼容旧组件 type 值 | |||
| ## 1.3.0(2021-11-19) | |||
| - 新增 更多图标 | |||
| - 优化 自定义图标使用方式 | |||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons) | |||
| ## 1.1.7(2021-11-08) | |||
| ## 1.2.0(2021-07-30) | |||
| - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.1.5(2021-05-12) | |||
| - 新增 组件示例地址 | |||
| ## 1.1.4(2021-02-05) | |||
| - 调整为uni_modules目录规范 | |||
| @ -0,0 +1,91 @@ | |||
| <template> | |||
| <text class="uni-icons" :style="styleObj"> | |||
| <slot>{{unicode}}</slot> | |||
| </text> | |||
| </template> | |||
| <script> | |||
| import { fontData, IconsDataItem } from './uniicons_file' | |||
| /** | |||
| * Icons 图标 | |||
| * @description 用于展示 icon 图标 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=28 | |||
| * @property {Number,String} size 图标大小 | |||
| * @property {String} type 图标图案,参考示例 | |||
| * @property {String} color 图标颜色 | |||
| * @property {String} customPrefix 自定义图标 | |||
| * @event {Function} click 点击 Icon 触发事件 | |||
| */ | |||
| export default { | |||
| name: "uni-icons", | |||
| props: { | |||
| type: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| color: { | |||
| type: String, | |||
| default: '#333333' | |||
| }, | |||
| size: { | |||
| type: [Number, String], | |||
| default: 16 | |||
| }, | |||
| fontFamily: { | |||
| type: String, | |||
| default: '' | |||
| } | |||
| }, | |||
| data() { | |||
| return {}; | |||
| }, | |||
| computed: { | |||
| unicode() : string { | |||
| let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type }) | |||
| if (codes !== null) { | |||
| return codes.unicode | |||
| } | |||
| return '' | |||
| }, | |||
| iconSize() : string { | |||
| const size = this.size | |||
| if (typeof size == 'string') { | |||
| const reg = /^[0-9]*$/g | |||
| return reg.test(size as string) ? '' + size + 'px' : '' + size; | |||
| // return '' + this.size | |||
| } | |||
| return this.getFontSize(size as number) | |||
| }, | |||
| styleObj() : UTSJSONObject { | |||
| if (this.fontFamily !== '') { | |||
| return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily } | |||
| } | |||
| return { color: this.color, fontSize: this.iconSize } | |||
| } | |||
| }, | |||
| created() { }, | |||
| methods: { | |||
| /** | |||
| * 字体大小 | |||
| */ | |||
| getFontSize(size : number) : string { | |||
| return size + 'px'; | |||
| }, | |||
| }, | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| @font-face { | |||
| font-family: UniIconsFontFamily; | |||
| src: url('./uniicons.ttf'); | |||
| } | |||
| .uni-icons { | |||
| font-family: UniIconsFontFamily; | |||
| font-size: 18px; | |||
| font-style: normal; | |||
| color: #333; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,110 @@ | |||
| <template> | |||
| <!-- #ifdef APP-NVUE --> | |||
| <text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text> | |||
| <!-- #endif --> | |||
| <!-- #ifndef APP-NVUE --> | |||
| <text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"> | |||
| <slot></slot> | |||
| </text> | |||
| <!-- #endif --> | |||
| </template> | |||
| <script> | |||
| import { fontData } from './uniicons_file_vue.js'; | |||
| const getVal = (val) => { | |||
| const reg = /^[0-9]*$/g | |||
| return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val; | |||
| } | |||
| // #ifdef APP-NVUE | |||
| var domModule = weex.requireModule('dom'); | |||
| import iconUrl from './uniicons.ttf' | |||
| domModule.addRule('fontFace', { | |||
| 'fontFamily': "uniicons", | |||
| 'src': "url('" + iconUrl + "')" | |||
| }); | |||
| // #endif | |||
| /** | |||
| * Icons 图标 | |||
| * @description 用于展示 icons 图标 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=28 | |||
| * @property {Number} size 图标大小 | |||
| * @property {String} type 图标图案,参考示例 | |||
| * @property {String} color 图标颜色 | |||
| * @property {String} customPrefix 自定义图标 | |||
| * @event {Function} click 点击 Icon 触发事件 | |||
| */ | |||
| export default { | |||
| name: 'UniIcons', | |||
| emits: ['click'], | |||
| props: { | |||
| type: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| color: { | |||
| type: String, | |||
| default: '#333333' | |||
| }, | |||
| size: { | |||
| type: [Number, String], | |||
| default: 16 | |||
| }, | |||
| customPrefix: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| fontFamily: { | |||
| type: String, | |||
| default: '' | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| icons: fontData | |||
| } | |||
| }, | |||
| computed: { | |||
| unicode() { | |||
| let code = this.icons.find(v => v.font_class === this.type) | |||
| if (code) { | |||
| return code.unicode | |||
| } | |||
| return '' | |||
| }, | |||
| iconSize() { | |||
| return getVal(this.size) | |||
| }, | |||
| styleObj() { | |||
| if (this.fontFamily !== '') { | |||
| return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};` | |||
| } | |||
| return `color: ${this.color}; font-size: ${this.iconSize};` | |||
| } | |||
| }, | |||
| methods: { | |||
| _onClick() { | |||
| this.$emit('click') | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| /* #ifndef APP-NVUE */ | |||
| @import './uniicons.css'; | |||
| @font-face { | |||
| font-family: uniicons; | |||
| src: url('./uniicons.ttf'); | |||
| } | |||
| /* #endif */ | |||
| .uni-icons { | |||
| font-family: uniicons; | |||
| text-decoration: none; | |||
| text-align: center; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,664 @@ | |||
| .uniui-cart-filled:before { | |||
| content: "\e6d0"; | |||
| } | |||
| .uniui-gift-filled:before { | |||
| content: "\e6c4"; | |||
| } | |||
| .uniui-color:before { | |||
| content: "\e6cf"; | |||
| } | |||
| .uniui-wallet:before { | |||
| content: "\e6b1"; | |||
| } | |||
| .uniui-settings-filled:before { | |||
| content: "\e6ce"; | |||
| } | |||
| .uniui-auth-filled:before { | |||
| content: "\e6cc"; | |||
| } | |||
| .uniui-shop-filled:before { | |||
| content: "\e6cd"; | |||
| } | |||
| .uniui-staff-filled:before { | |||
| content: "\e6cb"; | |||
| } | |||
| .uniui-vip-filled:before { | |||
| content: "\e6c6"; | |||
| } | |||
| .uniui-plus-filled:before { | |||
| content: "\e6c7"; | |||
| } | |||
| .uniui-folder-add-filled:before { | |||
| content: "\e6c8"; | |||
| } | |||
| .uniui-color-filled:before { | |||
| content: "\e6c9"; | |||
| } | |||
| .uniui-tune-filled:before { | |||
| content: "\e6ca"; | |||
| } | |||
| .uniui-calendar-filled:before { | |||
| content: "\e6c0"; | |||
| } | |||
| .uniui-notification-filled:before { | |||
| content: "\e6c1"; | |||
| } | |||
| .uniui-wallet-filled:before { | |||
| content: "\e6c2"; | |||
| } | |||
| .uniui-medal-filled:before { | |||
| content: "\e6c3"; | |||
| } | |||
| .uniui-fire-filled:before { | |||
| content: "\e6c5"; | |||
| } | |||
| .uniui-refreshempty:before { | |||
| content: "\e6bf"; | |||
| } | |||
| .uniui-location-filled:before { | |||
| content: "\e6af"; | |||
| } | |||
| .uniui-person-filled:before { | |||
| content: "\e69d"; | |||
| } | |||
| .uniui-personadd-filled:before { | |||
| content: "\e698"; | |||
| } | |||
| .uniui-arrowthinleft:before { | |||
| content: "\e6d2"; | |||
| } | |||
| .uniui-arrowthinup:before { | |||
| content: "\e6d3"; | |||
| } | |||
| .uniui-arrowthindown:before { | |||
| content: "\e6d4"; | |||
| } | |||
| .uniui-back:before { | |||
| content: "\e6b9"; | |||
| } | |||
| .uniui-forward:before { | |||
| content: "\e6ba"; | |||
| } | |||
| .uniui-arrow-right:before { | |||
| content: "\e6bb"; | |||
| } | |||
| .uniui-arrow-left:before { | |||
| content: "\e6bc"; | |||
| } | |||
| .uniui-arrow-up:before { | |||
| content: "\e6bd"; | |||
| } | |||
| .uniui-arrow-down:before { | |||
| content: "\e6be"; | |||
| } | |||
| .uniui-arrowthinright:before { | |||
| content: "\e6d1"; | |||
| } | |||
| .uniui-down:before { | |||
| content: "\e6b8"; | |||
| } | |||
| .uniui-bottom:before { | |||
| content: "\e6b8"; | |||
| } | |||
| .uniui-arrowright:before { | |||
| content: "\e6d5"; | |||
| } | |||
| .uniui-right:before { | |||
| content: "\e6b5"; | |||
| } | |||
| .uniui-up:before { | |||
| content: "\e6b6"; | |||
| } | |||
| .uniui-top:before { | |||
| content: "\e6b6"; | |||
| } | |||
| .uniui-left:before { | |||
| content: "\e6b7"; | |||
| } | |||
| .uniui-arrowup:before { | |||
| content: "\e6d6"; | |||
| } | |||
| .uniui-eye:before { | |||
| content: "\e651"; | |||
| } | |||
| .uniui-eye-filled:before { | |||
| content: "\e66a"; | |||
| } | |||
| .uniui-eye-slash:before { | |||
| content: "\e6b3"; | |||
| } | |||
| .uniui-eye-slash-filled:before { | |||
| content: "\e6b4"; | |||
| } | |||
| .uniui-info-filled:before { | |||
| content: "\e649"; | |||
| } | |||
| .uniui-reload:before { | |||
| content: "\e6b2"; | |||
| } | |||
| .uniui-micoff-filled:before { | |||
| content: "\e6b0"; | |||
| } | |||
| .uniui-map-pin-ellipse:before { | |||
| content: "\e6ac"; | |||
| } | |||
| .uniui-map-pin:before { | |||
| content: "\e6ad"; | |||
| } | |||
| .uniui-location:before { | |||
| content: "\e6ae"; | |||
| } | |||
| .uniui-starhalf:before { | |||
| content: "\e683"; | |||
| } | |||
| .uniui-star:before { | |||
| content: "\e688"; | |||
| } | |||
| .uniui-star-filled:before { | |||
| content: "\e68f"; | |||
| } | |||
| .uniui-calendar:before { | |||
| content: "\e6a0"; | |||
| } | |||
| .uniui-fire:before { | |||
| content: "\e6a1"; | |||
| } | |||
| .uniui-medal:before { | |||
| content: "\e6a2"; | |||
| } | |||
| .uniui-font:before { | |||
| content: "\e6a3"; | |||
| } | |||
| .uniui-gift:before { | |||
| content: "\e6a4"; | |||
| } | |||
| .uniui-link:before { | |||
| content: "\e6a5"; | |||
| } | |||
| .uniui-notification:before { | |||
| content: "\e6a6"; | |||
| } | |||
| .uniui-staff:before { | |||
| content: "\e6a7"; | |||
| } | |||
| .uniui-vip:before { | |||
| content: "\e6a8"; | |||
| } | |||
| .uniui-folder-add:before { | |||
| content: "\e6a9"; | |||
| } | |||
| .uniui-tune:before { | |||
| content: "\e6aa"; | |||
| } | |||
| .uniui-auth:before { | |||
| content: "\e6ab"; | |||
| } | |||
| .uniui-person:before { | |||
| content: "\e699"; | |||
| } | |||
| .uniui-email-filled:before { | |||
| content: "\e69a"; | |||
| } | |||
| .uniui-phone-filled:before { | |||
| content: "\e69b"; | |||
| } | |||
| .uniui-phone:before { | |||
| content: "\e69c"; | |||
| } | |||
| .uniui-email:before { | |||
| content: "\e69e"; | |||
| } | |||
| .uniui-personadd:before { | |||
| content: "\e69f"; | |||
| } | |||
| .uniui-chatboxes-filled:before { | |||
| content: "\e692"; | |||
| } | |||
| .uniui-contact:before { | |||
| content: "\e693"; | |||
| } | |||
| .uniui-chatbubble-filled:before { | |||
| content: "\e694"; | |||
| } | |||
| .uniui-contact-filled:before { | |||
| content: "\e695"; | |||
| } | |||
| .uniui-chatboxes:before { | |||
| content: "\e696"; | |||
| } | |||
| .uniui-chatbubble:before { | |||
| content: "\e697"; | |||
| } | |||
| .uniui-upload-filled:before { | |||
| content: "\e68e"; | |||
| } | |||
| .uniui-upload:before { | |||
| content: "\e690"; | |||
| } | |||
| .uniui-weixin:before { | |||
| content: "\e691"; | |||
| } | |||
| .uniui-compose:before { | |||
| content: "\e67f"; | |||
| } | |||
| .uniui-qq:before { | |||
| content: "\e680"; | |||
| } | |||
| .uniui-download-filled:before { | |||
| content: "\e681"; | |||
| } | |||
| .uniui-pyq:before { | |||
| content: "\e682"; | |||
| } | |||
| .uniui-sound:before { | |||
| content: "\e684"; | |||
| } | |||
| .uniui-trash-filled:before { | |||
| content: "\e685"; | |||
| } | |||
| .uniui-sound-filled:before { | |||
| content: "\e686"; | |||
| } | |||
| .uniui-trash:before { | |||
| content: "\e687"; | |||
| } | |||
| .uniui-videocam-filled:before { | |||
| content: "\e689"; | |||
| } | |||
| .uniui-spinner-cycle:before { | |||
| content: "\e68a"; | |||
| } | |||
| .uniui-weibo:before { | |||
| content: "\e68b"; | |||
| } | |||
| .uniui-videocam:before { | |||
| content: "\e68c"; | |||
| } | |||
| .uniui-download:before { | |||
| content: "\e68d"; | |||
| } | |||
| .uniui-help:before { | |||
| content: "\e679"; | |||
| } | |||
| .uniui-navigate-filled:before { | |||
| content: "\e67a"; | |||
| } | |||
| .uniui-plusempty:before { | |||
| content: "\e67b"; | |||
| } | |||
| .uniui-smallcircle:before { | |||
| content: "\e67c"; | |||
| } | |||
| .uniui-minus-filled:before { | |||
| content: "\e67d"; | |||
| } | |||
| .uniui-micoff:before { | |||
| content: "\e67e"; | |||
| } | |||
| .uniui-closeempty:before { | |||
| content: "\e66c"; | |||
| } | |||
| .uniui-clear:before { | |||
| content: "\e66d"; | |||
| } | |||
| .uniui-navigate:before { | |||
| content: "\e66e"; | |||
| } | |||
| .uniui-minus:before { | |||
| content: "\e66f"; | |||
| } | |||
| .uniui-image:before { | |||
| content: "\e670"; | |||
| } | |||
| .uniui-mic:before { | |||
| content: "\e671"; | |||
| } | |||
| .uniui-paperplane:before { | |||
| content: "\e672"; | |||
| } | |||
| .uniui-close:before { | |||
| content: "\e673"; | |||
| } | |||
| .uniui-help-filled:before { | |||
| content: "\e674"; | |||
| } | |||
| .uniui-paperplane-filled:before { | |||
| content: "\e675"; | |||
| } | |||
| .uniui-plus:before { | |||
| content: "\e676"; | |||
| } | |||
| .uniui-mic-filled:before { | |||
| content: "\e677"; | |||
| } | |||
| .uniui-image-filled:before { | |||
| content: "\e678"; | |||
| } | |||
| .uniui-locked-filled:before { | |||
| content: "\e668"; | |||
| } | |||
| .uniui-info:before { | |||
| content: "\e669"; | |||
| } | |||
| .uniui-locked:before { | |||
| content: "\e66b"; | |||
| } | |||
| .uniui-camera-filled:before { | |||
| content: "\e658"; | |||
| } | |||
| .uniui-chat-filled:before { | |||
| content: "\e659"; | |||
| } | |||
| .uniui-camera:before { | |||
| content: "\e65a"; | |||
| } | |||
| .uniui-circle:before { | |||
| content: "\e65b"; | |||
| } | |||
| .uniui-checkmarkempty:before { | |||
| content: "\e65c"; | |||
| } | |||
| .uniui-chat:before { | |||
| content: "\e65d"; | |||
| } | |||
| .uniui-circle-filled:before { | |||
| content: "\e65e"; | |||
| } | |||
| .uniui-flag:before { | |||
| content: "\e65f"; | |||
| } | |||
| .uniui-flag-filled:before { | |||
| content: "\e660"; | |||
| } | |||
| .uniui-gear-filled:before { | |||
| content: "\e661"; | |||
| } | |||
| .uniui-home:before { | |||
| content: "\e662"; | |||
| } | |||
| .uniui-home-filled:before { | |||
| content: "\e663"; | |||
| } | |||
| .uniui-gear:before { | |||
| content: "\e664"; | |||
| } | |||
| .uniui-smallcircle-filled:before { | |||
| content: "\e665"; | |||
| } | |||
| .uniui-map-filled:before { | |||
| content: "\e666"; | |||
| } | |||
| .uniui-map:before { | |||
| content: "\e667"; | |||
| } | |||
| .uniui-refresh-filled:before { | |||
| content: "\e656"; | |||
| } | |||
| .uniui-refresh:before { | |||
| content: "\e657"; | |||
| } | |||
| .uniui-cloud-upload:before { | |||
| content: "\e645"; | |||
| } | |||
| .uniui-cloud-download-filled:before { | |||
| content: "\e646"; | |||
| } | |||
| .uniui-cloud-download:before { | |||
| content: "\e647"; | |||
| } | |||
| .uniui-cloud-upload-filled:before { | |||
| content: "\e648"; | |||
| } | |||
| .uniui-redo:before { | |||
| content: "\e64a"; | |||
| } | |||
| .uniui-images-filled:before { | |||
| content: "\e64b"; | |||
| } | |||
| .uniui-undo-filled:before { | |||
| content: "\e64c"; | |||
| } | |||
| .uniui-more:before { | |||
| content: "\e64d"; | |||
| } | |||
| .uniui-more-filled:before { | |||
| content: "\e64e"; | |||
| } | |||
| .uniui-undo:before { | |||
| content: "\e64f"; | |||
| } | |||
| .uniui-images:before { | |||
| content: "\e650"; | |||
| } | |||
| .uniui-paperclip:before { | |||
| content: "\e652"; | |||
| } | |||
| .uniui-settings:before { | |||
| content: "\e653"; | |||
| } | |||
| .uniui-search:before { | |||
| content: "\e654"; | |||
| } | |||
| .uniui-redo-filled:before { | |||
| content: "\e655"; | |||
| } | |||
| .uniui-list:before { | |||
| content: "\e644"; | |||
| } | |||
| .uniui-mail-open-filled:before { | |||
| content: "\e63a"; | |||
| } | |||
| .uniui-hand-down-filled:before { | |||
| content: "\e63c"; | |||
| } | |||
| .uniui-hand-down:before { | |||
| content: "\e63d"; | |||
| } | |||
| .uniui-hand-up-filled:before { | |||
| content: "\e63e"; | |||
| } | |||
| .uniui-hand-up:before { | |||
| content: "\e63f"; | |||
| } | |||
| .uniui-heart-filled:before { | |||
| content: "\e641"; | |||
| } | |||
| .uniui-mail-open:before { | |||
| content: "\e643"; | |||
| } | |||
| .uniui-heart:before { | |||
| content: "\e639"; | |||
| } | |||
| .uniui-loop:before { | |||
| content: "\e633"; | |||
| } | |||
| .uniui-pulldown:before { | |||
| content: "\e632"; | |||
| } | |||
| .uniui-scan:before { | |||
| content: "\e62a"; | |||
| } | |||
| .uniui-bars:before { | |||
| content: "\e627"; | |||
| } | |||
| .uniui-checkbox:before { | |||
| content: "\e62b"; | |||
| } | |||
| .uniui-checkbox-filled:before { | |||
| content: "\e62c"; | |||
| } | |||
| .uniui-shop:before { | |||
| content: "\e62f"; | |||
| } | |||
| .uniui-headphones:before { | |||
| content: "\e630"; | |||
| } | |||
| .uniui-cart:before { | |||
| content: "\e631"; | |||
| } | |||
| @ -0,0 +1,664 @@ | |||
| export type IconsData = { | |||
| id : string | |||
| name : string | |||
| font_family : string | |||
| css_prefix_text : string | |||
| description : string | |||
| glyphs : Array<IconsDataItem> | |||
| } | |||
| export type IconsDataItem = { | |||
| font_class : string | |||
| unicode : string | |||
| } | |||
| export const fontData = [ | |||
| { | |||
| "font_class": "arrow-down", | |||
| "unicode": "\ue6be" | |||
| }, | |||
| { | |||
| "font_class": "arrow-left", | |||
| "unicode": "\ue6bc" | |||
| }, | |||
| { | |||
| "font_class": "arrow-right", | |||
| "unicode": "\ue6bb" | |||
| }, | |||
| { | |||
| "font_class": "arrow-up", | |||
| "unicode": "\ue6bd" | |||
| }, | |||
| { | |||
| "font_class": "auth", | |||
| "unicode": "\ue6ab" | |||
| }, | |||
| { | |||
| "font_class": "auth-filled", | |||
| "unicode": "\ue6cc" | |||
| }, | |||
| { | |||
| "font_class": "back", | |||
| "unicode": "\ue6b9" | |||
| }, | |||
| { | |||
| "font_class": "bars", | |||
| "unicode": "\ue627" | |||
| }, | |||
| { | |||
| "font_class": "calendar", | |||
| "unicode": "\ue6a0" | |||
| }, | |||
| { | |||
| "font_class": "calendar-filled", | |||
| "unicode": "\ue6c0" | |||
| }, | |||
| { | |||
| "font_class": "camera", | |||
| "unicode": "\ue65a" | |||
| }, | |||
| { | |||
| "font_class": "camera-filled", | |||
| "unicode": "\ue658" | |||
| }, | |||
| { | |||
| "font_class": "cart", | |||
| "unicode": "\ue631" | |||
| }, | |||
| { | |||
| "font_class": "cart-filled", | |||
| "unicode": "\ue6d0" | |||
| }, | |||
| { | |||
| "font_class": "chat", | |||
| "unicode": "\ue65d" | |||
| }, | |||
| { | |||
| "font_class": "chat-filled", | |||
| "unicode": "\ue659" | |||
| }, | |||
| { | |||
| "font_class": "chatboxes", | |||
| "unicode": "\ue696" | |||
| }, | |||
| { | |||
| "font_class": "chatboxes-filled", | |||
| "unicode": "\ue692" | |||
| }, | |||
| { | |||
| "font_class": "chatbubble", | |||
| "unicode": "\ue697" | |||
| }, | |||
| { | |||
| "font_class": "chatbubble-filled", | |||
| "unicode": "\ue694" | |||
| }, | |||
| { | |||
| "font_class": "checkbox", | |||
| "unicode": "\ue62b" | |||
| }, | |||
| { | |||
| "font_class": "checkbox-filled", | |||
| "unicode": "\ue62c" | |||
| }, | |||
| { | |||
| "font_class": "checkmarkempty", | |||
| "unicode": "\ue65c" | |||
| }, | |||
| { | |||
| "font_class": "circle", | |||
| "unicode": "\ue65b" | |||
| }, | |||
| { | |||
| "font_class": "circle-filled", | |||
| "unicode": "\ue65e" | |||
| }, | |||
| { | |||
| "font_class": "clear", | |||
| "unicode": "\ue66d" | |||
| }, | |||
| { | |||
| "font_class": "close", | |||
| "unicode": "\ue673" | |||
| }, | |||
| { | |||
| "font_class": "closeempty", | |||
| "unicode": "\ue66c" | |||
| }, | |||
| { | |||
| "font_class": "cloud-download", | |||
| "unicode": "\ue647" | |||
| }, | |||
| { | |||
| "font_class": "cloud-download-filled", | |||
| "unicode": "\ue646" | |||
| }, | |||
| { | |||
| "font_class": "cloud-upload", | |||
| "unicode": "\ue645" | |||
| }, | |||
| { | |||
| "font_class": "cloud-upload-filled", | |||
| "unicode": "\ue648" | |||
| }, | |||
| { | |||
| "font_class": "color", | |||
| "unicode": "\ue6cf" | |||
| }, | |||
| { | |||
| "font_class": "color-filled", | |||
| "unicode": "\ue6c9" | |||
| }, | |||
| { | |||
| "font_class": "compose", | |||
| "unicode": "\ue67f" | |||
| }, | |||
| { | |||
| "font_class": "contact", | |||
| "unicode": "\ue693" | |||
| }, | |||
| { | |||
| "font_class": "contact-filled", | |||
| "unicode": "\ue695" | |||
| }, | |||
| { | |||
| "font_class": "down", | |||
| "unicode": "\ue6b8" | |||
| }, | |||
| { | |||
| "font_class": "bottom", | |||
| "unicode": "\ue6b8" | |||
| }, | |||
| { | |||
| "font_class": "download", | |||
| "unicode": "\ue68d" | |||
| }, | |||
| { | |||
| "font_class": "download-filled", | |||
| "unicode": "\ue681" | |||
| }, | |||
| { | |||
| "font_class": "email", | |||
| "unicode": "\ue69e" | |||
| }, | |||
| { | |||
| "font_class": "email-filled", | |||
| "unicode": "\ue69a" | |||
| }, | |||
| { | |||
| "font_class": "eye", | |||
| "unicode": "\ue651" | |||
| }, | |||
| { | |||
| "font_class": "eye-filled", | |||
| "unicode": "\ue66a" | |||
| }, | |||
| { | |||
| "font_class": "eye-slash", | |||
| "unicode": "\ue6b3" | |||
| }, | |||
| { | |||
| "font_class": "eye-slash-filled", | |||
| "unicode": "\ue6b4" | |||
| }, | |||
| { | |||
| "font_class": "fire", | |||
| "unicode": "\ue6a1" | |||
| }, | |||
| { | |||
| "font_class": "fire-filled", | |||
| "unicode": "\ue6c5" | |||
| }, | |||
| { | |||
| "font_class": "flag", | |||
| "unicode": "\ue65f" | |||
| }, | |||
| { | |||
| "font_class": "flag-filled", | |||
| "unicode": "\ue660" | |||
| }, | |||
| { | |||
| "font_class": "folder-add", | |||
| "unicode": "\ue6a9" | |||
| }, | |||
| { | |||
| "font_class": "folder-add-filled", | |||
| "unicode": "\ue6c8" | |||
| }, | |||
| { | |||
| "font_class": "font", | |||
| "unicode": "\ue6a3" | |||
| }, | |||
| { | |||
| "font_class": "forward", | |||
| "unicode": "\ue6ba" | |||
| }, | |||
| { | |||
| "font_class": "gear", | |||
| "unicode": "\ue664" | |||
| }, | |||
| { | |||
| "font_class": "gear-filled", | |||
| "unicode": "\ue661" | |||
| }, | |||
| { | |||
| "font_class": "gift", | |||
| "unicode": "\ue6a4" | |||
| }, | |||
| { | |||
| "font_class": "gift-filled", | |||
| "unicode": "\ue6c4" | |||
| }, | |||
| { | |||
| "font_class": "hand-down", | |||
| "unicode": "\ue63d" | |||
| }, | |||
| { | |||
| "font_class": "hand-down-filled", | |||
| "unicode": "\ue63c" | |||
| }, | |||
| { | |||
| "font_class": "hand-up", | |||
| "unicode": "\ue63f" | |||
| }, | |||
| { | |||
| "font_class": "hand-up-filled", | |||
| "unicode": "\ue63e" | |||
| }, | |||
| { | |||
| "font_class": "headphones", | |||
| "unicode": "\ue630" | |||
| }, | |||
| { | |||
| "font_class": "heart", | |||
| "unicode": "\ue639" | |||
| }, | |||
| { | |||
| "font_class": "heart-filled", | |||
| "unicode": "\ue641" | |||
| }, | |||
| { | |||
| "font_class": "help", | |||
| "unicode": "\ue679" | |||
| }, | |||
| { | |||
| "font_class": "help-filled", | |||
| "unicode": "\ue674" | |||
| }, | |||
| { | |||
| "font_class": "home", | |||
| "unicode": "\ue662" | |||
| }, | |||
| { | |||
| "font_class": "home-filled", | |||
| "unicode": "\ue663" | |||
| }, | |||
| { | |||
| "font_class": "image", | |||
| "unicode": "\ue670" | |||
| }, | |||
| { | |||
| "font_class": "image-filled", | |||
| "unicode": "\ue678" | |||
| }, | |||
| { | |||
| "font_class": "images", | |||
| "unicode": "\ue650" | |||
| }, | |||
| { | |||
| "font_class": "images-filled", | |||
| "unicode": "\ue64b" | |||
| }, | |||
| { | |||
| "font_class": "info", | |||
| "unicode": "\ue669" | |||
| }, | |||
| { | |||
| "font_class": "info-filled", | |||
| "unicode": "\ue649" | |||
| }, | |||
| { | |||
| "font_class": "left", | |||
| "unicode": "\ue6b7" | |||
| }, | |||
| { | |||
| "font_class": "link", | |||
| "unicode": "\ue6a5" | |||
| }, | |||
| { | |||
| "font_class": "list", | |||
| "unicode": "\ue644" | |||
| }, | |||
| { | |||
| "font_class": "location", | |||
| "unicode": "\ue6ae" | |||
| }, | |||
| { | |||
| "font_class": "location-filled", | |||
| "unicode": "\ue6af" | |||
| }, | |||
| { | |||
| "font_class": "locked", | |||
| "unicode": "\ue66b" | |||
| }, | |||
| { | |||
| "font_class": "locked-filled", | |||
| "unicode": "\ue668" | |||
| }, | |||
| { | |||
| "font_class": "loop", | |||
| "unicode": "\ue633" | |||
| }, | |||
| { | |||
| "font_class": "mail-open", | |||
| "unicode": "\ue643" | |||
| }, | |||
| { | |||
| "font_class": "mail-open-filled", | |||
| "unicode": "\ue63a" | |||
| }, | |||
| { | |||
| "font_class": "map", | |||
| "unicode": "\ue667" | |||
| }, | |||
| { | |||
| "font_class": "map-filled", | |||
| "unicode": "\ue666" | |||
| }, | |||
| { | |||
| "font_class": "map-pin", | |||
| "unicode": "\ue6ad" | |||
| }, | |||
| { | |||
| "font_class": "map-pin-ellipse", | |||
| "unicode": "\ue6ac" | |||
| }, | |||
| { | |||
| "font_class": "medal", | |||
| "unicode": "\ue6a2" | |||
| }, | |||
| { | |||
| "font_class": "medal-filled", | |||
| "unicode": "\ue6c3" | |||
| }, | |||
| { | |||
| "font_class": "mic", | |||
| "unicode": "\ue671" | |||
| }, | |||
| { | |||
| "font_class": "mic-filled", | |||
| "unicode": "\ue677" | |||
| }, | |||
| { | |||
| "font_class": "micoff", | |||
| "unicode": "\ue67e" | |||
| }, | |||
| { | |||
| "font_class": "micoff-filled", | |||
| "unicode": "\ue6b0" | |||
| }, | |||
| { | |||
| "font_class": "minus", | |||
| "unicode": "\ue66f" | |||
| }, | |||
| { | |||
| "font_class": "minus-filled", | |||
| "unicode": "\ue67d" | |||
| }, | |||
| { | |||
| "font_class": "more", | |||
| "unicode": "\ue64d" | |||
| }, | |||
| { | |||
| "font_class": "more-filled", | |||
| "unicode": "\ue64e" | |||
| }, | |||
| { | |||
| "font_class": "navigate", | |||
| "unicode": "\ue66e" | |||
| }, | |||
| { | |||
| "font_class": "navigate-filled", | |||
| "unicode": "\ue67a" | |||
| }, | |||
| { | |||
| "font_class": "notification", | |||
| "unicode": "\ue6a6" | |||
| }, | |||
| { | |||
| "font_class": "notification-filled", | |||
| "unicode": "\ue6c1" | |||
| }, | |||
| { | |||
| "font_class": "paperclip", | |||
| "unicode": "\ue652" | |||
| }, | |||
| { | |||
| "font_class": "paperplane", | |||
| "unicode": "\ue672" | |||
| }, | |||
| { | |||
| "font_class": "paperplane-filled", | |||
| "unicode": "\ue675" | |||
| }, | |||
| { | |||
| "font_class": "person", | |||
| "unicode": "\ue699" | |||
| }, | |||
| { | |||
| "font_class": "person-filled", | |||
| "unicode": "\ue69d" | |||
| }, | |||
| { | |||
| "font_class": "personadd", | |||
| "unicode": "\ue69f" | |||
| }, | |||
| { | |||
| "font_class": "personadd-filled", | |||
| "unicode": "\ue698" | |||
| }, | |||
| { | |||
| "font_class": "personadd-filled-copy", | |||
| "unicode": "\ue6d1" | |||
| }, | |||
| { | |||
| "font_class": "phone", | |||
| "unicode": "\ue69c" | |||
| }, | |||
| { | |||
| "font_class": "phone-filled", | |||
| "unicode": "\ue69b" | |||
| }, | |||
| { | |||
| "font_class": "plus", | |||
| "unicode": "\ue676" | |||
| }, | |||
| { | |||
| "font_class": "plus-filled", | |||
| "unicode": "\ue6c7" | |||
| }, | |||
| { | |||
| "font_class": "plusempty", | |||
| "unicode": "\ue67b" | |||
| }, | |||
| { | |||
| "font_class": "pulldown", | |||
| "unicode": "\ue632" | |||
| }, | |||
| { | |||
| "font_class": "pyq", | |||
| "unicode": "\ue682" | |||
| }, | |||
| { | |||
| "font_class": "qq", | |||
| "unicode": "\ue680" | |||
| }, | |||
| { | |||
| "font_class": "redo", | |||
| "unicode": "\ue64a" | |||
| }, | |||
| { | |||
| "font_class": "redo-filled", | |||
| "unicode": "\ue655" | |||
| }, | |||
| { | |||
| "font_class": "refresh", | |||
| "unicode": "\ue657" | |||
| }, | |||
| { | |||
| "font_class": "refresh-filled", | |||
| "unicode": "\ue656" | |||
| }, | |||
| { | |||
| "font_class": "refreshempty", | |||
| "unicode": "\ue6bf" | |||
| }, | |||
| { | |||
| "font_class": "reload", | |||
| "unicode": "\ue6b2" | |||
| }, | |||
| { | |||
| "font_class": "right", | |||
| "unicode": "\ue6b5" | |||
| }, | |||
| { | |||
| "font_class": "scan", | |||
| "unicode": "\ue62a" | |||
| }, | |||
| { | |||
| "font_class": "search", | |||
| "unicode": "\ue654" | |||
| }, | |||
| { | |||
| "font_class": "settings", | |||
| "unicode": "\ue653" | |||
| }, | |||
| { | |||
| "font_class": "settings-filled", | |||
| "unicode": "\ue6ce" | |||
| }, | |||
| { | |||
| "font_class": "shop", | |||
| "unicode": "\ue62f" | |||
| }, | |||
| { | |||
| "font_class": "shop-filled", | |||
| "unicode": "\ue6cd" | |||
| }, | |||
| { | |||
| "font_class": "smallcircle", | |||
| "unicode": "\ue67c" | |||
| }, | |||
| { | |||
| "font_class": "smallcircle-filled", | |||
| "unicode": "\ue665" | |||
| }, | |||
| { | |||
| "font_class": "sound", | |||
| "unicode": "\ue684" | |||
| }, | |||
| { | |||
| "font_class": "sound-filled", | |||
| "unicode": "\ue686" | |||
| }, | |||
| { | |||
| "font_class": "spinner-cycle", | |||
| "unicode": "\ue68a" | |||
| }, | |||
| { | |||
| "font_class": "staff", | |||
| "unicode": "\ue6a7" | |||
| }, | |||
| { | |||
| "font_class": "staff-filled", | |||
| "unicode": "\ue6cb" | |||
| }, | |||
| { | |||
| "font_class": "star", | |||
| "unicode": "\ue688" | |||
| }, | |||
| { | |||
| "font_class": "star-filled", | |||
| "unicode": "\ue68f" | |||
| }, | |||
| { | |||
| "font_class": "starhalf", | |||
| "unicode": "\ue683" | |||
| }, | |||
| { | |||
| "font_class": "trash", | |||
| "unicode": "\ue687" | |||
| }, | |||
| { | |||
| "font_class": "trash-filled", | |||
| "unicode": "\ue685" | |||
| }, | |||
| { | |||
| "font_class": "tune", | |||
| "unicode": "\ue6aa" | |||
| }, | |||
| { | |||
| "font_class": "tune-filled", | |||
| "unicode": "\ue6ca" | |||
| }, | |||
| { | |||
| "font_class": "undo", | |||
| "unicode": "\ue64f" | |||
| }, | |||
| { | |||
| "font_class": "undo-filled", | |||
| "unicode": "\ue64c" | |||
| }, | |||
| { | |||
| "font_class": "up", | |||
| "unicode": "\ue6b6" | |||
| }, | |||
| { | |||
| "font_class": "top", | |||
| "unicode": "\ue6b6" | |||
| }, | |||
| { | |||
| "font_class": "upload", | |||
| "unicode": "\ue690" | |||
| }, | |||
| { | |||
| "font_class": "upload-filled", | |||
| "unicode": "\ue68e" | |||
| }, | |||
| { | |||
| "font_class": "videocam", | |||
| "unicode": "\ue68c" | |||
| }, | |||
| { | |||
| "font_class": "videocam-filled", | |||
| "unicode": "\ue689" | |||
| }, | |||
| { | |||
| "font_class": "vip", | |||
| "unicode": "\ue6a8" | |||
| }, | |||
| { | |||
| "font_class": "vip-filled", | |||
| "unicode": "\ue6c6" | |||
| }, | |||
| { | |||
| "font_class": "wallet", | |||
| "unicode": "\ue6b1" | |||
| }, | |||
| { | |||
| "font_class": "wallet-filled", | |||
| "unicode": "\ue6c2" | |||
| }, | |||
| { | |||
| "font_class": "weibo", | |||
| "unicode": "\ue68b" | |||
| }, | |||
| { | |||
| "font_class": "weixin", | |||
| "unicode": "\ue691" | |||
| } | |||
| ] as IconsDataItem[] | |||
| // export const fontData = JSON.parse<IconsDataItem>(fontDataJson) | |||
| @ -0,0 +1,649 @@ | |||
| export const fontData = [ | |||
| { | |||
| "font_class": "arrow-down", | |||
| "unicode": "\ue6be" | |||
| }, | |||
| { | |||
| "font_class": "arrow-left", | |||
| "unicode": "\ue6bc" | |||
| }, | |||
| { | |||
| "font_class": "arrow-right", | |||
| "unicode": "\ue6bb" | |||
| }, | |||
| { | |||
| "font_class": "arrow-up", | |||
| "unicode": "\ue6bd" | |||
| }, | |||
| { | |||
| "font_class": "auth", | |||
| "unicode": "\ue6ab" | |||
| }, | |||
| { | |||
| "font_class": "auth-filled", | |||
| "unicode": "\ue6cc" | |||
| }, | |||
| { | |||
| "font_class": "back", | |||
| "unicode": "\ue6b9" | |||
| }, | |||
| { | |||
| "font_class": "bars", | |||
| "unicode": "\ue627" | |||
| }, | |||
| { | |||
| "font_class": "calendar", | |||
| "unicode": "\ue6a0" | |||
| }, | |||
| { | |||
| "font_class": "calendar-filled", | |||
| "unicode": "\ue6c0" | |||
| }, | |||
| { | |||
| "font_class": "camera", | |||
| "unicode": "\ue65a" | |||
| }, | |||
| { | |||
| "font_class": "camera-filled", | |||
| "unicode": "\ue658" | |||
| }, | |||
| { | |||
| "font_class": "cart", | |||
| "unicode": "\ue631" | |||
| }, | |||
| { | |||
| "font_class": "cart-filled", | |||
| "unicode": "\ue6d0" | |||
| }, | |||
| { | |||
| "font_class": "chat", | |||
| "unicode": "\ue65d" | |||
| }, | |||
| { | |||
| "font_class": "chat-filled", | |||
| "unicode": "\ue659" | |||
| }, | |||
| { | |||
| "font_class": "chatboxes", | |||
| "unicode": "\ue696" | |||
| }, | |||
| { | |||
| "font_class": "chatboxes-filled", | |||
| "unicode": "\ue692" | |||
| }, | |||
| { | |||
| "font_class": "chatbubble", | |||
| "unicode": "\ue697" | |||
| }, | |||
| { | |||
| "font_class": "chatbubble-filled", | |||
| "unicode": "\ue694" | |||
| }, | |||
| { | |||
| "font_class": "checkbox", | |||
| "unicode": "\ue62b" | |||
| }, | |||
| { | |||
| "font_class": "checkbox-filled", | |||
| "unicode": "\ue62c" | |||
| }, | |||
| { | |||
| "font_class": "checkmarkempty", | |||
| "unicode": "\ue65c" | |||
| }, | |||
| { | |||
| "font_class": "circle", | |||
| "unicode": "\ue65b" | |||
| }, | |||
| { | |||
| "font_class": "circle-filled", | |||
| "unicode": "\ue65e" | |||
| }, | |||
| { | |||
| "font_class": "clear", | |||
| "unicode": "\ue66d" | |||
| }, | |||
| { | |||
| "font_class": "close", | |||
| "unicode": "\ue673" | |||
| }, | |||
| { | |||
| "font_class": "closeempty", | |||
| "unicode": "\ue66c" | |||
| }, | |||
| { | |||
| "font_class": "cloud-download", | |||
| "unicode": "\ue647" | |||
| }, | |||
| { | |||
| "font_class": "cloud-download-filled", | |||
| "unicode": "\ue646" | |||
| }, | |||
| { | |||
| "font_class": "cloud-upload", | |||
| "unicode": "\ue645" | |||
| }, | |||
| { | |||
| "font_class": "cloud-upload-filled", | |||
| "unicode": "\ue648" | |||
| }, | |||
| { | |||
| "font_class": "color", | |||
| "unicode": "\ue6cf" | |||
| }, | |||
| { | |||
| "font_class": "color-filled", | |||
| "unicode": "\ue6c9" | |||
| }, | |||
| { | |||
| "font_class": "compose", | |||
| "unicode": "\ue67f" | |||
| }, | |||
| { | |||
| "font_class": "contact", | |||
| "unicode": "\ue693" | |||
| }, | |||
| { | |||
| "font_class": "contact-filled", | |||
| "unicode": "\ue695" | |||
| }, | |||
| { | |||
| "font_class": "down", | |||
| "unicode": "\ue6b8" | |||
| }, | |||
| { | |||
| "font_class": "bottom", | |||
| "unicode": "\ue6b8" | |||
| }, | |||
| { | |||
| "font_class": "download", | |||
| "unicode": "\ue68d" | |||
| }, | |||
| { | |||
| "font_class": "download-filled", | |||
| "unicode": "\ue681" | |||
| }, | |||
| { | |||
| "font_class": "email", | |||
| "unicode": "\ue69e" | |||
| }, | |||
| { | |||
| "font_class": "email-filled", | |||
| "unicode": "\ue69a" | |||
| }, | |||
| { | |||
| "font_class": "eye", | |||
| "unicode": "\ue651" | |||
| }, | |||
| { | |||
| "font_class": "eye-filled", | |||
| "unicode": "\ue66a" | |||
| }, | |||
| { | |||
| "font_class": "eye-slash", | |||
| "unicode": "\ue6b3" | |||
| }, | |||
| { | |||
| "font_class": "eye-slash-filled", | |||
| "unicode": "\ue6b4" | |||
| }, | |||
| { | |||
| "font_class": "fire", | |||
| "unicode": "\ue6a1" | |||
| }, | |||
| { | |||
| "font_class": "fire-filled", | |||
| "unicode": "\ue6c5" | |||
| }, | |||
| { | |||
| "font_class": "flag", | |||
| "unicode": "\ue65f" | |||
| }, | |||
| { | |||
| "font_class": "flag-filled", | |||
| "unicode": "\ue660" | |||
| }, | |||
| { | |||
| "font_class": "folder-add", | |||
| "unicode": "\ue6a9" | |||
| }, | |||
| { | |||
| "font_class": "folder-add-filled", | |||
| "unicode": "\ue6c8" | |||
| }, | |||
| { | |||
| "font_class": "font", | |||
| "unicode": "\ue6a3" | |||
| }, | |||
| { | |||
| "font_class": "forward", | |||
| "unicode": "\ue6ba" | |||
| }, | |||
| { | |||
| "font_class": "gear", | |||
| "unicode": "\ue664" | |||
| }, | |||
| { | |||
| "font_class": "gear-filled", | |||
| "unicode": "\ue661" | |||
| }, | |||
| { | |||
| "font_class": "gift", | |||
| "unicode": "\ue6a4" | |||
| }, | |||
| { | |||
| "font_class": "gift-filled", | |||
| "unicode": "\ue6c4" | |||
| }, | |||
| { | |||
| "font_class": "hand-down", | |||
| "unicode": "\ue63d" | |||
| }, | |||
| { | |||
| "font_class": "hand-down-filled", | |||
| "unicode": "\ue63c" | |||
| }, | |||
| { | |||
| "font_class": "hand-up", | |||
| "unicode": "\ue63f" | |||
| }, | |||
| { | |||
| "font_class": "hand-up-filled", | |||
| "unicode": "\ue63e" | |||
| }, | |||
| { | |||
| "font_class": "headphones", | |||
| "unicode": "\ue630" | |||
| }, | |||
| { | |||
| "font_class": "heart", | |||
| "unicode": "\ue639" | |||
| }, | |||
| { | |||
| "font_class": "heart-filled", | |||
| "unicode": "\ue641" | |||
| }, | |||
| { | |||
| "font_class": "help", | |||
| "unicode": "\ue679" | |||
| }, | |||
| { | |||
| "font_class": "help-filled", | |||
| "unicode": "\ue674" | |||
| }, | |||
| { | |||
| "font_class": "home", | |||
| "unicode": "\ue662" | |||
| }, | |||
| { | |||
| "font_class": "home-filled", | |||
| "unicode": "\ue663" | |||
| }, | |||
| { | |||
| "font_class": "image", | |||
| "unicode": "\ue670" | |||
| }, | |||
| { | |||
| "font_class": "image-filled", | |||
| "unicode": "\ue678" | |||
| }, | |||
| { | |||
| "font_class": "images", | |||
| "unicode": "\ue650" | |||
| }, | |||
| { | |||
| "font_class": "images-filled", | |||
| "unicode": "\ue64b" | |||
| }, | |||
| { | |||
| "font_class": "info", | |||
| "unicode": "\ue669" | |||
| }, | |||
| { | |||
| "font_class": "info-filled", | |||
| "unicode": "\ue649" | |||
| }, | |||
| { | |||
| "font_class": "left", | |||
| "unicode": "\ue6b7" | |||
| }, | |||
| { | |||
| "font_class": "link", | |||
| "unicode": "\ue6a5" | |||
| }, | |||
| { | |||
| "font_class": "list", | |||
| "unicode": "\ue644" | |||
| }, | |||
| { | |||
| "font_class": "location", | |||
| "unicode": "\ue6ae" | |||
| }, | |||
| { | |||
| "font_class": "location-filled", | |||
| "unicode": "\ue6af" | |||
| }, | |||
| { | |||
| "font_class": "locked", | |||
| "unicode": "\ue66b" | |||
| }, | |||
| { | |||
| "font_class": "locked-filled", | |||
| "unicode": "\ue668" | |||
| }, | |||
| { | |||
| "font_class": "loop", | |||
| "unicode": "\ue633" | |||
| }, | |||
| { | |||
| "font_class": "mail-open", | |||
| "unicode": "\ue643" | |||
| }, | |||
| { | |||
| "font_class": "mail-open-filled", | |||
| "unicode": "\ue63a" | |||
| }, | |||
| { | |||
| "font_class": "map", | |||
| "unicode": "\ue667" | |||
| }, | |||
| { | |||
| "font_class": "map-filled", | |||
| "unicode": "\ue666" | |||
| }, | |||
| { | |||
| "font_class": "map-pin", | |||
| "unicode": "\ue6ad" | |||
| }, | |||
| { | |||
| "font_class": "map-pin-ellipse", | |||
| "unicode": "\ue6ac" | |||
| }, | |||
| { | |||
| "font_class": "medal", | |||
| "unicode": "\ue6a2" | |||
| }, | |||
| { | |||
| "font_class": "medal-filled", | |||
| "unicode": "\ue6c3" | |||
| }, | |||
| { | |||
| "font_class": "mic", | |||
| "unicode": "\ue671" | |||
| }, | |||
| { | |||
| "font_class": "mic-filled", | |||
| "unicode": "\ue677" | |||
| }, | |||
| { | |||
| "font_class": "micoff", | |||
| "unicode": "\ue67e" | |||
| }, | |||
| { | |||
| "font_class": "micoff-filled", | |||
| "unicode": "\ue6b0" | |||
| }, | |||
| { | |||
| "font_class": "minus", | |||
| "unicode": "\ue66f" | |||
| }, | |||
| { | |||
| "font_class": "minus-filled", | |||
| "unicode": "\ue67d" | |||
| }, | |||
| { | |||
| "font_class": "more", | |||
| "unicode": "\ue64d" | |||
| }, | |||
| { | |||
| "font_class": "more-filled", | |||
| "unicode": "\ue64e" | |||
| }, | |||
| { | |||
| "font_class": "navigate", | |||
| "unicode": "\ue66e" | |||
| }, | |||
| { | |||
| "font_class": "navigate-filled", | |||
| "unicode": "\ue67a" | |||
| }, | |||
| { | |||
| "font_class": "notification", | |||
| "unicode": "\ue6a6" | |||
| }, | |||
| { | |||
| "font_class": "notification-filled", | |||
| "unicode": "\ue6c1" | |||
| }, | |||
| { | |||
| "font_class": "paperclip", | |||
| "unicode": "\ue652" | |||
| }, | |||
| { | |||
| "font_class": "paperplane", | |||
| "unicode": "\ue672" | |||
| }, | |||
| { | |||
| "font_class": "paperplane-filled", | |||
| "unicode": "\ue675" | |||
| }, | |||
| { | |||
| "font_class": "person", | |||
| "unicode": "\ue699" | |||
| }, | |||
| { | |||
| "font_class": "person-filled", | |||
| "unicode": "\ue69d" | |||
| }, | |||
| { | |||
| "font_class": "personadd", | |||
| "unicode": "\ue69f" | |||
| }, | |||
| { | |||
| "font_class": "personadd-filled", | |||
| "unicode": "\ue698" | |||
| }, | |||
| { | |||
| "font_class": "personadd-filled-copy", | |||
| "unicode": "\ue6d1" | |||
| }, | |||
| { | |||
| "font_class": "phone", | |||
| "unicode": "\ue69c" | |||
| }, | |||
| { | |||
| "font_class": "phone-filled", | |||
| "unicode": "\ue69b" | |||
| }, | |||
| { | |||
| "font_class": "plus", | |||
| "unicode": "\ue676" | |||
| }, | |||
| { | |||
| "font_class": "plus-filled", | |||
| "unicode": "\ue6c7" | |||
| }, | |||
| { | |||
| "font_class": "plusempty", | |||
| "unicode": "\ue67b" | |||
| }, | |||
| { | |||
| "font_class": "pulldown", | |||
| "unicode": "\ue632" | |||
| }, | |||
| { | |||
| "font_class": "pyq", | |||
| "unicode": "\ue682" | |||
| }, | |||
| { | |||
| "font_class": "qq", | |||
| "unicode": "\ue680" | |||
| }, | |||
| { | |||
| "font_class": "redo", | |||
| "unicode": "\ue64a" | |||
| }, | |||
| { | |||
| "font_class": "redo-filled", | |||
| "unicode": "\ue655" | |||
| }, | |||
| { | |||
| "font_class": "refresh", | |||
| "unicode": "\ue657" | |||
| }, | |||
| { | |||
| "font_class": "refresh-filled", | |||
| "unicode": "\ue656" | |||
| }, | |||
| { | |||
| "font_class": "refreshempty", | |||
| "unicode": "\ue6bf" | |||
| }, | |||
| { | |||
| "font_class": "reload", | |||
| "unicode": "\ue6b2" | |||
| }, | |||
| { | |||
| "font_class": "right", | |||
| "unicode": "\ue6b5" | |||
| }, | |||
| { | |||
| "font_class": "scan", | |||
| "unicode": "\ue62a" | |||
| }, | |||
| { | |||
| "font_class": "search", | |||
| "unicode": "\ue654" | |||
| }, | |||
| { | |||
| "font_class": "settings", | |||
| "unicode": "\ue653" | |||
| }, | |||
| { | |||
| "font_class": "settings-filled", | |||
| "unicode": "\ue6ce" | |||
| }, | |||
| { | |||
| "font_class": "shop", | |||
| "unicode": "\ue62f" | |||
| }, | |||
| { | |||
| "font_class": "shop-filled", | |||
| "unicode": "\ue6cd" | |||
| }, | |||
| { | |||
| "font_class": "smallcircle", | |||
| "unicode": "\ue67c" | |||
| }, | |||
| { | |||
| "font_class": "smallcircle-filled", | |||
| "unicode": "\ue665" | |||
| }, | |||
| { | |||
| "font_class": "sound", | |||
| "unicode": "\ue684" | |||
| }, | |||
| { | |||
| "font_class": "sound-filled", | |||
| "unicode": "\ue686" | |||
| }, | |||
| { | |||
| "font_class": "spinner-cycle", | |||
| "unicode": "\ue68a" | |||
| }, | |||
| { | |||
| "font_class": "staff", | |||
| "unicode": "\ue6a7" | |||
| }, | |||
| { | |||
| "font_class": "staff-filled", | |||
| "unicode": "\ue6cb" | |||
| }, | |||
| { | |||
| "font_class": "star", | |||
| "unicode": "\ue688" | |||
| }, | |||
| { | |||
| "font_class": "star-filled", | |||
| "unicode": "\ue68f" | |||
| }, | |||
| { | |||
| "font_class": "starhalf", | |||
| "unicode": "\ue683" | |||
| }, | |||
| { | |||
| "font_class": "trash", | |||
| "unicode": "\ue687" | |||
| }, | |||
| { | |||
| "font_class": "trash-filled", | |||
| "unicode": "\ue685" | |||
| }, | |||
| { | |||
| "font_class": "tune", | |||
| "unicode": "\ue6aa" | |||
| }, | |||
| { | |||
| "font_class": "tune-filled", | |||
| "unicode": "\ue6ca" | |||
| }, | |||
| { | |||
| "font_class": "undo", | |||
| "unicode": "\ue64f" | |||
| }, | |||
| { | |||
| "font_class": "undo-filled", | |||
| "unicode": "\ue64c" | |||
| }, | |||
| { | |||
| "font_class": "up", | |||
| "unicode": "\ue6b6" | |||
| }, | |||
| { | |||
| "font_class": "top", | |||
| "unicode": "\ue6b6" | |||
| }, | |||
| { | |||
| "font_class": "upload", | |||
| "unicode": "\ue690" | |||
| }, | |||
| { | |||
| "font_class": "upload-filled", | |||
| "unicode": "\ue68e" | |||
| }, | |||
| { | |||
| "font_class": "videocam", | |||
| "unicode": "\ue68c" | |||
| }, | |||
| { | |||
| "font_class": "videocam-filled", | |||
| "unicode": "\ue689" | |||
| }, | |||
| { | |||
| "font_class": "vip", | |||
| "unicode": "\ue6a8" | |||
| }, | |||
| { | |||
| "font_class": "vip-filled", | |||
| "unicode": "\ue6c6" | |||
| }, | |||
| { | |||
| "font_class": "wallet", | |||
| "unicode": "\ue6b1" | |||
| }, | |||
| { | |||
| "font_class": "wallet-filled", | |||
| "unicode": "\ue6c2" | |||
| }, | |||
| { | |||
| "font_class": "weibo", | |||
| "unicode": "\ue68b" | |||
| }, | |||
| { | |||
| "font_class": "weixin", | |||
| "unicode": "\ue691" | |||
| } | |||
| ] | |||
| // export const fontData = JSON.parse<IconsDataItem>(fontDataJson) | |||
| @ -0,0 +1,89 @@ | |||
| { | |||
| "id": "uni-icons", | |||
| "displayName": "uni-icons 图标", | |||
| "version": "2.0.10", | |||
| "description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "uniui", | |||
| "icon", | |||
| "图标" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "^3.2.14" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||
| "type": "component-vue" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": ["uni-scss"], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y", | |||
| "alipay": "n" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y", | |||
| "app-uvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y", | |||
| "钉钉": "y", | |||
| "快手": "y", | |||
| "飞书": "y", | |||
| "京东": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "y", | |||
| "联盟": "y" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,8 @@ | |||
| ## Icons 图标 | |||
| > **组件名:uni-icons** | |||
| > 代码块: `uIcons` | |||
| 用于展示 icons 图标 。 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,51 @@ | |||
| ## 1.3.11(2023-03-29) | |||
| - 修复 自定义状态栏高度闪动BUG | |||
| ## 1.3.10(2023-03-29) | |||
| - 修复 暗黑模式下边线颜色错误的bug | |||
| ## 1.3.9(2022-10-13) | |||
| - 修复 条件编译错误的bug | |||
| ## 1.3.8(2022-10-12) | |||
| - 修复 nvue 环境 fixed 为 true 的情况下,无法置顶的 bug | |||
| ## 1.3.7(2022-08-11) | |||
| - 修复 nvue 环境下 fixed 为 true 的情况下,无法置顶的 bug | |||
| ## 1.3.6(2022-06-30) | |||
| - 修复 组件示例中插槽用法无法显示内容的bug | |||
| ## 1.3.5(2022-05-24) | |||
| - 新增 stat 属性 ,可开启统计title 上报 ,仅使用了title 属性且项目开启了uni统计生效 | |||
| ## 1.3.4(2022-01-24) | |||
| - 更新 组件示例 | |||
| ## 1.3.3(2022-01-24) | |||
| - 新增 left-width/right-width属性 ,可修改左右两侧的宽度 | |||
| ## 1.3.2(2022-01-18) | |||
| - 修复 在vue下,标题不垂直居中的bug | |||
| ## 1.3.1(2022-01-18) | |||
| - 修复 height 属性类型错误 | |||
| ## 1.3.0(2022-01-18) | |||
| - 新增 height 属性,可修改组件高度 | |||
| - 新增 dark 属性可可开启暗黑模式 | |||
| - 优化 标题字数过多显示省略号 | |||
| - 优化 插槽,插入内容可完全覆盖 | |||
| ## 1.2.1(2022-01-10) | |||
| - 修复 color 属性不生效的bug | |||
| ## 1.2.0(2021-11-19) | |||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar) | |||
| ## 1.1.0(2021-07-30) | |||
| - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.0.11(2021-05-12) | |||
| - 新增 组件示例地址 | |||
| ## 1.0.10(2021-04-30) | |||
| - 修复 在nvue下fixed为true,宽度不能撑满的Bug | |||
| ## 1.0.9(2021-04-21) | |||
| - 优化 添加依赖 uni-icons, 导入后自动下载依赖 | |||
| ## 1.0.8(2021-04-14) | |||
| - uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug | |||
| ## 1.0.7(2021-02-25) | |||
| - 修复 easycom 下,找不到 uni-status-bar 的bug | |||
| ## 1.0.6(2021-02-05) | |||
| - 优化 组件引用关系,通过uni_modules引用组件 | |||
| ## 1.0.5(2021-02-05) | |||
| - 调整为uni_modules目录规范 | |||
| @ -0,0 +1,357 @@ | |||
| <template> | |||
| <view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}"> | |||
| <view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" | |||
| :style="{ 'background-color': themeBgColor, 'border-bottom-color':themeColor }" > | |||
| <status-bar v-if="statusBar" /> | |||
| <view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}" | |||
| class="uni-navbar__header"> | |||
| <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left" | |||
| :style="{width:leftIconWidth}"> | |||
| <slot name="left"> | |||
| <view class="uni-navbar__content_view" v-if="leftIcon.length > 0"> | |||
| <uni-icons :color="themeColor" :type="leftIcon" size="20" /> | |||
| </view> | |||
| <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text" | |||
| v-if="leftText.length"> | |||
| <text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text> | |||
| </view> | |||
| </slot> | |||
| </view> | |||
| <view class="uni-navbar__header-container " @tap="onClickTitle"> | |||
| <slot> | |||
| <view class="uni-navbar__header-container-inner" v-if="title.length>0"> | |||
| <text class="uni-nav-bar-text uni-ellipsis-1" | |||
| :style="{color: themeColor }">{{ title }}</text> | |||
| </view> | |||
| </slot> | |||
| </view> | |||
| <view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right" | |||
| :style="{width:rightIconWidth}"> | |||
| <slot name="right"> | |||
| <view v-if="rightIcon.length"> | |||
| <uni-icons :color="themeColor" :type="rightIcon" size="22" /> | |||
| </view> | |||
| <view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length"> | |||
| <text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text> | |||
| </view> | |||
| </slot> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- #ifndef APP-NVUE --> | |||
| <view class="uni-navbar__placeholder" v-if="fixed"> | |||
| <status-bar v-if="statusBar" /> | |||
| <view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" /> | |||
| </view> | |||
| <!-- #endif --> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import statusBar from "./uni-status-bar.vue"; | |||
| const getVal = (val) => typeof val === 'number' ? val + 'px' : val; | |||
| /** | |||
| * | |||
| * | |||
| * NavBar 自定义导航栏 | |||
| * @description 导航栏组件,主要用于头部导航 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=52 | |||
| * @property {Boolean} dark 开启黑暗模式 | |||
| * @property {String} title 标题文字 | |||
| * @property {String} leftText 左侧按钮文本 | |||
| * @property {String} rightText 右侧按钮文本 | |||
| * @property {String} leftIcon 左侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) | |||
| * @property {String} rightIcon 右侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) | |||
| * @property {String} color 图标和文字颜色 | |||
| * @property {String} backgroundColor 导航栏背景颜色 | |||
| * @property {Boolean} fixed = [true|false] 是否固定顶部 | |||
| * @property {Boolean} statusBar = [true|false] 是否包含状态栏 | |||
| * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影 | |||
| * @property {Boolean} stat 是否开启统计标题上报 | |||
| * @event {Function} clickLeft 左侧按钮点击时触发 | |||
| * @event {Function} clickRight 右侧按钮点击时触发 | |||
| * @event {Function} clickTitle 中间标题点击时触发 | |||
| */ | |||
| export default { | |||
| name: "UniNavBar", | |||
| components: { | |||
| statusBar | |||
| }, | |||
| emits: ['clickLeft', 'clickRight', 'clickTitle'], | |||
| props: { | |||
| dark: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| title: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| leftText: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| rightText: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| leftIcon: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| rightIcon: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| fixed: { | |||
| type: [Boolean, String], | |||
| default: false | |||
| }, | |||
| color: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| backgroundColor: { | |||
| type: String, | |||
| default: "" | |||
| }, | |||
| statusBar: { | |||
| type: [Boolean, String], | |||
| default: false | |||
| }, | |||
| shadow: { | |||
| type: [Boolean, String], | |||
| default: false | |||
| }, | |||
| border: { | |||
| type: [Boolean, String], | |||
| default: true | |||
| }, | |||
| height: { | |||
| type: [Number, String], | |||
| default: 44 | |||
| }, | |||
| leftWidth: { | |||
| type: [Number, String], | |||
| default: 60 | |||
| }, | |||
| rightWidth: { | |||
| type: [Number, String], | |||
| default: 60 | |||
| }, | |||
| stat: { | |||
| type: [Boolean, String], | |||
| default: '' | |||
| } | |||
| }, | |||
| computed: { | |||
| themeBgColor() { | |||
| if (this.dark) { | |||
| // 默认值 | |||
| if (this.backgroundColor) { | |||
| return this.backgroundColor | |||
| } else { | |||
| return this.dark ? '#333' : '#FFF' | |||
| } | |||
| } | |||
| return this.backgroundColor || '#FFF' | |||
| }, | |||
| themeColor() { | |||
| if (this.dark) { | |||
| // 默认值 | |||
| if (this.color) { | |||
| return this.color | |||
| } else { | |||
| return this.dark ? '#fff' : '#333' | |||
| } | |||
| } | |||
| return this.color || '#333' | |||
| }, | |||
| navbarHeight() { | |||
| return getVal(this.height) | |||
| }, | |||
| leftIconWidth() { | |||
| return getVal(this.leftWidth) | |||
| }, | |||
| rightIconWidth() { | |||
| return getVal(this.rightWidth) | |||
| } | |||
| }, | |||
| mounted() { | |||
| if (uni.report && this.stat && this.title !== '') { | |||
| uni.report('title', this.title) | |||
| } | |||
| }, | |||
| methods: { | |||
| onClickLeft() { | |||
| this.$emit("clickLeft"); | |||
| }, | |||
| onClickRight() { | |||
| this.$emit("clickRight"); | |||
| }, | |||
| onClickTitle() { | |||
| this.$emit("clickTitle"); | |||
| } | |||
| } | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| $nav-height: 44px; | |||
| .uni-nvue-fixed { | |||
| /* #ifdef APP-NVUE */ | |||
| position: sticky; | |||
| /* #endif */ | |||
| } | |||
| .uni-navbar { | |||
| // box-sizing: border-box; | |||
| } | |||
| .uni-nav-bar-text { | |||
| /* #ifdef APP-PLUS */ | |||
| font-size: 34rpx; | |||
| /* #endif */ | |||
| /* #ifndef APP-PLUS */ | |||
| font-size: 14px; | |||
| /* #endif */ | |||
| } | |||
| .uni-nav-bar-right-text { | |||
| font-size: 12px; | |||
| } | |||
| .uni-navbar__content { | |||
| position: relative; | |||
| // background-color: #fff; | |||
| // box-sizing: border-box; | |||
| background-color: transparent; | |||
| } | |||
| .uni-navbar__content_view { | |||
| // box-sizing: border-box; | |||
| } | |||
| .uni-navbar-btn-text { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: column; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| line-height: 12px; | |||
| } | |||
| .uni-navbar__header { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| padding: 0 10px; | |||
| flex-direction: row; | |||
| height: $nav-height; | |||
| font-size: 12px; | |||
| } | |||
| .uni-navbar__header-btns { | |||
| /* #ifndef APP-NVUE */ | |||
| overflow: hidden; | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-wrap: nowrap; | |||
| flex-direction: row; | |||
| width: 120rpx; | |||
| // padding: 0 6px; | |||
| justify-content: center; | |||
| align-items: center; | |||
| /* #ifdef H5 */ | |||
| cursor: pointer; | |||
| /* #endif */ | |||
| } | |||
| .uni-navbar__header-btns-left { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| width: 120rpx; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| } | |||
| .uni-navbar__header-btns-right { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| // width: 150rpx; | |||
| // padding-right: 30rpx; | |||
| justify-content: flex-end; | |||
| align-items: center; | |||
| } | |||
| .uni-navbar__header-container { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex: 1; | |||
| padding: 0 10px; | |||
| overflow: hidden; | |||
| } | |||
| .uni-navbar__header-container-inner { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex: 1; | |||
| flex-direction: row; | |||
| align-items: center; | |||
| justify-content: center; | |||
| font-size: 12px; | |||
| overflow: hidden; | |||
| // box-sizing: border-box; | |||
| } | |||
| .uni-navbar__placeholder-view { | |||
| height: $nav-height; | |||
| } | |||
| .uni-navbar--fixed { | |||
| position: fixed; | |||
| z-index: 998; | |||
| /* #ifdef H5 */ | |||
| left: var(--window-left); | |||
| right: var(--window-right); | |||
| /* #endif */ | |||
| /* #ifndef H5 */ | |||
| left: 0; | |||
| right: 0; | |||
| /* #endif */ | |||
| } | |||
| .uni-navbar--shadow { | |||
| box-shadow: 0 1px 6px #ccc; | |||
| } | |||
| .uni-navbar--border { | |||
| border-bottom-width: 1rpx; | |||
| border-bottom-style: solid; | |||
| border-bottom-color: #eee; | |||
| } | |||
| .uni-ellipsis-1 { | |||
| overflow: hidden; | |||
| /* #ifndef APP-NVUE */ | |||
| white-space: nowrap; | |||
| text-overflow: ellipsis; | |||
| /* #endif */ | |||
| /* #ifdef APP-NVUE */ | |||
| lines: 1; | |||
| text-overflow: ellipsis; | |||
| /* #endif */ | |||
| } | |||
| // 暗主题配置 | |||
| .uni-dark {} | |||
| </style> | |||
| @ -0,0 +1,24 @@ | |||
| <template> | |||
| <view :style="{ height: statusBarHeight }" class="uni-status-bar"> | |||
| <slot /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'UniStatusBar', | |||
| data() { | |||
| return { | |||
| statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px' | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" > | |||
| .uni-status-bar { | |||
| // width: 750rpx; | |||
| height: 20px; | |||
| // height: var(--status-bar-height); | |||
| } | |||
| </style> | |||
| @ -0,0 +1,86 @@ | |||
| { | |||
| "id": "uni-nav-bar", | |||
| "displayName": "uni-nav-bar 自定义导航栏", | |||
| "version": "1.3.11", | |||
| "description": "自定义导航栏组件,主要用于头部导航。", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "导航", | |||
| "导航栏", | |||
| "自定义导航栏" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||
| "type": "component-vue" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": [ | |||
| "uni-scss", | |||
| "uni-icons" | |||
| ], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "u", | |||
| "联盟": "u" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,15 @@ | |||
| ## NavBar 导航栏 | |||
| > **组件名:uni-nav-bar** | |||
| > 代码块: `uNavBar` | |||
| 导航栏组件,主要用于头部导航。 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,84 @@ | |||
| ## 1.9.1(2024-04-02) | |||
| - 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法) | |||
| ## 1.9.0(2024-03-28) | |||
| - 修复 uni-popup-dialog 双向绑定时初始化逻辑修正 | |||
| ## 1.8.9(2024-03-20) | |||
| - 修复 uni-popup-dialog 数据输入时修正为双向绑定 | |||
| ## 1.8.8(2024-02-20) | |||
| - 修复 uni-popup 在微信小程序下出现文字向上闪动的bug | |||
| ## 1.8.7(2024-02-02) | |||
| - 新增 uni-popup-dialog 新增属性focus:input模式下,是否自动自动聚焦 | |||
| ## 1.8.6(2024-01-30) | |||
| - 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数 | |||
| ## 1.8.5(2024-01-26) | |||
| - 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示 | |||
| ## 1.8.4(2023-11-15) | |||
| - 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close` | |||
| ## 1.8.3(2023-04-17) | |||
| - 修复 uni-popup 重复打开时的 bug | |||
| ## 1.8.2(2023-02-02) | |||
| - uni-popup-dialog 组件新增 inputType 属性 | |||
| ## 1.8.1(2022-12-01) | |||
| - 修复 nvue 下 v-show 报错 | |||
| ## 1.8.0(2022-11-29) | |||
| - 优化 主题样式 | |||
| ## 1.7.9(2022-04-02) | |||
| - 修复 弹出层内部无法滚动的bug | |||
| ## 1.7.8(2022-03-28) | |||
| - 修复 小程序中高度错误的bug | |||
| ## 1.7.7(2022-03-17) | |||
| - 修复 快速调用open出现问题的Bug | |||
| ## 1.7.6(2022-02-14) | |||
| - 修复 safeArea 属性不能设置为false的bug | |||
| ## 1.7.5(2022-01-19) | |||
| - 修复 isMaskClick 失效的bug | |||
| ## 1.7.4(2022-01-19) | |||
| - 新增 cancelText \ confirmText 属性 ,可自定义文本 | |||
| - 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色 | |||
| - 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题 | |||
| ## 1.7.3(2022-01-13) | |||
| - 修复 设置 safeArea 属性不生效的bug | |||
| ## 1.7.2(2021-11-26) | |||
| - 优化 组件示例 | |||
| ## 1.7.1(2021-11-26) | |||
| - 修复 vuedoc 文字错误 | |||
| ## 1.7.0(2021-11-19) | |||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup) | |||
| ## 1.6.2(2021-08-24) | |||
| - 新增 支持国际化 | |||
| ## 1.6.1(2021-07-30) | |||
| - 优化 vue3下事件警告的问题 | |||
| ## 1.6.0(2021-07-13) | |||
| - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.5.0(2021-06-23) | |||
| - 新增 mask-click 遮罩层点击事件 | |||
| ## 1.4.5(2021-06-22) | |||
| - 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug | |||
| ## 1.4.4(2021-06-18) | |||
| - 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug | |||
| ## 1.4.3(2021-06-08) | |||
| - 修复 错误的 watch 字段 | |||
| - 修复 safeArea 属性不生效的问题 | |||
| - 修复 点击内容,再点击遮罩无法关闭的Bug | |||
| ## 1.4.2(2021-05-12) | |||
| - 新增 组件示例地址 | |||
| ## 1.4.1(2021-04-29) | |||
| - 修复 组件内放置 input 、textarea 组件,无法聚焦的问题 | |||
| ## 1.4.0 (2021-04-29) | |||
| - 新增 type 属性的 left\right 值,支持左右弹出 | |||
| - 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗 | |||
| - 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色 | |||
| - 新增 safeArea 属性,是否适配底部安全区 | |||
| - 修复 App\h5\微信小程序底部安全区占位不对的Bug | |||
| - 修复 App 端弹出等待的Bug | |||
| - 优化 提升低配设备性能,优化动画卡顿问题 | |||
| - 优化 更简单的组件自定义方式 | |||
| ## 1.2.9(2021-02-05) | |||
| - 优化 组件引用关系,通过uni_modules引用组件 | |||
| ## 1.2.8(2021-02-05) | |||
| - 调整为uni_modules目录规范 | |||
| ## 1.2.7(2021-02-05) | |||
| - 调整为uni_modules目录规范 | |||
| - 新增 支持 PC 端 | |||
| - 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端 | |||
| @ -0,0 +1,45 @@ | |||
| // #ifdef H5 | |||
| export default { | |||
| name: 'Keypress', | |||
| props: { | |||
| disable: { | |||
| type: Boolean, | |||
| default: false | |||
| } | |||
| }, | |||
| mounted () { | |||
| const keyNames = { | |||
| esc: ['Esc', 'Escape'], | |||
| tab: 'Tab', | |||
| enter: 'Enter', | |||
| space: [' ', 'Spacebar'], | |||
| up: ['Up', 'ArrowUp'], | |||
| left: ['Left', 'ArrowLeft'], | |||
| right: ['Right', 'ArrowRight'], | |||
| down: ['Down', 'ArrowDown'], | |||
| delete: ['Backspace', 'Delete', 'Del'] | |||
| } | |||
| const listener = ($event) => { | |||
| if (this.disable) { | |||
| return | |||
| } | |||
| const keyName = Object.keys(keyNames).find(key => { | |||
| const keyName = $event.key | |||
| const value = keyNames[key] | |||
| return value === keyName || (Array.isArray(value) && value.includes(keyName)) | |||
| }) | |||
| if (keyName) { | |||
| // 避免和其他按键事件冲突 | |||
| setTimeout(() => { | |||
| this.$emit(keyName, {}) | |||
| }, 0) | |||
| } | |||
| } | |||
| document.addEventListener('keyup', listener) | |||
| this.$once('hook:beforeDestroy', () => { | |||
| document.removeEventListener('keyup', listener) | |||
| }) | |||
| }, | |||
| render: () => {} | |||
| } | |||
| // #endif | |||
| @ -0,0 +1,316 @@ | |||
| <template> | |||
| <view class="uni-popup-dialog"> | |||
| <view class="uni-dialog-title"> | |||
| <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text> | |||
| </view> | |||
| <view v-if="mode === 'base'" class="uni-dialog-content"> | |||
| <slot> | |||
| <text class="uni-dialog-content-text">{{content}}</text> | |||
| </slot> | |||
| </view> | |||
| <view v-else class="uni-dialog-content"> | |||
| <slot> | |||
| <input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType" | |||
| :placeholder="placeholderText" :focus="focus"> | |||
| </slot> | |||
| </view> | |||
| <view class="uni-dialog-button-group"> | |||
| <view class="uni-dialog-button" v-if="showClose" @click="closeDialog"> | |||
| <text class="uni-dialog-button-text">{{closeText}}</text> | |||
| </view> | |||
| <view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk"> | |||
| <text class="uni-dialog-button-text uni-button-color">{{okText}}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import popup from '../uni-popup/popup.js' | |||
| import { | |||
| initVueI18n | |||
| } from '@dcloudio/uni-i18n' | |||
| import messages from '../uni-popup/i18n/index.js' | |||
| const { | |||
| t | |||
| } = initVueI18n(messages) | |||
| /** | |||
| * PopUp 弹出层-对话框样式 | |||
| * @description 弹出层-对话框样式 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=329 | |||
| * @property {String} value input 模式下的默认值 | |||
| * @property {String} placeholder input 模式下输入提示 | |||
| * @property {Boolean} focus input模式下是否自动聚焦,默认为true | |||
| * @property {String} type = [success|warning|info|error] 主题样式 | |||
| * @value success 成功 | |||
| * @value warning 提示 | |||
| * @value info 消息 | |||
| * @value error 错误 | |||
| * @property {String} mode = [base|input] 模式、 | |||
| * @value base 基础对话框 | |||
| * @value input 可输入对话框 | |||
| * @showClose {Boolean} 是否显示关闭按钮 | |||
| * @property {String} content 对话框内容 | |||
| * @property {Boolean} beforeClose 是否拦截取消事件 | |||
| * @property {Number} maxlength 输入 | |||
| * @event {Function} confirm 点击确认按钮触发 | |||
| * @event {Function} close 点击取消按钮触发 | |||
| */ | |||
| export default { | |||
| name: "uniPopupDialog", | |||
| mixins: [popup], | |||
| emits: ['confirm', 'close', 'update:modelValue', 'input'], | |||
| props: { | |||
| inputType: { | |||
| type: String, | |||
| default: 'text' | |||
| }, | |||
| showClose: { | |||
| type: Boolean, | |||
| default: true | |||
| }, | |||
| // #ifdef VUE2 | |||
| value: { | |||
| type: [String, Number], | |||
| default: '' | |||
| }, | |||
| // #endif | |||
| // #ifdef VUE3 | |||
| modelValue: { | |||
| type: [Number, String], | |||
| default: '' | |||
| }, | |||
| // #endif | |||
| placeholder: { | |||
| type: [String, Number], | |||
| default: '' | |||
| }, | |||
| type: { | |||
| type: String, | |||
| default: 'error' | |||
| }, | |||
| mode: { | |||
| type: String, | |||
| default: 'base' | |||
| }, | |||
| title: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| content: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| beforeClose: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| cancelText: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| confirmText: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| maxlength: { | |||
| type: Number, | |||
| default: -1, | |||
| }, | |||
| focus: { | |||
| type: Boolean, | |||
| default: true, | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| dialogType: 'error', | |||
| val: "" | |||
| } | |||
| }, | |||
| computed: { | |||
| okText() { | |||
| return this.confirmText || t("uni-popup.ok") | |||
| }, | |||
| closeText() { | |||
| return this.cancelText || t("uni-popup.cancel") | |||
| }, | |||
| placeholderText() { | |||
| return this.placeholder || t("uni-popup.placeholder") | |||
| }, | |||
| titleText() { | |||
| return this.title || t("uni-popup.title") | |||
| } | |||
| }, | |||
| watch: { | |||
| type(val) { | |||
| this.dialogType = val | |||
| }, | |||
| mode(val) { | |||
| if (val === 'input') { | |||
| this.dialogType = 'info' | |||
| } | |||
| }, | |||
| value(val) { | |||
| if (this.maxlength != -1 && this.mode === 'input') { | |||
| this.val = val.slice(0, this.maxlength); | |||
| } else { | |||
| this.val = val | |||
| } | |||
| }, | |||
| val(val) { | |||
| // #ifdef VUE2 | |||
| // TODO 兼容 vue2 | |||
| this.$emit('input', val); | |||
| // #endif | |||
| // #ifdef VUE3 | |||
| // TODO 兼容 vue3 | |||
| this.$emit('update:modelValue', val); | |||
| // #endif | |||
| } | |||
| }, | |||
| created() { | |||
| // 对话框遮罩不可点击 | |||
| this.popup.disableMask() | |||
| // this.popup.closeMask() | |||
| if (this.mode === 'input') { | |||
| this.dialogType = 'info' | |||
| this.val = this.value; | |||
| // #ifdef VUE3 | |||
| this.val = this.modelValue; | |||
| // #endif | |||
| } else { | |||
| this.dialogType = this.type | |||
| } | |||
| }, | |||
| methods: { | |||
| /** | |||
| * 点击确认按钮 | |||
| */ | |||
| onOk() { | |||
| if (this.mode === 'input') { | |||
| this.$emit('confirm', this.val) | |||
| } else { | |||
| this.$emit('confirm') | |||
| } | |||
| if (this.beforeClose) return | |||
| this.popup.close() | |||
| }, | |||
| /** | |||
| * 点击取消按钮 | |||
| */ | |||
| closeDialog() { | |||
| this.$emit('close') | |||
| if (this.beforeClose) return | |||
| this.popup.close() | |||
| }, | |||
| close() { | |||
| this.popup.close() | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .uni-popup-dialog { | |||
| width: 300px; | |||
| border-radius: 11px; | |||
| background-color: #fff; | |||
| } | |||
| .uni-dialog-title { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| justify-content: center; | |||
| padding-top: 25px; | |||
| } | |||
| .uni-dialog-title-text { | |||
| font-size: 16px; | |||
| font-weight: 500; | |||
| } | |||
| .uni-dialog-content { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| justify-content: center; | |||
| align-items: center; | |||
| padding: 20px; | |||
| } | |||
| .uni-dialog-content-text { | |||
| font-size: 14px; | |||
| color: #6C6C6C; | |||
| } | |||
| .uni-dialog-button-group { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| border-top-color: #f5f5f5; | |||
| border-top-style: solid; | |||
| border-top-width: 1px; | |||
| } | |||
| .uni-dialog-button { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex: 1; | |||
| flex-direction: row; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 45px; | |||
| } | |||
| .uni-border-left { | |||
| border-left-color: #f0f0f0; | |||
| border-left-style: solid; | |||
| border-left-width: 1px; | |||
| } | |||
| .uni-dialog-button-text { | |||
| font-size: 16px; | |||
| color: #333; | |||
| } | |||
| .uni-button-color { | |||
| color: #007aff; | |||
| } | |||
| .uni-dialog-input { | |||
| flex: 1; | |||
| font-size: 14px; | |||
| border: 1px #eee solid; | |||
| height: 40px; | |||
| padding: 0 10px; | |||
| border-radius: 5px; | |||
| color: #555; | |||
| } | |||
| .uni-popup__success { | |||
| color: #4cd964; | |||
| } | |||
| .uni-popup__warn { | |||
| color: #f0ad4e; | |||
| } | |||
| .uni-popup__error { | |||
| color: #dd524d; | |||
| } | |||
| .uni-popup__info { | |||
| color: #909399; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,143 @@ | |||
| <template> | |||
| <view class="uni-popup-message"> | |||
| <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type"> | |||
| <slot> | |||
| <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text> | |||
| </slot> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import popup from '../uni-popup/popup.js' | |||
| /** | |||
| * PopUp 弹出层-消息提示 | |||
| * @description 弹出层-消息提示 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=329 | |||
| * @property {String} type = [success|warning|info|error] 主题样式 | |||
| * @value success 成功 | |||
| * @value warning 提示 | |||
| * @value info 消息 | |||
| * @value error 错误 | |||
| * @property {String} message 消息提示文字 | |||
| * @property {String} duration 显示时间,设置为 0 则不会自动关闭 | |||
| */ | |||
| export default { | |||
| name: 'uniPopupMessage', | |||
| mixins:[popup], | |||
| props: { | |||
| /** | |||
| * 主题 success/warning/info/error 默认 success | |||
| */ | |||
| type: { | |||
| type: String, | |||
| default: 'success' | |||
| }, | |||
| /** | |||
| * 消息文字 | |||
| */ | |||
| message: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| /** | |||
| * 显示时间,设置为 0 则不会自动关闭 | |||
| */ | |||
| duration: { | |||
| type: Number, | |||
| default: 3000 | |||
| }, | |||
| maskShow:{ | |||
| type:Boolean, | |||
| default:false | |||
| } | |||
| }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| created() { | |||
| this.popup.maskShow = this.maskShow | |||
| this.popup.messageChild = this | |||
| }, | |||
| methods: { | |||
| timerClose(){ | |||
| if(this.duration === 0) return | |||
| clearTimeout(this.timer) | |||
| this.timer = setTimeout(()=>{ | |||
| this.popup.close() | |||
| },this.duration) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" > | |||
| .uni-popup-message { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| justify-content: center; | |||
| } | |||
| .uni-popup-message__box { | |||
| background-color: #e1f3d8; | |||
| padding: 10px 15px; | |||
| border-color: #eee; | |||
| border-style: solid; | |||
| border-width: 1px; | |||
| flex: 1; | |||
| } | |||
| @media screen and (min-width: 500px) { | |||
| .fixforpc-width { | |||
| margin-top: 20px; | |||
| border-radius: 4px; | |||
| flex: none; | |||
| min-width: 380px; | |||
| /* #ifndef APP-NVUE */ | |||
| max-width: 50%; | |||
| /* #endif */ | |||
| /* #ifdef APP-NVUE */ | |||
| max-width: 500px; | |||
| /* #endif */ | |||
| } | |||
| } | |||
| .uni-popup-message-text { | |||
| font-size: 14px; | |||
| padding: 0; | |||
| } | |||
| .uni-popup__success { | |||
| background-color: #e1f3d8; | |||
| } | |||
| .uni-popup__success-text { | |||
| color: #67C23A; | |||
| } | |||
| .uni-popup__warn { | |||
| background-color: #faecd8; | |||
| } | |||
| .uni-popup__warn-text { | |||
| color: #E6A23C; | |||
| } | |||
| .uni-popup__error { | |||
| background-color: #fde2e2; | |||
| } | |||
| .uni-popup__error-text { | |||
| color: #F56C6C; | |||
| } | |||
| .uni-popup__info { | |||
| background-color: #F2F6FC; | |||
| } | |||
| .uni-popup__info-text { | |||
| color: #909399; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,187 @@ | |||
| <template> | |||
| <view class="uni-popup-share"> | |||
| <view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view> | |||
| <view class="uni-share-content"> | |||
| <view class="uni-share-content-box"> | |||
| <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)"> | |||
| <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> | |||
| <text class="uni-share-text">{{item.text}}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="uni-share-button-box"> | |||
| <button class="uni-share-button" @click="close">{{cancelText}}</button> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import popup from '../uni-popup/popup.js' | |||
| import { | |||
| initVueI18n | |||
| } from '@dcloudio/uni-i18n' | |||
| import messages from '../uni-popup/i18n/index.js' | |||
| const { t } = initVueI18n(messages) | |||
| export default { | |||
| name: 'UniPopupShare', | |||
| mixins:[popup], | |||
| emits:['select'], | |||
| props: { | |||
| title: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| beforeClose: { | |||
| type: Boolean, | |||
| default: false | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| bottomData: [{ | |||
| text: '微信', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png', | |||
| name: 'wx' | |||
| }, | |||
| { | |||
| text: '支付宝', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png', | |||
| name: 'ali' | |||
| }, | |||
| { | |||
| text: 'QQ', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png', | |||
| name: 'qq' | |||
| }, | |||
| { | |||
| text: '新浪', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png', | |||
| name: 'sina' | |||
| }, | |||
| // { | |||
| // text: '百度', | |||
| // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png', | |||
| // name: 'copy' | |||
| // }, | |||
| // { | |||
| // text: '其他', | |||
| // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png', | |||
| // name: 'more' | |||
| // } | |||
| ] | |||
| } | |||
| }, | |||
| created() {}, | |||
| computed: { | |||
| cancelText() { | |||
| return t("uni-popup.cancel") | |||
| }, | |||
| shareTitleText() { | |||
| return this.title || t("uni-popup.shareTitle") | |||
| } | |||
| }, | |||
| methods: { | |||
| /** | |||
| * 选择内容 | |||
| */ | |||
| select(item, index) { | |||
| this.$emit('select', { | |||
| item, | |||
| index | |||
| }) | |||
| this.close() | |||
| }, | |||
| /** | |||
| * 关闭窗口 | |||
| */ | |||
| close() { | |||
| if(this.beforeClose) return | |||
| this.popup.close() | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" > | |||
| .uni-popup-share { | |||
| background-color: #fff; | |||
| border-top-left-radius: 11px; | |||
| border-top-right-radius: 11px; | |||
| } | |||
| .uni-share-title { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| align-items: center; | |||
| justify-content: center; | |||
| height: 40px; | |||
| } | |||
| .uni-share-title-text { | |||
| font-size: 14px; | |||
| color: #666; | |||
| } | |||
| .uni-share-content { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| justify-content: center; | |||
| padding-top: 10px; | |||
| } | |||
| .uni-share-content-box { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| flex-wrap: wrap; | |||
| width: 360px; | |||
| } | |||
| .uni-share-content-item { | |||
| width: 90px; | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| padding: 10px 0; | |||
| align-items: center; | |||
| } | |||
| .uni-share-content-item:active { | |||
| background-color: #f5f5f5; | |||
| } | |||
| .uni-share-image { | |||
| width: 30px; | |||
| height: 30px; | |||
| } | |||
| .uni-share-text { | |||
| margin-top: 10px; | |||
| font-size: 14px; | |||
| color: #3B4144; | |||
| } | |||
| .uni-share-button-box { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| padding: 10px 15px; | |||
| } | |||
| .uni-share-button { | |||
| flex: 1; | |||
| border-radius: 50px; | |||
| color: #666; | |||
| font-size: 16px; | |||
| } | |||
| .uni-share-button::after { | |||
| border-radius: 50px; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,7 @@ | |||
| { | |||
| "uni-popup.cancel": "cancel", | |||
| "uni-popup.ok": "ok", | |||
| "uni-popup.placeholder": "pleace enter", | |||
| "uni-popup.title": "Hint", | |||
| "uni-popup.shareTitle": "Share to" | |||
| } | |||
| @ -0,0 +1,8 @@ | |||
| import en from './en.json' | |||
| import zhHans from './zh-Hans.json' | |||
| import zhHant from './zh-Hant.json' | |||
| export default { | |||
| en, | |||
| 'zh-Hans': zhHans, | |||
| 'zh-Hant': zhHant | |||
| } | |||
| @ -0,0 +1,7 @@ | |||
| { | |||
| "uni-popup.cancel": "取消", | |||
| "uni-popup.ok": "确定", | |||
| "uni-popup.placeholder": "请输入", | |||
| "uni-popup.title": "提示", | |||
| "uni-popup.shareTitle": "分享到" | |||
| } | |||
| @ -0,0 +1,7 @@ | |||
| { | |||
| "uni-popup.cancel": "取消", | |||
| "uni-popup.ok": "確定", | |||
| "uni-popup.placeholder": "請輸入", | |||
| "uni-popup.title": "提示", | |||
| "uni-popup.shareTitle": "分享到" | |||
| } | |||
| @ -0,0 +1,45 @@ | |||
| // #ifdef H5 | |||
| export default { | |||
| name: 'Keypress', | |||
| props: { | |||
| disable: { | |||
| type: Boolean, | |||
| default: false | |||
| } | |||
| }, | |||
| mounted () { | |||
| const keyNames = { | |||
| esc: ['Esc', 'Escape'], | |||
| tab: 'Tab', | |||
| enter: 'Enter', | |||
| space: [' ', 'Spacebar'], | |||
| up: ['Up', 'ArrowUp'], | |||
| left: ['Left', 'ArrowLeft'], | |||
| right: ['Right', 'ArrowRight'], | |||
| down: ['Down', 'ArrowDown'], | |||
| delete: ['Backspace', 'Delete', 'Del'] | |||
| } | |||
| const listener = ($event) => { | |||
| if (this.disable) { | |||
| return | |||
| } | |||
| const keyName = Object.keys(keyNames).find(key => { | |||
| const keyName = $event.key | |||
| const value = keyNames[key] | |||
| return value === keyName || (Array.isArray(value) && value.includes(keyName)) | |||
| }) | |||
| if (keyName) { | |||
| // 避免和其他按键事件冲突 | |||
| setTimeout(() => { | |||
| this.$emit(keyName, {}) | |||
| }, 0) | |||
| } | |||
| } | |||
| document.addEventListener('keyup', listener) | |||
| // this.$once('hook:beforeDestroy', () => { | |||
| // document.removeEventListener('keyup', listener) | |||
| // }) | |||
| }, | |||
| render: () => {} | |||
| } | |||
| // #endif | |||
| @ -0,0 +1,26 @@ | |||
| export default { | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| created(){ | |||
| this.popup = this.getParent() | |||
| }, | |||
| methods:{ | |||
| /** | |||
| * 获取父元素实例 | |||
| */ | |||
| getParent(name = 'uniPopup') { | |||
| let parent = this.$parent; | |||
| let parentName = parent.$options.name; | |||
| while (parentName !== name) { | |||
| parent = parent.$parent; | |||
| if (!parent) return false | |||
| parentName = parent.$options.name; | |||
| } | |||
| return parent; | |||
| }, | |||
| } | |||
| } | |||
| @ -0,0 +1,90 @@ | |||
| <template> | |||
| <view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask"> | |||
| <view @click.stop> | |||
| <slot></slot> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| type CloseCallBack = ()=> void; | |||
| let closeCallBack:CloseCallBack = () :void => {}; | |||
| export default { | |||
| emits:["close","clickMask"], | |||
| data() { | |||
| return { | |||
| isShow:false, | |||
| isOpen:false | |||
| } | |||
| }, | |||
| props: { | |||
| maskClick: { | |||
| type: Boolean, | |||
| default: true | |||
| }, | |||
| }, | |||
| watch: { | |||
| // 设置show = true 时,如果没有 open 需要设置为 open | |||
| isShow:{ | |||
| handler(isShow) { | |||
| // console.log("isShow",isShow) | |||
| if(isShow && this.isOpen == false){ | |||
| this.isOpen = true | |||
| } | |||
| }, | |||
| immediate:true | |||
| }, | |||
| // 设置isOpen = true 时,如果没有 isShow 需要设置为 isShow | |||
| isOpen:{ | |||
| handler(isOpen) { | |||
| // console.log("isOpen",isOpen) | |||
| if(isOpen && this.isShow == false){ | |||
| this.isShow = true | |||
| } | |||
| }, | |||
| immediate:true | |||
| } | |||
| }, | |||
| methods:{ | |||
| open(){ | |||
| // ...funs : CloseCallBack[] | |||
| // if(funs.length > 0){ | |||
| // closeCallBack = funs[0] | |||
| // } | |||
| this.isOpen = true; | |||
| }, | |||
| clickMask(){ | |||
| if(this.maskClick == true){ | |||
| this.$emit('clickMask') | |||
| this.close() | |||
| } | |||
| }, | |||
| close(): void{ | |||
| this.isOpen = false; | |||
| this.$emit('close') | |||
| closeCallBack() | |||
| }, | |||
| hiden(){ | |||
| this.isShow = false | |||
| }, | |||
| show(){ | |||
| this.isShow = true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .popup-root { | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| width: 750rpx; | |||
| height: 100%; | |||
| flex: 1; | |||
| background-color: rgba(0, 0, 0, 0.3); | |||
| justify-content: center; | |||
| align-items: center; | |||
| z-index: 99; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,503 @@ | |||
| <template> | |||
| <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"> | |||
| <view @touchstart="touchstart"> | |||
| <uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" | |||
| :duration="duration" :show="showTrans" @click="onTap" /> | |||
| <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" | |||
| :show="showTrans" @click="onTap"> | |||
| <view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear"> | |||
| <slot /> | |||
| </view> | |||
| </uni-transition> | |||
| </view> | |||
| <!-- #ifdef H5 --> | |||
| <keypress v-if="maskShow" @esc="onTap" /> | |||
| <!-- #endif --> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| // #ifdef H5 | |||
| import keypress from './keypress.js' | |||
| // #endif | |||
| /** | |||
| * PopUp 弹出层 | |||
| * @description 弹出层组件,为了解决遮罩弹层的问题 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=329 | |||
| * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式 | |||
| * @value top 顶部弹出 | |||
| * @value center 中间弹出 | |||
| * @value bottom 底部弹出 | |||
| * @value left 左侧弹出 | |||
| * @value right 右侧弹出 | |||
| * @value message 消息提示 | |||
| * @value dialog 对话框 | |||
| * @value share 底部分享示例 | |||
| * @property {Boolean} animation = [true|false] 是否开启动画 | |||
| * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃) | |||
| * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗 | |||
| * @property {String} backgroundColor 主窗口背景色 | |||
| * @property {String} maskBackgroundColor 蒙版颜色 | |||
| * @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px" | |||
| * @property {Boolean} safeArea 是否适配底部安全区 | |||
| * @event {Function} change 打开关闭弹窗触发,e={show: false} | |||
| * @event {Function} maskClick 点击遮罩触发 | |||
| */ | |||
| export default { | |||
| name: 'uniPopup', | |||
| components: { | |||
| // #ifdef H5 | |||
| keypress | |||
| // #endif | |||
| }, | |||
| emits: ['change', 'maskClick'], | |||
| props: { | |||
| // 开启动画 | |||
| animation: { | |||
| type: Boolean, | |||
| default: true | |||
| }, | |||
| // 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层 | |||
| // message: 消息提示 ; dialog : 对话框 | |||
| type: { | |||
| type: String, | |||
| default: 'center' | |||
| }, | |||
| // maskClick | |||
| isMaskClick: { | |||
| type: Boolean, | |||
| default: null | |||
| }, | |||
| // TODO 2 个版本后废弃属性 ,使用 isMaskClick | |||
| maskClick: { | |||
| type: Boolean, | |||
| default: null | |||
| }, | |||
| backgroundColor: { | |||
| type: String, | |||
| default: 'none' | |||
| }, | |||
| safeArea: { | |||
| type: Boolean, | |||
| default: true | |||
| }, | |||
| maskBackgroundColor: { | |||
| type: String, | |||
| default: 'rgba(0, 0, 0, 0.4)' | |||
| }, | |||
| borderRadius:{ | |||
| type: String, | |||
| } | |||
| }, | |||
| watch: { | |||
| /** | |||
| * 监听type类型 | |||
| */ | |||
| type: { | |||
| handler: function(type) { | |||
| if (!this.config[type]) return | |||
| this[this.config[type]](true) | |||
| }, | |||
| immediate: true | |||
| }, | |||
| isDesktop: { | |||
| handler: function(newVal) { | |||
| if (!this.config[newVal]) return | |||
| this[this.config[this.type]](true) | |||
| }, | |||
| immediate: true | |||
| }, | |||
| /** | |||
| * 监听遮罩是否可点击 | |||
| * @param {Object} val | |||
| */ | |||
| maskClick: { | |||
| handler: function(val) { | |||
| this.mkclick = val | |||
| }, | |||
| immediate: true | |||
| }, | |||
| isMaskClick: { | |||
| handler: function(val) { | |||
| this.mkclick = val | |||
| }, | |||
| immediate: true | |||
| }, | |||
| // H5 下禁止底部滚动 | |||
| showPopup(show) { | |||
| // #ifdef H5 | |||
| // fix by mehaotian 处理 h5 滚动穿透的问题 | |||
| document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible' | |||
| // #endif | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| duration: 300, | |||
| ani: [], | |||
| showPopup: false, | |||
| showTrans: false, | |||
| popupWidth: 0, | |||
| popupHeight: 0, | |||
| config: { | |||
| top: 'top', | |||
| bottom: 'bottom', | |||
| center: 'center', | |||
| left: 'left', | |||
| right: 'right', | |||
| message: 'top', | |||
| dialog: 'center', | |||
| share: 'bottom' | |||
| }, | |||
| maskClass: { | |||
| position: 'fixed', | |||
| bottom: 0, | |||
| top: 0, | |||
| left: 0, | |||
| right: 0, | |||
| backgroundColor: 'rgba(0, 0, 0, 0.4)' | |||
| }, | |||
| transClass: { | |||
| backgroundColor: 'transparent', | |||
| borderRadius: this.borderRadius || "0", | |||
| position: 'fixed', | |||
| left: 0, | |||
| right: 0 | |||
| }, | |||
| maskShow: true, | |||
| mkclick: true, | |||
| popupstyle: 'top' | |||
| } | |||
| }, | |||
| computed: { | |||
| getStyles() { | |||
| let res = { backgroundColor: this.bg }; | |||
| if (this.borderRadius || "0") { | |||
| res = Object.assign(res, { borderRadius: this.borderRadius }) | |||
| } | |||
| return res; | |||
| }, | |||
| isDesktop() { | |||
| return this.popupWidth >= 500 && this.popupHeight >= 500 | |||
| }, | |||
| bg() { | |||
| if (this.backgroundColor === '' || this.backgroundColor === 'none') { | |||
| return 'transparent' | |||
| } | |||
| return this.backgroundColor | |||
| } | |||
| }, | |||
| mounted() { | |||
| const fixSize = () => { | |||
| const { | |||
| windowWidth, | |||
| windowHeight, | |||
| windowTop, | |||
| safeArea, | |||
| screenHeight, | |||
| safeAreaInsets | |||
| } = uni.getSystemInfoSync() | |||
| this.popupWidth = windowWidth | |||
| this.popupHeight = windowHeight + (windowTop || 0) | |||
| // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复 | |||
| if (safeArea && this.safeArea) { | |||
| // #ifdef MP-WEIXIN | |||
| this.safeAreaInsets = screenHeight - safeArea.bottom | |||
| // #endif | |||
| // #ifndef MP-WEIXIN | |||
| this.safeAreaInsets = safeAreaInsets.bottom | |||
| // #endif | |||
| } else { | |||
| this.safeAreaInsets = 0 | |||
| } | |||
| } | |||
| fixSize() | |||
| // #ifdef H5 | |||
| // window.addEventListener('resize', fixSize) | |||
| // this.$once('hook:beforeDestroy', () => { | |||
| // window.removeEventListener('resize', fixSize) | |||
| // }) | |||
| // #endif | |||
| }, | |||
| // #ifndef VUE3 | |||
| // TODO vue2 | |||
| destroyed() { | |||
| this.setH5Visible() | |||
| }, | |||
| // #endif | |||
| // #ifdef VUE3 | |||
| // TODO vue3 | |||
| unmounted() { | |||
| this.setH5Visible() | |||
| }, | |||
| // #endif | |||
| activated() { | |||
| this.setH5Visible(!this.showPopup); | |||
| }, | |||
| deactivated() { | |||
| this.setH5Visible(true); | |||
| }, | |||
| created() { | |||
| // this.mkclick = this.isMaskClick || this.maskClick | |||
| if (this.isMaskClick === null && this.maskClick === null) { | |||
| this.mkclick = true | |||
| } else { | |||
| this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick | |||
| } | |||
| if (this.animation) { | |||
| this.duration = 300 | |||
| } else { | |||
| this.duration = 0 | |||
| } | |||
| // TODO 处理 message 组件生命周期异常的问题 | |||
| this.messageChild = null | |||
| // TODO 解决头条冒泡的问题 | |||
| this.clearPropagation = false | |||
| this.maskClass.backgroundColor = this.maskBackgroundColor | |||
| }, | |||
| methods: { | |||
| setH5Visible(visible = true) { | |||
| // #ifdef H5 | |||
| // fix by mehaotian 处理 h5 滚动穿透的问题 | |||
| document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden"; | |||
| // #endif | |||
| }, | |||
| /** | |||
| * 公用方法,不显示遮罩层 | |||
| */ | |||
| closeMask() { | |||
| this.maskShow = false | |||
| }, | |||
| /** | |||
| * 公用方法,遮罩层禁止点击 | |||
| */ | |||
| disableMask() { | |||
| this.mkclick = false | |||
| }, | |||
| // TODO nvue 取消冒泡 | |||
| clear(e) { | |||
| // #ifndef APP-NVUE | |||
| e.stopPropagation() | |||
| // #endif | |||
| this.clearPropagation = true | |||
| }, | |||
| open(direction) { | |||
| // fix by mehaotian 处理快速打开关闭的情况 | |||
| if (this.showPopup) { | |||
| return | |||
| } | |||
| let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] | |||
| if (!(direction && innerType.indexOf(direction) !== -1)) { | |||
| direction = this.type | |||
| } | |||
| if (!this.config[direction]) { | |||
| console.error('缺少类型:', direction) | |||
| return | |||
| } | |||
| this[this.config[direction]]() | |||
| this.$emit('change', { | |||
| show: true, | |||
| type: direction | |||
| }) | |||
| }, | |||
| close(type) { | |||
| this.showTrans = false | |||
| this.$emit('change', { | |||
| show: false, | |||
| type: this.type | |||
| }) | |||
| clearTimeout(this.timer) | |||
| // // 自定义关闭事件 | |||
| // this.customOpen && this.customClose() | |||
| this.timer = setTimeout(() => { | |||
| this.showPopup = false | |||
| }, 300) | |||
| }, | |||
| // TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容 | |||
| touchstart() { | |||
| this.clearPropagation = false | |||
| }, | |||
| onTap() { | |||
| if (this.clearPropagation) { | |||
| // fix by mehaotian 兼容 nvue | |||
| this.clearPropagation = false | |||
| return | |||
| } | |||
| this.$emit('maskClick') | |||
| if (!this.mkclick) return | |||
| this.close() | |||
| }, | |||
| /** | |||
| * 顶部弹出样式处理 | |||
| */ | |||
| top(type) { | |||
| this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top' | |||
| this.ani = ['slide-top'] | |||
| this.transClass = { | |||
| position: 'fixed', | |||
| left: 0, | |||
| right: 0, | |||
| backgroundColor: this.bg, | |||
| borderRadius:this.borderRadius || "0" | |||
| } | |||
| // TODO 兼容 type 属性 ,后续会废弃 | |||
| if (type) return | |||
| this.showPopup = true | |||
| this.showTrans = true | |||
| this.$nextTick(() => { | |||
| if (this.messageChild && this.type === 'message') { | |||
| this.messageChild.timerClose() | |||
| } | |||
| }) | |||
| }, | |||
| /** | |||
| * 底部弹出样式处理 | |||
| */ | |||
| bottom(type) { | |||
| this.popupstyle = 'bottom' | |||
| this.ani = ['slide-bottom'] | |||
| this.transClass = { | |||
| position: 'fixed', | |||
| left: 0, | |||
| right: 0, | |||
| bottom: 0, | |||
| paddingBottom: this.safeAreaInsets + 'px', | |||
| backgroundColor: this.bg, | |||
| borderRadius:this.borderRadius || "0", | |||
| } | |||
| // TODO 兼容 type 属性 ,后续会废弃 | |||
| if (type) return | |||
| this.showPopup = true | |||
| this.showTrans = true | |||
| }, | |||
| /** | |||
| * 中间弹出样式处理 | |||
| */ | |||
| center(type) { | |||
| this.popupstyle = 'center' | |||
| //微信小程序下,组合动画会出现文字向上闪动问题,再此做特殊处理 | |||
| // #ifdef MP-WEIXIN | |||
| this.ani = ['fade'] | |||
| // #endif | |||
| // #ifndef MP-WEIXIN | |||
| this.ani = ['zoom-out', 'fade'] | |||
| // #endif | |||
| this.transClass = { | |||
| position: 'fixed', | |||
| /* #ifndef APP-NVUE */ | |||
| display: 'flex', | |||
| flexDirection: 'column', | |||
| /* #endif */ | |||
| bottom: 0, | |||
| left: 0, | |||
| right: 0, | |||
| top: 0, | |||
| justifyContent: 'center', | |||
| alignItems: 'center', | |||
| borderRadius:this.borderRadius || "0" | |||
| } | |||
| // TODO 兼容 type 属性 ,后续会废弃 | |||
| if (type) return | |||
| this.showPopup = true | |||
| this.showTrans = true | |||
| }, | |||
| left(type) { | |||
| this.popupstyle = 'left' | |||
| this.ani = ['slide-left'] | |||
| this.transClass = { | |||
| position: 'fixed', | |||
| left: 0, | |||
| bottom: 0, | |||
| top: 0, | |||
| backgroundColor: this.bg, | |||
| borderRadius:this.borderRadius || "0", | |||
| /* #ifndef APP-NVUE */ | |||
| display: 'flex', | |||
| flexDirection: 'column' | |||
| /* #endif */ | |||
| } | |||
| // TODO 兼容 type 属性 ,后续会废弃 | |||
| if (type) return | |||
| this.showPopup = true | |||
| this.showTrans = true | |||
| }, | |||
| right(type) { | |||
| this.popupstyle = 'right' | |||
| this.ani = ['slide-right'] | |||
| this.transClass = { | |||
| position: 'fixed', | |||
| bottom: 0, | |||
| right: 0, | |||
| top: 0, | |||
| backgroundColor: this.bg, | |||
| borderRadius:this.borderRadius || "0", | |||
| /* #ifndef APP-NVUE */ | |||
| display: 'flex', | |||
| flexDirection: 'column' | |||
| /* #endif */ | |||
| } | |||
| // TODO 兼容 type 属性 ,后续会废弃 | |||
| if (type) return | |||
| this.showPopup = true | |||
| this.showTrans = true | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .uni-popup { | |||
| position: fixed; | |||
| /* #ifndef APP-NVUE */ | |||
| z-index: 99; | |||
| /* #endif */ | |||
| &.top, | |||
| &.left, | |||
| &.right { | |||
| /* #ifdef H5 */ | |||
| top: var(--window-top); | |||
| /* #endif */ | |||
| /* #ifndef H5 */ | |||
| top: 0; | |||
| /* #endif */ | |||
| } | |||
| .uni-popup__wrapper { | |||
| /* #ifndef APP-NVUE */ | |||
| display: block; | |||
| /* #endif */ | |||
| position: relative; | |||
| /* iphonex 等安全区设置,底部安全区适配 */ | |||
| /* #ifndef APP-NVUE */ | |||
| // padding-bottom: constant(safe-area-inset-bottom); | |||
| // padding-bottom: env(safe-area-inset-bottom); | |||
| /* #endif */ | |||
| &.left, | |||
| &.right { | |||
| /* #ifdef H5 */ | |||
| padding-top: var(--window-top); | |||
| /* #endif */ | |||
| /* #ifndef H5 */ | |||
| padding-top: 0; | |||
| /* #endif */ | |||
| flex: 1; | |||
| } | |||
| } | |||
| } | |||
| .fixforpc-z-index { | |||
| /* #ifndef APP-NVUE */ | |||
| z-index: 999; | |||
| /* #endif */ | |||
| } | |||
| .fixforpc-top { | |||
| top: 0; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,88 @@ | |||
| { | |||
| "id": "uni-popup", | |||
| "displayName": "uni-popup 弹出层", | |||
| "version": "1.9.1", | |||
| "description": " Popup 组件,提供常用的弹层", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "弹出层", | |||
| "弹窗", | |||
| "popup", | |||
| "弹框" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||
| "type": "component-vue" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": [ | |||
| "uni-scss", | |||
| "uni-transition" | |||
| ], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y", | |||
| "alipay": "n" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "u", | |||
| "联盟": "u" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,17 @@ | |||
| ## Popup 弹出层 | |||
| > **组件名:uni-popup** | |||
| > 代码块: `uPopup` | |||
| > 关联组件:`uni-transition` | |||
| 弹出层组件,在应用中弹出一个消息提示窗口、提示框等 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,8 @@ | |||
| ## 1.0.3(2022-01-21) | |||
| - 优化 组件示例 | |||
| ## 1.0.2(2021-11-22) | |||
| - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 | |||
| ## 1.0.1(2021-11-22) | |||
| - 修复 vue3中scss语法兼容问题 | |||
| ## 1.0.0(2021-11-18) | |||
| - init | |||
| @ -0,0 +1 @@ | |||
| @import './styles/index.scss'; | |||
| @ -0,0 +1,82 @@ | |||
| { | |||
| "id": "uni-scss", | |||
| "displayName": "uni-scss 辅助样式", | |||
| "version": "1.0.3", | |||
| "description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。", | |||
| "keywords": [ | |||
| "uni-scss", | |||
| "uni-ui", | |||
| "辅助样式" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "^3.1.0" | |||
| }, | |||
| "dcloudext": { | |||
| "category": [ | |||
| "JS SDK", | |||
| "通用 SDK" | |||
| ], | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": [], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "u" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "n", | |||
| "联盟": "n" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,4 @@ | |||
| `uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,7 @@ | |||
| @import './setting/_variables.scss'; | |||
| @import './setting/_border.scss'; | |||
| @import './setting/_color.scss'; | |||
| @import './setting/_space.scss'; | |||
| @import './setting/_radius.scss'; | |||
| @import './setting/_text.scss'; | |||
| @import './setting/_styles.scss'; | |||
| @ -0,0 +1,3 @@ | |||
| .uni-border { | |||
| border: 1px $uni-border-1 solid; | |||
| } | |||
| @ -0,0 +1,66 @@ | |||
| // TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐 | |||
| // @mixin get-styles($k,$c) { | |||
| // @if $k == size or $k == weight{ | |||
| // font-#{$k}:#{$c} | |||
| // }@else{ | |||
| // #{$k}:#{$c} | |||
| // } | |||
| // } | |||
| $uni-ui-color:( | |||
| // 主色 | |||
| primary: $uni-primary, | |||
| primary-disable: $uni-primary-disable, | |||
| primary-light: $uni-primary-light, | |||
| // 辅助色 | |||
| success: $uni-success, | |||
| success-disable: $uni-success-disable, | |||
| success-light: $uni-success-light, | |||
| warning: $uni-warning, | |||
| warning-disable: $uni-warning-disable, | |||
| warning-light: $uni-warning-light, | |||
| error: $uni-error, | |||
| error-disable: $uni-error-disable, | |||
| error-light: $uni-error-light, | |||
| info: $uni-info, | |||
| info-disable: $uni-info-disable, | |||
| info-light: $uni-info-light, | |||
| // 中性色 | |||
| main-color: $uni-main-color, | |||
| base-color: $uni-base-color, | |||
| secondary-color: $uni-secondary-color, | |||
| extra-color: $uni-extra-color, | |||
| // 背景色 | |||
| bg-color: $uni-bg-color, | |||
| // 边框颜色 | |||
| border-1: $uni-border-1, | |||
| border-2: $uni-border-2, | |||
| border-3: $uni-border-3, | |||
| border-4: $uni-border-4, | |||
| // 黑色 | |||
| black:$uni-black, | |||
| // 白色 | |||
| white:$uni-white, | |||
| // 透明 | |||
| transparent:$uni-transparent | |||
| ) !default; | |||
| @each $key, $child in $uni-ui-color { | |||
| .uni-#{"" + $key} { | |||
| color: $child; | |||
| } | |||
| .uni-#{"" + $key}-bg { | |||
| background-color: $child; | |||
| } | |||
| } | |||
| .uni-shadow-sm { | |||
| box-shadow: $uni-shadow-sm; | |||
| } | |||
| .uni-shadow-base { | |||
| box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-shadow-lg { | |||
| box-shadow: $uni-shadow-lg; | |||
| } | |||
| .uni-mask { | |||
| background-color:$uni-mask; | |||
| } | |||
| @ -0,0 +1,55 @@ | |||
| @mixin radius($r,$d:null ,$important: false){ | |||
| $radius-value:map-get($uni-radius, $r) if($important, !important, null); | |||
| // Key exists within the $uni-radius variable | |||
| @if (map-has-key($uni-radius, $r) and $d){ | |||
| @if $d == t { | |||
| border-top-left-radius:$radius-value; | |||
| border-top-right-radius:$radius-value; | |||
| }@else if $d == r { | |||
| border-top-right-radius:$radius-value; | |||
| border-bottom-right-radius:$radius-value; | |||
| }@else if $d == b { | |||
| border-bottom-left-radius:$radius-value; | |||
| border-bottom-right-radius:$radius-value; | |||
| }@else if $d == l { | |||
| border-top-left-radius:$radius-value; | |||
| border-bottom-left-radius:$radius-value; | |||
| }@else if $d == tl { | |||
| border-top-left-radius:$radius-value; | |||
| }@else if $d == tr { | |||
| border-top-right-radius:$radius-value; | |||
| }@else if $d == br { | |||
| border-bottom-right-radius:$radius-value; | |||
| }@else if $d == bl { | |||
| border-bottom-left-radius:$radius-value; | |||
| } | |||
| }@else{ | |||
| border-radius:$radius-value; | |||
| } | |||
| } | |||
| @each $key, $child in $uni-radius { | |||
| @if($key){ | |||
| .uni-radius-#{"" + $key} { | |||
| @include radius($key) | |||
| } | |||
| }@else{ | |||
| .uni-radius { | |||
| @include radius($key) | |||
| } | |||
| } | |||
| } | |||
| @each $direction in t, r, b, l,tl, tr, br, bl { | |||
| @each $key, $child in $uni-radius { | |||
| @if($key){ | |||
| .uni-radius-#{"" + $direction}-#{"" + $key} { | |||
| @include radius($key,$direction,false) | |||
| } | |||
| }@else{ | |||
| .uni-radius-#{$direction} { | |||
| @include radius($key,$direction,false) | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,56 @@ | |||
| @mixin fn($space,$direction,$size,$n) { | |||
| @if $n { | |||
| #{$space}-#{$direction}: #{$size*$uni-space-root}px | |||
| } @else { | |||
| #{$space}-#{$direction}: #{-$size*$uni-space-root}px | |||
| } | |||
| } | |||
| @mixin get-styles($direction,$i,$space,$n){ | |||
| @if $direction == t { | |||
| @include fn($space, top,$i,$n); | |||
| } | |||
| @if $direction == r { | |||
| @include fn($space, right,$i,$n); | |||
| } | |||
| @if $direction == b { | |||
| @include fn($space, bottom,$i,$n); | |||
| } | |||
| @if $direction == l { | |||
| @include fn($space, left,$i,$n); | |||
| } | |||
| @if $direction == x { | |||
| @include fn($space, left,$i,$n); | |||
| @include fn($space, right,$i,$n); | |||
| } | |||
| @if $direction == y { | |||
| @include fn($space, top,$i,$n); | |||
| @include fn($space, bottom,$i,$n); | |||
| } | |||
| @if $direction == a { | |||
| @if $n { | |||
| #{$space}:#{$i*$uni-space-root}px; | |||
| } @else { | |||
| #{$space}:#{-$i*$uni-space-root}px; | |||
| } | |||
| } | |||
| } | |||
| @each $orientation in m,p { | |||
| $space: margin; | |||
| @if $orientation == m { | |||
| $space: margin; | |||
| } @else { | |||
| $space: padding; | |||
| } | |||
| @for $i from 0 through 16 { | |||
| @each $direction in t, r, b, l, x, y, a { | |||
| .uni-#{$orientation}#{$direction}-#{$i} { | |||
| @include get-styles($direction,$i,$space,true); | |||
| } | |||
| .uni-#{$orientation}#{$direction}-n#{$i} { | |||
| @include get-styles($direction,$i,$space,false); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,167 @@ | |||
| /* #ifndef APP-NVUE */ | |||
| $-color-white:#fff; | |||
| $-color-black:#000; | |||
| @mixin base-style($color) { | |||
| color: #fff; | |||
| background-color: $color; | |||
| border-color: mix($-color-black, $color, 8%); | |||
| &:not([hover-class]):active { | |||
| background: mix($-color-black, $color, 10%); | |||
| border-color: mix($-color-black, $color, 20%); | |||
| color: $-color-white; | |||
| outline: none; | |||
| } | |||
| } | |||
| @mixin is-color($color) { | |||
| @include base-style($color); | |||
| &[loading] { | |||
| @include base-style($color); | |||
| &::before { | |||
| margin-right:5px; | |||
| } | |||
| } | |||
| &[disabled] { | |||
| &, | |||
| &[loading], | |||
| &:not([hover-class]):active { | |||
| color: $-color-white; | |||
| border-color: mix(darken($color,10%), $-color-white); | |||
| background-color: mix($color, $-color-white); | |||
| } | |||
| } | |||
| } | |||
| @mixin base-plain-style($color) { | |||
| color:$color; | |||
| background-color: mix($-color-white, $color, 90%); | |||
| border-color: mix($-color-white, $color, 70%); | |||
| &:not([hover-class]):active { | |||
| background: mix($-color-white, $color, 80%); | |||
| color: $color; | |||
| outline: none; | |||
| border-color: mix($-color-white, $color, 50%); | |||
| } | |||
| } | |||
| @mixin is-plain($color){ | |||
| &[plain] { | |||
| @include base-plain-style($color); | |||
| &[loading] { | |||
| @include base-plain-style($color); | |||
| &::before { | |||
| margin-right:5px; | |||
| } | |||
| } | |||
| &[disabled] { | |||
| &, | |||
| &:active { | |||
| color: mix($-color-white, $color, 40%); | |||
| background-color: mix($-color-white, $color, 90%); | |||
| border-color: mix($-color-white, $color, 80%); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .uni-btn { | |||
| margin: 5px; | |||
| color: #393939; | |||
| border:1px solid #ccc; | |||
| font-size: 16px; | |||
| font-weight: 200; | |||
| background-color: #F9F9F9; | |||
| // TODO 暂时处理边框隐藏一边的问题 | |||
| overflow: visible; | |||
| &::after{ | |||
| border: none; | |||
| } | |||
| &:not([type]),&[type=default] { | |||
| color: #999; | |||
| &[loading] { | |||
| background: none; | |||
| &::before { | |||
| margin-right:5px; | |||
| } | |||
| } | |||
| &[disabled]{ | |||
| color: mix($-color-white, #999, 60%); | |||
| &, | |||
| &[loading], | |||
| &:active { | |||
| color: mix($-color-white, #999, 60%); | |||
| background-color: mix($-color-white,$-color-black , 98%); | |||
| border-color: mix($-color-white, #999, 85%); | |||
| } | |||
| } | |||
| &[plain] { | |||
| color: #999; | |||
| background: none; | |||
| border-color: $uni-border-1; | |||
| &:not([hover-class]):active { | |||
| background: none; | |||
| color: mix($-color-white, $-color-black, 80%); | |||
| border-color: mix($-color-white, $-color-black, 90%); | |||
| outline: none; | |||
| } | |||
| &[disabled]{ | |||
| &, | |||
| &[loading], | |||
| &:active { | |||
| background: none; | |||
| color: mix($-color-white, #999, 60%); | |||
| border-color: mix($-color-white, #999, 85%); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| &:not([hover-class]):active { | |||
| color: mix($-color-white, $-color-black, 50%); | |||
| } | |||
| &[size=mini] { | |||
| font-size: 16px; | |||
| font-weight: 200; | |||
| border-radius: 8px; | |||
| } | |||
| &.uni-btn-small { | |||
| font-size: 14px; | |||
| } | |||
| &.uni-btn-mini { | |||
| font-size: 12px; | |||
| } | |||
| &.uni-btn-radius { | |||
| border-radius: 999px; | |||
| } | |||
| &[type=primary] { | |||
| @include is-color($uni-primary); | |||
| @include is-plain($uni-primary) | |||
| } | |||
| &[type=success] { | |||
| @include is-color($uni-success); | |||
| @include is-plain($uni-success) | |||
| } | |||
| &[type=error] { | |||
| @include is-color($uni-error); | |||
| @include is-plain($uni-error) | |||
| } | |||
| &[type=warning] { | |||
| @include is-color($uni-warning); | |||
| @include is-plain($uni-warning) | |||
| } | |||
| &[type=info] { | |||
| @include is-color($uni-info); | |||
| @include is-plain($uni-info) | |||
| } | |||
| } | |||
| /* #endif */ | |||
| @ -0,0 +1,24 @@ | |||
| @mixin get-styles($k,$c) { | |||
| @if $k == size or $k == weight{ | |||
| font-#{$k}:#{$c} | |||
| }@else{ | |||
| #{$k}:#{$c} | |||
| } | |||
| } | |||
| @each $key, $child in $uni-headings { | |||
| /* #ifndef APP-NVUE */ | |||
| .uni-#{$key} { | |||
| @each $k, $c in $child { | |||
| @include get-styles($k,$c) | |||
| } | |||
| } | |||
| /* #endif */ | |||
| /* #ifdef APP-NVUE */ | |||
| .container .uni-#{$key} { | |||
| @each $k, $c in $child { | |||
| @include get-styles($k,$c) | |||
| } | |||
| } | |||
| /* #endif */ | |||
| } | |||
| @ -0,0 +1,146 @@ | |||
| // @use "sass:math"; | |||
| @import '../tools/functions.scss'; | |||
| // 间距基础倍数 | |||
| $uni-space-root: 2 !default; | |||
| // 边框半径默认值 | |||
| $uni-radius-root:5px !default; | |||
| $uni-radius: () !default; | |||
| // 边框半径断点 | |||
| $uni-radius: map-deep-merge( | |||
| ( | |||
| 0: 0, | |||
| // TODO 当前版本暂时不支持 sm 属性 | |||
| // 'sm': math.div($uni-radius-root, 2), | |||
| null: $uni-radius-root, | |||
| 'lg': $uni-radius-root * 2, | |||
| 'xl': $uni-radius-root * 6, | |||
| 'pill': 9999px, | |||
| 'circle': 50% | |||
| ), | |||
| $uni-radius | |||
| ); | |||
| // 字体家族 | |||
| $body-font-family: 'Roboto', sans-serif !default; | |||
| // 文本 | |||
| $heading-font-family: $body-font-family !default; | |||
| $uni-headings: () !default; | |||
| $letterSpacing: -0.01562em; | |||
| $uni-headings: map-deep-merge( | |||
| ( | |||
| 'h1': ( | |||
| size: 32px, | |||
| weight: 300, | |||
| line-height: 50px, | |||
| // letter-spacing:-0.01562em | |||
| ), | |||
| 'h2': ( | |||
| size: 28px, | |||
| weight: 300, | |||
| line-height: 40px, | |||
| // letter-spacing: -0.00833em | |||
| ), | |||
| 'h3': ( | |||
| size: 24px, | |||
| weight: 400, | |||
| line-height: 32px, | |||
| // letter-spacing: normal | |||
| ), | |||
| 'h4': ( | |||
| size: 20px, | |||
| weight: 400, | |||
| line-height: 30px, | |||
| // letter-spacing: 0.00735em | |||
| ), | |||
| 'h5': ( | |||
| size: 16px, | |||
| weight: 400, | |||
| line-height: 24px, | |||
| // letter-spacing: normal | |||
| ), | |||
| 'h6': ( | |||
| size: 14px, | |||
| weight: 500, | |||
| line-height: 18px, | |||
| // letter-spacing: 0.0125em | |||
| ), | |||
| 'subtitle': ( | |||
| size: 12px, | |||
| weight: 400, | |||
| line-height: 20px, | |||
| // letter-spacing: 0.00937em | |||
| ), | |||
| 'body': ( | |||
| font-size: 14px, | |||
| font-weight: 400, | |||
| line-height: 22px, | |||
| // letter-spacing: 0.03125em | |||
| ), | |||
| 'caption': ( | |||
| 'size': 12px, | |||
| 'weight': 400, | |||
| 'line-height': 20px, | |||
| // 'letter-spacing': 0.03333em, | |||
| // 'text-transform': false | |||
| ) | |||
| ), | |||
| $uni-headings | |||
| ); | |||
| // 主色 | |||
| $uni-primary: #2979ff !default; | |||
| $uni-primary-disable:lighten($uni-primary,20%) !default; | |||
| $uni-primary-light: lighten($uni-primary,25%) !default; | |||
| // 辅助色 | |||
| // 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | |||
| $uni-success: #18bc37 !default; | |||
| $uni-success-disable:lighten($uni-success,20%) !default; | |||
| $uni-success-light: lighten($uni-success,25%) !default; | |||
| $uni-warning: #f3a73f !default; | |||
| $uni-warning-disable:lighten($uni-warning,20%) !default; | |||
| $uni-warning-light: lighten($uni-warning,25%) !default; | |||
| $uni-error: #e43d33 !default; | |||
| $uni-error-disable:lighten($uni-error,20%) !default; | |||
| $uni-error-light: lighten($uni-error,25%) !default; | |||
| $uni-info: #8f939c !default; | |||
| $uni-info-disable:lighten($uni-info,20%) !default; | |||
| $uni-info-light: lighten($uni-info,25%) !default; | |||
| // 中性色 | |||
| // 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | |||
| $uni-main-color: #3a3a3a !default; // 主要文字 | |||
| $uni-base-color: #6a6a6a !default; // 常规文字 | |||
| $uni-secondary-color: #909399 !default; // 次要文字 | |||
| $uni-extra-color: #c7c7c7 !default; // 辅助说明 | |||
| // 边框颜色 | |||
| $uni-border-1: #F0F0F0 !default; | |||
| $uni-border-2: #EDEDED !default; | |||
| $uni-border-3: #DCDCDC !default; | |||
| $uni-border-4: #B9B9B9 !default; | |||
| // 常规色 | |||
| $uni-black: #000000 !default; | |||
| $uni-white: #ffffff !default; | |||
| $uni-transparent: rgba($color: #000000, $alpha: 0) !default; | |||
| // 背景色 | |||
| $uni-bg-color: #f7f7f7 !default; | |||
| /* 水平间距 */ | |||
| $uni-spacing-sm: 8px !default; | |||
| $uni-spacing-base: 15px !default; | |||
| $uni-spacing-lg: 30px !default; | |||
| // 阴影 | |||
| $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; | |||
| $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | |||
| $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; | |||
| // 蒙版 | |||
| $uni-mask: rgba($color: #000000, $alpha: 0.4) !default; | |||
| @ -0,0 +1,19 @@ | |||
| // 合并 map | |||
| @function map-deep-merge($parent-map, $child-map){ | |||
| $result: $parent-map; | |||
| @each $key, $child in $child-map { | |||
| $parent-has-key: map-has-key($result, $key); | |||
| $parent-value: map-get($result, $key); | |||
| $parent-type: type-of($parent-value); | |||
| $child-type: type-of($child); | |||
| $parent-is-map: $parent-type == map; | |||
| $child-is-map: $child-type == map; | |||
| @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ | |||
| $result: map-merge($result, ( $key: $child )); | |||
| }@else { | |||
| $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); | |||
| } | |||
| } | |||
| @return $result; | |||
| }; | |||
| @ -0,0 +1,31 @@ | |||
| // 间距基础倍数 | |||
| $uni-space-root: 2; | |||
| // 边框半径默认值 | |||
| $uni-radius-root:5px; | |||
| // 主色 | |||
| $uni-primary: #2979ff; | |||
| // 辅助色 | |||
| $uni-success: #4cd964; | |||
| // 警告色 | |||
| $uni-warning: #f0ad4e; | |||
| // 错误色 | |||
| $uni-error: #dd524d; | |||
| // 描述色 | |||
| $uni-info: #909399; | |||
| // 中性色 | |||
| $uni-main-color: #303133; | |||
| $uni-base-color: #606266; | |||
| $uni-secondary-color: #909399; | |||
| $uni-extra-color: #C0C4CC; | |||
| // 背景色 | |||
| $uni-bg-color: #f5f5f5; | |||
| // 边框颜色 | |||
| $uni-border-1: #DCDFE6; | |||
| $uni-border-2: #E4E7ED; | |||
| $uni-border-3: #EBEEF5; | |||
| $uni-border-4: #F2F6FC; | |||
| // 常规色 | |||
| $uni-black: #000000; | |||
| $uni-white: #ffffff; | |||
| $uni-transparent: rgba($color: #000000, $alpha: 0); | |||
| @ -0,0 +1,62 @@ | |||
| @import './styles/setting/_variables.scss'; | |||
| // 间距基础倍数 | |||
| $uni-space-root: 2; | |||
| // 边框半径默认值 | |||
| $uni-radius-root:5px; | |||
| // 主色 | |||
| $uni-primary: #2979ff; | |||
| $uni-primary-disable:mix(#fff,$uni-primary,50%); | |||
| $uni-primary-light: mix(#fff,$uni-primary,80%); | |||
| // 辅助色 | |||
| // 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | |||
| $uni-success: #18bc37; | |||
| $uni-success-disable:mix(#fff,$uni-success,50%); | |||
| $uni-success-light: mix(#fff,$uni-success,80%); | |||
| $uni-warning: #f3a73f; | |||
| $uni-warning-disable:mix(#fff,$uni-warning,50%); | |||
| $uni-warning-light: mix(#fff,$uni-warning,80%); | |||
| $uni-error: #e43d33; | |||
| $uni-error-disable:mix(#fff,$uni-error,50%); | |||
| $uni-error-light: mix(#fff,$uni-error,80%); | |||
| $uni-info: #8f939c; | |||
| $uni-info-disable:mix(#fff,$uni-info,50%); | |||
| $uni-info-light: mix(#fff,$uni-info,80%); | |||
| // 中性色 | |||
| // 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | |||
| $uni-main-color: #3a3a3a; // 主要文字 | |||
| $uni-base-color: #6a6a6a; // 常规文字 | |||
| $uni-secondary-color: #909399; // 次要文字 | |||
| $uni-extra-color: #c7c7c7; // 辅助说明 | |||
| // 边框颜色 | |||
| $uni-border-1: #F0F0F0; | |||
| $uni-border-2: #EDEDED; | |||
| $uni-border-3: #DCDCDC; | |||
| $uni-border-4: #B9B9B9; | |||
| // 常规色 | |||
| $uni-black: #000000; | |||
| $uni-white: #ffffff; | |||
| $uni-transparent: rgba($color: #000000, $alpha: 0); | |||
| // 背景色 | |||
| $uni-bg-color: #f7f7f7; | |||
| /* 水平间距 */ | |||
| $uni-spacing-sm: 8px; | |||
| $uni-spacing-base: 15px; | |||
| $uni-spacing-lg: 30px; | |||
| // 阴影 | |||
| $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); | |||
| $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); | |||
| $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); | |||
| // 蒙版 | |||
| $uni-mask: rgba($color: #000000, $alpha: 0.4); | |||
| @ -0,0 +1,2 @@ | |||
| ## 0.0.1(2022-07-22) | |||
| - 初始化 | |||
| @ -0,0 +1,167 @@ | |||
| <template> | |||
| <view class="uni-section"> | |||
| <view class="uni-section-header" @click="onClick"> | |||
| <view class="uni-section-header__decoration" v-if="type" :class="type" /> | |||
| <slot v-else name="decoration"></slot> | |||
| <view class="uni-section-header__content"> | |||
| <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text> | |||
| <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text> | |||
| </view> | |||
| <view class="uni-section-header__slot-right"> | |||
| <slot name="right"></slot> | |||
| </view> | |||
| </view> | |||
| <view class="uni-section-content" :style="{padding: _padding}"> | |||
| <slot /> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| /** | |||
| * Section 标题栏 | |||
| * @description 标题栏 | |||
| * @property {String} type = [line|circle|square] 标题装饰类型 | |||
| * @value line 竖线 | |||
| * @value circle 圆形 | |||
| * @value square 正方形 | |||
| * @property {String} title 主标题 | |||
| * @property {String} titleFontSize 主标题字体大小 | |||
| * @property {String} titleColor 主标题字体颜色 | |||
| * @property {String} subTitle 副标题 | |||
| * @property {String} subTitleFontSize 副标题字体大小 | |||
| * @property {String} subTitleColor 副标题字体颜色 | |||
| * @property {String} padding 默认插槽 padding | |||
| */ | |||
| export default { | |||
| name: 'UniSection', | |||
| emits:['click'], | |||
| props: { | |||
| type: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| title: { | |||
| type: String, | |||
| required: true, | |||
| default: '' | |||
| }, | |||
| titleFontSize: { | |||
| type: String, | |||
| default: '14px' | |||
| }, | |||
| titleColor:{ | |||
| type: String, | |||
| default: '#333' | |||
| }, | |||
| subTitle: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| subTitleFontSize: { | |||
| type: String, | |||
| default: '12px' | |||
| }, | |||
| subTitleColor: { | |||
| type: String, | |||
| default: '#999' | |||
| }, | |||
| padding: { | |||
| type: [Boolean, String], | |||
| default: false | |||
| } | |||
| }, | |||
| computed:{ | |||
| _padding(){ | |||
| if(typeof this.padding === 'string'){ | |||
| return this.padding | |||
| } | |||
| return this.padding?'10px':'' | |||
| } | |||
| }, | |||
| watch: { | |||
| title(newVal) { | |||
| if (uni.report && newVal !== '') { | |||
| uni.report('title', newVal) | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| onClick() { | |||
| this.$emit('click') | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" > | |||
| $uni-primary: #2979ff !default; | |||
| .uni-section { | |||
| background-color: #fff; | |||
| .uni-section-header { | |||
| position: relative; | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| align-items: center; | |||
| padding: 12px 10px; | |||
| font-weight: normal; | |||
| &__decoration{ | |||
| margin-right: 6px; | |||
| background-color: $uni-primary; | |||
| &.line { | |||
| width: 4px; | |||
| height: 12px; | |||
| border-radius: 10px; | |||
| } | |||
| &.circle { | |||
| width: 8px; | |||
| height: 8px; | |||
| border-top-right-radius: 50px; | |||
| border-top-left-radius: 50px; | |||
| border-bottom-left-radius: 50px; | |||
| border-bottom-right-radius: 50px; | |||
| } | |||
| &.square { | |||
| width: 8px; | |||
| height: 8px; | |||
| } | |||
| } | |||
| &__content { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: column; | |||
| flex: 1; | |||
| color: #333; | |||
| .distraction { | |||
| flex-direction: row; | |||
| align-items: center; | |||
| } | |||
| &-sub { | |||
| margin-top: 2px; | |||
| } | |||
| } | |||
| &__slot-right{ | |||
| font-size: 14px; | |||
| } | |||
| } | |||
| .uni-section-content{ | |||
| font-size: 14px; | |||
| } | |||
| } | |||
| </style> | |||
| @ -0,0 +1,87 @@ | |||
| { | |||
| "id": "uni-section", | |||
| "displayName": "uni-section 标题栏", | |||
| "version": "0.0.1", | |||
| "description": "标题栏组件", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "uniui", | |||
| "标题栏" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "category": [ | |||
| "前端组件", | |||
| "通用组件" | |||
| ], | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": [ | |||
| "uni-scss" | |||
| ], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "u", | |||
| "联盟": "u" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -0,0 +1,8 @@ | |||
| ## Section 标题栏 | |||
| > **组件名:uni-section** | |||
| > 代码块: `uSection` | |||
| uni-section 组件主要用于文章、列表详情等标题展示 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-section) | |||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||
| @ -0,0 +1,24 @@ | |||
| ## 1.3.3(2024-04-23) | |||
| - 修复 当元素会受变量影响自动隐藏的bug | |||
| ## 1.3.2(2023-05-04) | |||
| - 修复 NVUE 平台报错的问题 | |||
| ## 1.3.1(2021-11-23) | |||
| - 修复 init 方法初始化问题 | |||
| ## 1.3.0(2021-11-19) | |||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition) | |||
| ## 1.2.1(2021-09-27) | |||
| - 修复 init 方法不生效的 Bug | |||
| ## 1.2.0(2021-07-30) | |||
| - 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.1.1(2021-05-12) | |||
| - 新增 示例地址 | |||
| - 修复 示例项目缺少组件的 Bug | |||
| ## 1.1.0(2021-04-22) | |||
| - 新增 通过方法自定义动画 | |||
| - 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 | |||
| - 优化 动画触发逻辑,使动画更流畅 | |||
| - 优化 支持单独的动画类型 | |||
| - 优化 文档示例 | |||
| ## 1.0.2(2021-02-05) | |||
| - 调整为 uni_modules 目录规范 | |||
| @ -0,0 +1,131 @@ | |||
| // const defaultOption = { | |||
| // duration: 300, | |||
| // timingFunction: 'linear', | |||
| // delay: 0, | |||
| // transformOrigin: '50% 50% 0' | |||
| // } | |||
| // #ifdef APP-NVUE | |||
| const nvueAnimation = uni.requireNativePlugin('animation') | |||
| // #endif | |||
| class MPAnimation { | |||
| constructor(options, _this) { | |||
| this.options = options | |||
| // 在iOS10+QQ小程序平台下,传给原生的对象一定是个普通对象而不是Proxy对象,否则会报parameter should be Object instead of ProxyObject的错误 | |||
| this.animation = uni.createAnimation({ | |||
| ...options | |||
| }) | |||
| this.currentStepAnimates = {} | |||
| this.next = 0 | |||
| this.$ = _this | |||
| } | |||
| _nvuePushAnimates(type, args) { | |||
| let aniObj = this.currentStepAnimates[this.next] | |||
| let styles = {} | |||
| if (!aniObj) { | |||
| styles = { | |||
| styles: {}, | |||
| config: {} | |||
| } | |||
| } else { | |||
| styles = aniObj | |||
| } | |||
| if (animateTypes1.includes(type)) { | |||
| if (!styles.styles.transform) { | |||
| styles.styles.transform = '' | |||
| } | |||
| let unit = '' | |||
| if(type === 'rotate'){ | |||
| unit = 'deg' | |||
| } | |||
| styles.styles.transform += `${type}(${args+unit}) ` | |||
| } else { | |||
| styles.styles[type] = `${args}` | |||
| } | |||
| this.currentStepAnimates[this.next] = styles | |||
| } | |||
| _animateRun(styles = {}, config = {}) { | |||
| let ref = this.$.$refs['ani'].ref | |||
| if (!ref) return | |||
| return new Promise((resolve, reject) => { | |||
| nvueAnimation.transition(ref, { | |||
| styles, | |||
| ...config | |||
| }, res => { | |||
| resolve() | |||
| }) | |||
| }) | |||
| } | |||
| _nvueNextAnimate(animates, step = 0, fn) { | |||
| let obj = animates[step] | |||
| if (obj) { | |||
| let { | |||
| styles, | |||
| config | |||
| } = obj | |||
| this._animateRun(styles, config).then(() => { | |||
| step += 1 | |||
| this._nvueNextAnimate(animates, step, fn) | |||
| }) | |||
| } else { | |||
| this.currentStepAnimates = {} | |||
| typeof fn === 'function' && fn() | |||
| this.isEnd = true | |||
| } | |||
| } | |||
| step(config = {}) { | |||
| // #ifndef APP-NVUE | |||
| this.animation.step(config) | |||
| // #endif | |||
| // #ifdef APP-NVUE | |||
| this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) | |||
| this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin | |||
| this.next++ | |||
| // #endif | |||
| return this | |||
| } | |||
| run(fn) { | |||
| // #ifndef APP-NVUE | |||
| this.$.animationData = this.animation.export() | |||
| this.$.timer = setTimeout(() => { | |||
| typeof fn === 'function' && fn() | |||
| }, this.$.durationTime) | |||
| // #endif | |||
| // #ifdef APP-NVUE | |||
| this.isEnd = false | |||
| let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref | |||
| if(!ref) return | |||
| this._nvueNextAnimate(this.currentStepAnimates, 0, fn) | |||
| this.next = 0 | |||
| // #endif | |||
| } | |||
| } | |||
| const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', | |||
| 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', | |||
| 'translateZ' | |||
| ] | |||
| const animateTypes2 = ['opacity', 'backgroundColor'] | |||
| const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] | |||
| animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { | |||
| MPAnimation.prototype[type] = function(...args) { | |||
| // #ifndef APP-NVUE | |||
| this.animation[type](...args) | |||
| // #endif | |||
| // #ifdef APP-NVUE | |||
| this._nvuePushAnimates(type, args) | |||
| // #endif | |||
| return this | |||
| } | |||
| }) | |||
| export function createAnimation(option, _this) { | |||
| if(!_this) return | |||
| clearTimeout(_this.timer) | |||
| return new MPAnimation(option, _this) | |||
| } | |||
| @ -0,0 +1,286 @@ | |||
| <template> | |||
| <!-- #ifndef APP-NVUE --> | |||
| <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> | |||
| <!-- #endif --> | |||
| <!-- #ifdef APP-NVUE --> | |||
| <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> | |||
| <!-- #endif --> | |||
| </template> | |||
| <script> | |||
| import { createAnimation } from './createAnimation' | |||
| /** | |||
| * Transition 过渡动画 | |||
| * @description 简单过渡动画组件 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=985 | |||
| * @property {Boolean} show = [false|true] 控制组件显示或隐藏 | |||
| * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型 | |||
| * @value fade 渐隐渐出过渡 | |||
| * @value slide-top 由上至下过渡 | |||
| * @value slide-right 由右至左过渡 | |||
| * @value slide-bottom 由下至上过渡 | |||
| * @value slide-left 由左至右过渡 | |||
| * @value zoom-in 由小到大过渡 | |||
| * @value zoom-out 由大到小过渡 | |||
| * @property {Number} duration 过渡动画持续时间 | |||
| * @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red` | |||
| */ | |||
| export default { | |||
| name: 'uniTransition', | |||
| emits:['click','change'], | |||
| props: { | |||
| show: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| modeClass: { | |||
| type: [Array, String], | |||
| default() { | |||
| return 'fade' | |||
| } | |||
| }, | |||
| duration: { | |||
| type: Number, | |||
| default: 300 | |||
| }, | |||
| styles: { | |||
| type: Object, | |||
| default() { | |||
| return {} | |||
| } | |||
| }, | |||
| customClass:{ | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| onceRender:{ | |||
| type:Boolean, | |||
| default:false | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| isShow: false, | |||
| transform: '', | |||
| opacity: 1, | |||
| animationData: {}, | |||
| durationTime: 300, | |||
| config: {} | |||
| } | |||
| }, | |||
| watch: { | |||
| show: { | |||
| handler(newVal) { | |||
| if (newVal) { | |||
| this.open() | |||
| } else { | |||
| // 避免上来就执行 close,导致动画错乱 | |||
| if (this.isShow) { | |||
| this.close() | |||
| } | |||
| } | |||
| }, | |||
| immediate: true | |||
| } | |||
| }, | |||
| computed: { | |||
| // 生成样式数据 | |||
| stylesObject() { | |||
| let styles = { | |||
| ...this.styles, | |||
| 'transition-duration': this.duration / 1000 + 's' | |||
| } | |||
| let transform = '' | |||
| for (let i in styles) { | |||
| let line = this.toLine(i) | |||
| transform += line + ':' + styles[i] + ';' | |||
| } | |||
| return transform | |||
| }, | |||
| // 初始化动画条件 | |||
| transformStyles() { | |||
| return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject | |||
| } | |||
| }, | |||
| created() { | |||
| // 动画默认配置 | |||
| this.config = { | |||
| duration: this.duration, | |||
| timingFunction: 'ease', | |||
| transformOrigin: '50% 50%', | |||
| delay: 0 | |||
| } | |||
| this.durationTime = this.duration | |||
| }, | |||
| methods: { | |||
| /** | |||
| * ref 触发 初始化动画 | |||
| */ | |||
| init(obj = {}) { | |||
| if (obj.duration) { | |||
| this.durationTime = obj.duration | |||
| } | |||
| this.animation = createAnimation(Object.assign(this.config, obj),this) | |||
| }, | |||
| /** | |||
| * 点击组件触发回调 | |||
| */ | |||
| onClick() { | |||
| this.$emit('click', { | |||
| detail: this.isShow | |||
| }) | |||
| }, | |||
| /** | |||
| * ref 触发 动画分组 | |||
| * @param {Object} obj | |||
| */ | |||
| step(obj, config = {}) { | |||
| if (!this.animation) return | |||
| for (let i in obj) { | |||
| try { | |||
| if(typeof obj[i] === 'object'){ | |||
| this.animation[i](...obj[i]) | |||
| }else{ | |||
| this.animation[i](obj[i]) | |||
| } | |||
| } catch (e) { | |||
| console.error(`方法 ${i} 不存在`) | |||
| } | |||
| } | |||
| this.animation.step(config) | |||
| return this | |||
| }, | |||
| /** | |||
| * ref 触发 执行动画 | |||
| */ | |||
| run(fn) { | |||
| if (!this.animation) return | |||
| this.animation.run(fn) | |||
| }, | |||
| // 开始过度动画 | |||
| open() { | |||
| clearTimeout(this.timer) | |||
| this.transform = '' | |||
| this.isShow = true | |||
| let { opacity, transform } = this.styleInit(false) | |||
| if (typeof opacity !== 'undefined') { | |||
| this.opacity = opacity | |||
| } | |||
| this.transform = transform | |||
| // 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常 | |||
| this.$nextTick(() => { | |||
| // TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器 | |||
| this.timer = setTimeout(() => { | |||
| this.animation = createAnimation(this.config, this) | |||
| this.tranfromInit(false).step() | |||
| this.animation.run() | |||
| this.$emit('change', { | |||
| detail: this.isShow | |||
| }) | |||
| }, 20) | |||
| }) | |||
| }, | |||
| // 关闭过度动画 | |||
| close(type) { | |||
| if (!this.animation) return | |||
| this.tranfromInit(true) | |||
| .step() | |||
| .run(() => { | |||
| this.isShow = false | |||
| this.animationData = null | |||
| this.animation = null | |||
| let { opacity, transform } = this.styleInit(false) | |||
| this.opacity = opacity || 1 | |||
| this.transform = transform | |||
| this.$emit('change', { | |||
| detail: this.isShow | |||
| }) | |||
| }) | |||
| }, | |||
| // 处理动画开始前的默认样式 | |||
| styleInit(type) { | |||
| let styles = { | |||
| transform: '' | |||
| } | |||
| let buildStyle = (type, mode) => { | |||
| if (mode === 'fade') { | |||
| styles.opacity = this.animationType(type)[mode] | |||
| } else { | |||
| styles.transform += this.animationType(type)[mode] + ' ' | |||
| } | |||
| } | |||
| if (typeof this.modeClass === 'string') { | |||
| buildStyle(type, this.modeClass) | |||
| } else { | |||
| this.modeClass.forEach(mode => { | |||
| buildStyle(type, mode) | |||
| }) | |||
| } | |||
| return styles | |||
| }, | |||
| // 处理内置组合动画 | |||
| tranfromInit(type) { | |||
| let buildTranfrom = (type, mode) => { | |||
| let aniNum = null | |||
| if (mode === 'fade') { | |||
| aniNum = type ? 0 : 1 | |||
| } else { | |||
| aniNum = type ? '-100%' : '0' | |||
| if (mode === 'zoom-in') { | |||
| aniNum = type ? 0.8 : 1 | |||
| } | |||
| if (mode === 'zoom-out') { | |||
| aniNum = type ? 1.2 : 1 | |||
| } | |||
| if (mode === 'slide-right') { | |||
| aniNum = type ? '100%' : '0' | |||
| } | |||
| if (mode === 'slide-bottom') { | |||
| aniNum = type ? '100%' : '0' | |||
| } | |||
| } | |||
| this.animation[this.animationMode()[mode]](aniNum) | |||
| } | |||
| if (typeof this.modeClass === 'string') { | |||
| buildTranfrom(type, this.modeClass) | |||
| } else { | |||
| this.modeClass.forEach(mode => { | |||
| buildTranfrom(type, mode) | |||
| }) | |||
| } | |||
| return this.animation | |||
| }, | |||
| animationType(type) { | |||
| return { | |||
| fade: type ? 0 : 1, | |||
| 'slide-top': `translateY(${type ? '0' : '-100%'})`, | |||
| 'slide-right': `translateX(${type ? '0' : '100%'})`, | |||
| 'slide-bottom': `translateY(${type ? '0' : '100%'})`, | |||
| 'slide-left': `translateX(${type ? '0' : '-100%'})`, | |||
| 'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`, | |||
| 'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})` | |||
| } | |||
| }, | |||
| // 内置动画类型与实际动画对应字典 | |||
| animationMode() { | |||
| return { | |||
| fade: 'opacity', | |||
| 'slide-top': 'translateY', | |||
| 'slide-right': 'translateX', | |||
| 'slide-bottom': 'translateY', | |||
| 'slide-left': 'translateX', | |||
| 'zoom-in': 'scale', | |||
| 'zoom-out': 'scale' | |||
| } | |||
| }, | |||
| // 驼峰转中横线 | |||
| toLine(name) { | |||
| return name.replace(/([A-Z])/g, '-$1').toLowerCase() | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style></style> | |||
| @ -0,0 +1,85 @@ | |||
| { | |||
| "id": "uni-transition", | |||
| "displayName": "uni-transition 过渡动画", | |||
| "version": "1.3.3", | |||
| "description": "元素的简单过渡动画", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "uniui", | |||
| "动画", | |||
| "过渡", | |||
| "过渡动画" | |||
| ], | |||
| "repository": "https://github.com/dcloudio/uni-ui", | |||
| "engines": { | |||
| "HBuilderX": "" | |||
| }, | |||
| "directories": { | |||
| "example": "../../temps/example_temps" | |||
| }, | |||
| "dcloudext": { | |||
| "sale": { | |||
| "regular": { | |||
| "price": "0.00" | |||
| }, | |||
| "sourcecode": { | |||
| "price": "0.00" | |||
| } | |||
| }, | |||
| "contact": { | |||
| "qq": "" | |||
| }, | |||
| "declaration": { | |||
| "ads": "无", | |||
| "data": "无", | |||
| "permissions": "无" | |||
| }, | |||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||
| "type": "component-vue" | |||
| }, | |||
| "uni_modules": { | |||
| "dependencies": ["uni-scss"], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y", | |||
| "alipay": "n" | |||
| }, | |||
| "client": { | |||
| "App": { | |||
| "app-vue": "y", | |||
| "app-nvue": "y" | |||
| }, | |||
| "H5-mobile": { | |||
| "Safari": "y", | |||
| "Android Browser": "y", | |||
| "微信浏览器(Android)": "y", | |||
| "QQ浏览器(Android)": "y" | |||
| }, | |||
| "H5-pc": { | |||
| "Chrome": "y", | |||
| "IE": "y", | |||
| "Edge": "y", | |||
| "Firefox": "y", | |||
| "Safari": "y" | |||
| }, | |||
| "小程序": { | |||
| "微信": "y", | |||
| "阿里": "y", | |||
| "百度": "y", | |||
| "字节跳动": "y", | |||
| "QQ": "y" | |||
| }, | |||
| "快应用": { | |||
| "华为": "u", | |||
| "联盟": "u" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||