| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | # 忽ç¥çæçæ件 |
|---|
| | | build/ |
|---|
| | | dist/ |
|---|
| | | unpackage/ |
|---|
| | | *.class |
|---|
| | | *.jar |
|---|
| | | *.war |
|---|
| | | *.ear |
|---|
| | | |
|---|
| | | # 忽ç¥ç¼è¾å¨/IDEçæçæ件åç®å½ |
|---|
| | | .idea/ |
|---|
| | | .hbuilderx |
|---|
| | | *.swp |
|---|
| | | *.swo |
|---|
| | | *~ |
|---|
| | | |
|---|
| | | # 忽ç¥ä¾èµç®¡çå·¥å
·çæçç®å½ |
|---|
| | | node_modules/ |
|---|
| | | bower_components/ |
|---|
| | | vendor/ |
|---|
| | | |
|---|
| | | # 忽ç¥æä½ç³»ç»æ件 |
|---|
| | | .DS_Store |
|---|
| | | Thumbs.db |
|---|
| | | |
|---|
| | | # 忽ç¥æ¥å¿æ件 |
|---|
| | | *.log |
|---|
| | | |
|---|
| | | # 忽ç¥æææå
å«ä¸ªäººä¿¡æ¯çæ件ï¼æ ¹æ®éè¦æ·»å æ´å¤ï¼ |
|---|
| | | credentials.json |
|---|
| | | config.ini |
|---|
| | | secrets.txt |
|---|
| | | |
|---|
| | | # 忽ç¥å
¶ä»èªå®ä¹çæ件æç®å½ |
|---|
| | | /custom_directory/ |
|---|
| | | |
|---|
| | | # æé¤ç¹å®æ©å±åçæ件ï¼æ ¹æ®éè¦æ·»å æ´å¤ï¼ |
|---|
| | | *.bak |
|---|
| | | *.tmp |
|---|
| | | |
|---|
| | | # æé¤ç¹å®æ件åï¼æ ¹æ®éè¦æ·»å æ´å¤ï¼ |
|---|
| | | debug.log |
|---|
| | | |
|---|
| | | # ä¸æé¤ä¸åæ©å±åçæ件 |
|---|
| | | !*.allowed_extension |
|---|
| | | |
|---|
| | | # ä¸æé¤ä¸åæ件å |
|---|
| | | !important_file.txt |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | MIT License |
|---|
| | | |
|---|
| | | Copyright (c) 2023 å¦NO |
|---|
| | | |
|---|
| | | Permission is hereby granted, free of charge, to any person obtaining a copy |
|---|
| | | of this software and associated documentation files (the "Software"), to deal |
|---|
| | | in the Software without restriction, including without limitation the rights |
|---|
| | | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|---|
| | | copies of the Software, and to permit persons to whom the Software is |
|---|
| | | furnished to do so, subject to the following conditions: |
|---|
| | | |
|---|
| | | The above copyright notice and this permission notice shall be included in all |
|---|
| | | copies or substantial portions of the Software. |
|---|
| | | |
|---|
| | | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|---|
| | | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|---|
| | | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|---|
| | | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|---|
| | | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|---|
| | | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|---|
| | | SOFTWARE. |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <title>Ruoyi-App-Geek</title> |
|---|
| | | <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> |
|---|
| | | <script> |
|---|
| | | var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
|---|
| | | CSS.supports('top: constant(a)')) |
|---|
| | | document.write( |
|---|
| | | '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
|---|
| | | (coverSupport ? ', viewport-fit=cover' : '') + '" />') |
|---|
| | | </script> |
|---|
| | | <title></title> |
|---|
| | | <!--preload-links--> |
|---|
| | | <!--app-context--> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"><!--app-html--></div> |
|---|
| | | <script type="module" src="./src/main.js"></script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "name": "ruoyi-geek-app", |
|---|
| | | "version": "1.0.0", |
|---|
| | | "description": "è¥ä¾Geek管çç³»ç»", |
|---|
| | | "author": "Geek-XD", |
|---|
| | | "license": "MIT", |
|---|
| | | "homepage": "https://gitee.com/geek-xd", |
|---|
| | | "repository": { |
|---|
| | | "type": "git", |
|---|
| | | "url": "https://gitee.com/geek-xd/ruoyi-geek-app.git" |
|---|
| | | }, |
|---|
| | | "engines": { |
|---|
| | | "node": "^18.0.0 || >=20.0.0" |
|---|
| | | }, |
|---|
| | | "scripts": { |
|---|
| | | "dev:app": "uni -p app", |
|---|
| | | "dev:app-android": "uni -p app-android", |
|---|
| | | "dev:app-ios": "uni -p app-ios", |
|---|
| | | "dev:custom": "uni -p", |
|---|
| | | "dev:h5": "uni", |
|---|
| | | "dev:h5:ssr": "uni --ssr", |
|---|
| | | "dev:mp-alipay": "uni -p mp-alipay", |
|---|
| | | "dev:mp-baidu": "uni -p mp-baidu", |
|---|
| | | "dev:mp-jd": "uni -p mp-jd", |
|---|
| | | "dev:mp-kuaishou": "uni -p mp-kuaishou", |
|---|
| | | "dev:mp-lark": "uni -p mp-lark", |
|---|
| | | "dev:mp-qq": "uni -p mp-qq", |
|---|
| | | "dev:mp-toutiao": "uni -p mp-toutiao", |
|---|
| | | "dev:mp-weixin": "uni -p mp-weixin", |
|---|
| | | "dev:quickapp-webview": "uni -p quickapp-webview", |
|---|
| | | "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei", |
|---|
| | | "dev:quickapp-webview-union": "uni -p quickapp-webview-union", |
|---|
| | | "build:app": "uni build -p app", |
|---|
| | | "build:app-android": "uni build -p app-android", |
|---|
| | | "build:app-ios": "uni build -p app-ios", |
|---|
| | | "build:custom": "uni build -p", |
|---|
| | | "build:h5": "uni build", |
|---|
| | | "build:h5:ssr": "uni build --ssr", |
|---|
| | | "build:mp-alipay": "uni build -p mp-alipay", |
|---|
| | | "build:mp-baidu": "uni build -p mp-baidu", |
|---|
| | | "build:mp-jd": "uni build -p mp-jd", |
|---|
| | | "build:mp-kuaishou": "uni build -p mp-kuaishou", |
|---|
| | | "build:mp-lark": "uni build -p mp-lark", |
|---|
| | | "build:mp-qq": "uni build -p mp-qq", |
|---|
| | | "build:mp-toutiao": "uni build -p mp-toutiao", |
|---|
| | | "build:mp-weixin": "uni build -p mp-weixin", |
|---|
| | | "build:quickapp-webview": "uni build -p quickapp-webview", |
|---|
| | | "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei", |
|---|
| | | "build:quickapp-webview-union": "uni build -p quickapp-webview-union", |
|---|
| | | "type-check": "vue-tsc --noEmit", |
|---|
| | | "clean:linux": "rm -rf dist || rm -rf node_modules", |
|---|
| | | "clean:windows": "rd /s /q dist || rd /s /q node_modules" |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "@dcloudio/uni-app": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-app-harmony": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-app-plus": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-components": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-h5": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-alipay": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-baidu": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-harmony": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-jd": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-kuaishou": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-lark": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-qq": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-toutiao": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-weixin": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-xhs": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-quickapp-webview": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uvm": "^0.3.1", |
|---|
| | | "@jridgewell/sourcemap-codec": "^1.5.0", |
|---|
| | | "@qiun/wx-ucharts": "2.5.0-20230101", |
|---|
| | | "@uview-plus/types": "^3.2.5", |
|---|
| | | "clipboard": "^2.0.11", |
|---|
| | | "dayjs": "^1.11.13", |
|---|
| | | "mqtt": "4.1.0", |
|---|
| | | "pinia": "2.2.2", |
|---|
| | | "tslib": "^2.7.0", |
|---|
| | | "uview-plus": "^3.3.32", |
|---|
| | | "vue": "3.4.21", |
|---|
| | | "vue-i18n": "^9.14.2" |
|---|
| | | }, |
|---|
| | | "devDependencies": { |
|---|
| | | "@dcloudio/types": "^3.4.14", |
|---|
| | | "@dcloudio/uni-automator": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-cli-shared": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-stacktracey": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/vite-plugin-uni": "3.0.0-4060420250429001", |
|---|
| | | "@vue/runtime-core": "^3.5.12", |
|---|
| | | "@vue/tsconfig": "^0.5.1", |
|---|
| | | "less": "^4.2.0", |
|---|
| | | "sass": "^1.78.0", |
|---|
| | | "sass-loader": "^16.0.1", |
|---|
| | | "typescript": "^5.6.2", |
|---|
| | | "vite": "5.2.8", |
|---|
| | | "vue-tsc": "2.1.6" |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-countdown.day": "day", |
|---|
| | | "uni-countdown.h": "h", |
|---|
| | | "uni-countdown.m": "m", |
|---|
| | | "uni-countdown.s": "s" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-countdown.day": "天", |
|---|
| | | "uni-countdown.h": "æ¶", |
|---|
| | | "uni-countdown.m": "å", |
|---|
| | | "uni-countdown.s": "ç§" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-countdown.day": "天", |
|---|
| | | "uni-countdown.h": "æ", |
|---|
| | | "uni-countdown.m": "å", |
|---|
| | | "uni-countdown.s": "ç§" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.0.3ï¼2022-09-16ï¼ |
|---|
| | | - å¯ä»¥ä½¿ç¨ uni-scss æ§å¶ä¸»é¢è² |
|---|
| | | ## 1.0.2ï¼2022-06-30ï¼ |
|---|
| | | - ä¼å å¨ uni-forms ä¸çä¾èµæ³¨å
¥æ¹å¼ |
|---|
| | | ## 1.0.1ï¼2022-02-07ï¼ |
|---|
| | | - ä¿®å¤ multiple 为 true æ¶ï¼v-model çå¼ä¸º null æ¥éç bug |
|---|
| | | ## 1.0.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-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox) |
|---|
| | | ## 0.2.5ï¼2021-08-23ï¼ |
|---|
| | | - ä¿®å¤ å¨uni-formsä¸ modelValue ä¸ä¸åå¨å½åå段ï¼å½åå段å¿
å¡«åä¹ä¸åä¸æ ¡éªçé®é¢ |
|---|
| | | ## 0.2.4ï¼2021-08-17ï¼ |
|---|
| | | - ä¿®å¤ åé list 模å¼ä¸ ï¼icon 为 left æ¶ï¼éä¸å¾æ ä¸æ¾ç¤ºçé®é¢ |
|---|
| | | ## 0.2.3ï¼2021-08-11ï¼ |
|---|
| | | - ä¿®å¤ å¨ uni-forms ä¸é置表åï¼é误信æ¯æ æ³æ¸
é¤çé®é¢ |
|---|
| | | ## 0.2.2ï¼2021-07-30ï¼ |
|---|
| | | - ä¼å å¨uni-formsç»ä»¶ï¼ä¸labelä¸å¯¹é½çé®é¢ |
|---|
| | | ## 0.2.1ï¼2021-07-27ï¼ |
|---|
| | | - ä¿®å¤ åéé»è®¤å¼ä¸º0ä¸è½éä¸çBug |
|---|
| | | ## 0.2.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 0.1.11ï¼2021-07-06ï¼ |
|---|
| | | - ä¼å å é¤æ ç¨æ¥å¿ |
|---|
| | | ## 0.1.10ï¼2021-07-05ï¼ |
|---|
| | | - ä¿®å¤ ç± 0.1.9 å¼èµ·çé nvue 端å¾æ ä¸æ¾ç¤ºçé®é¢ |
|---|
| | | ## 0.1.9ï¼2021-07-05ï¼ |
|---|
| | | - ä¿®å¤ nvue é»æ¡æ ·å¼é®é¢ |
|---|
| | | ## 0.1.8ï¼2021-06-28ï¼ |
|---|
| | | - ä¿®å¤ selectedTextColor å±æ§ä¸çæçBug |
|---|
| | | ## 0.1.7ï¼2021-06-02ï¼ |
|---|
| | | - æ°å¢ map å±æ§ï¼å¯ä»¥æ¹ä¾¿æ å°text/valueå±æ§ |
|---|
| | | ## 0.1.6ï¼2021-05-26ï¼ |
|---|
| | | - ä¿®å¤ ä¸å
³èæå¡ç©ºé´çæ
åµä¸ç»ä»¶æ¥éçBug |
|---|
| | | ## 0.1.5ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 0.1.4ï¼2021-04-09ï¼ |
|---|
| | | - ä¿®å¤ nvue ä¸æ æ³éä¸çé®é¢ |
|---|
| | | ## 0.1.3ï¼2021-03-22ï¼ |
|---|
| | | - æ°å¢ disabledå±æ§ |
|---|
| | | ## 0.1.2ï¼2021-02-24ï¼ |
|---|
| | | - ä¼å é»è®¤é¢è²æ¾ç¤º |
|---|
| | | ## 0.1.1ï¼2021-02-24ï¼ |
|---|
| | | - æ°å¢ æ¯ænvue |
|---|
| | | ## 0.1.0ï¼2021-02-18ï¼ |
|---|
| | | - âææ æ°æ®âæ¾ç¤ºå±
ä¸ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}"> |
|---|
| | | <template v-if="!isLocal"> |
|---|
| | | <view class="uni-data-loading"> |
|---|
| | | <uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more> |
|---|
| | | <text v-else>{{mixinDatacomErrorMessage}}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <template v-else> |
|---|
| | | <checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne"> |
|---|
| | | <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']" |
|---|
| | | :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index"> |
|---|
| | | <checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" /> |
|---|
| | | <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon"> |
|---|
| | | <view class="checkbox__inner-icon"></view> |
|---|
| | | </view> |
|---|
| | | <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}"> |
|---|
| | | <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text> |
|---|
| | | <view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view> |
|---|
| | | </view> |
|---|
| | | </label> |
|---|
| | | </checkbox-group> |
|---|
| | | <radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne"> |
|---|
| | | <!-- --> |
|---|
| | | <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']" |
|---|
| | | :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index"> |
|---|
| | | <radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" /> |
|---|
| | | <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner" |
|---|
| | | :style="item.styleBackgroud"> |
|---|
| | | <view class="radio__inner-icon" :style="item.styleIcon"></view> |
|---|
| | | </view> |
|---|
| | | <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}"> |
|---|
| | | <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text> |
|---|
| | | <view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view> |
|---|
| | | </view> |
|---|
| | | </label> |
|---|
| | | </radio-group> |
|---|
| | | </template> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * DataChecklist æ°æ®éæ©å¨ |
|---|
| | | * @description éè¿æ°æ®æ¸²æ checkbox å radio |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx |
|---|
| | | * @property {String} mode = [default| list | button | tag] æ¾ç¤ºæ¨¡å¼ |
|---|
| | | * @value default é»è®¤æ¨ªææ¨¡å¼ |
|---|
| | | * @value list åè¡¨æ¨¡å¼ |
|---|
| | | * @value button æé®æ¨¡å¼ |
|---|
| | | * @value tag æ ç¾æ¨¡å¼ |
|---|
| | | * @property {Boolean} multiple = [true|false] æ¯å¦å¤é |
|---|
| | | * @property {Array|String|Number} value é»è®¤å¼ |
|---|
| | | * @property {Array} localdata æ¬å°æ°æ® ï¼æ ¼å¼ [{text:'',value:''}] |
|---|
| | | * @property {Number|String} min æå°éæ©ä¸ªæ° ï¼multiple为trueæ¶çæ |
|---|
| | | * @property {Number|String} max æ大éæ©ä¸ªæ° ï¼multiple为trueæ¶çæ |
|---|
| | | * @property {Boolean} wrap æ¯å¦æ¢è¡æ¾ç¤º |
|---|
| | | * @property {String} icon = [left|right] list å表模å¼ä¸iconæ¾ç¤ºä½ç½® |
|---|
| | | * @property {Boolean} selectedColor éä¸é¢è² |
|---|
| | | * @property {Boolean} emptyText 没ææ°æ®æ¶æ¾ç¤ºçæå ï¼æ¬å°æ°æ®æ æ |
|---|
| | | * @property {Boolean} selectedTextColor éä¸ææ¬é¢è²ï¼å¦ä¸å¡«ååèªå¨æ¾ç¤º |
|---|
| | | * @property {Object} map å段æ å°ï¼ é»è®¤ map={text:'text',value:'value'} |
|---|
| | | * @value left 左侧æ¾ç¤º |
|---|
| | | * @value right å³ä¾§æ¾ç¤º |
|---|
| | | * @event {Function} change éä¸åçåå触å |
|---|
| | | */ |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'uniDataChecklist', |
|---|
| | | mixins: [uniCloud.mixinDatacom || {}], |
|---|
| | | emits:['input','update:modelValue','change'], |
|---|
| | | props: { |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'default' |
|---|
| | | }, |
|---|
| | | |
|---|
| | | multiple: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Array, String, Number], |
|---|
| | | default () { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // TODO vue3 |
|---|
| | | modelValue: { |
|---|
| | | type: [Array, String, Number], |
|---|
| | | default() { |
|---|
| | | return ''; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | localdata: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | min: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | max: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | wrap: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | selectedColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | selectedTextColor: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | emptyText:{ |
|---|
| | | type: String, |
|---|
| | | default: 'ææ æ°æ®' |
|---|
| | | }, |
|---|
| | | disabled:{ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | map:{ |
|---|
| | | type: Object, |
|---|
| | | default(){ |
|---|
| | | return { |
|---|
| | | text:'text', |
|---|
| | | value:'value' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | localdata: { |
|---|
| | | handler(newVal) { |
|---|
| | | this.range = newVal |
|---|
| | | this.dataList = this.getDataList(this.getSelectedValue(newVal)) |
|---|
| | | }, |
|---|
| | | deep: true |
|---|
| | | }, |
|---|
| | | mixinDatacomResData(newVal) { |
|---|
| | | this.range = newVal |
|---|
| | | this.dataList = this.getDataList(this.getSelectedValue(newVal)) |
|---|
| | | }, |
|---|
| | | value(newVal) { |
|---|
| | | this.dataList = this.getDataList(newVal) |
|---|
| | | // fix by mehaotian is_reset å¨ uni-forms ä¸å®ä¹ |
|---|
| | | // if(!this.is_reset){ |
|---|
| | | // this.is_reset = false |
|---|
| | | // this.formItem && this.formItem.setValue(newVal) |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | modelValue(newVal) { |
|---|
| | | this.dataList = this.getDataList(newVal); |
|---|
| | | // if(!this.is_reset){ |
|---|
| | | // this.is_reset = false |
|---|
| | | // this.formItem && this.formItem.setValue(newVal) |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | dataList: [], |
|---|
| | | range: [], |
|---|
| | | contentText: { |
|---|
| | | contentdown: 'æ¥çæ´å¤', |
|---|
| | | contentrefresh: 'å è½½ä¸', |
|---|
| | | contentnomore: '没ææ´å¤' |
|---|
| | | }, |
|---|
| | | isLocal:true, |
|---|
| | | styles: { |
|---|
| | | selectedColor: '#2979ff', |
|---|
| | | selectedTextColor: '#666', |
|---|
| | | }, |
|---|
| | | isTop:0 |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | dataValue(){ |
|---|
| | | if(this.value === '')return this.modelValue |
|---|
| | | if(this.modelValue === '') return this.value |
|---|
| | | return this.value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // this.form = this.getForm('uniForms') |
|---|
| | | // this.formItem = this.getForm('uniFormsItem') |
|---|
| | | // this.formItem && this.formItem.setValue(this.value) |
|---|
| | | |
|---|
| | | // if (this.formItem) { |
|---|
| | | // this.isTop = 6 |
|---|
| | | // if (this.formItem.name) { |
|---|
| | | // // å¦æåå¨nameæ·»å é»è®¤å¼,å¦åformData ä¸ä¸åå¨è¿ä¸ªå段ä¸æ ¡éª |
|---|
| | | // if(!this.is_reset){ |
|---|
| | | // this.is_reset = false |
|---|
| | | // this.formItem.setValue(this.dataValue) |
|---|
| | | // } |
|---|
| | | // this.rename = this.formItem.name |
|---|
| | | // this.form.inputChildrens.push(this) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | if (this.localdata && this.localdata.length !== 0) { |
|---|
| | | this.isLocal = true |
|---|
| | | this.range = this.localdata |
|---|
| | | this.dataList = this.getDataList(this.getSelectedValue(this.range)) |
|---|
| | | } else { |
|---|
| | | if (this.collection) { |
|---|
| | | this.isLocal = false |
|---|
| | | this.loadData() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | loadData() { |
|---|
| | | this.mixinDatacomGet().then(res=>{ |
|---|
| | | this.mixinDatacomResData = res.result.data |
|---|
| | | if(this.mixinDatacomResData.length === 0){ |
|---|
| | | this.isLocal = false |
|---|
| | | this.mixinDatacomErrorMessage = this.emptyText |
|---|
| | | }else{ |
|---|
| | | this.isLocal = true |
|---|
| | | } |
|---|
| | | }).catch(err=>{ |
|---|
| | | this.mixinDatacomErrorMessage = err.message |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * è·åç¶å
ç´ å®ä¾ |
|---|
| | | */ |
|---|
| | | getForm(name = 'uniForms') { |
|---|
| | | 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; |
|---|
| | | }, |
|---|
| | | chagne(e) { |
|---|
| | | const values = e.detail.value |
|---|
| | | |
|---|
| | | let detail = { |
|---|
| | | value: [], |
|---|
| | | data: [] |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.multiple) { |
|---|
| | | this.range.forEach(item => { |
|---|
| | | |
|---|
| | | if (values.includes(item[this.map.value] + '')) { |
|---|
| | | detail.value.push(item[this.map.value]) |
|---|
| | | detail.data.push(item) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | const range = this.range.find(item => (item[this.map.value] + '') === values) |
|---|
| | | if (range) { |
|---|
| | | detail = { |
|---|
| | | value: range[this.map.value], |
|---|
| | | data: range |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // this.formItem && this.formItem.setValue(detail.value) |
|---|
| | | // TODO å
¼å®¹ vue2 |
|---|
| | | this.$emit('input', detail.value); |
|---|
| | | // // TOTO å
¼å®¹ vue3 |
|---|
| | | this.$emit('update:modelValue', detail.value); |
|---|
| | | this.$emit('change', { |
|---|
| | | detail |
|---|
| | | }) |
|---|
| | | if (this.multiple) { |
|---|
| | | // å¦æ v-model 没æç»å® ï¼åèµ°å
é¨é»è¾ |
|---|
| | | // if (this.value.length === 0) { |
|---|
| | | this.dataList = this.getDataList(detail.value, true) |
|---|
| | | // } |
|---|
| | | } else { |
|---|
| | | this.dataList = this.getDataList(detail.value) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å渲æçæ°æ°ç» |
|---|
| | | * @param {Object} value éä¸å
容 |
|---|
| | | */ |
|---|
| | | getDataList(value) { |
|---|
| | | // 解é¤å¼ç¨å
³ç³»ï¼ç ´ååå¼ç¨å
³ç³»ï¼é¿å
污ææºæ°æ® |
|---|
| | | let dataList = JSON.parse(JSON.stringify(this.range)) |
|---|
| | | let list = [] |
|---|
| | | if (this.multiple) { |
|---|
| | | if (!Array.isArray(value)) { |
|---|
| | | value = [] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | dataList.forEach((item, index) => { |
|---|
| | | item.disabled = item.disable || item.disabled || false |
|---|
| | | if (this.multiple) { |
|---|
| | | if (value.length > 0) { |
|---|
| | | let have = value.find(val => val === item[this.map.value]) |
|---|
| | | item.selected = have !== undefined |
|---|
| | | } else { |
|---|
| | | item.selected = false |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | item.selected = value === item[this.map.value] |
|---|
| | | } |
|---|
| | | |
|---|
| | | list.push(item) |
|---|
| | | }) |
|---|
| | | return this.setRange(list) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * å¤çæ大æå°å¼ |
|---|
| | | * @param {Object} list |
|---|
| | | */ |
|---|
| | | setRange(list) { |
|---|
| | | let selectList = list.filter(item => item.selected) |
|---|
| | | let min = Number(this.min) || 0 |
|---|
| | | let max = Number(this.max) || '' |
|---|
| | | list.forEach((item, index) => { |
|---|
| | | if (this.multiple) { |
|---|
| | | if (selectList.length <= min) { |
|---|
| | | let have = selectList.find(val => val[this.map.value] === item[this.map.value]) |
|---|
| | | if (have !== undefined) { |
|---|
| | | item.disabled = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (selectList.length >= max && max !== '') { |
|---|
| | | let have = selectList.find(val => val[this.map.value] === item[this.map.value]) |
|---|
| | | if (have === undefined) { |
|---|
| | | item.disabled = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.setStyles(item, index) |
|---|
| | | list[index] = item |
|---|
| | | }) |
|---|
| | | return list |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * 设置 class |
|---|
| | | * @param {Object} item |
|---|
| | | * @param {Object} index |
|---|
| | | */ |
|---|
| | | setStyles(item, index) { |
|---|
| | | // 设置èªå®ä¹æ ·å¼ |
|---|
| | | item.styleBackgroud = this.setStyleBackgroud(item) |
|---|
| | | item.styleIcon = this.setStyleIcon(item) |
|---|
| | | item.styleIconText = this.setStyleIconText(item) |
|---|
| | | item.styleRightIcon = this.setStyleRightIcon(item) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åéä¸å¼ |
|---|
| | | * @param {Object} range |
|---|
| | | */ |
|---|
| | | getSelectedValue(range) { |
|---|
| | | if (!this.multiple) return this.dataValue |
|---|
| | | let selectedArr = [] |
|---|
| | | range.forEach((item) => { |
|---|
| | | if (item.selected) { |
|---|
| | | selectedArr.push(item[this.map.value]) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return this.dataValue.length > 0 ? this.dataValue : selectedArr |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 设置èæ¯æ ·å¼ |
|---|
| | | */ |
|---|
| | | setStyleBackgroud(item) { |
|---|
| | | let styles = {} |
|---|
| | | let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' |
|---|
| | | if (this.selectedColor) { |
|---|
| | | if (this.mode !== 'list') { |
|---|
| | | styles['border-color'] = item.selected?selectedColor:'#DCDFE6' |
|---|
| | | } |
|---|
| | | if (this.mode === 'tag') { |
|---|
| | | styles['background-color'] = item.selected? selectedColor:'#f5f5f5' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let classles = '' |
|---|
| | | for (let i in styles) { |
|---|
| | | classles += `${i}:${styles[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | }, |
|---|
| | | setStyleIcon(item) { |
|---|
| | | let styles = {} |
|---|
| | | let classles = '' |
|---|
| | | if (this.selectedColor) { |
|---|
| | | let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' |
|---|
| | | styles['background-color'] = item.selected?selectedColor:'#fff' |
|---|
| | | styles['border-color'] = item.selected?selectedColor:'#DCDFE6' |
|---|
| | | |
|---|
| | | if(!item.selected && item.disabled){ |
|---|
| | | styles['background-color'] = '#F2F6FC' |
|---|
| | | styles['border-color'] = item.selected?selectedColor:'#DCDFE6' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | for (let i in styles) { |
|---|
| | | classles += `${i}:${styles[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | }, |
|---|
| | | setStyleIconText(item) { |
|---|
| | | let styles = {} |
|---|
| | | let classles = '' |
|---|
| | | if (this.selectedColor) { |
|---|
| | | let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' |
|---|
| | | if (this.mode === 'tag') { |
|---|
| | | styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666' |
|---|
| | | } else { |
|---|
| | | styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666' |
|---|
| | | } |
|---|
| | | if(!item.selected && item.disabled){ |
|---|
| | | styles.color = '#999' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | for (let i in styles) { |
|---|
| | | classles += `${i}:${styles[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | }, |
|---|
| | | setStyleRightIcon(item) { |
|---|
| | | let styles = {} |
|---|
| | | let classles = '' |
|---|
| | | if (this.mode === 'list') { |
|---|
| | | styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6' |
|---|
| | | } |
|---|
| | | for (let i in styles) { |
|---|
| | | classles += `${i}:${styles[i]};` |
|---|
| | | } |
|---|
| | | |
|---|
| | | return classles |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-primary: #2979ff !default; |
|---|
| | | $border-color: #DCDFE6; |
|---|
| | | $disable:0.4; |
|---|
| | | |
|---|
| | | @mixin flex { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-data-loading { |
|---|
| | | @include flex; |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | height: 36px; |
|---|
| | | padding-left: 10px; |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-data-checklist { |
|---|
| | | position: relative; |
|---|
| | | z-index: 0; |
|---|
| | | flex: 1; |
|---|
| | | // å¤éæ ·å¼ |
|---|
| | | .checklist-group { |
|---|
| | | @include flex; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | |
|---|
| | | &.is-list { |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .checklist-box { |
|---|
| | | @include flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | position: relative; |
|---|
| | | margin: 5px 0; |
|---|
| | | margin-right: 25px; |
|---|
| | | |
|---|
| | | .hidden { |
|---|
| | | position: absolute; |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æåæ ·å¼ |
|---|
| | | .checklist-content { |
|---|
| | | @include flex; |
|---|
| | | flex: 1; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | .checklist-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | margin-left: 5px; |
|---|
| | | line-height: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .checkobx__list { |
|---|
| | | border-right-width: 1px; |
|---|
| | | border-right-color: #007aff; |
|---|
| | | border-right-style: solid; |
|---|
| | | border-bottom-width:1px; |
|---|
| | | border-bottom-color: #007aff; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | height: 12px; |
|---|
| | | width: 6px; |
|---|
| | | left: -5px; |
|---|
| | | transform-origin: center; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤éæ ·å¼ |
|---|
| | | .checkbox__inner { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | flex-shrink: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | position: relative; |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | border: 1px solid $border-color; |
|---|
| | | border-radius: 4px; |
|---|
| | | background-color: #fff; |
|---|
| | | z-index: 1; |
|---|
| | | .checkbox__inner-icon { |
|---|
| | | position: absolute; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | top: 2px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | top: 1px; |
|---|
| | | /* #endif */ |
|---|
| | | left: 5px; |
|---|
| | | height: 8px; |
|---|
| | | width: 4px; |
|---|
| | | border-right-width: 1px; |
|---|
| | | border-right-color: #fff; |
|---|
| | | border-right-style: solid; |
|---|
| | | border-bottom-width:1px ; |
|---|
| | | border-bottom-color: #fff; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | opacity: 0; |
|---|
| | | transform-origin: center; |
|---|
| | | transform: rotate(40deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // åéæ ·å¼ |
|---|
| | | .radio__inner { |
|---|
| | | @include flex; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | flex-shrink: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | position: relative; |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | border: 1px solid $border-color; |
|---|
| | | border-radius: 16px; |
|---|
| | | background-color: #fff; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | .radio__inner-icon { |
|---|
| | | width: 8px; |
|---|
| | | height: 8px; |
|---|
| | | border-radius: 10px; |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // é»è®¤æ ·å¼ |
|---|
| | | &.is--default { |
|---|
| | | |
|---|
| | | // ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | .checkbox__inner { |
|---|
| | | background-color: #F2F6FC; |
|---|
| | | border-color: $border-color; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .radio__inner { |
|---|
| | | background-color: #F2F6FC; |
|---|
| | | border-color: $border-color; |
|---|
| | | } |
|---|
| | | .checklist-text { |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // éä¸ |
|---|
| | | &.is-checked { |
|---|
| | | .checkbox__inner { |
|---|
| | | border-color: $uni-primary; |
|---|
| | | background-color: $uni-primary; |
|---|
| | | |
|---|
| | | .checkbox__inner-icon { |
|---|
| | | opacity: 1; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .radio__inner { |
|---|
| | | border-color: $uni-primary; |
|---|
| | | .radio__inner-icon { |
|---|
| | | opacity: 1; |
|---|
| | | background-color: $uni-primary; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .checklist-text { |
|---|
| | | color: $uni-primary; |
|---|
| | | } |
|---|
| | | // éä¸ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | .checkbox__inner { |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .checklist-text { |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | .radio__inner { |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æé®æ ·å¼ |
|---|
| | | &.is--button { |
|---|
| | | margin-right: 10px; |
|---|
| | | padding: 5px 10px; |
|---|
| | | border: 1px $border-color solid; |
|---|
| | | border-radius: 3px; |
|---|
| | | transition: border-color 0.2s; |
|---|
| | | |
|---|
| | | // ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | border: 1px #eee solid; |
|---|
| | | opacity: $disable; |
|---|
| | | .checkbox__inner { |
|---|
| | | background-color: #F2F6FC; |
|---|
| | | border-color: $border-color; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .radio__inner { |
|---|
| | | background-color: #F2F6FC; |
|---|
| | | border-color: $border-color; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .checklist-text { |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-checked { |
|---|
| | | border-color: $uni-primary; |
|---|
| | | .checkbox__inner { |
|---|
| | | border-color: $uni-primary; |
|---|
| | | background-color: $uni-primary; |
|---|
| | | .checkbox__inner-icon { |
|---|
| | | opacity: 1; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .radio__inner { |
|---|
| | | border-color: $uni-primary; |
|---|
| | | |
|---|
| | | .radio__inner-icon { |
|---|
| | | opacity: 1; |
|---|
| | | background-color: $uni-primary; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .checklist-text { |
|---|
| | | color: $uni-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // éä¸ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ ç¾æ ·å¼ |
|---|
| | | &.is--tag { |
|---|
| | | margin-right: 10px; |
|---|
| | | padding: 5px 10px; |
|---|
| | | border: 1px $border-color solid; |
|---|
| | | border-radius: 3px; |
|---|
| | | background-color: #f5f5f5; |
|---|
| | | |
|---|
| | | .checklist-text { |
|---|
| | | margin: 0; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-checked { |
|---|
| | | background-color: $uni-primary; |
|---|
| | | border-color: $uni-primary; |
|---|
| | | |
|---|
| | | .checklist-text { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // åè¡¨æ ·å¼ |
|---|
| | | &.is--list { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | padding: 10px 15px; |
|---|
| | | padding-left: 0; |
|---|
| | | margin: 0; |
|---|
| | | |
|---|
| | | &.is-list-border { |
|---|
| | | border-top: 1px #eee solid; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | .checkbox__inner { |
|---|
| | | background-color: #F2F6FC; |
|---|
| | | border-color: $border-color; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .checklist-text { |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-checked { |
|---|
| | | .checkbox__inner { |
|---|
| | | border-color: $uni-primary; |
|---|
| | | background-color: $uni-primary; |
|---|
| | | |
|---|
| | | .checkbox__inner-icon { |
|---|
| | | opacity: 1; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .radio__inner { |
|---|
| | | .radio__inner-icon { |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .checklist-text { |
|---|
| | | color: $uni-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .checklist-content { |
|---|
| | | .checkobx__list { |
|---|
| | | opacity: 1; |
|---|
| | | border-color: $uni-primary; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // éä¸ç¦ç¨ |
|---|
| | | &.is-disable { |
|---|
| | | .checkbox__inner { |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .checklist-text { |
|---|
| | | opacity: $disable; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-data-checkbox", |
|---|
| | | "displayName": "uni-data-checkbox æ°æ®éæ©å¨", |
|---|
| | | "version": "1.0.3", |
|---|
| | | "description": "éè¿æ°æ®é©±å¨çåéæ¡åå¤éæ¡", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "checkbox", |
|---|
| | | "åé", |
|---|
| | | "å¤é", |
|---|
| | | "åéå¤é" |
|---|
| | | ], |
|---|
| | | "repository": "https://github.com/dcloudio/uni-ui", |
|---|
| | | "engines": { |
|---|
| | | "HBuilderX": "^3.1.1" |
|---|
| | | }, |
|---|
| | | "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-load-more","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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## DataCheckbox æ°æ®é©±å¨çåéå¤éæ¡ |
|---|
| | | > **ç»ä»¶åï¼uni-data-checkbox** |
|---|
| | | > 代ç åï¼ `uDataCheckbox` |
|---|
| | | |
|---|
| | | |
|---|
| | | æ¬ç»ä»¶æ¯åºäºuni-appåºç¡ç»ä»¶checkboxçå°è£
ãæ¬ç»ä»¶è¦è§£å³é®é¢å
æ¬ï¼ |
|---|
| | | |
|---|
| | | 1. æ°æ®ç»å®åç»ä»¶ï¼ç»æ¬ç»ä»¶ç»å®ä¸ä¸ªdataï¼ä¼èªå¨æ¸²æä¸ç»åéå
容ãå以å¾ï¼å¼åè
éè¦ç¼åä¸å°ä»£ç å®ç°ç±»ä¼¼åè½ |
|---|
| | | 2. èªå¨ç表åæ ¡éªï¼ç»ä»¶ç»å®äºdataï¼ä¸ç¬¦å[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)ç»ä»¶ç表åæ ¡éªè§èï¼æé
使ç¨ä¼èªå¨å®ç°è¡¨åæ ¡éª |
|---|
| | | 3. æ¬ç»ä»¶å并äºåéå¤é |
|---|
| | | 4. æ¬ç»ä»¶æè¥å¹²é£æ ¼éæ©ï¼å¦æ®éçåéå¤éæ¡ã并åbuttoné£æ ¼ãtagé£æ ¼ãå¼åè
å¯ä»¥å¿«ééæ©éè¦çé£æ ¼ãä½ä½ä¸ºä¸ä¸ªå°è£
ç»ä»¶ï¼æ ·å¼ä»£ç è½ç¶ä¸ç¨èªå·±åäºï¼å´ä¼çºç²ä¸å®çæ ·å¼èªå®ä¹æ§ |
|---|
| | | |
|---|
| | | å¨uniCloudå¼åä¸ï¼`DB Schema`ä¸é
ç½®äºenumæ举çç±»ååï¼å¨webæ§å¶å°ç[èªå¨çæ表å](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)åè½ä¸ï¼ä¼èªå¨çæ``uni-data-checkbox``ç»ä»¶å¹¶ç»å®å¥½data |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.0.8ï¼2022-09-16ï¼ |
|---|
| | | - å¯ä»¥ä½¿ç¨ uni-scss æ§å¶ä¸»é¢è² |
|---|
| | | ## 1.0.7ï¼2022-07-06ï¼ |
|---|
| | | - ä¼å pc端å¾æ ä½ç½®ä¸æ£ç¡®çé®é¢ |
|---|
| | | ## 1.0.6ï¼2022-07-05ï¼ |
|---|
| | | - ä¼å æ¾ç¤ºæ ·å¼ |
|---|
| | | ## 1.0.5ï¼2022-07-04ï¼ |
|---|
| | | - ä¿®å¤ uni-data-picker å¨ uni-forms-item ä¸å®½åº¦ä¸æ£ç¡®çbug |
|---|
| | | ## 1.0.4ï¼2022-04-19ï¼ |
|---|
| | | - ä¿®å¤ åèå°ç¨åº æ¬å°æ°æ®æ æ³éæ©ä¸ä¸çº§çBug |
|---|
| | | ## 1.0.3ï¼2022-02-25ï¼ |
|---|
| | | - ä¿®å¤ nvue ä¸æ¯æç v-show ç bug |
|---|
| | | ## 1.0.2ï¼2022-02-25ï¼ |
|---|
| | | - ä¿®å¤ æ¡ä»¶ç¼è¯ nvue ä¸æ¯æç css æ ·å¼ |
|---|
| | | ## 1.0.1ï¼2021-11-23ï¼ |
|---|
| | | - ä¿®å¤ ç±ä¸ä¸ªçæ¬å¼åçmapãv-modelçå±æ§ä¸çæçbug |
|---|
| | | ## 1.0.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-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker) |
|---|
| | | ## 0.4.9ï¼2021-10-28ï¼ |
|---|
| | | - ä¿®å¤ VUE2 v-model æ¦çæ æç bug |
|---|
| | | ## 0.4.8ï¼2021-10-27ï¼ |
|---|
| | | - ä¿®å¤ v-model æ¦çæ æç bug |
|---|
| | | ## 0.4.7ï¼2021-10-25ï¼ |
|---|
| | | - æ°å¢ å±æ§ spaceInfo æå¡ç©ºé´é
ç½® HBuilderX 3.2.11+ |
|---|
| | | - ä¿®å¤ æ å uniCloud æ°æ®ç±»å为 int æ¶æ¥éç bug |
|---|
| | | ## 0.4.6ï¼2021-10-19ï¼ |
|---|
| | | - ä¿®å¤ é VUE3 v-model 为 0 æ¶æ æ³éä¸ç bug |
|---|
| | | ## 0.4.5ï¼2021-09-26ï¼ |
|---|
| | | - æ°å¢ æ¸
é¤å·²é项çåè½ï¼éè¿ clearIcon å±æ§é
ç½®æ¯å¦æ¾ç¤ºæé®ï¼ï¼åæ¶æä¾ clear æ¹æ³ä»¥ä¾è°ç¨ï¼äºè
çæ |
|---|
| | | - ä¿®å¤ readonly 为 true æ¶æ¥éç bug |
|---|
| | | ## 0.4.4ï¼2021-09-26ï¼ |
|---|
| | | - ä¿®å¤ ä¸ä¸çæ¬é æç map å±æ§å¤±æç bug |
|---|
| | | - æ°å¢ ellipsis å±æ§ï¼æ¯æé
ç½® tab é项é¿åº¦è¿é¿æ¶æ¯å¦èªå¨çç¥ |
|---|
| | | ## 0.4.3ï¼2021-09-24ï¼ |
|---|
| | | - ä¿®å¤ æäºæ
åµä¸çº§èæªè§¦åç bug |
|---|
| | | ## 0.4.2ï¼2021-09-23ï¼ |
|---|
| | | - æ°å¢ æä¾ show å hide æ¹æ³ï¼å¼åè
å¯ä»¥éè¿ ref è°ç¨ |
|---|
| | | - æ°å¢ é项å
容è¿é¿èªå¨æ·»å çç¥å· |
|---|
| | | ## 0.4.1ï¼2021-09-15ï¼ |
|---|
| | | - æ°å¢ map å±æ§ å段æ å°ï¼å° text/value æ å°å°æ°æ®ä¸çå
¶ä»å段 |
|---|
| | | ## 0.4.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建 vue3 项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 0.3.5ï¼2021-06-04ï¼ |
|---|
| | | - ä¿®å¤ æ æ³å è½½äºç«¯æ°æ®çé®é¢ |
|---|
| | | ## 0.3.4ï¼2021-05-28ï¼ |
|---|
| | | - ä¿®å¤ v-model æ æé®é¢ |
|---|
| | | - ä¿®å¤ loaddata 为空æ°æ®ç»æ¶å è½½æ¶é´è¿é¿é®é¢ |
|---|
| | | - ä¿®å¤ ä¸ä¸ªçæ¬å¼åºçæ¬å°æ°æ®æ æ³éæ©å¸¦æ children ç 2 级èç¹ |
|---|
| | | ## 0.3.3ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 0.3.2ï¼2021-04-22ï¼ |
|---|
| | | - ä¿®å¤ éæ å½¢æ°æ®æ where å±æ§æ¥è¯¢æ¥éçé®é¢ |
|---|
| | | ## 0.3.1ï¼2021-04-15ï¼ |
|---|
| | | - ä¿®å¤ æ¬å°æ°æ®æ¦çæ æ³åæ¾æ¶é®é¢ |
|---|
| | | ## 0.3.0ï¼2021-04-07ï¼ |
|---|
| | | - æ°å¢ æ¯æäºç«¯éæ 形表ç»ææ°æ® |
|---|
| | | - ä¿®å¤ æ ¹èç¹ parent_field å段çäº null æ¶éæ©çé¢éä¹±é®é¢ |
|---|
| | | ## 0.2.0ï¼2021-03-15ï¼ |
|---|
| | | - ä¿®å¤ nodeclickãpopupopenedãpopupclosed äºä»¶æ æ³è§¦åçé®é¢ |
|---|
| | | ## 0.1.9ï¼2021-03-09ï¼ |
|---|
| | | - ä¿®å¤ å¾®ä¿¡å°ç¨åºæäºæ
åµä¸æ æ³éæ©çé®é¢ |
|---|
| | | ## 0.1.8ï¼2021-02-05ï¼ |
|---|
| | | - ä¼å é¨åæ ·å¼å¨ nvue ä¸çå
¼å®¹è¡¨ç° |
|---|
| | | ## 0.1.7ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸º uni_modules ç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // #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 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-data-tree"> |
|---|
| | | <view class="uni-data-tree-input" @click="handleInput"> |
|---|
| | | <slot :options="options" :data="inputSelected" :error="errorMessage"> |
|---|
| | | <view class="input-value" :class="{'input-value-border': border}"> |
|---|
| | | <text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text> |
|---|
| | | <view v-else-if="loading && !isOpened" class="selected-area"> |
|---|
| | | <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more> |
|---|
| | | </view> |
|---|
| | | <scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true"> |
|---|
| | | <view class="selected-list"> |
|---|
| | | <view class="selected-item" v-for="(item,index) in inputSelected" :key="index"> |
|---|
| | | <text class="text-color">{{item.text}}</text><text v-if="index<inputSelected.length-1" |
|---|
| | | class="input-split-line">{{split}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | <text v-else class="selected-area placeholder">{{placeholder}}</text> |
|---|
| | | <view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear" @click.stop="clear"> |
|---|
| | | <uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons> |
|---|
| | | </view> |
|---|
| | | <view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly "> |
|---|
| | | <view class="input-arrow"></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view> |
|---|
| | | <view class="uni-data-tree-dialog" v-if="isOpened"> |
|---|
| | | <view class="uni-popper__arrow"></view> |
|---|
| | | <view class="dialog-caption"> |
|---|
| | | <view class="title-area"> |
|---|
| | | <text class="dialog-title">{{popupTitle}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="dialog-close" @click="handleClose"> |
|---|
| | | <view class="dialog-close-plus" data-id="close"></view> |
|---|
| | | <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata" |
|---|
| | | :preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where" |
|---|
| | | :step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true" :map="map" |
|---|
| | | :ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick"> |
|---|
| | | </data-picker-view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import dataPicker from "../uni-data-pickerview/uni-data-picker.js" |
|---|
| | | import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue" |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * DataPicker 级èéæ© |
|---|
| | | * @description æ¯æååãåå¤å级èéæ©ãåæ°æ²¡æéå¶ï¼å¦æå±å¹æ¾ç¤ºä¸å
¨ï¼é¡¶é¨tabåºåä¼å·¦å³æ»å¨ã |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=3796 |
|---|
| | | * @property {String} popup-title å¼¹åºçªå£æ é¢ |
|---|
| | | * @property {Array} localdata æ¬å°æ°æ®ï¼åè |
|---|
| | | * @property {Boolean} border = [true|false] æ¯å¦æè¾¹æ¡ |
|---|
| | | * @property {Boolean} readonly = [true|false] æ¯å¦ä»
读 |
|---|
| | | * @property {Boolean} preload = [true|false] æ¯å¦é¢å è½½æ°æ® |
|---|
| | | * @value true å¼å¯é¢å è½½æ°æ®ï¼ç¹å»å¼¹åºçªå£åæ¾ç¤ºå·²å è½½æ°æ® |
|---|
| | | * @value false å
³éé¢å è½½æ°æ®ï¼ç¹å»å¼¹åºçªå£åå¼å§å è½½æ°æ® |
|---|
| | | * @property {Boolean} step-searh = [true|false] æ¯å¦åå¸æ¥è¯¢ |
|---|
| | | * @value true å¯ç¨åå¸æ¥è¯¢ï¼ä»
æ¥è¯¢å½åéä¸èç¹ |
|---|
| | | * @value false å
³éåå¸æ¥è¯¢ï¼ä¸æ¬¡æ¥è¯¢åºæææ°æ® |
|---|
| | | * @property {String|DBFieldString} self-field åå¸æ¥è¯¢å½åå段å称 |
|---|
| | | * @property {String|DBFieldString} parent-field åå¸æ¥è¯¢ç¶å段å称 |
|---|
| | | * @property {String|DBCollectionString} collection 表å |
|---|
| | | * @property {String|DBFieldString} field æ¥è¯¢å段ï¼å¤ä¸ªåæ®µç¨ `,` åå² |
|---|
| | | * @property {String} orderby æåºå段åæ£åºåå设置 |
|---|
| | | * @property {String|JQLString} where æ¥è¯¢æ¡ä»¶ |
|---|
| | | * @event {Function} popupshow å¼¹åºçéæ©çªå£æå¼æ¶è§¦åæ¤äºä»¶ |
|---|
| | | * @event {Function} popuphide å¼¹åºçéæ©çªå£å
³éæ¶è§¦åæ¤äºä»¶ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniDataPicker', |
|---|
| | | emits: ['popupopened', 'popupclosed', 'nodeclick', 'input', 'change', 'update:modelValue'], |
|---|
| | | mixins: [dataPicker], |
|---|
| | | components: { |
|---|
| | | DataPickerView |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | options: { |
|---|
| | | type: [Object, Array], |
|---|
| | | default () { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | popupTitle: { |
|---|
| | | type: String, |
|---|
| | | default: '请éæ©' |
|---|
| | | }, |
|---|
| | | placeholder: { |
|---|
| | | type: String, |
|---|
| | | default: '请éæ©' |
|---|
| | | }, |
|---|
| | | heightMobile: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | readonly: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | clearIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | split: { |
|---|
| | | type: String, |
|---|
| | | default: '/' |
|---|
| | | }, |
|---|
| | | ellipsis: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isOpened: false, |
|---|
| | | inputSelected: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.load(); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | clear() { |
|---|
| | | this.modelValue = null; |
|---|
| | | this._dispatchEvent([]); |
|---|
| | | }, |
|---|
| | | onPropsChange() { |
|---|
| | | this._treeData = []; |
|---|
| | | this.selectedIndex = 0; |
|---|
| | | |
|---|
| | | this.load(); |
|---|
| | | }, |
|---|
| | | load() { |
|---|
| | | if (this.readonly) { |
|---|
| | | this._processReadonly(this.localdata, this.dataValue); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!this.hasValue) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // åæ¾æ¬å°æ°æ® |
|---|
| | | if (this.isLocalData) { |
|---|
| | | this.loadData(); |
|---|
| | | this.inputSelected = this.selected.slice(0); |
|---|
| | | } else if (this.isCloudDataList || this.isCloudDataTree) { // åæ¾ Cloud æ°æ® |
|---|
| | | this.loading = true; |
|---|
| | | this.getCloudDataValue().then((res) => { |
|---|
| | | this.loading = false; |
|---|
| | | this.inputSelected = res; |
|---|
| | | }).catch((err) => { |
|---|
| | | this.loading = false; |
|---|
| | | this.errorMessage = err; |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | show() { |
|---|
| | | this.isOpened = true |
|---|
| | | setTimeout(() => { |
|---|
| | | this.$refs.pickerView.updateData({ |
|---|
| | | treeData: this._treeData, |
|---|
| | | selected: this.selected, |
|---|
| | | selectedIndex: this.selectedIndex |
|---|
| | | }) |
|---|
| | | }, 200) |
|---|
| | | this.$emit('popupopened') |
|---|
| | | }, |
|---|
| | | hide() { |
|---|
| | | this.isOpened = false |
|---|
| | | this.$emit('popupclosed') |
|---|
| | | }, |
|---|
| | | handleInput() { |
|---|
| | | if (this.readonly) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.show() |
|---|
| | | }, |
|---|
| | | handleClose(e) { |
|---|
| | | this.hide() |
|---|
| | | }, |
|---|
| | | onnodeclick(e) { |
|---|
| | | this.$emit('nodeclick', e) |
|---|
| | | }, |
|---|
| | | ondatachange(e) { |
|---|
| | | this._treeData = this.$refs.pickerView._treeData |
|---|
| | | }, |
|---|
| | | onchange(e) { |
|---|
| | | this.hide() |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.inputSelected = e; |
|---|
| | | }) |
|---|
| | | this._dispatchEvent(e) |
|---|
| | | }, |
|---|
| | | _processReadonly(dataList, value) { |
|---|
| | | var isTree = dataList.findIndex((item) => { |
|---|
| | | return item.children |
|---|
| | | }) |
|---|
| | | if (isTree > -1) { |
|---|
| | | let inputValue |
|---|
| | | if (Array.isArray(value)) { |
|---|
| | | inputValue = value[value.length - 1] |
|---|
| | | if (typeof inputValue === 'object' && inputValue.value) { |
|---|
| | | inputValue = inputValue.value |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | inputValue = value |
|---|
| | | } |
|---|
| | | this.inputSelected = this._findNodePath(inputValue, this.localdata) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!this.hasValue) { |
|---|
| | | this.inputSelected = [] |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | let result = [] |
|---|
| | | for (let i = 0; i < value.length; i++) { |
|---|
| | | var val = value[i] |
|---|
| | | var item = dataList.find((v) => { |
|---|
| | | return v.value == val |
|---|
| | | }) |
|---|
| | | if (item) { |
|---|
| | | result.push(item) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (result.length) { |
|---|
| | | this.inputSelected = result |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | _filterForArray(data, valueArray) { |
|---|
| | | var result = [] |
|---|
| | | for (let i = 0; i < valueArray.length; i++) { |
|---|
| | | var value = valueArray[i] |
|---|
| | | var found = data.find((item) => { |
|---|
| | | return item.value == value |
|---|
| | | }) |
|---|
| | | if (found) { |
|---|
| | | result.push(found) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | }, |
|---|
| | | _dispatchEvent(selected) { |
|---|
| | | let item = {} |
|---|
| | | if (selected.length) { |
|---|
| | | var value = new Array(selected.length) |
|---|
| | | for (var i = 0; i < selected.length; i++) { |
|---|
| | | value[i] = selected[i].value |
|---|
| | | } |
|---|
| | | item = selected[selected.length - 1] |
|---|
| | | } else { |
|---|
| | | item.value = '' |
|---|
| | | } |
|---|
| | | if (this.formItem) { |
|---|
| | | this.formItem.setValue(item.value) |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.$emit('input', item.value) |
|---|
| | | this.$emit('update:modelValue', item.value) |
|---|
| | | this.$emit('change', { |
|---|
| | | detail: { |
|---|
| | | value: selected |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .uni-data-tree { |
|---|
| | | flex: 1; |
|---|
| | | position: relative; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .error-text { |
|---|
| | | color: #DD524D; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .input-value { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | font-size: 14px; |
|---|
| | | /* line-height: 35px; */ |
|---|
| | | padding: 0 10px; |
|---|
| | | padding-right: 5px; |
|---|
| | | overflow: hidden; |
|---|
| | | height: 35px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .input-value-border { |
|---|
| | | border: 1px solid #e5e5e5; |
|---|
| | | border-radius: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-area { |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .load-more { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | margin-right: auto; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | width: 40px; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-list { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | /* padding: 0 5px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-item { |
|---|
| | | flex-direction: row; |
|---|
| | | /* padding: 0 1px; */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | white-space: nowrap; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .text-color { |
|---|
| | | color: #333; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .placeholder { |
|---|
| | | color: grey; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .input-split-line { |
|---|
| | | opacity: .5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .arrow-area { |
|---|
| | | position: relative; |
|---|
| | | width: 20px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | margin-bottom: 5px; |
|---|
| | | margin-left: auto; |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | transform-origin: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .input-arrow { |
|---|
| | | width: 7px; |
|---|
| | | height: 7px; |
|---|
| | | border-left: 1px solid #999; |
|---|
| | | border-bottom: 1px solid #999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-data-tree-cover { |
|---|
| | | position: fixed; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | background-color: rgba(0, 0, 0, .4); |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | z-index: 100; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-data-tree-dialog { |
|---|
| | | position: fixed; |
|---|
| | | left: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | top: 20%; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | top: 200px; |
|---|
| | | /* #endif */ |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | border-top-left-radius: 10px; |
|---|
| | | border-top-right-radius: 10px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | z-index: 102; |
|---|
| | | overflow: hidden; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | width: 750rpx; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-caption { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | /* border-bottom: 1px solid #f0f0f0; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title-area { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | margin: auto; |
|---|
| | | /* #endif */ |
|---|
| | | padding: 0 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-title { |
|---|
| | | /* font-weight: bold; */ |
|---|
| | | line-height: 44px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-close { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | padding: 0 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-close-plus { |
|---|
| | | width: 16px; |
|---|
| | | height: 2px; |
|---|
| | | background-color: #666; |
|---|
| | | border-radius: 2px; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-close-rotate { |
|---|
| | | position: absolute; |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .picker-view { |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-clear { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | @media all and (min-width: 768px) { |
|---|
| | | .uni-data-tree-cover { |
|---|
| | | background-color: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-data-tree-dialog { |
|---|
| | | position: absolute; |
|---|
| | | top: 55px; |
|---|
| | | height: auto; |
|---|
| | | min-height: 400px; |
|---|
| | | max-height: 50vh; |
|---|
| | | background-color: #fff; |
|---|
| | | border: 1px solid #EBEEF5; |
|---|
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|---|
| | | border-radius: 4px; |
|---|
| | | overflow: unset; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-caption { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-clear { |
|---|
| | | /* margin-right: 5px; */ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* picker å¼¹åºå±éç¨çæ示å°ä¸è§, todoï¼æ©å±è³ä¸ä¸å·¦å³æ¹åå®ä½ */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-popper__arrow, |
|---|
| | | .uni-popper__arrow::after { |
|---|
| | | position: absolute; |
|---|
| | | display: block; |
|---|
| | | width: 0; |
|---|
| | | height: 0; |
|---|
| | | border-color: transparent; |
|---|
| | | border-style: solid; |
|---|
| | | border-width: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-popper__arrow { |
|---|
| | | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
|---|
| | | top: -6px; |
|---|
| | | left: 10%; |
|---|
| | | margin-right: 3px; |
|---|
| | | border-top-width: 0; |
|---|
| | | border-bottom-color: #EBEEF5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-popper__arrow::after { |
|---|
| | | content: " "; |
|---|
| | | top: 1px; |
|---|
| | | margin-left: -6px; |
|---|
| | | border-top-width: 0; |
|---|
| | | border-bottom-color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | localdata: { |
|---|
| | | type: [Array, Object], |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | spaceInfo: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | collection: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | action: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | field: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | orderby: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | where: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | pageData: { |
|---|
| | | type: String, |
|---|
| | | default: 'add' |
|---|
| | | }, |
|---|
| | | pageCurrent: { |
|---|
| | | type: Number, |
|---|
| | | default: 1 |
|---|
| | | }, |
|---|
| | | pageSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 500 |
|---|
| | | }, |
|---|
| | | getcount: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | getone: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | gettree: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | manual: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Array, String, Number], |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | modelValue: { |
|---|
| | | type: [Array, String, Number], |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | preload: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | stepSearh: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | selfField: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | parentField: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | multiple: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | map: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | text: "text", |
|---|
| | | value: "value" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | loading: false, |
|---|
| | | errorMessage: '', |
|---|
| | | loadMore: { |
|---|
| | | contentdown: '', |
|---|
| | | contentrefresh: '', |
|---|
| | | contentnomore: '' |
|---|
| | | }, |
|---|
| | | dataList: [], |
|---|
| | | selected: [], |
|---|
| | | selectedIndex: 0, |
|---|
| | | page: { |
|---|
| | | current: this.pageCurrent, |
|---|
| | | size: this.pageSize, |
|---|
| | | count: 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | isLocalData() { |
|---|
| | | return !this.collection.length; |
|---|
| | | }, |
|---|
| | | isCloudData() { |
|---|
| | | return this.collection.length > 0; |
|---|
| | | }, |
|---|
| | | isCloudDataList() { |
|---|
| | | return (this.isCloudData && (!this.parentField && !this.selfField)); |
|---|
| | | }, |
|---|
| | | isCloudDataTree() { |
|---|
| | | return (this.isCloudData && this.parentField && this.selfField); |
|---|
| | | }, |
|---|
| | | dataValue() { |
|---|
| | | let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null || |
|---|
| | | this.modelValue !== undefined); |
|---|
| | | return isModelValue ? this.modelValue : this.value; |
|---|
| | | }, |
|---|
| | | hasValue() { |
|---|
| | | if (typeof this.dataValue === 'number') { |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | return (this.dataValue != null) && (this.dataValue.length > 0) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.$watch(() => { |
|---|
| | | var al = []; |
|---|
| | | ['pageCurrent', |
|---|
| | | 'pageSize', |
|---|
| | | 'spaceInfo', |
|---|
| | | 'value', |
|---|
| | | 'modelValue', |
|---|
| | | 'localdata', |
|---|
| | | 'collection', |
|---|
| | | 'action', |
|---|
| | | 'field', |
|---|
| | | 'orderby', |
|---|
| | | 'where', |
|---|
| | | 'getont', |
|---|
| | | 'getcount', |
|---|
| | | 'gettree' |
|---|
| | | ].forEach(key => { |
|---|
| | | al.push(this[key]) |
|---|
| | | }); |
|---|
| | | return al |
|---|
| | | }, (newValue, oldValue) => { |
|---|
| | | let needReset = false |
|---|
| | | for (let i = 2; i < newValue.length; i++) { |
|---|
| | | if (newValue[i] != oldValue[i]) { |
|---|
| | | needReset = true |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (newValue[0] != oldValue[0]) { |
|---|
| | | this.page.current = this.pageCurrent |
|---|
| | | } |
|---|
| | | this.page.size = this.pageSize |
|---|
| | | |
|---|
| | | this.onPropsChange() |
|---|
| | | }) |
|---|
| | | this._treeData = [] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onPropsChange() { |
|---|
| | | this._treeData = []; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å¡«å
pickview æ°æ® |
|---|
| | | async loadData() { |
|---|
| | | if (this.isLocalData) { |
|---|
| | | this.loadLocalData(); |
|---|
| | | } else if (this.isCloudDataList) { |
|---|
| | | this.loadCloudDataList(); |
|---|
| | | } else if (this.isCloudDataTree) { |
|---|
| | | this.loadCloudDataTree(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å è½½æ¬å°æ°æ® |
|---|
| | | async loadLocalData() { |
|---|
| | | this._treeData = []; |
|---|
| | | this._extractTree(this.localdata, this._treeData); |
|---|
| | | |
|---|
| | | let inputValue = this.dataValue; |
|---|
| | | if (inputValue === undefined) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (Array.isArray(inputValue)) { |
|---|
| | | inputValue = inputValue[inputValue.length - 1]; |
|---|
| | | if (typeof inputValue === 'object' && inputValue[this.map.value]) { |
|---|
| | | inputValue = inputValue[this.map.value]; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.selected = this._findNodePath(inputValue, this.localdata); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å è½½ Cloud æ°æ® (åå) |
|---|
| | | async loadCloudDataList() { |
|---|
| | | if (this.loading) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.loading = true; |
|---|
| | | |
|---|
| | | try { |
|---|
| | | let response = await this.getCommand(); |
|---|
| | | let responseData = response.result.data; |
|---|
| | | |
|---|
| | | this._treeData = responseData; |
|---|
| | | |
|---|
| | | this._updateBindData(); |
|---|
| | | this._updateSelected(); |
|---|
| | | |
|---|
| | | this.onDataChange(); |
|---|
| | | } catch (e) { |
|---|
| | | this.errorMessage = e; |
|---|
| | | } finally { |
|---|
| | | this.loading = false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å è½½ Cloud æ°æ® (æ å½¢) |
|---|
| | | async loadCloudDataTree() { |
|---|
| | | if (this.loading) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.loading = true; |
|---|
| | | |
|---|
| | | try { |
|---|
| | | let commandOptions = { |
|---|
| | | field: this._cloudDataPostField(), |
|---|
| | | where: this._cloudDataTreeWhere() |
|---|
| | | }; |
|---|
| | | if (this.gettree) { |
|---|
| | | commandOptions.startwith = `${this.selfField}=='${this.dataValue}'`; |
|---|
| | | } |
|---|
| | | |
|---|
| | | let response = await this.getCommand(commandOptions); |
|---|
| | | let responseData = response.result.data; |
|---|
| | | |
|---|
| | | this._treeData = responseData; |
|---|
| | | this._updateBindData(); |
|---|
| | | this._updateSelected(); |
|---|
| | | |
|---|
| | | this.onDataChange(); |
|---|
| | | } catch (e) { |
|---|
| | | this.errorMessage = e; |
|---|
| | | } finally { |
|---|
| | | this.loading = false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å è½½ Cloud æ°æ® (èç¹) |
|---|
| | | async loadCloudDataNode(callback) { |
|---|
| | | if (this.loading) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.loading = true; |
|---|
| | | |
|---|
| | | try { |
|---|
| | | let commandOptions = { |
|---|
| | | field: this._cloudDataPostField(), |
|---|
| | | where: this._cloudDataNodeWhere() |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let response = await this.getCommand(commandOptions); |
|---|
| | | let responseData = response.result.data; |
|---|
| | | |
|---|
| | | callback(responseData); |
|---|
| | | } catch (e) { |
|---|
| | | this.errorMessage = e; |
|---|
| | | } finally { |
|---|
| | | this.loading = false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // åæ¾ Cloud æ°æ® |
|---|
| | | getCloudDataValue() { |
|---|
| | | if (this.isCloudDataList) { |
|---|
| | | return this.getCloudDataListValue(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.isCloudDataTree) { |
|---|
| | | return this.getCloudDataTreeValue(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // åæ¾ Cloud æ°æ® (åå) |
|---|
| | | getCloudDataListValue() { |
|---|
| | | // æ ¹æ® field's as valueæ è¯å¹é
where æ¡ä»¶ |
|---|
| | | let where = []; |
|---|
| | | let whereField = this._getForeignKeyByField(); |
|---|
| | | if (whereField) { |
|---|
| | | where.push(`${whereField} == '${this.dataValue}'`) |
|---|
| | | } |
|---|
| | | |
|---|
| | | where = where.join(' || '); |
|---|
| | | |
|---|
| | | if (this.where) { |
|---|
| | | where = `(${this.where}) && (${where})` |
|---|
| | | } |
|---|
| | | |
|---|
| | | return this.getCommand({ |
|---|
| | | field: this._cloudDataPostField(), |
|---|
| | | where |
|---|
| | | }).then((res) => { |
|---|
| | | this.selected = res.result.data; |
|---|
| | | return res.result.data; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // åæ¾ Cloud æ°æ® (æ å½¢) |
|---|
| | | getCloudDataTreeValue() { |
|---|
| | | return this.getCommand({ |
|---|
| | | field: this._cloudDataPostField(), |
|---|
| | | getTreePath: { |
|---|
| | | startWith: `${this.selfField}=='${this.dataValue}'` |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | let treePath = []; |
|---|
| | | this._extractTreePath(res.result.data, treePath); |
|---|
| | | this.selected = treePath; |
|---|
| | | return treePath; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | getCommand(options = {}) { |
|---|
| | | /* eslint-disable no-undef */ |
|---|
| | | let db = uniCloud.database(this.spaceInfo) |
|---|
| | | |
|---|
| | | const action = options.action || this.action |
|---|
| | | if (action) { |
|---|
| | | db = db.action(action) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const collection = options.collection || this.collection |
|---|
| | | db = db.collection(collection) |
|---|
| | | |
|---|
| | | const where = options.where || this.where |
|---|
| | | if (!(!where || !Object.keys(where).length)) { |
|---|
| | | db = db.where(where) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const field = options.field || this.field |
|---|
| | | if (field) { |
|---|
| | | db = db.field(field) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const orderby = options.orderby || this.orderby |
|---|
| | | if (orderby) { |
|---|
| | | db = db.orderBy(orderby) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current |
|---|
| | | const size = options.pageSize !== undefined ? options.pageSize : this.page.size |
|---|
| | | const getCount = options.getcount !== undefined ? options.getcount : this.getcount |
|---|
| | | const getTree = options.gettree !== undefined ? options.gettree : this.gettree |
|---|
| | | |
|---|
| | | const getOptions = { |
|---|
| | | getCount, |
|---|
| | | getTree |
|---|
| | | } |
|---|
| | | if (options.getTreePath) { |
|---|
| | | getOptions.getTreePath = options.getTreePath |
|---|
| | | } |
|---|
| | | |
|---|
| | | db = db.skip(size * (current - 1)).limit(size).get(getOptions) |
|---|
| | | |
|---|
| | | return db |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _cloudDataPostField() { |
|---|
| | | let fields = [this.field]; |
|---|
| | | if (this.parentField) { |
|---|
| | | fields.push(`${this.parentField} as parent_value`); |
|---|
| | | } |
|---|
| | | return fields.join(','); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _cloudDataTreeWhere() { |
|---|
| | | let result = [] |
|---|
| | | let selected = this.selected |
|---|
| | | let parentField = this.parentField |
|---|
| | | if (parentField) { |
|---|
| | | result.push(`${parentField} == null || ${parentField} == ""`) |
|---|
| | | } |
|---|
| | | if (selected.length) { |
|---|
| | | for (var i = 0; i < selected.length - 1; i++) { |
|---|
| | | result.push(`${parentField} == '${selected[i].value}'`) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let where = [] |
|---|
| | | if (this.where) { |
|---|
| | | where.push(`(${this.where})`) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (result.length) { |
|---|
| | | where.push(`(${result.join(' || ')})`) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return where.join(' && ') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _cloudDataNodeWhere() { |
|---|
| | | let where = [] |
|---|
| | | let selected = this.selected; |
|---|
| | | if (selected.length) { |
|---|
| | | where.push(`${this.parentField} == '${selected[selected.length - 1].value}'`); |
|---|
| | | } |
|---|
| | | |
|---|
| | | where = where.join(' || '); |
|---|
| | | |
|---|
| | | if (this.where) { |
|---|
| | | return `(${this.where}) && (${where})` |
|---|
| | | } |
|---|
| | | |
|---|
| | | return where |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _getWhereByForeignKey() { |
|---|
| | | let result = [] |
|---|
| | | let whereField = this._getForeignKeyByField(); |
|---|
| | | if (whereField) { |
|---|
| | | result.push(`${whereField} == '${this.dataValue}'`) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.where) { |
|---|
| | | return `(${this.where}) && (${result.join(' || ')})` |
|---|
| | | } |
|---|
| | | |
|---|
| | | return result.join(' || ') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _getForeignKeyByField() { |
|---|
| | | let fields = this.field.split(','); |
|---|
| | | let whereField = null; |
|---|
| | | for (let i = 0; i < fields.length; i++) { |
|---|
| | | const items = fields[i].split('as'); |
|---|
| | | if (items.length < 2) { |
|---|
| | | continue; |
|---|
| | | } |
|---|
| | | if (items[1].trim() === 'value') { |
|---|
| | | whereField = items[0].trim(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return whereField; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _updateBindData(node) { |
|---|
| | | const { |
|---|
| | | dataList, |
|---|
| | | hasNodes |
|---|
| | | } = this._filterData(this._treeData, this.selected) |
|---|
| | | |
|---|
| | | let isleaf = this._stepSearh === false && !hasNodes |
|---|
| | | |
|---|
| | | if (node) { |
|---|
| | | node.isleaf = isleaf |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.dataList = dataList |
|---|
| | | this.selectedIndex = dataList.length - 1 |
|---|
| | | |
|---|
| | | if (!isleaf && this.selected.length < dataList.length) { |
|---|
| | | this.selected.push({ |
|---|
| | | value: null, |
|---|
| | | text: "请éæ©" |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | isleaf, |
|---|
| | | hasNodes |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _updateSelected() { |
|---|
| | | let dl = this.dataList |
|---|
| | | let sl = this.selected |
|---|
| | | let textField = this.map.text |
|---|
| | | let valueField = this.map.value |
|---|
| | | for (let i = 0; i < sl.length; i++) { |
|---|
| | | let value = sl[i].value |
|---|
| | | let dl2 = dl[i] |
|---|
| | | for (let j = 0; j < dl2.length; j++) { |
|---|
| | | let item2 = dl2[j] |
|---|
| | | if (item2[valueField] === value) { |
|---|
| | | sl[i].text = item2[textField] |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _filterData(data, paths) { |
|---|
| | | let dataList = [] |
|---|
| | | let hasNodes = true |
|---|
| | | |
|---|
| | | dataList.push(data.filter((item) => { |
|---|
| | | return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '') |
|---|
| | | })) |
|---|
| | | for (let i = 0; i < paths.length; i++) { |
|---|
| | | let value = paths[i].value |
|---|
| | | let nodes = data.filter((item) => { |
|---|
| | | return item.parent_value === value |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (nodes.length) { |
|---|
| | | dataList.push(nodes) |
|---|
| | | } else { |
|---|
| | | hasNodes = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | dataList, |
|---|
| | | hasNodes |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _extractTree(nodes, result, parent_value) { |
|---|
| | | let list = result || [] |
|---|
| | | let valueField = this.map.value |
|---|
| | | for (let i = 0; i < nodes.length; i++) { |
|---|
| | | let node = nodes[i] |
|---|
| | | |
|---|
| | | let child = {} |
|---|
| | | for (let key in node) { |
|---|
| | | if (key !== 'children') { |
|---|
| | | child[key] = node[key] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (parent_value !== null && parent_value !== undefined && parent_value !== '') { |
|---|
| | | child.parent_value = parent_value |
|---|
| | | } |
|---|
| | | result.push(child) |
|---|
| | | |
|---|
| | | let children = node.children |
|---|
| | | if (children) { |
|---|
| | | this._extractTree(children, result, node[valueField]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _extractTreePath(nodes, result) { |
|---|
| | | let list = result || [] |
|---|
| | | for (let i = 0; i < nodes.length; i++) { |
|---|
| | | let node = nodes[i] |
|---|
| | | |
|---|
| | | let child = {} |
|---|
| | | for (let key in node) { |
|---|
| | | if (key !== 'children') { |
|---|
| | | child[key] = node[key] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | result.push(child) |
|---|
| | | |
|---|
| | | let children = node.children |
|---|
| | | if (children) { |
|---|
| | | this._extractTreePath(children, result) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _findNodePath(key, nodes, path = []) { |
|---|
| | | let textField = this.map.text |
|---|
| | | let valueField = this.map.value |
|---|
| | | for (let i = 0; i < nodes.length; i++) { |
|---|
| | | let node = nodes[i] |
|---|
| | | let children = node.children |
|---|
| | | let text = node[textField] |
|---|
| | | let value = node[valueField] |
|---|
| | | |
|---|
| | | path.push({ |
|---|
| | | value, |
|---|
| | | text |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (value === key) { |
|---|
| | | return path |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (children) { |
|---|
| | | const p = this._findNodePath(key, children, path) |
|---|
| | | if (p.length) { |
|---|
| | | return p |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | path.pop() |
|---|
| | | } |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-data-pickerview"> |
|---|
| | | <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true"> |
|---|
| | | <view class="selected-list"> |
|---|
| | | <template v-for="(item,index) in selected"> |
|---|
| | | <view class="selected-item" |
|---|
| | | :class="{'selected-item-active':index==selectedIndex}" |
|---|
| | | v-if="item.text" @click="handleSelect(index)"> |
|---|
| | | <text>{{item.text}}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | <view class="tab-c"> |
|---|
| | | <template v-for="(child, i) in dataList"> |
|---|
| | | <scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true"> |
|---|
| | | <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" |
|---|
| | | @click="handleNodeClick(item, i, j)"> |
|---|
| | | <text class="item-text">{{item[map.text]}}</text> |
|---|
| | | <view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <view class="loading-cover" v-if="loading"> |
|---|
| | | <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more> |
|---|
| | | </view> |
|---|
| | | <view class="error-message" v-if="errorMessage"> |
|---|
| | | <text class="error-text">{{errorMessage}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import dataPicker from "./uni-data-picker.js" |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * DataPickerview |
|---|
| | | * @description uni-data-pickerview |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=3796 |
|---|
| | | * @property {Array} localdata æ¬å°æ°æ®ï¼åè |
|---|
| | | * @property {Boolean} step-searh = [true|false] æ¯å¦åå¸æ¥è¯¢ |
|---|
| | | * @value true å¯ç¨åå¸æ¥è¯¢ï¼ä»
æ¥è¯¢å½åéä¸èç¹ |
|---|
| | | * @value false å
³éåå¸æ¥è¯¢ï¼ä¸æ¬¡æ¥è¯¢åºæææ°æ® |
|---|
| | | * @property {String|DBFieldString} self-field åå¸æ¥è¯¢å½åå段å称 |
|---|
| | | * @property {String|DBFieldString} parent-field åå¸æ¥è¯¢ç¶å段å称 |
|---|
| | | * @property {String|DBCollectionString} collection 表å |
|---|
| | | * @property {String|DBFieldString} field æ¥è¯¢å段ï¼å¤ä¸ªåæ®µç¨ `,` åå² |
|---|
| | | * @property {String} orderby æåºå段åæ£åºåå设置 |
|---|
| | | * @property {String|JQLString} where æ¥è¯¢æ¡ä»¶ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniDataPickerView', |
|---|
| | | emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'], |
|---|
| | | mixins: [dataPicker], |
|---|
| | | props: { |
|---|
| | | managedMode: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | ellipsis: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | if (!this.managedMode) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.loadData(); |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onPropsChange() { |
|---|
| | | this._treeData = []; |
|---|
| | | this.selectedIndex = 0; |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.loadData(); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleSelect(index) { |
|---|
| | | this.selectedIndex = index; |
|---|
| | | }, |
|---|
| | | handleNodeClick(item, i, j) { |
|---|
| | | if (item.disable) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const node = this.dataList[i][j]; |
|---|
| | | const text = node[this.map.text]; |
|---|
| | | const value = node[this.map.value]; |
|---|
| | | |
|---|
| | | if (i < this.selected.length - 1) { |
|---|
| | | this.selected.splice(i, this.selected.length - i) |
|---|
| | | this.selected.push({ |
|---|
| | | text, |
|---|
| | | value |
|---|
| | | }) |
|---|
| | | } else if (i === this.selected.length - 1) { |
|---|
| | | this.selected.splice(i, 1, { |
|---|
| | | text, |
|---|
| | | value |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (node.isleaf) { |
|---|
| | | this.onSelectedChange(node, node.isleaf) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | const { |
|---|
| | | isleaf, |
|---|
| | | hasNodes |
|---|
| | | } = this._updateBindData() |
|---|
| | | |
|---|
| | | // æ¬å°æ°æ® |
|---|
| | | if (this.isLocalData) { |
|---|
| | | this.onSelectedChange(node, (!hasNodes || isleaf)) |
|---|
| | | } else if (this.isCloudDataList) { // Cloud æ°æ® (åå) |
|---|
| | | this.onSelectedChange(node, true) |
|---|
| | | } else if (this.isCloudDataTree) { // Cloud æ°æ® (æ å½¢) |
|---|
| | | if (isleaf) { |
|---|
| | | this.onSelectedChange(node, node.isleaf) |
|---|
| | | } else if (!hasNodes) { // 请æ±ä¸æ¬¡æå¡å¨ä»¥ç¡®å®æ¯å¦ä¸ºå¶åèç¹ |
|---|
| | | this.loadCloudDataNode((data) => { |
|---|
| | | if (!data.length) { |
|---|
| | | node.isleaf = true |
|---|
| | | } else { |
|---|
| | | this._treeData.push(...data) |
|---|
| | | this._updateBindData(node) |
|---|
| | | } |
|---|
| | | this.onSelectedChange(node, node.isleaf) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | updateData(data) { |
|---|
| | | this._treeData = data.treeData |
|---|
| | | this.selected = data.selected |
|---|
| | | if (!this._treeData.length) { |
|---|
| | | this.loadData() |
|---|
| | | } else { |
|---|
| | | //this.selected = data.selected |
|---|
| | | this._updateBindData() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onDataChange() { |
|---|
| | | this.$emit('datachange'); |
|---|
| | | }, |
|---|
| | | onSelectedChange(node, isleaf) { |
|---|
| | | if (isleaf) { |
|---|
| | | this._dispatchEvent() |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (node) { |
|---|
| | | this.$emit('nodeclick', node) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | _dispatchEvent() { |
|---|
| | | this.$emit('change', this.selected.slice(0)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-primary: #007aff !default; |
|---|
| | | |
|---|
| | | .uni-data-pickerview { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | overflow: hidden; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .error-text { |
|---|
| | | color: #DD524D; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .loading-cover { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | background-color: rgba(255, 255, 255, .5); |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | z-index: 1001; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .load-more { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | margin: auto; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .error-message { |
|---|
| | | background-color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | padding: 15px; |
|---|
| | | opacity: .9; |
|---|
| | | z-index: 102; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | .selected-area { |
|---|
| | | width: 750rpx; |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | .selected-list { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | padding: 0 5px; |
|---|
| | | border-bottom: 1px solid #f8f8f8; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-item { |
|---|
| | | margin-left: 10px; |
|---|
| | | margin-right: 10px; |
|---|
| | | padding: 12px 0; |
|---|
| | | text-align: center; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | white-space: nowrap; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-item-text-overflow { |
|---|
| | | width: 168px; |
|---|
| | | /* fix nvue */ |
|---|
| | | overflow: hidden; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: 6em; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | -o-text-overflow: ellipsis; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-item-active { |
|---|
| | | border-bottom: 2px solid $uni-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .selected-item-text { |
|---|
| | | color: $uni-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tab-c { |
|---|
| | | position: relative; |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item { |
|---|
| | | padding: 12px 15px; |
|---|
| | | /* border-bottom: 1px solid #f0f0f0; */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-disabled { |
|---|
| | | opacity: .5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item-text { |
|---|
| | | /* flex: 1; */ |
|---|
| | | color: #333333; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item-text-overflow { |
|---|
| | | width: 280px; |
|---|
| | | /* fix nvue */ |
|---|
| | | overflow: hidden; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: 20em; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | -o-text-overflow: ellipsis; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .check { |
|---|
| | | margin-right: 5px; |
|---|
| | | border: 2px solid $uni-primary; |
|---|
| | | border-left: 0; |
|---|
| | | border-top: 0; |
|---|
| | | height: 12px; |
|---|
| | | width: 6px; |
|---|
| | | transform-origin: center; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | transition: all 0.3s; |
|---|
| | | /* #endif */ |
|---|
| | | transform: rotate(45deg); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-data-picker", |
|---|
| | | "displayName": "uni-data-picker æ°æ®é©±å¨çpickeréæ©å¨", |
|---|
| | | "version": "1.0.8", |
|---|
| | | "description": "ååãå¤å级èéæ©å¨ï¼å¸¸ç¨äºçå¸åºåå¸éæ©ãå
¬å¸é¨é¨éæ©ãå¤çº§åç±»çåºæ¯", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "picker", |
|---|
| | | "级è", |
|---|
| | | "çå¸åº", |
|---|
| | | "" |
|---|
| | | ], |
|---|
| | | "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-load-more", |
|---|
| | | "uni-icons", |
|---|
| | | "uni-scss" |
|---|
| | | ], |
|---|
| | | "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", |
|---|
| | | "京ä¸": "u" |
|---|
| | | }, |
|---|
| | | "å¿«åºç¨": { |
|---|
| | | "å为": "u", |
|---|
| | | "èç": "u" |
|---|
| | | }, |
|---|
| | | "Vue": { |
|---|
| | | "vue2": "y", |
|---|
| | | "vue3": "y" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## DataPicker 级èéæ© |
|---|
| | | > **ç»ä»¶åï¼uni-data-picker** |
|---|
| | | > 代ç åï¼ `uDataPicker` |
|---|
| | | > å
³èç»ä»¶ï¼`uni-data-pickerview`ã`uni-load-more`ã |
|---|
| | | |
|---|
| | | |
|---|
| | | `<uni-data-picker>` æ¯ä¸ä¸ªéæ©ç±»[datacomç»ä»¶](https://uniapp.dcloud.net.cn/component/datacom)ã |
|---|
| | | |
|---|
| | | æ¯æååãåå¤å级èéæ©ãåæ°æ²¡æéå¶ï¼å¦æå±å¹æ¾ç¤ºä¸å
¨ï¼é¡¶é¨tabåºåä¼å·¦å³æ»å¨ã |
|---|
| | | |
|---|
| | | åéæ°æ®æ¯æä¸æ¬¡æ§å è½½å®æ¯ï¼ä¹æ¯ææå è½½ï¼æ¯å¦ç¤ºä¾å¾ä¸ï¼éæ©äºâå京âåï¼å¨æå è½½å京çåºå¿æ°æ®ã |
|---|
| | | |
|---|
| | | `<uni-data-picker>` ç»ä»¶å°¤å
¶éç¨äºå°åéæ©ãåç±»éæ©çéæ©ç±»ã |
|---|
| | | |
|---|
| | | `<uni-data-picker>` æ¯ææ¬å°æ°æ®ãäºç«¯éææ°æ®(json)ï¼uniCloudäºæ°æ®åºæ°æ®ã |
|---|
| | | |
|---|
| | | `<uni-data-picker>` å¯ä»¥éè¿JQLç´è¿uniCloudäºæ°æ®åºï¼é
å¥[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)ï¼å¯å¨schema2codeä¸èªå¨çæå端页é¢ï¼è¿æ¯ææå¡å¨ç«¯æ ¡éªã |
|---|
| | | |
|---|
| | | å¨uniCloudæ°æ®è¡¨ä¸æ°å»ºè¡¨âuni-id-addressâåâopendb-city-chinaâï¼è¿2个表çschemaèªå¸¦foreignKeyå
³èãå¨âuni-id-addressâ表ç表ç»æ页é¢ä½¿ç¨schema2codeçæå端页é¢ï¼ä¼èªå¨çæå°å管ççç»´æ¤é¡µé¢ï¼èªå¨ä»âopendb-city-chinaâ表å
å«çä¸å½ææçå¸åºä¿¡æ¯ééæ©å°åã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-data-picker) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 0.1.9ï¼2022-09-05ï¼ |
|---|
| | | - ä¿®å¤ å¾®ä¿¡å°ç¨åºä¸ææ¡åºç°åéæ©ä¼ç¹å»å°èæ¿åé¢çè¾å
¥æ¡ |
|---|
| | | ## 0.1.8ï¼2022-08-29ï¼ |
|---|
| | | - ä¿®å¤ ç¹å»çä½ç½®ä¸åç¡® |
|---|
| | | ## 0.1.7ï¼2022-08-12ï¼ |
|---|
| | | - æ°å¢ æ¯æ disabled å±æ§ |
|---|
| | | ## 0.1.6ï¼2022-07-06ï¼ |
|---|
| | | - ä¿®å¤ pc端宽度å¼å¸¸çbug |
|---|
| | | ## 0.1.5 |
|---|
| | | - ä¿®å¤ pc端宽度å¼å¸¸çbug |
|---|
| | | ## 0.1.4ï¼2022-07-05ï¼ |
|---|
| | | - ä¼å æ¾ç¤ºæ ·å¼ |
|---|
| | | ## 0.1.3ï¼2022-06-02ï¼ |
|---|
| | | - ä¿®å¤ localdata èµå¼ä¸çæç bug |
|---|
| | | - æ°å¢ æ¯æ uni.scss ä¿®æ¹é¢è² |
|---|
| | | - æ°å¢ æ¯æé项ç¦ç¨ï¼æ°æ®é项设置 disabled: true å³ç¦ç¨ï¼ |
|---|
| | | ## 0.1.2ï¼2022-05-08ï¼ |
|---|
| | | - ä¿®å¤ å½ value 为 0 æ¶éæ©ä¸çæç bug |
|---|
| | | ## 0.1.1ï¼2022-05-07ï¼ |
|---|
| | | - æ°å¢ è®°ä½ä¸æ¬¡çé项ï¼ä»
collection åå¨æ¶ææï¼ |
|---|
| | | ## 0.1.0ï¼2022-04-22ï¼ |
|---|
| | | - åå§å |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-stat__select"> |
|---|
| | | <span v-if="label" class="uni-label-text hide-on-phone">{{label + 'ï¼'}}</span> |
|---|
| | | <view class="uni-stat-box" :class="{'uni-stat__actived': current}"> |
|---|
| | | <view class="uni-select" :class="{'uni-select--disabled':disabled}"> |
|---|
| | | <view class="uni-select__input-box" @click="toggleSelector"> |
|---|
| | | <view v-if="current" class="uni-select__input-text">{{current}}</view> |
|---|
| | | <view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> |
|---|
| | | <uni-icons v-if="current && clear" type="clear" color="#c0c4cc" size="24" @click="clearVal" /> |
|---|
| | | <uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> |
|---|
| | | </view> |
|---|
| | | <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> |
|---|
| | | <view class="uni-select__selector" v-if="showSelector"> |
|---|
| | | <view class="uni-popper__arrow"></view> |
|---|
| | | <scroll-view scroll-y="true" class="uni-select__selector-scroll"> |
|---|
| | | <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> |
|---|
| | | <text>{{emptyTips}}</text> |
|---|
| | | </view> |
|---|
| | | <view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" |
|---|
| | | :key="index" @click="change(item)"> |
|---|
| | | <text |
|---|
| | | :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * DataChecklist æ°æ®éæ©å¨ |
|---|
| | | * @description éè¿æ°æ®æ¸²æçä¸ææ¡ç»ä»¶ |
|---|
| | | * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select |
|---|
| | | * @property {String} value é»è®¤å¼ |
|---|
| | | * @property {Array} localdata æ¬å°æ°æ® ï¼æ ¼å¼ [{text:'',value:''}] |
|---|
| | | * @property {Boolean} clear æ¯å¦å¯ä»¥æ¸
空已é项 |
|---|
| | | * @property {Boolean} emptyText 没ææ°æ®æ¶æ¾ç¤ºçæå ï¼æ¬å°æ°æ®æ æ |
|---|
| | | * @property {String} label 左侧æ é¢ |
|---|
| | | * @property {String} placeholder è¾å
¥æ¡çæ示æå |
|---|
| | | * @property {Boolean} disabled æ¯å¦ç¦ç¨ |
|---|
| | | * @event {Function} change éä¸åçåå触å |
|---|
| | | */ |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "uni-stat-select", |
|---|
| | | mixins: [uniCloud.mixinDatacom || {}], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | showSelector: false, |
|---|
| | | current: '', |
|---|
| | | mixinDatacomResData: [], |
|---|
| | | apps: [], |
|---|
| | | channels: [] |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | localdata: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | modelValue: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | placeholder: { |
|---|
| | | type: String, |
|---|
| | | default: '请éæ©' |
|---|
| | | }, |
|---|
| | | emptyTips: { |
|---|
| | | type: String, |
|---|
| | | default: 'æ é项' |
|---|
| | | }, |
|---|
| | | clear: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | defItem: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.last = `${this.collection}_last_selected_option_value` |
|---|
| | | if (this.collection && !this.localdata.length) { |
|---|
| | | this.mixinDatacomEasyGet() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | typePlaceholder() { |
|---|
| | | const text = { |
|---|
| | | 'opendb-stat-app-versions': 'çæ¬', |
|---|
| | | 'opendb-app-channels': 'æ¸ é', |
|---|
| | | 'opendb-app-list': 'åºç¨' |
|---|
| | | } |
|---|
| | | const common = this.placeholder |
|---|
| | | const placeholder = text[this.collection] |
|---|
| | | return placeholder ? |
|---|
| | | common + placeholder : |
|---|
| | | common |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | localdata: { |
|---|
| | | immediate: true, |
|---|
| | | handler(val, old) { |
|---|
| | | if (Array.isArray(val) && old !== val) { |
|---|
| | | this.mixinDatacomResData = val |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #ifndef VUE3 |
|---|
| | | value() { |
|---|
| | | this.initDefVal() |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | // #ifdef VUE3 |
|---|
| | | modelValue() { |
|---|
| | | this.initDefVal() |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | mixinDatacomResData: { |
|---|
| | | immediate: true, |
|---|
| | | handler(val) { |
|---|
| | | if (val.length) { |
|---|
| | | this.initDefVal() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initDefVal() { |
|---|
| | | let defValue = '' |
|---|
| | | if ((this.value || this.value === 0) && !this.isDisabled(this.value)) { |
|---|
| | | defValue = this.value |
|---|
| | | } else if ((this.modelValue || this.modelValue === 0) && !this.isDisabled(this.modelValue)) { |
|---|
| | | defValue = this.modelValue |
|---|
| | | } else { |
|---|
| | | let strogeValue |
|---|
| | | if (this.collection) { |
|---|
| | | strogeValue = uni.getStorageSync(this.last) |
|---|
| | | } |
|---|
| | | if (strogeValue || strogeValue === 0) { |
|---|
| | | defValue = strogeValue |
|---|
| | | } else { |
|---|
| | | let defItem = '' |
|---|
| | | if (this.defItem > 0 && this.defItem < this.mixinDatacomResData.length) { |
|---|
| | | defItem = this.mixinDatacomResData[this.defItem - 1].value |
|---|
| | | } |
|---|
| | | defValue = defItem |
|---|
| | | } |
|---|
| | | this.emit(defValue) |
|---|
| | | } |
|---|
| | | const def = this.mixinDatacomResData.find(item => item.value === defValue) |
|---|
| | | this.current = def ? this.formatItemName(def) : '' |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @param {[String, Number]} value |
|---|
| | | * å¤æç¨æ·ç»ç value æ¯å¦åæ¶ä¸ºç¦ç¨ç¶æ |
|---|
| | | */ |
|---|
| | | isDisabled(value) { |
|---|
| | | let isDisabled = false; |
|---|
| | | |
|---|
| | | this.mixinDatacomResData.forEach(item => { |
|---|
| | | if (item.value === value) { |
|---|
| | | isDisabled = item.disable |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return isDisabled; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clearVal() { |
|---|
| | | this.emit('') |
|---|
| | | if (this.collection) { |
|---|
| | | uni.removeStorageSync(this.last) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | change(item) { |
|---|
| | | if (!item.disable) { |
|---|
| | | this.showSelector = false |
|---|
| | | this.current = this.formatItemName(item) |
|---|
| | | this.emit(item.value) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emit(val) { |
|---|
| | | this.$emit('change', val) |
|---|
| | | this.$emit('input', val) |
|---|
| | | this.$emit('update:modelValue', val) |
|---|
| | | if (this.collection) { |
|---|
| | | uni.setStorageSync(this.last, val) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | toggleSelector() { |
|---|
| | | if(this.disabled){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.showSelector = !this.showSelector |
|---|
| | | }, |
|---|
| | | formatItemName(item) { |
|---|
| | | let { |
|---|
| | | text, |
|---|
| | | value, |
|---|
| | | channel_code |
|---|
| | | } = item |
|---|
| | | channel_code = channel_code ? `(${channel_code})` : '' |
|---|
| | | return this.collection.indexOf('app-list') > 0 ? |
|---|
| | | `${text}(${value})` : |
|---|
| | | ( |
|---|
| | | text ? |
|---|
| | | text : |
|---|
| | | `æªå½å${channel_code}` |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-base-color: #6a6a6a !default; |
|---|
| | | $uni-main-color: #333 !default; |
|---|
| | | $uni-secondary-color: #909399 !default; |
|---|
| | | $uni-border-3: #e5e5e5; |
|---|
| | | |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | @media screen and (max-width: 500px) { |
|---|
| | | .hide-on-phone { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | .uni-stat__select { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | // padding: 15px; |
|---|
| | | cursor: pointer; |
|---|
| | | width: 100%; |
|---|
| | | flex: 1; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-stat-box { |
|---|
| | | width: 100%; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-stat__actived { |
|---|
| | | width: 100%; |
|---|
| | | flex: 1; |
|---|
| | | // outline: 1px solid #2979ff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-label-text { |
|---|
| | | font-size: 14px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: $uni-base-color; |
|---|
| | | margin: auto 0; |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select { |
|---|
| | | font-size: 14px; |
|---|
| | | border: 1px solid $uni-border-3; |
|---|
| | | box-sizing: border-box; |
|---|
| | | border-radius: 4px; |
|---|
| | | padding: 0 5px; |
|---|
| | | padding-left: 10px; |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | user-select: none; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | border-bottom: solid 1px $uni-border-3; |
|---|
| | | width: 100%; |
|---|
| | | flex: 1; |
|---|
| | | height: 35px; |
|---|
| | | |
|---|
| | | &--disabled{ |
|---|
| | | background-color: #f5f7fa; |
|---|
| | | cursor: not-allowed; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__label { |
|---|
| | | font-size: 16px; |
|---|
| | | // line-height: 22px; |
|---|
| | | height: 35px; |
|---|
| | | padding-right: 10px; |
|---|
| | | color: $uni-secondary-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__input-box { |
|---|
| | | height: 35px; |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__input { |
|---|
| | | flex: 1; |
|---|
| | | font-size: 14px; |
|---|
| | | height: 22px; |
|---|
| | | line-height: 22px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__input-plac { |
|---|
| | | font-size: 14px; |
|---|
| | | color: $uni-secondary-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__selector { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | position: absolute; |
|---|
| | | top: calc(100% + 12px); |
|---|
| | | left: 0; |
|---|
| | | width: 100%; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | border: 1px solid #EBEEF5; |
|---|
| | | border-radius: 6px; |
|---|
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|---|
| | | z-index: 3; |
|---|
| | | padding: 4px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__selector-scroll { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | max-height: 200px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__selector-empty, |
|---|
| | | .uni-select__selector-item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | line-height: 35px; |
|---|
| | | font-size: 14px; |
|---|
| | | text-align: center; |
|---|
| | | /* border-bottom: solid 1px $uni-border-3; */ |
|---|
| | | padding: 0px 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__selector-item:hover { |
|---|
| | | background-color: #f9f9f9; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__selector-empty:last-child, |
|---|
| | | .uni-select__selector-item:last-child { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | border-bottom: none; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__selector__disabled { |
|---|
| | | opacity: 0.4; |
|---|
| | | cursor: default; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* picker å¼¹åºå±éç¨çæ示å°ä¸è§ */ |
|---|
| | | .uni-popper__arrow, |
|---|
| | | .uni-popper__arrow::after { |
|---|
| | | position: absolute; |
|---|
| | | display: block; |
|---|
| | | width: 0; |
|---|
| | | height: 0; |
|---|
| | | border-color: transparent; |
|---|
| | | border-style: solid; |
|---|
| | | border-width: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-popper__arrow { |
|---|
| | | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
|---|
| | | top: -6px; |
|---|
| | | left: 10%; |
|---|
| | | margin-right: 3px; |
|---|
| | | border-top-width: 0; |
|---|
| | | border-bottom-color: #EBEEF5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-popper__arrow::after { |
|---|
| | | content: " "; |
|---|
| | | top: 1px; |
|---|
| | | margin-left: -6px; |
|---|
| | | border-top-width: 0; |
|---|
| | | border-bottom-color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__input-text { |
|---|
| | | // width: 280px; |
|---|
| | | width: 100%; |
|---|
| | | color: $uni-main-color; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | -o-text-overflow: ellipsis; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select__input-placeholder { |
|---|
| | | color: $uni-base-color; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-select--mask { |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-data-select", |
|---|
| | | "displayName": "uni-data-select ä¸ææ¡éæ©å¨", |
|---|
| | | "version": "0.1.9", |
|---|
| | | "description": "éè¿æ°æ®é©±å¨çä¸ææ¡éæ©å¨", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "select", |
|---|
| | | "uni-data-select", |
|---|
| | | "ä¸ææ¡", |
|---|
| | | "ä¸æé" |
|---|
| | | ], |
|---|
| | | "repository": "https://github.com/dcloudio/uni-ui", |
|---|
| | | "engines": { |
|---|
| | | "HBuilderX": "^3.1.1" |
|---|
| | | }, |
|---|
| | | "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-load-more"], |
|---|
| | | "encrypt": [], |
|---|
| | | "platforms": { |
|---|
| | | "cloud": { |
|---|
| | | "tcb": "y", |
|---|
| | | "aliyun": "y" |
|---|
| | | }, |
|---|
| | | "client": { |
|---|
| | | "App": { |
|---|
| | | "app-vue": "u", |
|---|
| | | "app-nvue": "n" |
|---|
| | | }, |
|---|
| | | "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", |
|---|
| | | "é¿é": "u", |
|---|
| | | "ç¾åº¦": "u", |
|---|
| | | "åèè·³å¨": "u", |
|---|
| | | "QQ": "u", |
|---|
| | | "京ä¸": "u" |
|---|
| | | }, |
|---|
| | | "å¿«åºç¨": { |
|---|
| | | "å为": "u", |
|---|
| | | "èç": "u" |
|---|
| | | }, |
|---|
| | | "Vue": { |
|---|
| | | "vue2": "y", |
|---|
| | | "vue3": "y" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## DataSelect ä¸ææ¡éæ©å¨ |
|---|
| | | > **ç»ä»¶åï¼uni-data-select** |
|---|
| | | > 代ç åï¼ `uDataSelect` |
|---|
| | | |
|---|
| | | å½é项è¿å¤æ¶ï¼ä½¿ç¨ä¸æèåå±ç¤ºå¹¶éæ©å
容 |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-data-select) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.0.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-dateformat](https://uniapp.dcloud.io/component/uniui/uni-dateformat) |
|---|
| | | ## 0.0.5ï¼2021-07-08ï¼ |
|---|
| | | - è°æ´ é»è®¤æ¶é´ä¸åæ¯å½åæ¶é´ï¼èæ¯æ¾ç¤º'-'å符 |
|---|
| | | ## 0.0.4ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 0.0.3ï¼2021-02-04ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| | | - ä¿®å¤ iOS å¹³å°æ¥ææ ¼å¼ååºéçé®é¢ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // yyyy-MM-dd hh:mm:ss.SSS æææ¯æçç±»å |
|---|
| | | function pad(str, length = 2) { |
|---|
| | | str += '' |
|---|
| | | while (str.length < length) { |
|---|
| | | str = '0' + str |
|---|
| | | } |
|---|
| | | return str.slice(-length) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const parser = { |
|---|
| | | yyyy: (dateObj) => { |
|---|
| | | return pad(dateObj.year, 4) |
|---|
| | | }, |
|---|
| | | yy: (dateObj) => { |
|---|
| | | return pad(dateObj.year) |
|---|
| | | }, |
|---|
| | | MM: (dateObj) => { |
|---|
| | | return pad(dateObj.month) |
|---|
| | | }, |
|---|
| | | M: (dateObj) => { |
|---|
| | | return dateObj.month |
|---|
| | | }, |
|---|
| | | dd: (dateObj) => { |
|---|
| | | return pad(dateObj.day) |
|---|
| | | }, |
|---|
| | | d: (dateObj) => { |
|---|
| | | return dateObj.day |
|---|
| | | }, |
|---|
| | | hh: (dateObj) => { |
|---|
| | | return pad(dateObj.hour) |
|---|
| | | }, |
|---|
| | | h: (dateObj) => { |
|---|
| | | return dateObj.hour |
|---|
| | | }, |
|---|
| | | mm: (dateObj) => { |
|---|
| | | return pad(dateObj.minute) |
|---|
| | | }, |
|---|
| | | m: (dateObj) => { |
|---|
| | | return dateObj.minute |
|---|
| | | }, |
|---|
| | | ss: (dateObj) => { |
|---|
| | | return pad(dateObj.second) |
|---|
| | | }, |
|---|
| | | s: (dateObj) => { |
|---|
| | | return dateObj.second |
|---|
| | | }, |
|---|
| | | SSS: (dateObj) => { |
|---|
| | | return pad(dateObj.millisecond, 3) |
|---|
| | | }, |
|---|
| | | S: (dateObj) => { |
|---|
| | | return dateObj.millisecond |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è¿é½nå¹´äºiOSä¾ç¶ä¸è®¤è¯2020-12-12ï¼éè¦è½¬æ¢ä¸º2020/12/12 |
|---|
| | | function getDate(time) { |
|---|
| | | if (time instanceof Date) { |
|---|
| | | return time |
|---|
| | | } |
|---|
| | | switch (typeof time) { |
|---|
| | | case 'string': |
|---|
| | | { |
|---|
| | | // 2020-12-12T12:12:12.000Zã2020-12-12T12:12:12.000 |
|---|
| | | if (time.indexOf('T') > -1) { |
|---|
| | | return new Date(time) |
|---|
| | | } |
|---|
| | | return new Date(time.replace(/-/g, '/')) |
|---|
| | | } |
|---|
| | | default: |
|---|
| | | return new Date(time) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function formatDate(date, format = 'yyyy/MM/dd hh:mm:ss') { |
|---|
| | | if (!date && date !== 0) { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | date = getDate(date) |
|---|
| | | const dateObj = { |
|---|
| | | year: date.getFullYear(), |
|---|
| | | month: date.getMonth() + 1, |
|---|
| | | day: date.getDate(), |
|---|
| | | hour: date.getHours(), |
|---|
| | | minute: date.getMinutes(), |
|---|
| | | second: date.getSeconds(), |
|---|
| | | millisecond: date.getMilliseconds() |
|---|
| | | } |
|---|
| | | const tokenRegExp = /yyyy|yy|MM|M|dd|d|hh|h|mm|m|ss|s|SSS|SS|S/ |
|---|
| | | let flag = true |
|---|
| | | let result = format |
|---|
| | | while (flag) { |
|---|
| | | flag = false |
|---|
| | | result = result.replace(tokenRegExp, function(matched) { |
|---|
| | | flag = true |
|---|
| | | return parser[matched](dateObj) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function friendlyDate(time, { |
|---|
| | | locale = 'zh', |
|---|
| | | threshold = [60000, 3600000], |
|---|
| | | format = 'yyyy/MM/dd hh:mm:ss' |
|---|
| | | }) { |
|---|
| | | if (time === '-') { |
|---|
| | | return time |
|---|
| | | } |
|---|
| | | if (!time && time !== 0) { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | const localeText = { |
|---|
| | | zh: { |
|---|
| | | year: 'å¹´', |
|---|
| | | month: 'æ', |
|---|
| | | day: '天', |
|---|
| | | hour: 'å°æ¶', |
|---|
| | | minute: 'åé', |
|---|
| | | second: 'ç§', |
|---|
| | | ago: 'å', |
|---|
| | | later: 'å', |
|---|
| | | justNow: 'åå', |
|---|
| | | soon: '马ä¸', |
|---|
| | | template: '{num}{unit}{suffix}' |
|---|
| | | }, |
|---|
| | | en: { |
|---|
| | | year: 'year', |
|---|
| | | month: 'month', |
|---|
| | | day: 'day', |
|---|
| | | hour: 'hour', |
|---|
| | | minute: 'minute', |
|---|
| | | second: 'second', |
|---|
| | | ago: 'ago', |
|---|
| | | later: 'later', |
|---|
| | | justNow: 'just now', |
|---|
| | | soon: 'soon', |
|---|
| | | template: '{num} {unit} {suffix}' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const text = localeText[locale] || localeText.zh |
|---|
| | | let date = getDate(time) |
|---|
| | | let ms = date.getTime() - Date.now() |
|---|
| | | let absMs = Math.abs(ms) |
|---|
| | | if (absMs < threshold[0]) { |
|---|
| | | return ms < 0 ? text.justNow : text.soon |
|---|
| | | } |
|---|
| | | if (absMs >= threshold[1]) { |
|---|
| | | return formatDate(date, format) |
|---|
| | | } |
|---|
| | | let num |
|---|
| | | let unit |
|---|
| | | let suffix = text.later |
|---|
| | | if (ms < 0) { |
|---|
| | | suffix = text.ago |
|---|
| | | ms = -ms |
|---|
| | | } |
|---|
| | | const seconds = Math.floor((ms) / 1000) |
|---|
| | | const minutes = Math.floor(seconds / 60) |
|---|
| | | const hours = Math.floor(minutes / 60) |
|---|
| | | const days = Math.floor(hours / 24) |
|---|
| | | const months = Math.floor(days / 30) |
|---|
| | | const years = Math.floor(months / 12) |
|---|
| | | switch (true) { |
|---|
| | | case years > 0: |
|---|
| | | num = years |
|---|
| | | unit = text.year |
|---|
| | | break |
|---|
| | | case months > 0: |
|---|
| | | num = months |
|---|
| | | unit = text.month |
|---|
| | | break |
|---|
| | | case days > 0: |
|---|
| | | num = days |
|---|
| | | unit = text.day |
|---|
| | | break |
|---|
| | | case hours > 0: |
|---|
| | | num = hours |
|---|
| | | unit = text.hour |
|---|
| | | break |
|---|
| | | case minutes > 0: |
|---|
| | | num = minutes |
|---|
| | | unit = text.minute |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | num = seconds |
|---|
| | | unit = text.second |
|---|
| | | break |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (locale === 'en') { |
|---|
| | | if (num === 1) { |
|---|
| | | num = 'a' |
|---|
| | | } else { |
|---|
| | | unit += 's' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return text.template.replace(/{\s*num\s*}/g, num + '').replace(/{\s*unit\s*}/g, unit).replace(/{\s*suffix\s*}/g, |
|---|
| | | suffix) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <text>{{dateShow}}</text> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import {friendlyDate} from './date-format.js' |
|---|
| | | /** |
|---|
| | | * Dateformat æ¥ææ ¼å¼å |
|---|
| | | * @description æ¥ææ ¼å¼åç»ä»¶ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=3279 |
|---|
| | | * @property {Object|String|Number} date æ¥æ对象/æ¥æå符串/æ¶é´æ³ |
|---|
| | | * @property {String} locale æ ¼å¼å使ç¨çè¯è¨ |
|---|
| | | * @value zh ä¸æ |
|---|
| | | * @value en è±æ |
|---|
| | | * @property {Array} threshold åºç¨ä¸åç±»åæ ¼å¼åçéå¼ |
|---|
| | | * @property {String} format è¾åºæ¥æå符串æ¶çæ ¼å¼ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'uniDateformat', |
|---|
| | | props: { |
|---|
| | | date: { |
|---|
| | | type: [Object, String, Number], |
|---|
| | | default () { |
|---|
| | | return '-' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | locale: { |
|---|
| | | type: String, |
|---|
| | | default: 'zh', |
|---|
| | | }, |
|---|
| | | threshold: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [0, 0] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | format: { |
|---|
| | | type: String, |
|---|
| | | default: 'yyyy/MM/dd hh:mm:ss' |
|---|
| | | }, |
|---|
| | | // refreshRate使ç¨ä¸å½å¯è½å¯¼è´æ§è½é®é¢ï¼è°¨æ
ä½¿ç¨ |
|---|
| | | refreshRate: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | refreshMark: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | dateShow() { |
|---|
| | | this.refreshMark |
|---|
| | | return friendlyDate(this.date, { |
|---|
| | | locale: this.locale, |
|---|
| | | threshold: this.threshold, |
|---|
| | | format: this.format |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | refreshRate: { |
|---|
| | | handler() { |
|---|
| | | this.setAutoRefresh() |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | refresh() { |
|---|
| | | this.refreshMark++ |
|---|
| | | }, |
|---|
| | | setAutoRefresh() { |
|---|
| | | clearInterval(this.refreshInterval) |
|---|
| | | if (this.refreshRate) { |
|---|
| | | this.refreshInterval = setInterval(() => { |
|---|
| | | this.refresh() |
|---|
| | | }, parseInt(this.refreshRate)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-dateformat", |
|---|
| | | "displayName": "uni-dateformat æ¥ææ ¼å¼å", |
|---|
| | | "version": "1.0.0", |
|---|
| | | "description": "æ¥ææ ¼å¼åç»ä»¶ï¼å¯ä»¥å°æ¥ææ ¼å¼å为1åéåãååçå½¢å¼", |
|---|
| | | "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" |
|---|
| | | }, |
|---|
| | | "å¿«åºç¨": { |
|---|
| | | "å为": "y", |
|---|
| | | "èç": "y" |
|---|
| | | }, |
|---|
| | | "Vue": { |
|---|
| | | "vue2": "y", |
|---|
| | | "vue3": "y" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ### DateFormat æ¥ææ ¼å¼å |
|---|
| | | > **ç»ä»¶åï¼uni-dateformat** |
|---|
| | | > 代ç åï¼ `uDateformat` |
|---|
| | | |
|---|
| | | |
|---|
| | | æ¥ææ ¼å¼åç»ä»¶ã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-dateformat) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 2.2.11ï¼2022-09-19ï¼ |
|---|
| | | - ä¿®å¤ï¼æ¯ä»å®å°ç¨åºæ ·å¼éä¹±ï¼[详æ
](https://github.com/dcloudio/uni-app/issues/3861) |
|---|
| | | ## 2.2.10ï¼2022-09-19ï¼ |
|---|
| | | - ä¿®å¤ï¼ååéæ©æ¥æèå´ï¼æ¥ææ¾ç¤ºå¼å¸¸ï¼[详æ
](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false) |
|---|
| | | ## 2.2.9ï¼2022-09-16ï¼ |
|---|
| | | - å¯ä»¥ä½¿ç¨ uni-scss æ§å¶ä¸»é¢è² |
|---|
| | | ## 2.2.8ï¼2022-09-08ï¼ |
|---|
| | | - ä¿®å¤ closeäºä»¶æ æç bug |
|---|
| | | ## 2.2.7ï¼2022-09-05ï¼ |
|---|
| | | - ä¿®å¤ ç§»å¨ç«¯ maskClick æ æç bugï¼è¯¦è§:[https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false](https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false) |
|---|
| | | ## 2.2.6ï¼2022-06-30ï¼ |
|---|
| | | - ä¼å ç»ä»¶æ ·å¼ï¼è°æ´äºç»ä»¶å¾æ 大å°ãé«åº¦ãé¢è²çï¼ä¸uni-uié£æ ¼ä¿æä¸è´ |
|---|
| | | ## 2.2.5ï¼2022-06-24ï¼ |
|---|
| | | - ä¿®å¤ æ¥å顶é¨å¹´æååºé¨ç¡®è®¤æªå½é
å bug |
|---|
| | | ## 2.2.4ï¼2022-03-31ï¼ |
|---|
| | | - ä¿®å¤ Vue3 ä¸å¨æèµå¼,åéç±»åæªååºç bug |
|---|
| | | ## 2.2.3ï¼2022-03-28ï¼ |
|---|
| | | - ä¿®å¤ Vue3 ä¸å¨æèµå¼æªååºç bug |
|---|
| | | ## 2.2.2ï¼2021-12-10ï¼ |
|---|
| | | - ä¿®å¤ clear-icon å±æ§å¨å°ç¨åºå¹³å°ä¸çæç bug |
|---|
| | | ## 2.2.1ï¼2021-12-10ï¼ |
|---|
| | | - ä¿®å¤ æ¥æèå´éå¨å°ç¨åºå¹³å°ï¼å¿
é¡»å¤ç¹å»ä¸æ¬¡æè½åæ¶éä¸ç¶æç bug |
|---|
| | | ## 2.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-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) |
|---|
| | | ## 2.1.5ï¼2021-11-09ï¼ |
|---|
| | | - æ°å¢ æä¾ç»ä»¶è®¾è®¡èµæºï¼ç»ä»¶æ ·å¼è°æ´ |
|---|
| | | ## 2.1.4ï¼2021-09-10ï¼ |
|---|
| | | - ä¿®å¤ hide-second å¨ç§»å¨ç«¯ç bug |
|---|
| | | - ä¿®å¤ åéèµé»è®¤å¼æ¶ï¼èµå¼æ¥ææªé«äº®ç bug |
|---|
| | | - ä¿®å¤ èµé»è®¤å¼æ¶ï¼ç§»å¨ç«¯æªæ£ç¡®æ¾ç¤ºæ¶é´ç bug |
|---|
| | | ## 2.1.3ï¼2021-09-09ï¼ |
|---|
| | | - æ°å¢ hide-second å±æ§ï¼æ¯æåªä½¿ç¨æ¶åï¼éèç§ |
|---|
| | | ## 2.1.2ï¼2021-09-03ï¼ |
|---|
| | | - ä¼å åæ¶éä¸æ¶ï¼èå´éï¼ç´æ¥å¼å§ä¸ä¸æ¬¡éæ©, é¿å
å¤ç¹ä¸æ¬¡ |
|---|
| | | - ä¼å 移å¨ç«¯æ¯ææ¸
é¤æé®ï¼åæ¶æ¯æéè¿ ref è°ç¨ç»ä»¶ç clear æ¹æ³ |
|---|
| | | - ä¼å è°æ´åå·å¤§å°ï¼ç¾åæ¥åçé¢ |
|---|
| | | - ä¿®å¤ å å½é
å导è´ç placeholder 失æç bug |
|---|
| | | ## 2.1.1ï¼2021-08-24ï¼ |
|---|
| | | - æ°å¢ æ¯æå½é
å |
|---|
| | | - ä¼å èå´éæ©å¨å¨ pc 端è¿å®½çé®é¢ |
|---|
| | | ## 2.1.0ï¼2021-08-09ï¼ |
|---|
| | | - æ°å¢ éé
vue3 |
|---|
| | | ## 2.0.19ï¼2021-08-09ï¼ |
|---|
| | | - æ°å¢ æ¯æä½ä¸º uni-forms åç»ä»¶ç¸å
³åè½ |
|---|
| | | - ä¿®å¤ å¨ uni-forms ä¸ä½¿ç¨æ¶ï¼éæ©æ¶é´æ¥ NAN é误ç bug |
|---|
| | | ## 2.0.18ï¼2021-08-05ï¼ |
|---|
| | | - ä¿®å¤ type å±æ§å¨æèµå¼æ æç bug |
|---|
| | | - ä¿®å¤ â确认âæé®è¢« tabbar é®ç bug |
|---|
| | | - ä¿®å¤ ç»ä»¶æªèµå¼æ¶èå´éå·¦ãå³æ¥åç¸åç bug |
|---|
| | | ## 2.0.17ï¼2021-08-04ï¼ |
|---|
| | | - ä¿®å¤ èå´éæªæ£ç¡®æ¾ç¤ºå½åå¼ç bug |
|---|
| | | - ä¿®å¤ h5 å¹³å°ï¼ç§»å¨ç«¯ï¼æ¥é 'cale' of undefined ç bug |
|---|
| | | ## 2.0.16ï¼2021-07-21ï¼ |
|---|
| | | - æ°å¢ return-type å±æ§æ¯æè¿å date æ¥æ对象 |
|---|
| | | ## 2.0.15ï¼2021-07-14ï¼ |
|---|
| | | - ä¿®å¤ åéæ¥æç±»åï¼åå§èµå¼åä¸å¨å½åæ¥åç bug |
|---|
| | | - æ°å¢ clearIcon å±æ§ï¼æ¾ç¤ºæ¡çæ¸
空æé®å¯é
ç½®æ¾ç¤ºéèï¼ä»
pc ææï¼ |
|---|
| | | - ä¼å 移å¨ç«¯ç§»é¤æ¾ç¤ºæ¡çæ¸
空æé®ï¼æ å®é
ç¨é |
|---|
| | | ## 2.0.14ï¼2021-07-14ï¼ |
|---|
| | | - ä¿®å¤ ç»ä»¶èµå¼ä¸ºç©ºï¼çé¢æªæ´æ°ç bug |
|---|
| | | - ä¿®å¤ start å end ä¸è½å¨æèµå¼ç bug |
|---|
| | | - ä¿®å¤ èå´éç±»åï¼ç¨æ·éæ©åå次éæ©å³ä¾§æ¥åï¼ç»ææ¥æï¼æ¾ç¤ºä¸æ£ç¡®ç bug |
|---|
| | | ## 2.0.13ï¼2021-07-08ï¼ |
|---|
| | | - ä¿®å¤ èå´éæ©ä¸è½å¨æèµå¼ç bug |
|---|
| | | ## 2.0.12ï¼2021-07-08ï¼ |
|---|
| | | - ä¿®å¤ èå´éæ©çåå§æ¶é´å¨ä¸ä¸ªæå
æ¶ï¼é ææ æ³éæ©çbug |
|---|
| | | ## 2.0.11ï¼2021-07-08ï¼ |
|---|
| | | - ä¼å å¼¹åºå±å¨è¶
åºè§çªè¾¹ç¼å®ä½ä¸åç¡®çé®é¢ |
|---|
| | | ## 2.0.10ï¼2021-07-08ï¼ |
|---|
| | | - ä¿®å¤ èå´èµ·å§ç¹æ ·å¼çèæ¯è²ä¸ä»æ¥æ ·å¼çåä½åæ¯è²èåï¼å¯¼è´æ¥æåä½çä¸æ¸
ç bug |
|---|
| | | - ä¼å å¼¹åºå±å¨è¶
åºè§çªè¾¹ç¼è¢«é®ççé®é¢ |
|---|
| | | ## 2.0.9ï¼2021-07-07ï¼ |
|---|
| | | - æ°å¢ maskClick äºä»¶ |
|---|
| | | - ä¿®å¤ ç¹æ®æ
åµæ¥å rpx å¸å±é误ç bugï¼rpx -> px |
|---|
| | | - ä¿®å¤ èå´éæ©æ¶æ¸
空è¿åå¼ä¸åççbugï¼['', ''] -> [] |
|---|
| | | ## 2.0.8ï¼2021-07-07ï¼ |
|---|
| | | - æ°å¢ æ¥ææ¶é´æ¾ç¤ºæ¡æ¯ææ槽 |
|---|
| | | ## 2.0.7ï¼2021-07-01ï¼ |
|---|
| | | - ä¼å æ·»å uni-icons ä¾èµ |
|---|
| | | ## 2.0.6ï¼2021-05-22ï¼ |
|---|
| | | - ä¿®å¤ å¾æ å¨å°ç¨åºä¸ä¸æ¾ç¤ºç bug |
|---|
| | | - ä¼å éå½åå¼ç¨ç»ä»¶ï¼é¿å
æ½å¨ç»ä»¶å½åå²çª |
|---|
| | | ## 2.0.5ï¼2021-05-20ï¼ |
|---|
| | | - ä¼å 代ç ç®å½æå¹³å |
|---|
| | | ## 2.0.4ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 2.0.3ï¼2021-05-10ï¼ |
|---|
| | | - ä¿®å¤ ios ä¸ä¸è¯å« '-' æ¥ææ ¼å¼ç bug |
|---|
| | | - ä¼å pc ä¸å¼¹åºå±æ·»å è¾¹æ¡åé´å½± |
|---|
| | | ## 2.0.2ï¼2021-05-08ï¼ |
|---|
| | | - ä¿®å¤ å¨ admin ä¸è·åå¼¹åºå±å®ä½é误çbug |
|---|
| | | ## 2.0.1ï¼2021-05-08ï¼ |
|---|
| | | - ä¿®å¤ type å±æ§åä¸å
¼å®¹ï¼é»è®¤å¼ä» date åæ´ä¸º datetime |
|---|
| | | ## 2.0.0ï¼2021-04-30ï¼ |
|---|
| | | - æ¯ææ¥åå½¢å¼çæ¥æ+æ¶é´çèå´éæ© |
|---|
| | | > 注æï¼æ¤çæ¬ä¸ååå
¼å®¹ï¼ä¸åæ¯æåç¬æ¶é´éæ©ï¼type=timeï¼åç¸å
³ç hide-second å±æ§ï¼æ¶é´éå¯ä½¿ç¨å
ç½®ç»ä»¶ pickerï¼ |
|---|
| | | ## 1.0.6ï¼2021-03-18ï¼ |
|---|
| | | - æ°å¢ hide-second å±æ§ï¼æ¶é´æ¯æä»
éæ©æ¶ãå |
|---|
| | | - ä¿®å¤ éæ©è·æ¾ç¤ºçæ¥æä¸ä¸æ ·ç bug |
|---|
| | | - ä¿®å¤ changäºä»¶è§¦å2次ç bug |
|---|
| | | - ä¿®å¤ åãç§ end èå´é误ç bug |
|---|
| | | - ä¼å æ´å¥½ç nvue éé
|
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-calendar-item__weeks-box" :class="{ |
|---|
| | | 'uni-calendar-item--disable':weeks.disable, |
|---|
| | | 'uni-calendar-item--before-checked-x':weeks.beforeMultiple, |
|---|
| | | 'uni-calendar-item--multiple': weeks.multiple, |
|---|
| | | 'uni-calendar-item--after-checked-x':weeks.afterMultiple, |
|---|
| | | }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> |
|---|
| | | <view class="uni-calendar-item__weeks-box-item" :class="{ |
|---|
| | | 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover), |
|---|
| | | 'uni-calendar-item--checked-range-text': checkHover, |
|---|
| | | 'uni-calendar-item--before-checked':weeks.beforeMultiple, |
|---|
| | | 'uni-calendar-item--multiple': weeks.multiple, |
|---|
| | | 'uni-calendar-item--after-checked':weeks.afterMultiple, |
|---|
| | | 'uni-calendar-item--disable':weeks.disable, |
|---|
| | | }"> |
|---|
| | | <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> |
|---|
| | | <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text> |
|---|
| | | </view> |
|---|
| | | <view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | weeks: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | calendar: { |
|---|
| | | type: Object, |
|---|
| | | default: () => { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | selected: { |
|---|
| | | type: Array, |
|---|
| | | default: () => { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | lunar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | checkHover: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | choiceDate(weeks) { |
|---|
| | | this.$emit('change', weeks) |
|---|
| | | }, |
|---|
| | | handleMousemove(weeks) { |
|---|
| | | this.$emit('handleMouse', weeks) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | $uni-primary: #007aff !default; |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-box { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | margin: 1px 0; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-box-text { |
|---|
| | | font-size: 14px; |
|---|
| | | // font-family: Lato-Bold, Lato; |
|---|
| | | font-weight: bold; |
|---|
| | | color: darken($color: $uni-primary, $amount: 40%); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-lunar-text { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #333; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-box-item { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | width: 40px; |
|---|
| | | height: 40px; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-box-circle { |
|---|
| | | position: absolute; |
|---|
| | | top: 5px; |
|---|
| | | right: 5px; |
|---|
| | | width: 8px; |
|---|
| | | height: 8px; |
|---|
| | | border-radius: 8px; |
|---|
| | | background-color: #dd524d; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-box .uni-calendar-item--disable { |
|---|
| | | // background-color: rgba(249, 249, 249, $uni-opacity-disabled); |
|---|
| | | cursor: default; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable { |
|---|
| | | color: #D1D1D1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--isDay { |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | right: 17%; |
|---|
| | | background-color: #dd524d; |
|---|
| | | width:6px; |
|---|
| | | height: 6px; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--extra { |
|---|
| | | color: #dd524d; |
|---|
| | | opacity: 0.8; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item__weeks-box .uni-calendar-item--checked { |
|---|
| | | background-color: $uni-primary; |
|---|
| | | border-radius: 50%; |
|---|
| | | box-sizing: border-box; |
|---|
| | | border: 3px solid #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--checked .uni-calendar-item--checked-text { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--multiple .uni-calendar-item--checked-range-text { |
|---|
| | | color: #333; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--multiple { |
|---|
| | | background-color: #F6F7FC; |
|---|
| | | // color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--multiple .uni-calendar-item--before-checked, |
|---|
| | | .uni-calendar-item--multiple .uni-calendar-item--after-checked { |
|---|
| | | background-color: $uni-primary; |
|---|
| | | border-radius: 50%; |
|---|
| | | box-sizing: border-box; |
|---|
| | | border: 3px solid #F6F7FC; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--before-checked .uni-calendar-item--checked-text, |
|---|
| | | .uni-calendar-item--after-checked .uni-calendar-item--checked-text { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--before-checked-x { |
|---|
| | | border-top-left-radius: 50px; |
|---|
| | | border-bottom-left-radius: 50px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #F6F7FC; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar-item--after-checked-x { |
|---|
| | | border-top-right-radius: 50px; |
|---|
| | | border-bottom-right-radius: 50px; |
|---|
| | | background-color: #F6F7FC; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-calendar" @mouseleave="leaveCale"> |
|---|
| | | <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" |
|---|
| | | @click="clean();maskClick()"></view> |
|---|
| | | <view v-if="insert || show" class="uni-calendar__content" |
|---|
| | | :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}"> |
|---|
| | | <view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}"> |
|---|
| | | <view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre"> |
|---|
| | | <view class="uni-calendar__header-btn uni-calendar--left"></view> |
|---|
| | | </view> |
|---|
| | | <picker mode="date" :value="date" fields="month" @change="bindDateChange"> |
|---|
| | | <text |
|---|
| | | class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text> |
|---|
| | | </picker> |
|---|
| | | <view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next"> |
|---|
| | | <view class="uni-calendar__header-btn uni-calendar--right"></view> |
|---|
| | | </view> |
|---|
| | | <view v-if="!insert" class="dialog-close" @click="clean"> |
|---|
| | | <view class="dialog-close-plus" data-id="close"></view> |
|---|
| | | <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <!-- <text class="uni-calendar__backtoday" @click="backtoday">åå°ä»å¤©</text> --> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__box"> |
|---|
| | | <view v-if="showMonth" class="uni-calendar__box-bg"> |
|---|
| | | <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks" style="padding-bottom: 7px;"> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{SUNText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{MONText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{TUEText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{WEDText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{THUText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{FRIText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks-day"> |
|---|
| | | <text class="uni-calendar__weeks-day-text">{{SATText}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex"> |
|---|
| | | <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex"> |
|---|
| | | <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" |
|---|
| | | :selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate" |
|---|
| | | @handleMouse="handleMouse"> |
|---|
| | | </calendar-item> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top" |
|---|
| | | style="padding: 0 80px;"> |
|---|
| | | <view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view> |
|---|
| | | <time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time" |
|---|
| | | :disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style"> |
|---|
| | | </time-picker> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"> |
|---|
| | | <view class="uni-date-changed--time-start"> |
|---|
| | | <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}} |
|---|
| | | </view> |
|---|
| | | <time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false" |
|---|
| | | :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style"> |
|---|
| | | </time-picker> |
|---|
| | | </view> |
|---|
| | | <view style="line-height: 50px;"> |
|---|
| | | <uni-icons type="arrowthinright" color="#999"></uni-icons> |
|---|
| | | </view> |
|---|
| | | <view class="uni-date-changed--time-end"> |
|---|
| | | <view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> |
|---|
| | | <time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false" |
|---|
| | | :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style"> |
|---|
| | | </time-picker> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="!insert" class="uni-date-changed uni-date-btn--ok"> |
|---|
| | | <!-- <view class="uni-calendar__header-btn-box"> |
|---|
| | | <text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text> |
|---|
| | | </view> --> |
|---|
| | | <view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Calendar from './util.js'; |
|---|
| | | import calendarItem from './calendar-item.vue' |
|---|
| | | import timePicker from './time-picker.vue' |
|---|
| | | import { |
|---|
| | | initVueI18n |
|---|
| | | } from '@dcloudio/uni-i18n' |
|---|
| | | import messages from './i18n/index.js' |
|---|
| | | const { |
|---|
| | | t |
|---|
| | | } = initVueI18n(messages) |
|---|
| | | /** |
|---|
| | | * Calendar æ¥å |
|---|
| | | * @description æ¥åç»ä»¶å¯ä»¥æ¥çæ¥æï¼éæ©ä»»æèå´å
çæ¥æï¼æç¹æä½ã常ç¨åºæ¯å¦ï¼é
åºæ¥æé¢è®¢ãç«è½¦æºç¥¨éæ©è´ä¹°æ¥æãä¸ä¸çæå¡ç |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=56 |
|---|
| | | * @property {String} date èªå®ä¹å½åæ¶é´ï¼é»è®¤ä¸ºä»å¤© |
|---|
| | | * @property {Boolean} lunar æ¾ç¤ºåå |
|---|
| | | * @property {String} startDate æ¥æéæ©èå´-å¼å§æ¥æ |
|---|
| | | * @property {String} endDate æ¥æéæ©èå´-ç»ææ¥æ |
|---|
| | | * @property {Boolean} range èå´éæ© |
|---|
| | | * @property {Boolean} insert = [true|false] æå
¥æ¨¡å¼,é»è®¤ä¸ºfalse |
|---|
| | | * @value true å¼¹çªæ¨¡å¼ |
|---|
| | | * @value false æå
¥æ¨¡å¼ |
|---|
| | | * @property {Boolean} clearDate = [true|false] å¼¹çªæ¨¡å¼æ¯å¦æ¸
空ä¸æ¬¡éæ©å
容 |
|---|
| | | * @property {Array} selected æç¹ï¼æå¾
æ ¼å¼[{date: '2019-06-27', info: 'ç¾å°', data: { custom: 'èªå®ä¹ä¿¡æ¯', name: 'èªå®ä¹æ¶æ¯å¤´',xxx:xxx... }}] |
|---|
| | | * @property {Boolean} showMonth æ¯å¦éæ©æ份为èæ¯ |
|---|
| | | * @event {Function} change æ¥ææ¹åï¼`insert :ture` æ¶çæ |
|---|
| | | * @event {Function} confirm 确认éæ©`insert :false` æ¶çæ |
|---|
| | | * @event {Function} monthSwitch åæ¢æ份æ¶è§¦å |
|---|
| | | * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" /> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | calendarItem, |
|---|
| | | timePicker |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | date: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | defTime: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | selectableTimes: { |
|---|
| | | type: [Object], |
|---|
| | | default () { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | selected: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | lunar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | startDate: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | endDate: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | range: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | typeHasTime: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | insert: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | showMonth: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | clearDate: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | left: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | right: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | checkHover: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | hideSecond: { |
|---|
| | | type: [Boolean], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | pleStatus: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | before: '', |
|---|
| | | after: '', |
|---|
| | | data: [], |
|---|
| | | fulldate: '' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | show: false, |
|---|
| | | weeks: [], |
|---|
| | | calendar: {}, |
|---|
| | | nowDate: '', |
|---|
| | | aniMaskShow: false, |
|---|
| | | firstEnter: true, |
|---|
| | | time: '', |
|---|
| | | timeRange: { |
|---|
| | | startTime: '', |
|---|
| | | endTime: '' |
|---|
| | | }, |
|---|
| | | tempSingleDate: '', |
|---|
| | | tempRange: { |
|---|
| | | before: '', |
|---|
| | | after: '' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | date: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (!this.range) { |
|---|
| | | this.tempSingleDate = newVal |
|---|
| | | setTimeout(() => { |
|---|
| | | this.init(newVal) |
|---|
| | | }, 100) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | defTime: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (!this.range) { |
|---|
| | | this.time = newVal |
|---|
| | | } else { |
|---|
| | | // console.log('-----', newVal); |
|---|
| | | this.timeRange.startTime = newVal.start |
|---|
| | | this.timeRange.endTime = newVal.end |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | startDate(val) { |
|---|
| | | this.cale.resetSatrtDate(val) |
|---|
| | | this.cale.setDate(this.nowDate.fullDate) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | }, |
|---|
| | | endDate(val) { |
|---|
| | | this.cale.resetEndDate(val) |
|---|
| | | this.cale.setDate(this.nowDate.fullDate) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | }, |
|---|
| | | selected(newVal) { |
|---|
| | | this.cale.setSelectInfo(this.nowDate.fullDate, newVal) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | }, |
|---|
| | | pleStatus: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | const { |
|---|
| | | before, |
|---|
| | | after, |
|---|
| | | fulldate, |
|---|
| | | which |
|---|
| | | } = newVal |
|---|
| | | this.tempRange.before = before |
|---|
| | | this.tempRange.after = after |
|---|
| | | setTimeout(() => { |
|---|
| | | if (fulldate) { |
|---|
| | | this.cale.setHoverMultiple(fulldate) |
|---|
| | | if (before && after) { |
|---|
| | | this.cale.lastHover = true |
|---|
| | | if (this.rangeWithinMonth(after, before)) return |
|---|
| | | this.setDate(before) |
|---|
| | | } else { |
|---|
| | | this.cale.setMultiple(fulldate) |
|---|
| | | this.setDate(this.nowDate.fullDate) |
|---|
| | | this.calendar.fullDate = '' |
|---|
| | | this.cale.lastHover = false |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.cale.setDefaultMultiple(before, after) |
|---|
| | | if (which === 'left') { |
|---|
| | | this.setDate(before) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | } else { |
|---|
| | | this.setDate(after) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | } |
|---|
| | | this.cale.lastHover = true |
|---|
| | | } |
|---|
| | | }, 16) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | reactStartTime() { |
|---|
| | | const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate |
|---|
| | | const res = activeDate === this.startDate ? this.selectableTimes.start : '' |
|---|
| | | return res |
|---|
| | | }, |
|---|
| | | reactEndTime() { |
|---|
| | | const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate |
|---|
| | | const res = activeDate === this.endDate ? this.selectableTimes.end : '' |
|---|
| | | return res |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * for i18n |
|---|
| | | */ |
|---|
| | | selectDateText() { |
|---|
| | | return t("uni-datetime-picker.selectDate") |
|---|
| | | }, |
|---|
| | | startDateText() { |
|---|
| | | return this.startPlaceholder || t("uni-datetime-picker.startDate") |
|---|
| | | }, |
|---|
| | | endDateText() { |
|---|
| | | return this.endPlaceholder || t("uni-datetime-picker.endDate") |
|---|
| | | }, |
|---|
| | | okText() { |
|---|
| | | return t("uni-datetime-picker.ok") |
|---|
| | | }, |
|---|
| | | yearText() { |
|---|
| | | return t("uni-datetime-picker.year") |
|---|
| | | }, |
|---|
| | | monthText() { |
|---|
| | | return t("uni-datetime-picker.month") |
|---|
| | | }, |
|---|
| | | MONText() { |
|---|
| | | return t("uni-calender.MON") |
|---|
| | | }, |
|---|
| | | TUEText() { |
|---|
| | | return t("uni-calender.TUE") |
|---|
| | | }, |
|---|
| | | WEDText() { |
|---|
| | | return t("uni-calender.WED") |
|---|
| | | }, |
|---|
| | | THUText() { |
|---|
| | | return t("uni-calender.THU") |
|---|
| | | }, |
|---|
| | | FRIText() { |
|---|
| | | return t("uni-calender.FRI") |
|---|
| | | }, |
|---|
| | | SATText() { |
|---|
| | | return t("uni-calender.SAT") |
|---|
| | | }, |
|---|
| | | SUNText() { |
|---|
| | | return t("uni-calender.SUN") |
|---|
| | | }, |
|---|
| | | confirmText() { |
|---|
| | | return t("uni-calender.confirm") |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // è·åæ¥åæ¹æ³å®ä¾ |
|---|
| | | this.cale = new Calendar({ |
|---|
| | | // date: new Date(), |
|---|
| | | selected: this.selected, |
|---|
| | | startDate: this.startDate, |
|---|
| | | endDate: this.endDate, |
|---|
| | | range: this.range, |
|---|
| | | // multipleStatus: this.pleStatus |
|---|
| | | }) |
|---|
| | | // éä¸æä¸å¤© |
|---|
| | | // this.cale.setDate(this.date) |
|---|
| | | this.init(this.date) |
|---|
| | | // this.setDay |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | leaveCale() { |
|---|
| | | this.firstEnter = true |
|---|
| | | }, |
|---|
| | | handleMouse(weeks) { |
|---|
| | | if (weeks.disable) return |
|---|
| | | if (this.cale.lastHover) return |
|---|
| | | let { |
|---|
| | | before, |
|---|
| | | after |
|---|
| | | } = this.cale.multipleStatus |
|---|
| | | if (!before) return |
|---|
| | | this.calendar = weeks |
|---|
| | | // 设置èå´é |
|---|
| | | this.cale.setHoverMultiple(this.calendar.fullDate) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | // hoveræ¶ï¼è¿å
¥ä¸ä¸ªæ¥åï¼æ´æ°å¦ä¸ä¸ª |
|---|
| | | if (this.firstEnter) { |
|---|
| | | this.$emit('firstEnterCale', this.cale.multipleStatus) |
|---|
| | | this.firstEnter = false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | rangeWithinMonth(A, B) { |
|---|
| | | const [yearA, monthA] = A.split('-') |
|---|
| | | const [yearB, monthB] = B.split('-') |
|---|
| | | return yearA === yearB && monthA === monthB |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // åæ¶ç©¿é |
|---|
| | | clean() { |
|---|
| | | this.close() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // èçç¹å»äºä»¶ |
|---|
| | | maskClick() { |
|---|
| | | this.$emit('maskClose') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clearCalender() { |
|---|
| | | if (this.range) { |
|---|
| | | this.timeRange.startTime = '' |
|---|
| | | this.timeRange.endTime = '' |
|---|
| | | this.tempRange.before = '' |
|---|
| | | this.tempRange.after = '' |
|---|
| | | this.cale.multipleStatus.before = '' |
|---|
| | | this.cale.multipleStatus.after = '' |
|---|
| | | this.cale.multipleStatus.data = [] |
|---|
| | | this.cale.lastHover = false |
|---|
| | | } else { |
|---|
| | | this.time = '' |
|---|
| | | this.tempSingleDate = '' |
|---|
| | | } |
|---|
| | | this.calendar.fullDate = '' |
|---|
| | | this.setDate() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | bindDateChange(e) { |
|---|
| | | const value = e.detail.value + '-1' |
|---|
| | | this.init(value) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * åå§åæ¥ææ¾ç¤º |
|---|
| | | * @param {Object} date |
|---|
| | | */ |
|---|
| | | init(date) { |
|---|
| | | this.cale.setDate(date) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | this.nowDate = this.calendar = this.cale.getInfo(date) |
|---|
| | | }, |
|---|
| | | // choiceDate(weeks) { |
|---|
| | | // if (weeks.disable) return |
|---|
| | | // this.calendar = weeks |
|---|
| | | // // 设置å¤é |
|---|
| | | // this.cale.setMultiple(this.calendar.fullDate, true) |
|---|
| | | // this.weeks = this.cale.weeks |
|---|
| | | // this.tempSingleDate = this.calendar.fullDate |
|---|
| | | // this.tempRange.before = this.cale.multipleStatus.before |
|---|
| | | // this.tempRange.after = this.cale.multipleStatus.after |
|---|
| | | // this.change() |
|---|
| | | // }, |
|---|
| | | /** |
|---|
| | | * æå¼æ¥åå¼¹çª |
|---|
| | | */ |
|---|
| | | open() { |
|---|
| | | // å¼¹çªæ¨¡å¼å¹¶ä¸æ¸
çæ°æ® |
|---|
| | | if (this.clearDate && !this.insert) { |
|---|
| | | this.cale.cleanMultipleStatus() |
|---|
| | | // this.cale.setDate(this.date) |
|---|
| | | this.init(this.date) |
|---|
| | | } |
|---|
| | | this.show = true |
|---|
| | | this.$nextTick(() => { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.aniMaskShow = true |
|---|
| | | }, 50) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * å
³éæ¥åå¼¹çª |
|---|
| | | */ |
|---|
| | | close() { |
|---|
| | | this.aniMaskShow = false |
|---|
| | | this.$nextTick(() => { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.show = false |
|---|
| | | this.$emit('close') |
|---|
| | | }, 300) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * 确认æé® |
|---|
| | | */ |
|---|
| | | confirm() { |
|---|
| | | this.setEmit('confirm') |
|---|
| | | this.close() |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * åå触å |
|---|
| | | */ |
|---|
| | | change() { |
|---|
| | | if (!this.insert) return |
|---|
| | | this.setEmit('change') |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * éæ©æ份触å |
|---|
| | | */ |
|---|
| | | monthSwitch() { |
|---|
| | | let { |
|---|
| | | year, |
|---|
| | | month |
|---|
| | | } = this.nowDate |
|---|
| | | this.$emit('monthSwitch', { |
|---|
| | | year, |
|---|
| | | month: Number(month) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * æ´¾åäºä»¶ |
|---|
| | | * @param {Object} name |
|---|
| | | */ |
|---|
| | | setEmit(name) { |
|---|
| | | let { |
|---|
| | | year, |
|---|
| | | month, |
|---|
| | | date, |
|---|
| | | fullDate, |
|---|
| | | lunar, |
|---|
| | | extraInfo |
|---|
| | | } = this.calendar |
|---|
| | | this.$emit(name, { |
|---|
| | | range: this.cale.multipleStatus, |
|---|
| | | year, |
|---|
| | | month, |
|---|
| | | date, |
|---|
| | | time: this.time, |
|---|
| | | timeRange: this.timeRange, |
|---|
| | | fulldate: fullDate, |
|---|
| | | lunar, |
|---|
| | | extraInfo: extraInfo || {} |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * éæ©å¤©è§¦å |
|---|
| | | * @param {Object} weeks |
|---|
| | | */ |
|---|
| | | choiceDate(weeks) { |
|---|
| | | if (weeks.disable) return |
|---|
| | | this.calendar = weeks |
|---|
| | | this.calendar.userChecked = true |
|---|
| | | // 设置å¤é |
|---|
| | | this.cale.setMultiple(this.calendar.fullDate, true) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | this.tempSingleDate = this.calendar.fullDate |
|---|
| | | const beforeStatus = this.cale.multipleStatus.before |
|---|
| | | const beforeDate = new Date(this.cale.multipleStatus.before).getTime() |
|---|
| | | const afterDate = new Date(this.cale.multipleStatus.after).getTime() |
|---|
| | | if (beforeDate > afterDate && afterDate) { |
|---|
| | | this.tempRange.before = this.cale.multipleStatus.after |
|---|
| | | this.tempRange.after = this.cale.multipleStatus.before |
|---|
| | | } else { |
|---|
| | | this.tempRange.before = this.cale.multipleStatus.before |
|---|
| | | this.tempRange.after = this.cale.multipleStatus.after |
|---|
| | | } |
|---|
| | | this.change() |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * åå°ä»å¤© |
|---|
| | | */ |
|---|
| | | backtoday() { |
|---|
| | | let date = this.cale.getDate(new Date()).fullDate |
|---|
| | | // this.cale.setDate(date) |
|---|
| | | this.init(date) |
|---|
| | | this.change() |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * æ¯è¾æ¶é´å¤§å° |
|---|
| | | */ |
|---|
| | | dateCompare(startDate, endDate) { |
|---|
| | | // 计ç®æªæ¢æ¶é´ |
|---|
| | | startDate = new Date(startDate.replace('-', '/').replace('-', '/')) |
|---|
| | | // 计ç®è¯¦ç»é¡¹çæªæ¢æ¶é´ |
|---|
| | | endDate = new Date(endDate.replace('-', '/').replace('-', '/')) |
|---|
| | | if (startDate <= endDate) { |
|---|
| | | return true |
|---|
| | | } else { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * ä¸ä¸ªæ |
|---|
| | | */ |
|---|
| | | pre() { |
|---|
| | | const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate |
|---|
| | | this.setDate(preDate) |
|---|
| | | this.monthSwitch() |
|---|
| | | |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * ä¸ä¸ªæ |
|---|
| | | */ |
|---|
| | | next() { |
|---|
| | | const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate |
|---|
| | | this.setDate(nextDate) |
|---|
| | | this.monthSwitch() |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * 设置æ¥æ |
|---|
| | | * @param {Object} date |
|---|
| | | */ |
|---|
| | | setDate(date) { |
|---|
| | | this.cale.setDate(date) |
|---|
| | | this.weeks = this.cale.weeks |
|---|
| | | this.nowDate = this.cale.getInfo(date) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | $uni-primary: #007aff !default; |
|---|
| | | |
|---|
| | | .uni-calendar { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__mask { |
|---|
| | | position: fixed; |
|---|
| | | bottom: 0; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | background-color: rgba(0, 0, 0, 0.4); |
|---|
| | | transition-property: opacity; |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | opacity: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | z-index: 99; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--mask-show { |
|---|
| | | opacity: 1 |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--fixed { |
|---|
| | | position: fixed; |
|---|
| | | bottom: calc(var(--window-bottom)); |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | transition-property: transform; |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | transform: translateY(460px); |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | z-index: 99; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--ani-show { |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__content { |
|---|
| | | background-color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__content-mobile { |
|---|
| | | border-top-left-radius: 10px; |
|---|
| | | border-top-right-radius: 10px; |
|---|
| | | box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__header { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | height: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__header-mobile { |
|---|
| | | padding: 10px; |
|---|
| | | padding-bottom: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--fixed-top { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-between; |
|---|
| | | border-top-color: rgba(0, 0, 0, 0.4); |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--fixed-width { |
|---|
| | | width: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__backtoday { |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 25rpx; |
|---|
| | | padding: 0 5px; |
|---|
| | | padding-left: 10px; |
|---|
| | | height: 25px; |
|---|
| | | line-height: 25px; |
|---|
| | | font-size: 12px; |
|---|
| | | border-top-left-radius: 25px; |
|---|
| | | border-bottom-left-radius: 25px; |
|---|
| | | color: #fff; |
|---|
| | | background-color: #f1f1f1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__header-text { |
|---|
| | | text-align: center; |
|---|
| | | width: 100px; |
|---|
| | | font-size: 15px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__button-text { |
|---|
| | | text-align: center; |
|---|
| | | width: 100px; |
|---|
| | | font-size: 14px; |
|---|
| | | color: $uni-primary; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | letter-spacing: 3px; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__header-btn-box { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__header-btn { |
|---|
| | | width: 9px; |
|---|
| | | height: 9px; |
|---|
| | | border-left-color: #808080; |
|---|
| | | border-left-style: solid; |
|---|
| | | border-left-width: 1px; |
|---|
| | | border-top-color: #555555; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--left { |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar--right { |
|---|
| | | transform: rotate(135deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .uni-calendar__weeks { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__weeks-item { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__weeks-day { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | height: 40px; |
|---|
| | | border-bottom-color: #F5F5F5; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | border-bottom-width: 1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__weeks-day-text { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #B2B2B2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__box { |
|---|
| | | position: relative; |
|---|
| | | // padding: 0 10px; |
|---|
| | | padding-bottom: 7px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__box-bg { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-calendar__box-bg-text { |
|---|
| | | font-size: 200px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #999; |
|---|
| | | opacity: 0.1; |
|---|
| | | text-align: center; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | line-height: 1; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed { |
|---|
| | | padding: 0 10px; |
|---|
| | | // line-height: 50px; |
|---|
| | | text-align: center; |
|---|
| | | color: #333; |
|---|
| | | border-top-color: #DCDCDC; |
|---|
| | | ; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 1px; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-btn--ok { |
|---|
| | | padding: 20px 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed--time-start { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed--time-end { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed--time-date { |
|---|
| | | color: #999; |
|---|
| | | line-height: 50px; |
|---|
| | | margin-right: 5px; |
|---|
| | | // opacity: 0.6; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .time-picker-style { |
|---|
| | | // width: 62px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mr-10 { |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-close { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | padding: 0 25px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-close-plus { |
|---|
| | | width: 16px; |
|---|
| | | height: 2px; |
|---|
| | | background-color: #737987; |
|---|
| | | border-radius: 2px; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-close-rotate { |
|---|
| | | position: absolute; |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker--btn { |
|---|
| | | border-radius: 100px; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 40px; |
|---|
| | | background-color: $uni-primary; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 16px; |
|---|
| | | letter-spacing: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-datetime-picker--btn:active { |
|---|
| | | opacity: 0.7; |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-datetime-picker.selectDate": "select date", |
|---|
| | | "uni-datetime-picker.selectTime": "select time", |
|---|
| | | "uni-datetime-picker.selectDateTime": "select datetime", |
|---|
| | | "uni-datetime-picker.startDate": "start date", |
|---|
| | | "uni-datetime-picker.endDate": "end date", |
|---|
| | | "uni-datetime-picker.startTime": "start time", |
|---|
| | | "uni-datetime-picker.endTime": "end time", |
|---|
| | | "uni-datetime-picker.ok": "ok", |
|---|
| | | "uni-datetime-picker.clear": "clear", |
|---|
| | | "uni-datetime-picker.cancel": "cancel", |
|---|
| | | "uni-datetime-picker.year": "-", |
|---|
| | | "uni-datetime-picker.month": "", |
|---|
| | | "uni-calender.MON": "MON", |
|---|
| | | "uni-calender.TUE": "TUE", |
|---|
| | | "uni-calender.WED": "WED", |
|---|
| | | "uni-calender.THU": "THU", |
|---|
| | | "uni-calender.FRI": "FRI", |
|---|
| | | "uni-calender.SAT": "SAT", |
|---|
| | | "uni-calender.SUN": "SUN", |
|---|
| | | "uni-calender.confirm": "confirm" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-datetime-picker.selectDate": "éæ©æ¥æ", |
|---|
| | | "uni-datetime-picker.selectTime": "éæ©æ¶é´", |
|---|
| | | "uni-datetime-picker.selectDateTime": "éæ©æ¥ææ¶é´", |
|---|
| | | "uni-datetime-picker.startDate": "å¼å§æ¥æ", |
|---|
| | | "uni-datetime-picker.endDate": "ç»ææ¥æ", |
|---|
| | | "uni-datetime-picker.startTime": "å¼å§æ¶é´", |
|---|
| | | "uni-datetime-picker.endTime": "ç»ææ¶é´", |
|---|
| | | "uni-datetime-picker.ok": "ç¡®å®", |
|---|
| | | "uni-datetime-picker.clear": "æ¸
é¤", |
|---|
| | | "uni-datetime-picker.cancel": "åæ¶", |
|---|
| | | "uni-datetime-picker.year": "å¹´", |
|---|
| | | "uni-datetime-picker.month": "æ", |
|---|
| | | "uni-calender.SUN": "æ¥", |
|---|
| | | "uni-calender.MON": "ä¸", |
|---|
| | | "uni-calender.TUE": "äº", |
|---|
| | | "uni-calender.WED": "ä¸", |
|---|
| | | "uni-calender.THU": "å", |
|---|
| | | "uni-calender.FRI": "äº", |
|---|
| | | "uni-calender.SAT": "å
", |
|---|
| | | "uni-calender.confirm": "确认" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-datetime-picker.selectDate": "é¸ææ¥æ", |
|---|
| | | "uni-datetime-picker.selectTime": "é¸ææé", |
|---|
| | | "uni-datetime-picker.selectDateTime": "é¸ææ¥ææé", |
|---|
| | | "uni-datetime-picker.startDate": "éå§æ¥æ", |
|---|
| | | "uni-datetime-picker.endDate": "çµææ¥æ", |
|---|
| | | "uni-datetime-picker.startTime": "éå§æ¶é´", |
|---|
| | | "uni-datetime-picker.endTime": "çµææ¶é´", |
|---|
| | | "uni-datetime-picker.ok": "確å®", |
|---|
| | | "uni-datetime-picker.clear": "æ¸
é¤", |
|---|
| | | "uni-datetime-picker.cancel": "åæ¶", |
|---|
| | | "uni-datetime-picker.year": "å¹´", |
|---|
| | | "uni-datetime-picker.month": "æ", |
|---|
| | | "uni-calender.SUN": "æ¥", |
|---|
| | | "uni-calender.MON": "ä¸", |
|---|
| | | "uni-calender.TUE": "äº", |
|---|
| | | "uni-calender.WED": "ä¸", |
|---|
| | | "uni-calender.THU": "å", |
|---|
| | | "uni-calender.FRI": "äº", |
|---|
| | | "uni-calender.SAT": "å
", |
|---|
| | | "uni-calender.confirm": "確èª" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // #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 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-datetime-picker"> |
|---|
| | | <view @click="initTimePicker"> |
|---|
| | | <slot> |
|---|
| | | <view class="uni-datetime-picker-timebox-pointer" |
|---|
| | | :class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}"> |
|---|
| | | <text class="uni-datetime-picker-text">{{time}}</text> |
|---|
| | | <view v-if="!time" class="uni-datetime-picker-time"> |
|---|
| | | <text class="uni-datetime-picker-text">{{selectTimeText}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view> |
|---|
| | | <view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']" |
|---|
| | | :style="fixNvueBug"> |
|---|
| | | <view class="uni-title"> |
|---|
| | | <text class="uni-datetime-picker-text">{{selectTimeText}}</text> |
|---|
| | | </view> |
|---|
| | | <view v-if="dateShow" class="uni-datetime-picker__container-box"> |
|---|
| | | <picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd" |
|---|
| | | @change="bindDateChange"> |
|---|
| | | <picker-view-column> |
|---|
| | | <view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index"> |
|---|
| | | <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </picker-view-column> |
|---|
| | | <picker-view-column> |
|---|
| | | <view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index"> |
|---|
| | | <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </picker-view-column> |
|---|
| | | <picker-view-column> |
|---|
| | | <view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index"> |
|---|
| | | <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </picker-view-column> |
|---|
| | | </picker-view> |
|---|
| | | <!-- å
¼å®¹ nvue ä¸æ¯æ伪类 --> |
|---|
| | | <text class="uni-datetime-picker-sign sign-left">-</text> |
|---|
| | | <text class="uni-datetime-picker-sign sign-right">-</text> |
|---|
| | | </view> |
|---|
| | | <view v-if="timeShow" class="uni-datetime-picker__container-box"> |
|---|
| | | <picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']" |
|---|
| | | :indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange"> |
|---|
| | | <picker-view-column> |
|---|
| | | <view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index"> |
|---|
| | | <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </picker-view-column> |
|---|
| | | <picker-view-column> |
|---|
| | | <view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index"> |
|---|
| | | <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </picker-view-column> |
|---|
| | | <picker-view-column v-if="!hideSecond"> |
|---|
| | | <view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index"> |
|---|
| | | <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
|---|
| | | </view> |
|---|
| | | </picker-view-column> |
|---|
| | | </picker-view> |
|---|
| | | <!-- å
¼å®¹ nvue ä¸æ¯æ伪类 --> |
|---|
| | | <text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text> |
|---|
| | | <text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-datetime-picker-btn"> |
|---|
| | | <view @click="clearTime"> |
|---|
| | | <text class="uni-datetime-picker-btn-text">{{clearText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-datetime-picker-btn-group"> |
|---|
| | | <view class="uni-datetime-picker-cancel" @click="tiggerTimePicker"> |
|---|
| | | <text class="uni-datetime-picker-btn-text">{{cancelText}}</text> |
|---|
| | | </view> |
|---|
| | | <view @click="setTime"> |
|---|
| | | <text class="uni-datetime-picker-btn-text">{{okText}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef H5 --> |
|---|
| | | <!-- <keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" /> --> |
|---|
| | | <!-- #endif --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef H5 |
|---|
| | | import keypress from './keypress' |
|---|
| | | // #endif |
|---|
| | | import { |
|---|
| | | initVueI18n |
|---|
| | | } from '@dcloudio/uni-i18n' |
|---|
| | | import messages from './i18n/index.js' |
|---|
| | | const { t } = initVueI18n(messages) |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * DatetimePicker æ¶é´éæ©å¨ |
|---|
| | | * @description å¯ä»¥åæ¶éæ©æ¥æåæ¶é´çéæ©å¨ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx |
|---|
| | | * @property {String} type = [datetime | date | time] æ¾ç¤ºæ¨¡å¼ |
|---|
| | | * @property {Boolean} multiple = [true|false] æ¯å¦å¤é |
|---|
| | | * @property {String|Number} value é»è®¤å¼ |
|---|
| | | * @property {String|Number} start èµ·å§æ¥æææ¶é´ |
|---|
| | | * @property {String|Number} end èµ·å§æ¥æææ¶é´ |
|---|
| | | * @property {String} return-type = [timestamp | string] |
|---|
| | | * @event {Function} change éä¸åçåå触å |
|---|
| | | */ |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'UniDatetimePicker', |
|---|
| | | components: { |
|---|
| | | // #ifdef H5 |
|---|
| | | keypress |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | indicatorStyle: `height: 50px;`, |
|---|
| | | visible: false, |
|---|
| | | fixNvueBug: {}, |
|---|
| | | dateShow: true, |
|---|
| | | timeShow: true, |
|---|
| | | title: 'æ¥æåæ¶é´', |
|---|
| | | // è¾å
¥æ¡å½åæ¶é´ |
|---|
| | | time: '', |
|---|
| | | // å½åçå¹´ææ¥æ¶åç§ |
|---|
| | | year: 1920, |
|---|
| | | month: 0, |
|---|
| | | day: 0, |
|---|
| | | hour: 0, |
|---|
| | | minute: 0, |
|---|
| | | second: 0, |
|---|
| | | // èµ·å§æ¶é´ |
|---|
| | | startYear: 1920, |
|---|
| | | startMonth: 1, |
|---|
| | | startDay: 1, |
|---|
| | | startHour: 0, |
|---|
| | | startMinute: 0, |
|---|
| | | startSecond: 0, |
|---|
| | | // ç»ææ¶é´ |
|---|
| | | endYear: 2120, |
|---|
| | | endMonth: 12, |
|---|
| | | endDay: 31, |
|---|
| | | endHour: 23, |
|---|
| | | endMinute: 59, |
|---|
| | | endSecond: 59, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: 'datetime' |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | modelValue: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | start: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | end: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | returnType: { |
|---|
| | | type: String, |
|---|
| | | default: 'string' |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | border: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | hideSecond: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // #ifndef VUE3 |
|---|
| | | value: { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (newVal) { |
|---|
| | | this.parseValue(this.fixIosDateFormat(newVal)) //å
¼å®¹ iOSãsafari æ¥ææ ¼å¼ |
|---|
| | | this.initTime(false) |
|---|
| | | } else { |
|---|
| | | this.time = '' |
|---|
| | | this.parseValue(Date.now()) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | // #ifdef VUE3 |
|---|
| | | modelValue: { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (newVal) { |
|---|
| | | this.parseValue(this.fixIosDateFormat(newVal)) //å
¼å®¹ iOSãsafari æ¥ææ ¼å¼ |
|---|
| | | this.initTime(false) |
|---|
| | | } else { |
|---|
| | | this.time = '' |
|---|
| | | this.parseValue(Date.now()) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | type: { |
|---|
| | | handler(newValue) { |
|---|
| | | if (newValue === 'date') { |
|---|
| | | this.dateShow = true |
|---|
| | | this.timeShow = false |
|---|
| | | this.title = 'æ¥æ' |
|---|
| | | } else if (newValue === 'time') { |
|---|
| | | this.dateShow = false |
|---|
| | | this.timeShow = true |
|---|
| | | this.title = 'æ¶é´' |
|---|
| | | } else { |
|---|
| | | this.dateShow = true |
|---|
| | | this.timeShow = true |
|---|
| | | this.title = 'æ¥æåæ¶é´' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | start: { |
|---|
| | | handler(newVal) { |
|---|
| | | this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //å
¼å®¹ iOSãsafari æ¥ææ ¼å¼ |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | end: { |
|---|
| | | handler(newVal) { |
|---|
| | | this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //å
¼å®¹ iOSãsafari æ¥ææ ¼å¼ |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æãæ¥ãæ¶ãåãç§å¯éèå´åååï¼æ£æ¥å½åå¼æ¯å¦å¨èå´å
ï¼ä¸å¨åå½åå¼é置为å¯éèå´ç¬¬ä¸é¡¹ |
|---|
| | | months(newVal) { |
|---|
| | | this.checkValue('month', this.month, newVal) |
|---|
| | | }, |
|---|
| | | days(newVal) { |
|---|
| | | this.checkValue('day', this.day, newVal) |
|---|
| | | }, |
|---|
| | | hours(newVal) { |
|---|
| | | this.checkValue('hour', this.hour, newVal) |
|---|
| | | }, |
|---|
| | | minutes(newVal) { |
|---|
| | | this.checkValue('minute', this.minute, newVal) |
|---|
| | | }, |
|---|
| | | seconds(newVal) { |
|---|
| | | this.checkValue('second', this.second, newVal) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å½åå¹´ãæãæ¥ãæ¶ãåãç§éæ©èå´ |
|---|
| | | years() { |
|---|
| | | return this.getCurrentRange('year') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | months() { |
|---|
| | | return this.getCurrentRange('month') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | days() { |
|---|
| | | return this.getCurrentRange('day') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | hours() { |
|---|
| | | return this.getCurrentRange('hour') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | minutes() { |
|---|
| | | return this.getCurrentRange('minute') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | seconds() { |
|---|
| | | return this.getCurrentRange('second') |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // picker å½åå¼æ°ç» |
|---|
| | | ymd() { |
|---|
| | | return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay] |
|---|
| | | }, |
|---|
| | | hms() { |
|---|
| | | return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å½å date æ¯ start |
|---|
| | | currentDateIsStart() { |
|---|
| | | return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å½å date æ¯ end |
|---|
| | | currentDateIsEnd() { |
|---|
| | | return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å½åå¹´ãæãæ¥ãæ¶ãåãç§çæå°å¼åæå¤§å¼ |
|---|
| | | minYear() { |
|---|
| | | return this.startYear |
|---|
| | | }, |
|---|
| | | maxYear() { |
|---|
| | | return this.endYear |
|---|
| | | }, |
|---|
| | | minMonth() { |
|---|
| | | if (this.year === this.startYear) { |
|---|
| | | return this.startMonth |
|---|
| | | } else { |
|---|
| | | return 1 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | maxMonth() { |
|---|
| | | if (this.year === this.endYear) { |
|---|
| | | return this.endMonth |
|---|
| | | } else { |
|---|
| | | return 12 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | minDay() { |
|---|
| | | if (this.year === this.startYear && this.month === this.startMonth) { |
|---|
| | | return this.startDay |
|---|
| | | } else { |
|---|
| | | return 1 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | maxDay() { |
|---|
| | | if (this.year === this.endYear && this.month === this.endMonth) { |
|---|
| | | return this.endDay |
|---|
| | | } else { |
|---|
| | | return this.daysInMonth(this.year, this.month) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | minHour() { |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | if (this.currentDateIsStart) { |
|---|
| | | return this.startHour |
|---|
| | | } else { |
|---|
| | | return 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | return this.startHour |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | maxHour() { |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | if (this.currentDateIsEnd) { |
|---|
| | | return this.endHour |
|---|
| | | } else { |
|---|
| | | return 23 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | return this.endHour |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | minMinute() { |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | if (this.currentDateIsStart && this.hour === this.startHour) { |
|---|
| | | return this.startMinute |
|---|
| | | } else { |
|---|
| | | return 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | if (this.hour === this.startHour) { |
|---|
| | | return this.startMinute |
|---|
| | | } else { |
|---|
| | | return 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | maxMinute() { |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | if (this.currentDateIsEnd && this.hour === this.endHour) { |
|---|
| | | return this.endMinute |
|---|
| | | } else { |
|---|
| | | return 59 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | if (this.hour === this.endHour) { |
|---|
| | | return this.endMinute |
|---|
| | | } else { |
|---|
| | | return 59 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | minSecond() { |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) { |
|---|
| | | return this.startSecond |
|---|
| | | } else { |
|---|
| | | return 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | if (this.hour === this.startHour && this.minute === this.startMinute) { |
|---|
| | | return this.startSecond |
|---|
| | | } else { |
|---|
| | | return 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | maxSecond() { |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) { |
|---|
| | | return this.endSecond |
|---|
| | | } else { |
|---|
| | | return 59 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | if (this.hour === this.endHour && this.minute === this.endMinute) { |
|---|
| | | return this.endSecond |
|---|
| | | } else { |
|---|
| | | return 59 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * for i18n |
|---|
| | | */ |
|---|
| | | selectTimeText() { |
|---|
| | | return t("uni-datetime-picker.selectTime") |
|---|
| | | }, |
|---|
| | | okText() { |
|---|
| | | return t("uni-datetime-picker.ok") |
|---|
| | | }, |
|---|
| | | clearText() { |
|---|
| | | return t("uni-datetime-picker.clear") |
|---|
| | | }, |
|---|
| | | cancelText() { |
|---|
| | | return t("uni-datetime-picker.cancel") |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted() { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const res = uni.getSystemInfoSync(); |
|---|
| | | this.fixNvueBug = { |
|---|
| | | top: res.windowHeight / 2, |
|---|
| | | left: res.windowWidth / 2 |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * @param {Object} item |
|---|
| | | * å°äº 10 å¨åé¢å 个 0 |
|---|
| | | */ |
|---|
| | | |
|---|
| | | lessThanTen(item) { |
|---|
| | | return item < 10 ? '0' + item : item |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 解ææ¶åç§å符串ï¼ä¾å¦ï¼00:00:00 |
|---|
| | | * @param {String} timeString |
|---|
| | | */ |
|---|
| | | parseTimeType(timeString) { |
|---|
| | | if (timeString) { |
|---|
| | | let timeArr = timeString.split(':') |
|---|
| | | this.hour = Number(timeArr[0]) |
|---|
| | | this.minute = Number(timeArr[1]) |
|---|
| | | this.second = Number(timeArr[2]) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 解æéæ©å¨åå§å¼ï¼ç±»åå¯ä»¥æ¯å符串ãæ¶é´æ³ï¼ä¾å¦ï¼2000-10-02ã'08:30:00'ã 1610695109000 |
|---|
| | | * @param {String | Number} datetime |
|---|
| | | */ |
|---|
| | | initPickerValue(datetime) { |
|---|
| | | let defaultValue = null |
|---|
| | | if (datetime) { |
|---|
| | | defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end) |
|---|
| | | } else { |
|---|
| | | defaultValue = Date.now() |
|---|
| | | defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end) |
|---|
| | | } |
|---|
| | | this.parseValue(defaultValue) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * åå§å¼è§åï¼ |
|---|
| | | * - ç¨æ·è®¾ç½®åå§å¼ value |
|---|
| | | * - 设置äºèµ·å§æ¶é´ startãç»æ¢æ¶é´ endï¼å¹¶ start < value < endï¼åå§å¼ä¸º valueï¼ å¦ååå§å¼ä¸º start |
|---|
| | | * - åªè®¾ç½®äºèµ·å§æ¶é´ startï¼å¹¶ start < valueï¼åå§å¼ä¸º valueï¼å¦ååå§å¼ä¸º start |
|---|
| | | * - åªè®¾ç½®äºç»æ¢æ¶é´ endï¼å¹¶ value < endï¼åå§å¼ä¸º valueï¼å¦ååå§å¼ä¸º end |
|---|
| | | * - æ èµ·å§ç»æ¢æ¶é´ï¼ååå§å¼ä¸º value |
|---|
| | | * - æ åå§å¼ valueï¼ååå§å¼ä¸ºå½åæ¬å°æ¶é´ Date.now() |
|---|
| | | * @param {Object} value |
|---|
| | | * @param {Object} dateBase |
|---|
| | | */ |
|---|
| | | compareValueWithStartAndEnd(value, start, end) { |
|---|
| | | let winner = null |
|---|
| | | value = this.superTimeStamp(value) |
|---|
| | | start = this.superTimeStamp(start) |
|---|
| | | end = this.superTimeStamp(end) |
|---|
| | | |
|---|
| | | if (start && end) { |
|---|
| | | if (value < start) { |
|---|
| | | winner = new Date(start) |
|---|
| | | } else if (value > end) { |
|---|
| | | winner = new Date(end) |
|---|
| | | } else { |
|---|
| | | winner = new Date(value) |
|---|
| | | } |
|---|
| | | } else if (start && !end) { |
|---|
| | | winner = start <= value ? new Date(value) : new Date(start) |
|---|
| | | } else if (!start && end) { |
|---|
| | | winner = value <= end ? new Date(value) : new Date(end) |
|---|
| | | } else { |
|---|
| | | winner = new Date(value) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return winner |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 转æ¢ä¸ºå¯æ¯è¾çæ¶é´æ³ï¼æ¥åæ¥æãæ¶åç§ãæ¶é´æ³ |
|---|
| | | * @param {Object} value |
|---|
| | | */ |
|---|
| | | superTimeStamp(value) { |
|---|
| | | let dateBase = '' |
|---|
| | | if (this.type === 'time' && value && typeof value === 'string') { |
|---|
| | | const now = new Date() |
|---|
| | | const year = now.getFullYear() |
|---|
| | | const month = now.getMonth() + 1 |
|---|
| | | const day = now.getDate() |
|---|
| | | dateBase = year + '/' + month + '/' + day + ' ' |
|---|
| | | } |
|---|
| | | if (Number(value) && typeof value !== NaN) { |
|---|
| | | value = parseInt(value) |
|---|
| | | dateBase = 0 |
|---|
| | | } |
|---|
| | | return this.createTimeStamp(dateBase + value) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 解æé»è®¤å¼ valueï¼å符串ãæ¶é´æ³ |
|---|
| | | * @param {Object} defaultTime |
|---|
| | | */ |
|---|
| | | parseValue(value) { |
|---|
| | | if (!value) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (this.type === 'time' && typeof value === "string") { |
|---|
| | | this.parseTimeType(value) |
|---|
| | | } else { |
|---|
| | | let defaultDate = null |
|---|
| | | defaultDate = new Date(value) |
|---|
| | | if (this.type !== 'time') { |
|---|
| | | this.year = defaultDate.getFullYear() |
|---|
| | | this.month = defaultDate.getMonth() + 1 |
|---|
| | | this.day = defaultDate.getDate() |
|---|
| | | } |
|---|
| | | if (this.type !== 'date') { |
|---|
| | | this.hour = defaultDate.getHours() |
|---|
| | | this.minute = defaultDate.getMinutes() |
|---|
| | | this.second = defaultDate.getSeconds() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.hideSecond) { |
|---|
| | | this.second = 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 解æå¯éæ©æ¶é´èå´ startãendï¼å¹´ææ¥å符串ãæ¶é´æ³ |
|---|
| | | * @param {Object} defaultTime |
|---|
| | | */ |
|---|
| | | parseDatetimeRange(point, pointType) { |
|---|
| | | // æ¶é´ä¸ºç©ºï¼åé置为åå§å¼ |
|---|
| | | if (!point) { |
|---|
| | | if (pointType === 'start') { |
|---|
| | | this.startYear = 1920 |
|---|
| | | this.startMonth = 1 |
|---|
| | | this.startDay = 1 |
|---|
| | | this.startHour = 0 |
|---|
| | | this.startMinute = 0 |
|---|
| | | this.startSecond = 0 |
|---|
| | | } |
|---|
| | | if (pointType === 'end') { |
|---|
| | | this.endYear = 2120 |
|---|
| | | this.endMonth = 12 |
|---|
| | | this.endDay = 31 |
|---|
| | | this.endHour = 23 |
|---|
| | | this.endMinute = 59 |
|---|
| | | this.endSecond = 59 |
|---|
| | | } |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (this.type === 'time') { |
|---|
| | | const pointArr = point.split(':') |
|---|
| | | this[pointType + 'Hour'] = Number(pointArr[0]) |
|---|
| | | this[pointType + 'Minute'] = Number(pointArr[1]) |
|---|
| | | this[pointType + 'Second'] = Number(pointArr[2]) |
|---|
| | | } else { |
|---|
| | | if (!point) { |
|---|
| | | pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60 |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (Number(point) && Number(point) !== NaN) { |
|---|
| | | point = parseInt(point) |
|---|
| | | } |
|---|
| | | // datetime ç end 没ææ¶åç§, åä¸éå¶ |
|---|
| | | const hasTime = /[0-9]:[0-9]/ |
|---|
| | | if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test( |
|---|
| | | point)) { |
|---|
| | | point = point + ' 23:59:59' |
|---|
| | | } |
|---|
| | | const pointDate = new Date(point) |
|---|
| | | this[pointType + 'Year'] = pointDate.getFullYear() |
|---|
| | | this[pointType + 'Month'] = pointDate.getMonth() + 1 |
|---|
| | | this[pointType + 'Day'] = pointDate.getDate() |
|---|
| | | if (this.type === 'datetime') { |
|---|
| | | this[pointType + 'Hour'] = pointDate.getHours() |
|---|
| | | this[pointType + 'Minute'] = pointDate.getMinutes() |
|---|
| | | this[pointType + 'Second'] = pointDate.getSeconds() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // è·å å¹´ãæãæ¥ãæ¶ãåãç§ å½åå¯éèå´ |
|---|
| | | getCurrentRange(value) { |
|---|
| | | const range = [] |
|---|
| | | for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) { |
|---|
| | | range.push(i) |
|---|
| | | } |
|---|
| | | return range |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å符串é¦åæ¯å¤§å |
|---|
| | | capitalize(str) { |
|---|
| | | return str.charAt(0).toUpperCase() + str.slice(1) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ£æ¥å½åå¼æ¯å¦å¨èå´å
ï¼ä¸å¨åå½åå¼é置为å¯éèå´ç¬¬ä¸é¡¹ |
|---|
| | | checkValue(name, value, values) { |
|---|
| | | if (values.indexOf(value) === -1) { |
|---|
| | | this[name] = values[0] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ¯ä¸ªæçå®é
å¤©æ° |
|---|
| | | daysInMonth(year, month) { // Use 1 for January, 2 for February, etc. |
|---|
| | | return new Date(year, month, 0).getDate(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //å
¼å®¹ iOSãsafari æ¥ææ ¼å¼ |
|---|
| | | fixIosDateFormat(value) { |
|---|
| | | if (typeof value === 'string') { |
|---|
| | | value = value.replace(/-/g, '/') |
|---|
| | | } |
|---|
| | | return value |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * çææ¶é´æ³ |
|---|
| | | * @param {Object} time |
|---|
| | | */ |
|---|
| | | createTimeStamp(time) { |
|---|
| | | if (!time) return |
|---|
| | | if (typeof time === "number") { |
|---|
| | | return time |
|---|
| | | } else { |
|---|
| | | time = time.replace(/-/g, '/') |
|---|
| | | if (this.type === 'date') { |
|---|
| | | time = time + ' ' + '00:00:00' |
|---|
| | | } |
|---|
| | | return Date.parse(time) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * çææ¥æææ¶é´çå符串 |
|---|
| | | */ |
|---|
| | | createDomSting() { |
|---|
| | | const yymmdd = this.year + |
|---|
| | | '-' + |
|---|
| | | this.lessThanTen(this.month) + |
|---|
| | | '-' + |
|---|
| | | this.lessThanTen(this.day) |
|---|
| | | |
|---|
| | | let hhmmss = this.lessThanTen(this.hour) + |
|---|
| | | ':' + |
|---|
| | | this.lessThanTen(this.minute) |
|---|
| | | |
|---|
| | | if (!this.hideSecond) { |
|---|
| | | hhmmss = hhmmss + ':' + this.lessThanTen(this.second) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.type === 'date') { |
|---|
| | | return yymmdd |
|---|
| | | } else if (this.type === 'time') { |
|---|
| | | return hhmmss |
|---|
| | | } else { |
|---|
| | | return yymmdd + ' ' + hhmmss |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * åå§åè¿åå¼ï¼å¹¶æåº change äºä»¶ |
|---|
| | | */ |
|---|
| | | initTime(emit = true) { |
|---|
| | | this.time = this.createDomSting() |
|---|
| | | if (!emit) return |
|---|
| | | if (this.returnType === 'timestamp' && this.type !== 'time') { |
|---|
| | | this.$emit('change', this.createTimeStamp(this.time)) |
|---|
| | | this.$emit('input', this.createTimeStamp(this.time)) |
|---|
| | | this.$emit('update:modelValue', this.createTimeStamp(this.time)) |
|---|
| | | } else { |
|---|
| | | this.$emit('change', this.time) |
|---|
| | | this.$emit('input', this.time) |
|---|
| | | this.$emit('update:modelValue', this.time) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ç¨æ·éæ©æ¥æææ¶é´æ´æ° data |
|---|
| | | * @param {Object} e |
|---|
| | | */ |
|---|
| | | bindDateChange(e) { |
|---|
| | | const val = e.detail.value |
|---|
| | | this.year = this.years[val[0]] |
|---|
| | | this.month = this.months[val[1]] |
|---|
| | | this.day = this.days[val[2]] |
|---|
| | | }, |
|---|
| | | bindTimeChange(e) { |
|---|
| | | const val = e.detail.value |
|---|
| | | this.hour = this.hours[val[0]] |
|---|
| | | this.minute = this.minutes[val[1]] |
|---|
| | | this.second = this.seconds[val[2]] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * åå§åå¼¹åºå± |
|---|
| | | */ |
|---|
| | | initTimePicker() { |
|---|
| | | if (this.disabled) return |
|---|
| | | const value = this.fixIosDateFormat(this.value) |
|---|
| | | this.initPickerValue(value) |
|---|
| | | this.visible = !this.visible |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 触åæå
³éå¼¹æ¡ |
|---|
| | | */ |
|---|
| | | tiggerTimePicker(e) { |
|---|
| | | this.visible = !this.visible |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ç¨æ·ç¹å»âæ¸
空âæé®ï¼æ¸
空å½åå¼ |
|---|
| | | */ |
|---|
| | | clearTime() { |
|---|
| | | this.time = '' |
|---|
| | | this.$emit('change', this.time) |
|---|
| | | this.$emit('input', this.time) |
|---|
| | | this.$emit('update:modelValue', this.time) |
|---|
| | | this.tiggerTimePicker() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ç¨æ·ç¹å»âç¡®å®âæé® |
|---|
| | | */ |
|---|
| | | setTime() { |
|---|
| | | this.initTime() |
|---|
| | | this.tiggerTimePicker() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-primary: #007aff !default; |
|---|
| | | |
|---|
| | | .uni-datetime-picker { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | /* width: 100%; */ |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-view { |
|---|
| | | height: 130px; |
|---|
| | | width: 270px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-item { |
|---|
| | | height: 50px; |
|---|
| | | line-height: 50px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-btn { |
|---|
| | | margin-top: 60px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-btn-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: $uni-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-btn-group { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-cancel { |
|---|
| | | margin-right: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-mask { |
|---|
| | | position: fixed; |
|---|
| | | bottom: 0px; |
|---|
| | | top: 0px; |
|---|
| | | left: 0px; |
|---|
| | | right: 0px; |
|---|
| | | background-color: rgba(0, 0, 0, 0.4); |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | z-index: 998; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-popup { |
|---|
| | | border-radius: 8px; |
|---|
| | | padding: 30px; |
|---|
| | | width: 270px; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | height: 500px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | width: 330px; |
|---|
| | | /* #endif */ |
|---|
| | | background-color: #fff; |
|---|
| | | position: fixed; |
|---|
| | | top: 50%; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | z-index: 999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fix-nvue-height { |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | height: 330px; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-time { |
|---|
| | | color: grey; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-column { |
|---|
| | | height: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-timebox { |
|---|
| | | |
|---|
| | | border: 1px solid #E5E5E5; |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 7px 10px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-timebox-pointer { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .uni-datetime-picker-disabled { |
|---|
| | | opacity: 0.4; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: not-allowed !important; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-text { |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 50px |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker-sign { |
|---|
| | | position: absolute; |
|---|
| | | top: 53px; |
|---|
| | | /* åæ 10px çå
ç´ é«åº¦ï¼å
¼å®¹nvue */ |
|---|
| | | color: #999; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | font-size: 16px; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sign-left { |
|---|
| | | left: 86px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sign-right { |
|---|
| | | right: 86px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sign-center { |
|---|
| | | left: 135px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-datetime-picker__container-box { |
|---|
| | | position: relative; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin-top: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .time-hide-second { |
|---|
| | | width: 180px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-date"> |
|---|
| | | <view class="uni-date-editor" @click="show"> |
|---|
| | | <slot> |
|---|
| | | <view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled, |
|---|
| | | 'uni-date-x--border': border}"> |
|---|
| | | <view v-if="!isRange" class="uni-date-x uni-date-single"> |
|---|
| | | <uni-icons type="calendar" color="#c0c4cc" size="22"></uni-icons> |
|---|
| | | <input class="uni-date__x-input" type="text" v-model="singleVal" |
|---|
| | | :placeholder="singlePlaceholderText" :disabled="true" /> |
|---|
| | | </view> |
|---|
| | | <view v-else class="uni-date-x uni-date-range"> |
|---|
| | | <uni-icons type="calendar" color="#c0c4cc" size="22"></uni-icons> |
|---|
| | | <input class="uni-date__x-input t-c" type="text" v-model="range.startDate" |
|---|
| | | :placeholder="startPlaceholderText" :disabled="true" /> |
|---|
| | | <slot> |
|---|
| | | <view class="">{{rangeSeparator}}</view> |
|---|
| | | </slot> |
|---|
| | | <input class="uni-date__x-input t-c" type="text" v-model="range.endDate" |
|---|
| | | :placeholder="endPlaceholderText" :disabled="true" /> |
|---|
| | | </view> |
|---|
| | | <view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear"> |
|---|
| | | <uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view v-show="popup" class="uni-date-mask" @click="close"></view> |
|---|
| | | <view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container"> |
|---|
| | | <view v-if="!isRange" class="uni-date-single--x" :style="popover"> |
|---|
| | | <view class="uni-popper__arrow"></view> |
|---|
| | | <view v-if="hasTime" class="uni-date-changed popup-x-header"> |
|---|
| | | <input class="uni-date__input t-c" type="text" v-model="tempSingleDate" |
|---|
| | | :placeholder="selectDateText" /> |
|---|
| | | <time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate" |
|---|
| | | :start="reactStartTime" :end="reactEndTime" :hideSecond="hideSecond" style="width: 100%;"> |
|---|
| | | <input class="uni-date__input t-c" type="text" v-model="time" :placeholder="selectTimeText" |
|---|
| | | :disabled="!tempSingleDate" /> |
|---|
| | | </time-picker> |
|---|
| | | </view> |
|---|
| | | <calendar ref="pcSingle" :showMonth="false" :start-date="caleRange.startDate" |
|---|
| | | :end-date="caleRange.endDate" :date="defSingleDate" @change="singleChange" |
|---|
| | | style="padding: 0 8px;" /> |
|---|
| | | <view v-if="hasTime" class="popup-x-footer"> |
|---|
| | | <!-- <text class="">æ¤å»</text> --> |
|---|
| | | <text class="confirm" @click="confirmSingleChange">{{okText}}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-date-popper__arrow"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view v-else class="uni-date-range--x" :style="popover"> |
|---|
| | | <view class="uni-popper__arrow"></view> |
|---|
| | | <view v-if="hasTime" class="popup-x-header uni-date-changed"> |
|---|
| | | <view class="popup-x-header--datetime"> |
|---|
| | | <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate" |
|---|
| | | :placeholder="startDateText" /> |
|---|
| | | <time-picker type="time" v-model="tempRange.startTime" :start="reactStartTime" :border="false" |
|---|
| | | :disabled="!tempRange.startDate" :hideSecond="hideSecond"> |
|---|
| | | <input class="uni-date__input uni-date-range__input" type="text" |
|---|
| | | v-model="tempRange.startTime" :placeholder="startTimeText" |
|---|
| | | :disabled="!tempRange.startDate" /> |
|---|
| | | </time-picker> |
|---|
| | | </view> |
|---|
| | | <uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons> |
|---|
| | | <view class="popup-x-header--datetime"> |
|---|
| | | <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate" |
|---|
| | | :placeholder="endDateText" /> |
|---|
| | | <time-picker type="time" v-model="tempRange.endTime" :end="reactEndTime" :border="false" |
|---|
| | | :disabled="!tempRange.endDate" :hideSecond="hideSecond"> |
|---|
| | | <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime" |
|---|
| | | :placeholder="endTimeText" :disabled="!tempRange.endDate" /> |
|---|
| | | </time-picker> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="popup-x-body"> |
|---|
| | | <calendar ref="left" :showMonth="false" :start-date="caleRange.startDate" |
|---|
| | | :end-date="caleRange.endDate" :range="true" @change="leftChange" :pleStatus="endMultipleStatus" |
|---|
| | | @firstEnterCale="updateRightCale" @monthSwitch="leftMonthSwitch" style="padding: 0 8px;" /> |
|---|
| | | <calendar ref="right" :showMonth="false" :start-date="caleRange.startDate" |
|---|
| | | :end-date="caleRange.endDate" :range="true" @change="rightChange" |
|---|
| | | :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale" |
|---|
| | | @monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" /> |
|---|
| | | </view> |
|---|
| | | <view v-if="hasTime" class="popup-x-footer"> |
|---|
| | | <text class="" @click="clear">{{clearText}}</text> |
|---|
| | | <text class="confirm" @click="confirmRangeChange">{{okText}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime" |
|---|
| | | :start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime" |
|---|
| | | :pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false" |
|---|
| | | :hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * DatetimePicker æ¶é´éæ©å¨ |
|---|
| | | * @description åæ¶æ¯æ PC å移å¨ç«¯ä½¿ç¨æ¥åéæ©æ¥æåæ¥æèå´ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=3962 |
|---|
| | | * @property {String} type éæ©å¨ç±»å |
|---|
| | | * @property {String|Number|Array|Date} value ç»å®å¼ |
|---|
| | | * @property {String} placeholder åéæ©æ¶çå ä½å
容 |
|---|
| | | * @property {String} start èµ·å§æ¶é´ |
|---|
| | | * @property {String} end ç»æ¢æ¶é´ |
|---|
| | | * @property {String} start-placeholder èå´éæ©æ¶å¼å§æ¥æçå ä½å
容 |
|---|
| | | * @property {String} end-placeholder èå´éæ©æ¶ç»ææ¥æçå ä½å
容 |
|---|
| | | * @property {String} range-separator éæ©èå´æ¶çåé符 |
|---|
| | | * @property {Boolean} border = [true|false] æ¯å¦æè¾¹æ¡ |
|---|
| | | * @property {Boolean} disabled = [true|false] æ¯å¦ç¦ç¨ |
|---|
| | | * @property {Boolean} clearIcon = [true|false] æ¯å¦æ¾ç¤ºæ¸
é¤æé®ï¼ä»
PC端éç¨ï¼ |
|---|
| | | * @event {Function} change ç¡®å®æ¥ææ¶è§¦åçäºä»¶ |
|---|
| | | * @event {Function} show æå¼å¼¹åºå± |
|---|
| | | * @event {Function} close å
³éå¼¹åºå± |
|---|
| | | * @event {Function} clear æ¸
é¤ä¸æ¬¡éä¸çç¶æåå¼ |
|---|
| | | **/ |
|---|
| | | import calendar from './calendar.vue' |
|---|
| | | import timePicker from './time-picker.vue' |
|---|
| | | import { |
|---|
| | | initVueI18n |
|---|
| | | } from '@dcloudio/uni-i18n' |
|---|
| | | import messages from './i18n/index.js' |
|---|
| | | const { |
|---|
| | | t |
|---|
| | | } = initVueI18n(messages) |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'UniDatetimePicker', |
|---|
| | | options: { |
|---|
| | | virtualHost: true |
|---|
| | | }, |
|---|
| | | components: { |
|---|
| | | calendar, |
|---|
| | | timePicker |
|---|
| | | }, |
|---|
| | | inject: { |
|---|
| | | form: { |
|---|
| | | from: 'uniForm', |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | formItem: { |
|---|
| | | from: 'uniFormItem', |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isRange: false, |
|---|
| | | hasTime: false, |
|---|
| | | mobileRange: false, |
|---|
| | | // åé |
|---|
| | | singleVal: '', |
|---|
| | | tempSingleDate: '', |
|---|
| | | defSingleDate: '', |
|---|
| | | time: '', |
|---|
| | | // èå´é |
|---|
| | | caleRange: { |
|---|
| | | startDate: '', |
|---|
| | | startTime: '', |
|---|
| | | endDate: '', |
|---|
| | | endTime: '' |
|---|
| | | }, |
|---|
| | | range: { |
|---|
| | | startDate: '', |
|---|
| | | // startTime: '', |
|---|
| | | endDate: '', |
|---|
| | | // endTime: '' |
|---|
| | | }, |
|---|
| | | tempRange: { |
|---|
| | | startDate: '', |
|---|
| | | startTime: '', |
|---|
| | | endDate: '', |
|---|
| | | endTime: '' |
|---|
| | | }, |
|---|
| | | // å·¦å³æ¥ååæ¥æ°æ® |
|---|
| | | startMultipleStatus: { |
|---|
| | | before: '', |
|---|
| | | after: '', |
|---|
| | | data: [], |
|---|
| | | fulldate: '' |
|---|
| | | }, |
|---|
| | | endMultipleStatus: { |
|---|
| | | before: '', |
|---|
| | | after: '', |
|---|
| | | data: [], |
|---|
| | | fulldate: '' |
|---|
| | | }, |
|---|
| | | visible: false, |
|---|
| | | popup: false, |
|---|
| | | popover: null, |
|---|
| | | isEmitValue: false, |
|---|
| | | isPhone: false, |
|---|
| | | isFirstShow: true, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: 'datetime' |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [String, Number, Array, Date], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | modelValue: { |
|---|
| | | type: [String, Number, Array, Date], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | start: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | end: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | returnType: { |
|---|
| | | type: String, |
|---|
| | | default: 'string' |
|---|
| | | }, |
|---|
| | | placeholder: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | startPlaceholder: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | endPlaceholder: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | rangeSeparator: { |
|---|
| | | type: String, |
|---|
| | | default: '-' |
|---|
| | | }, |
|---|
| | | border: { |
|---|
| | | type: [Boolean], |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: [Boolean], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | clearIcon: { |
|---|
| | | type: [Boolean], |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | hideSecond: { |
|---|
| | | type: [Boolean], |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | type: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (newVal.indexOf('time') !== -1) { |
|---|
| | | this.hasTime = true |
|---|
| | | } else { |
|---|
| | | this.hasTime = false |
|---|
| | | } |
|---|
| | | if (newVal.indexOf('range') !== -1) { |
|---|
| | | this.isRange = true |
|---|
| | | } else { |
|---|
| | | this.isRange = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #ifndef VUE3 |
|---|
| | | value: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (this.isEmitValue) { |
|---|
| | | this.isEmitValue = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.initPicker(newVal) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | // #ifdef VUE3 |
|---|
| | | modelValue: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (this.isEmitValue) { |
|---|
| | | this.isEmitValue = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.initPicker(newVal) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | start: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (!newVal) return |
|---|
| | | const { |
|---|
| | | defDate, |
|---|
| | | defTime |
|---|
| | | } = this.parseDate(newVal) |
|---|
| | | this.caleRange.startDate = defDate |
|---|
| | | if (this.hasTime) { |
|---|
| | | this.caleRange.startTime = defTime |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | end: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (!newVal) return |
|---|
| | | const { |
|---|
| | | defDate, |
|---|
| | | defTime |
|---|
| | | } = this.parseDate(newVal) |
|---|
| | | this.caleRange.endDate = defDate |
|---|
| | | if (this.hasTime) { |
|---|
| | | this.caleRange.endTime = defTime |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | reactStartTime() { |
|---|
| | | const activeDate = this.isRange ? this.tempRange.startDate : this.tempSingleDate |
|---|
| | | const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : '' |
|---|
| | | return res |
|---|
| | | }, |
|---|
| | | reactEndTime() { |
|---|
| | | const activeDate = this.isRange ? this.tempRange.endDate : this.tempSingleDate |
|---|
| | | const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : '' |
|---|
| | | return res |
|---|
| | | }, |
|---|
| | | reactMobDefTime() { |
|---|
| | | const times = { |
|---|
| | | start: this.tempRange.startTime, |
|---|
| | | end: this.tempRange.endTime |
|---|
| | | } |
|---|
| | | return this.isRange ? times : this.time |
|---|
| | | }, |
|---|
| | | mobSelectableTime() { |
|---|
| | | return { |
|---|
| | | start: this.caleRange.startTime, |
|---|
| | | end: this.caleRange.endTime |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | datePopupWidth() { |
|---|
| | | // todo |
|---|
| | | return this.isRange ? 653 : 301 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * for i18n |
|---|
| | | */ |
|---|
| | | singlePlaceholderText() { |
|---|
| | | return this.placeholder || (this.type === 'date' ? this.selectDateText : t( |
|---|
| | | "uni-datetime-picker.selectDateTime")) |
|---|
| | | }, |
|---|
| | | startPlaceholderText() { |
|---|
| | | return this.startPlaceholder || this.startDateText |
|---|
| | | }, |
|---|
| | | endPlaceholderText() { |
|---|
| | | return this.endPlaceholder || this.endDateText |
|---|
| | | }, |
|---|
| | | selectDateText() { |
|---|
| | | return t("uni-datetime-picker.selectDate") |
|---|
| | | }, |
|---|
| | | selectTimeText() { |
|---|
| | | return t("uni-datetime-picker.selectTime") |
|---|
| | | }, |
|---|
| | | startDateText() { |
|---|
| | | return this.startPlaceholder || t("uni-datetime-picker.startDate") |
|---|
| | | }, |
|---|
| | | startTimeText() { |
|---|
| | | return t("uni-datetime-picker.startTime") |
|---|
| | | }, |
|---|
| | | endDateText() { |
|---|
| | | return this.endPlaceholder || t("uni-datetime-picker.endDate") |
|---|
| | | }, |
|---|
| | | endTimeText() { |
|---|
| | | return t("uni-datetime-picker.endTime") |
|---|
| | | }, |
|---|
| | | okText() { |
|---|
| | | return t("uni-datetime-picker.ok") |
|---|
| | | }, |
|---|
| | | clearText() { |
|---|
| | | return t("uni-datetime-picker.clear") |
|---|
| | | }, |
|---|
| | | showClearIcon() { |
|---|
| | | const { |
|---|
| | | clearIcon, |
|---|
| | | disabled, |
|---|
| | | singleVal, |
|---|
| | | range |
|---|
| | | } = this |
|---|
| | | const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate)) |
|---|
| | | return bool |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // if (this.form && this.formItem) { |
|---|
| | | // this.$watch('formItem.errMsg', (newVal) => { |
|---|
| | | // this.localMsg = newVal |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.platform() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initPicker(newVal) { |
|---|
| | | if (!newVal || Array.isArray(newVal) && !newVal.length) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.clear(false) |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (!Array.isArray(newVal) && !this.isRange) { |
|---|
| | | const { |
|---|
| | | defDate, |
|---|
| | | defTime |
|---|
| | | } = this.parseDate(newVal) |
|---|
| | | this.singleVal = defDate |
|---|
| | | this.tempSingleDate = defDate |
|---|
| | | this.defSingleDate = defDate |
|---|
| | | if (this.hasTime) { |
|---|
| | | this.singleVal = defDate + ' ' + defTime |
|---|
| | | this.time = defTime |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | const [before, after] = newVal |
|---|
| | | if (!before && !after) return |
|---|
| | | const defBefore = this.parseDate(before) |
|---|
| | | const defAfter = this.parseDate(after) |
|---|
| | | const startDate = defBefore.defDate |
|---|
| | | const endDate = defAfter.defDate |
|---|
| | | this.range.startDate = this.tempRange.startDate = startDate |
|---|
| | | this.range.endDate = this.tempRange.endDate = endDate |
|---|
| | | |
|---|
| | | if (this.hasTime) { |
|---|
| | | this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime |
|---|
| | | this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime |
|---|
| | | this.tempRange.startTime = defBefore.defTime |
|---|
| | | this.tempRange.endTime = defAfter.defTime |
|---|
| | | } |
|---|
| | | const defaultRange = { |
|---|
| | | before: defBefore.defDate, |
|---|
| | | after: defAfter.defDate |
|---|
| | | } |
|---|
| | | this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, { |
|---|
| | | which: 'right' |
|---|
| | | }) |
|---|
| | | this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, { |
|---|
| | | which: 'left' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | updateLeftCale(e) { |
|---|
| | | const left = this.$refs.left |
|---|
| | | // 设置èå´é |
|---|
| | | left.cale.setHoverMultiple(e.after) |
|---|
| | | left.setDate(this.$refs.left.nowDate.fullDate) |
|---|
| | | }, |
|---|
| | | updateRightCale(e) { |
|---|
| | | const right = this.$refs.right |
|---|
| | | // 设置èå´é |
|---|
| | | right.cale.setHoverMultiple(e.after) |
|---|
| | | right.setDate(this.$refs.right.nowDate.fullDate) |
|---|
| | | }, |
|---|
| | | platform() { |
|---|
| | | const systemInfo = uni.getSystemInfoSync() |
|---|
| | | this.isPhone = systemInfo.windowWidth <= 500 |
|---|
| | | this.windowWidth = systemInfo.windowWidth |
|---|
| | | }, |
|---|
| | | show(event) { |
|---|
| | | if (this.disabled) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.platform() |
|---|
| | | if (this.isPhone) { |
|---|
| | | this.$refs.mobile.open() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.popover = { |
|---|
| | | top: '10px' |
|---|
| | | } |
|---|
| | | const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor") |
|---|
| | | dateEditor.boundingClientRect(rect => { |
|---|
| | | if (this.windowWidth - rect.left < this.datePopupWidth) { |
|---|
| | | this.popover.right = 0 |
|---|
| | | } |
|---|
| | | }).exec() |
|---|
| | | setTimeout(() => { |
|---|
| | | this.popup = !this.popup |
|---|
| | | if (!this.isPhone && this.isRange && this.isFirstShow) { |
|---|
| | | this.isFirstShow = false |
|---|
| | | const { |
|---|
| | | startDate, |
|---|
| | | endDate |
|---|
| | | } = this.range |
|---|
| | | if (startDate && endDate) { |
|---|
| | | if (this.diffDate(startDate, endDate) < 30) { |
|---|
| | | this.$refs.right.next() |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.$refs.right.next() |
|---|
| | | this.$refs.right.cale.lastHover = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, 50) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | close() { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.popup = false |
|---|
| | | this.$emit('maskClick', this.value) |
|---|
| | | this.$refs.mobile.close() |
|---|
| | | }, 20) |
|---|
| | | }, |
|---|
| | | setEmit(value) { |
|---|
| | | if (this.returnType === "timestamp" || this.returnType === "date") { |
|---|
| | | if (!Array.isArray(value)) { |
|---|
| | | if (!this.hasTime) { |
|---|
| | | value = value + ' ' + '00:00:00' |
|---|
| | | } |
|---|
| | | value = this.createTimestamp(value) |
|---|
| | | if (this.returnType === "date") { |
|---|
| | | value = new Date(value) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (!this.hasTime) { |
|---|
| | | value[0] = value[0] + ' ' + '00:00:00' |
|---|
| | | value[1] = value[1] + ' ' + '00:00:00' |
|---|
| | | } |
|---|
| | | value[0] = this.createTimestamp(value[0]) |
|---|
| | | value[1] = this.createTimestamp(value[1]) |
|---|
| | | if (this.returnType === "date") { |
|---|
| | | value[0] = new Date(value[0]) |
|---|
| | | value[1] = new Date(value[1]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | this.$emit('change', value) |
|---|
| | | this.$emit('input', value) |
|---|
| | | this.$emit('update:modelValue', value) |
|---|
| | | this.isEmitValue = true |
|---|
| | | }, |
|---|
| | | createTimestamp(date) { |
|---|
| | | date = this.fixIosDateFormat(date) |
|---|
| | | return Date.parse(new Date(date)) |
|---|
| | | }, |
|---|
| | | singleChange(e) { |
|---|
| | | this.tempSingleDate = e.fulldate |
|---|
| | | if (this.hasTime) return |
|---|
| | | this.confirmSingleChange() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | confirmSingleChange() { |
|---|
| | | if (!this.tempSingleDate) { |
|---|
| | | this.popup = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (this.hasTime) { |
|---|
| | | this.singleVal = this.tempSingleDate + ' ' + (this.time ? this.time : '00:00:00') |
|---|
| | | } else { |
|---|
| | | this.singleVal = this.tempSingleDate |
|---|
| | | } |
|---|
| | | this.setEmit(this.singleVal) |
|---|
| | | this.popup = false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | leftChange(e) { |
|---|
| | | const { |
|---|
| | | before, |
|---|
| | | after |
|---|
| | | } = e.range |
|---|
| | | this.rangeChange(before, after) |
|---|
| | | const obj = { |
|---|
| | | before: e.range.before, |
|---|
| | | after: e.range.after, |
|---|
| | | data: e.range.data, |
|---|
| | | fulldate: e.fulldate |
|---|
| | | } |
|---|
| | | this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | rightChange(e) { |
|---|
| | | const { |
|---|
| | | before, |
|---|
| | | after |
|---|
| | | } = e.range |
|---|
| | | this.rangeChange(before, after) |
|---|
| | | const obj = { |
|---|
| | | before: e.range.before, |
|---|
| | | after: e.range.after, |
|---|
| | | data: e.range.data, |
|---|
| | | fulldate: e.fulldate |
|---|
| | | } |
|---|
| | | this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mobileChange(e) { |
|---|
| | | if (this.isRange) { |
|---|
| | | const { |
|---|
| | | before, |
|---|
| | | after |
|---|
| | | } = e.range |
|---|
| | | this.handleStartAndEnd(before, after, true) |
|---|
| | | if (this.hasTime) { |
|---|
| | | const { |
|---|
| | | startTime, |
|---|
| | | endTime |
|---|
| | | } = e.timeRange |
|---|
| | | this.tempRange.startTime = startTime |
|---|
| | | this.tempRange.endTime = endTime |
|---|
| | | } |
|---|
| | | this.confirmRangeChange() |
|---|
| | | |
|---|
| | | } else { |
|---|
| | | if (this.hasTime) { |
|---|
| | | this.singleVal = e.fulldate + ' ' + e.time |
|---|
| | | } else { |
|---|
| | | this.singleVal = e.fulldate |
|---|
| | | } |
|---|
| | | this.setEmit(this.singleVal) |
|---|
| | | } |
|---|
| | | this.$refs.mobile.close() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | rangeChange(before, after) { |
|---|
| | | if (!(before && after)) return |
|---|
| | | this.handleStartAndEnd(before, after, true) |
|---|
| | | if (this.hasTime) return |
|---|
| | | this.confirmRangeChange() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | confirmRangeChange() { |
|---|
| | | if (!this.tempRange.startDate && !this.tempRange.endDate) { |
|---|
| | | this.popup = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | let start, end |
|---|
| | | if (!this.hasTime) { |
|---|
| | | start = this.range.startDate = this.tempRange.startDate |
|---|
| | | end = this.range.endDate = this.tempRange.endDate |
|---|
| | | } else { |
|---|
| | | start = this.range.startDate = this.tempRange.startDate + ' ' + |
|---|
| | | (this.tempRange.startTime ? this.tempRange.startTime : '00:00:00') |
|---|
| | | end = this.range.endDate = this.tempRange.endDate + ' ' + |
|---|
| | | (this.tempRange.endTime ? this.tempRange.endTime : '00:00:00') |
|---|
| | | } |
|---|
| | | const displayRange = [start, end] |
|---|
| | | this.setEmit(displayRange) |
|---|
| | | this.popup = false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleStartAndEnd(before, after, temp = false) { |
|---|
| | | if (!(before && after)) return |
|---|
| | | const type = temp ? 'tempRange' : 'range' |
|---|
| | | if (this.dateCompare(before, after)) { |
|---|
| | | this[type].startDate = before |
|---|
| | | this[type].endDate = after |
|---|
| | | } else { |
|---|
| | | this[type].startDate = after |
|---|
| | | this[type].endDate = before |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯è¾æ¶é´å¤§å° |
|---|
| | | */ |
|---|
| | | dateCompare(startDate, endDate) { |
|---|
| | | // 计ç®æªæ¢æ¶é´ |
|---|
| | | startDate = new Date(startDate.replace('-', '/').replace('-', '/')) |
|---|
| | | // 计ç®è¯¦ç»é¡¹çæªæ¢æ¶é´ |
|---|
| | | endDate = new Date(endDate.replace('-', '/').replace('-', '/')) |
|---|
| | | if (startDate <= endDate) { |
|---|
| | | return true |
|---|
| | | } else { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯è¾æ¶é´å·® |
|---|
| | | */ |
|---|
| | | diffDate(startDate, endDate) { |
|---|
| | | // 计ç®æªæ¢æ¶é´ |
|---|
| | | startDate = new Date(startDate.replace('-', '/').replace('-', '/')) |
|---|
| | | // 计ç®è¯¦ç»é¡¹çæªæ¢æ¶é´ |
|---|
| | | endDate = new Date(endDate.replace('-', '/').replace('-', '/')) |
|---|
| | | const diff = (endDate - startDate) / (24 * 60 * 60 * 1000) |
|---|
| | | return Math.abs(diff) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clear(needEmit = true) { |
|---|
| | | if (!this.isRange) { |
|---|
| | | this.singleVal = '' |
|---|
| | | this.tempSingleDate = '' |
|---|
| | | this.time = '' |
|---|
| | | if (this.isPhone) { |
|---|
| | | this.$refs.mobile && this.$refs.mobile.clearCalender() |
|---|
| | | } else { |
|---|
| | | this.$refs.pcSingle && this.$refs.pcSingle.clearCalender() |
|---|
| | | } |
|---|
| | | if (needEmit) { |
|---|
| | | // æ ¡éªè§å |
|---|
| | | // if(this.form && this.formItem){ |
|---|
| | | // const { |
|---|
| | | // validateTrigger |
|---|
| | | // } = this.form |
|---|
| | | // if (validateTrigger === 'blur') { |
|---|
| | | // this.formItem.onFieldChange() |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | this.$emit('change', '') |
|---|
| | | this.$emit('input', '') |
|---|
| | | this.$emit('update:modelValue', '') |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.range.startDate = '' |
|---|
| | | this.range.endDate = '' |
|---|
| | | this.tempRange.startDate = '' |
|---|
| | | this.tempRange.startTime = '' |
|---|
| | | this.tempRange.endDate = '' |
|---|
| | | this.tempRange.endTime = '' |
|---|
| | | if (this.isPhone) { |
|---|
| | | this.$refs.mobile && this.$refs.mobile.clearCalender() |
|---|
| | | } else { |
|---|
| | | this.$refs.left && this.$refs.left.clearCalender() |
|---|
| | | this.$refs.right && this.$refs.right.clearCalender() |
|---|
| | | this.$refs.right && this.$refs.right.next() |
|---|
| | | } |
|---|
| | | if (needEmit) { |
|---|
| | | this.$emit('change', []) |
|---|
| | | this.$emit('input', []) |
|---|
| | | this.$emit('update:modelValue', []) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | parseDate(date) { |
|---|
| | | date = this.fixIosDateFormat(date) |
|---|
| | | const defVal = new Date(date) |
|---|
| | | const year = defVal.getFullYear() |
|---|
| | | const month = defVal.getMonth() + 1 |
|---|
| | | const day = defVal.getDate() |
|---|
| | | const hour = defVal.getHours() |
|---|
| | | const minute = defVal.getMinutes() |
|---|
| | | const second = defVal.getSeconds() |
|---|
| | | const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day) |
|---|
| | | const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this |
|---|
| | | .lessTen(second))) |
|---|
| | | return { |
|---|
| | | defDate, |
|---|
| | | defTime |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | lessTen(item) { |
|---|
| | | return item < 10 ? '0' + item : item |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //å
¼å®¹ iOSãsafari æ¥ææ ¼å¼ |
|---|
| | | fixIosDateFormat(value) { |
|---|
| | | if (typeof value === 'string') { |
|---|
| | | value = value.replace(/-/g, '/') |
|---|
| | | } |
|---|
| | | return value |
|---|
| | | }, |
|---|
| | | |
|---|
| | | leftMonthSwitch(e) { |
|---|
| | | // console.log('leftMonthSwitch è¿å:', e) |
|---|
| | | }, |
|---|
| | | rightMonthSwitch(e) { |
|---|
| | | // console.log('rightMonthSwitch è¿å:', e) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-primary: #007aff !default; |
|---|
| | | |
|---|
| | | .uni-date { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | .uni-date-x { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 10px; |
|---|
| | | border-radius: 4px; |
|---|
| | | background-color: #fff; |
|---|
| | | color: #666; |
|---|
| | | font-size: 14px; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-x--border { |
|---|
| | | box-sizing: border-box; |
|---|
| | | border-radius: 4px; |
|---|
| | | border: 1px solid #e5e5e5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-editor--x { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-editor--x .uni-date__icon-clear { |
|---|
| | | padding: 0 5px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date__x-input { |
|---|
| | | padding: 0 8px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: auto; |
|---|
| | | /* #endif */ |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | flex: 1; |
|---|
| | | line-height: 1; |
|---|
| | | font-size: 14px; |
|---|
| | | height: 35px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .t-c { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date__input { |
|---|
| | | height: 40px; |
|---|
| | | width: 100%; |
|---|
| | | line-height: 40px; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-range__input { |
|---|
| | | text-align: center; |
|---|
| | | max-width: 142px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-picker__container { |
|---|
| | | position: relative; |
|---|
| | | /* position: fixed; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | z-index: 996; |
|---|
| | | font-size: 14px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-mask { |
|---|
| | | position: fixed; |
|---|
| | | bottom: 0px; |
|---|
| | | top: 0px; |
|---|
| | | left: 0px; |
|---|
| | | right: 0px; |
|---|
| | | background-color: rgba(0, 0, 0, 0); |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | z-index: 996; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-single--x { |
|---|
| | | /* padding: 0 8px; */ |
|---|
| | | background-color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | z-index: 999; |
|---|
| | | border: 1px solid #EBEEF5; |
|---|
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-range--x { |
|---|
| | | /* padding: 0 8px; */ |
|---|
| | | background-color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | z-index: 999; |
|---|
| | | border: 1px solid #EBEEF5; |
|---|
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-editor--x__disabled { |
|---|
| | | opacity: 0.4; |
|---|
| | | cursor: default; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-editor--logo { |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | vertical-align: middle; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* æ·»å æ¶é´ */ |
|---|
| | | .popup-x-header { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | /* justify-content: space-between; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .popup-x-header--datetime { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .popup-x-body { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .popup-x-footer { |
|---|
| | | padding: 0 15px; |
|---|
| | | border-top-color: #F1F1F1; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 1px; |
|---|
| | | /* background-color: #fff; */ |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: right; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .popup-x-footer text:hover { |
|---|
| | | color: $uni-primary; |
|---|
| | | cursor: pointer; |
|---|
| | | opacity: 0.8; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .popup-x-footer .confirm { |
|---|
| | | margin-left: 20px; |
|---|
| | | color: $uni-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed { |
|---|
| | | /* background-color: #fff; */ |
|---|
| | | text-align: center; |
|---|
| | | color: #333; |
|---|
| | | border-bottom-color: #F1F1F1; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | border-bottom-width: 1px; |
|---|
| | | /* padding: 0 50px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed--time text { |
|---|
| | | /* padding: 0 20px; */ |
|---|
| | | height: 50px; |
|---|
| | | line-height: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed .uni-date-changed--time { |
|---|
| | | /* display: flex; */ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-date-changed--time-date { |
|---|
| | | color: #333; |
|---|
| | | opacity: 0.6; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mr-50 { |
|---|
| | | margin-right: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* picker å¼¹åºå±éç¨çæ示å°ä¸è§, todoï¼æ©å±è³ä¸ä¸å·¦å³æ¹åå®ä½ */ |
|---|
| | | .uni-popper__arrow, |
|---|
| | | .uni-popper__arrow::after { |
|---|
| | | position: absolute; |
|---|
| | | display: block; |
|---|
| | | width: 0; |
|---|
| | | height: 0; |
|---|
| | | border-color: transparent; |
|---|
| | | border-style: solid; |
|---|
| | | border-width: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-popper__arrow { |
|---|
| | | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
|---|
| | | top: -6px; |
|---|
| | | left: 10%; |
|---|
| | | margin-right: 3px; |
|---|
| | | border-top-width: 0; |
|---|
| | | border-bottom-color: #EBEEF5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-popper__arrow::after { |
|---|
| | | content: " "; |
|---|
| | | top: 1px; |
|---|
| | | margin-left: -6px; |
|---|
| | | border-top-width: 0; |
|---|
| | | border-bottom-color: #fff; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | class Calendar { |
|---|
| | | constructor({ |
|---|
| | | date, |
|---|
| | | selected, |
|---|
| | | startDate, |
|---|
| | | endDate, |
|---|
| | | range, |
|---|
| | | // multipleStatus |
|---|
| | | } = {}) { |
|---|
| | | // å½åæ¥æ |
|---|
| | | this.date = this.getDate(new Date()) // å½ååå
¥æ¥æ |
|---|
| | | // æç¹ä¿¡æ¯ |
|---|
| | | this.selected = selected || []; |
|---|
| | | // èå´å¼å§ |
|---|
| | | this.startDate = startDate |
|---|
| | | // èå´ç»æ |
|---|
| | | this.endDate = endDate |
|---|
| | | this.range = range |
|---|
| | | // å¤éç¶æ |
|---|
| | | this.cleanMultipleStatus() |
|---|
| | | // æ¯å¨æ¥æ |
|---|
| | | this.weeks = {} |
|---|
| | | // this._getWeek(this.date.fullDate) |
|---|
| | | // this.multipleStatus = multipleStatus |
|---|
| | | this.lastHover = false |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * 设置æ¥æ |
|---|
| | | * @param {Object} date |
|---|
| | | */ |
|---|
| | | setDate(date) { |
|---|
| | | this.selectDate = this.getDate(date) |
|---|
| | | this._getWeek(this.selectDate.fullDate) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¸
çå¤éç¶æ |
|---|
| | | */ |
|---|
| | | cleanMultipleStatus() { |
|---|
| | | this.multipleStatus = { |
|---|
| | | before: '', |
|---|
| | | after: '', |
|---|
| | | data: [] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éç½®å¼å§æ¥æ |
|---|
| | | */ |
|---|
| | | resetSatrtDate(startDate) { |
|---|
| | | // èå´å¼å§ |
|---|
| | | this.startDate = startDate |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éç½®ç»ææ¥æ |
|---|
| | | */ |
|---|
| | | resetEndDate(endDate) { |
|---|
| | | // èå´ç»æ |
|---|
| | | this.endDate = endDate |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åä»»ææ¶é´ |
|---|
| | | */ |
|---|
| | | getDate(date, AddDayCount = 0, str = 'day') { |
|---|
| | | if (!date) { |
|---|
| | | date = new Date() |
|---|
| | | } |
|---|
| | | if (typeof date !== 'object') { |
|---|
| | | date = date.replace(/-/g, '/') |
|---|
| | | } |
|---|
| | | const dd = new Date(date) |
|---|
| | | switch (str) { |
|---|
| | | case 'day': |
|---|
| | | dd.setDate(dd.getDate() + AddDayCount) // è·åAddDayCount天åçæ¥æ |
|---|
| | | break |
|---|
| | | case 'month': |
|---|
| | | if (dd.getDate() === 31) { |
|---|
| | | dd.setDate(dd.getDate() + AddDayCount) |
|---|
| | | } else { |
|---|
| | | dd.setMonth(dd.getMonth() + AddDayCount) // è·åAddDayCount天åçæ¥æ |
|---|
| | | } |
|---|
| | | break |
|---|
| | | case 'year': |
|---|
| | | dd.setFullYear(dd.getFullYear() + AddDayCount) // è·åAddDayCount天åçæ¥æ |
|---|
| | | break |
|---|
| | | } |
|---|
| | | const y = dd.getFullYear() |
|---|
| | | const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // è·åå½åæ份çæ¥æï¼ä¸è¶³10è¡¥0 |
|---|
| | | const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // è·åå½åå å·ï¼ä¸è¶³10è¡¥0 |
|---|
| | | return { |
|---|
| | | fullDate: y + '-' + m + '-' + d, |
|---|
| | | year: y, |
|---|
| | | month: m, |
|---|
| | | date: d, |
|---|
| | | day: dd.getDay() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åä¸æå©ä½å¤©æ° |
|---|
| | | */ |
|---|
| | | _getLastMonthDays(firstDay, full) { |
|---|
| | | let dateArr = [] |
|---|
| | | for (let i = firstDay; i > 0; i--) { |
|---|
| | | const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate() |
|---|
| | | dateArr.push({ |
|---|
| | | date: beforeDate, |
|---|
| | | month: full.month - 1, |
|---|
| | | disable: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return dateArr |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * è·åæ¬æå¤©æ° |
|---|
| | | */ |
|---|
| | | _currentMonthDys(dateData, full) { |
|---|
| | | let dateArr = [] |
|---|
| | | let fullDate = this.date.fullDate |
|---|
| | | for (let i = 1; i <= dateData; i++) { |
|---|
| | | let isinfo = false |
|---|
| | | let nowDate = full.year + '-' + (full.month < 10 ? |
|---|
| | | full.month : full.month) + '-' + (i < 10 ? |
|---|
| | | '0' + i : i) |
|---|
| | | // æ¯å¦ä»å¤© |
|---|
| | | let isDay = fullDate === nowDate |
|---|
| | | // è·åæç¹ä¿¡æ¯ |
|---|
| | | let info = this.selected && this.selected.find((item) => { |
|---|
| | | if (this.dateEqual(nowDate, item.date)) { |
|---|
| | | return item |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // æ¥æç¦ç¨ |
|---|
| | | let disableBefore = true |
|---|
| | | let disableAfter = true |
|---|
| | | if (this.startDate) { |
|---|
| | | // let dateCompBefore = this.dateCompare(this.startDate, fullDate) |
|---|
| | | // disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate) |
|---|
| | | disableBefore = this.dateCompare(this.startDate, nowDate) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.endDate) { |
|---|
| | | // let dateCompAfter = this.dateCompare(fullDate, this.endDate) |
|---|
| | | // disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate) |
|---|
| | | disableAfter = this.dateCompare(nowDate, this.endDate) |
|---|
| | | } |
|---|
| | | let multiples = this.multipleStatus.data |
|---|
| | | let checked = false |
|---|
| | | let multiplesStatus = -1 |
|---|
| | | if (this.range) { |
|---|
| | | if (multiples) { |
|---|
| | | multiplesStatus = multiples.findIndex((item) => { |
|---|
| | | return this.dateEqual(item, nowDate) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | if (multiplesStatus !== -1) { |
|---|
| | | checked = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let data = { |
|---|
| | | fullDate: nowDate, |
|---|
| | | year: full.year, |
|---|
| | | date: i, |
|---|
| | | multiple: this.range ? checked : false, |
|---|
| | | beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after), |
|---|
| | | afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after), |
|---|
| | | month: full.month, |
|---|
| | | disable: !(disableBefore && disableAfter), |
|---|
| | | isDay, |
|---|
| | | userChecked: false |
|---|
| | | } |
|---|
| | | if (info) { |
|---|
| | | data.extraInfo = info |
|---|
| | | } |
|---|
| | | |
|---|
| | | dateArr.push(data) |
|---|
| | | } |
|---|
| | | return dateArr |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * è·åä¸æå¤©æ° |
|---|
| | | */ |
|---|
| | | _getNextMonthDays(surplus, full) { |
|---|
| | | let dateArr = [] |
|---|
| | | for (let i = 1; i < surplus + 1; i++) { |
|---|
| | | dateArr.push({ |
|---|
| | | date: i, |
|---|
| | | month: Number(full.month) + 1, |
|---|
| | | disable: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return dateArr |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åå½åæ¥æ详æ
|
|---|
| | | * @param {Object} date |
|---|
| | | */ |
|---|
| | | getInfo(date) { |
|---|
| | | if (!date) { |
|---|
| | | date = new Date() |
|---|
| | | } |
|---|
| | | const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate) |
|---|
| | | return dateInfo |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯è¾æ¶é´å¤§å° |
|---|
| | | */ |
|---|
| | | dateCompare(startDate, endDate) { |
|---|
| | | // 计ç®æªæ¢æ¶é´ |
|---|
| | | startDate = new Date(startDate.replace('-', '/').replace('-', '/')) |
|---|
| | | // 计ç®è¯¦ç»é¡¹çæªæ¢æ¶é´ |
|---|
| | | endDate = new Date(endDate.replace('-', '/').replace('-', '/')) |
|---|
| | | if (startDate <= endDate) { |
|---|
| | | return true |
|---|
| | | } else { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯è¾æ¶é´æ¯å¦ç¸ç |
|---|
| | | */ |
|---|
| | | dateEqual(before, after) { |
|---|
| | | // 计ç®æªæ¢æ¶é´ |
|---|
| | | before = new Date(before.replace('-', '/').replace('-', '/')) |
|---|
| | | // 计ç®è¯¦ç»é¡¹çæªæ¢æ¶é´ |
|---|
| | | after = new Date(after.replace('-', '/').replace('-', '/')) |
|---|
| | | if (before.getTime() - after.getTime() === 0) { |
|---|
| | | return true |
|---|
| | | } else { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯è¾çå®èµ·å§æ¥æ |
|---|
| | | */ |
|---|
| | | |
|---|
| | | isLogicBefore(currentDay, before, after) { |
|---|
| | | let logicBefore = before |
|---|
| | | if (before && after) { |
|---|
| | | logicBefore = this.dateCompare(before, after) ? before : after |
|---|
| | | } |
|---|
| | | return this.dateEqual(logicBefore, currentDay) |
|---|
| | | } |
|---|
| | | |
|---|
| | | isLogicAfter(currentDay, before, after) { |
|---|
| | | let logicAfter = after |
|---|
| | | if (before && after) { |
|---|
| | | logicAfter = this.dateCompare(before, after) ? after : before |
|---|
| | | } |
|---|
| | | return this.dateEqual(logicAfter, currentDay) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åæ¥æèå´å
æææ¥æ |
|---|
| | | * @param {Object} begin |
|---|
| | | * @param {Object} end |
|---|
| | | */ |
|---|
| | | geDateAll(begin, end) { |
|---|
| | | var arr = [] |
|---|
| | | var ab = begin.split('-') |
|---|
| | | var ae = end.split('-') |
|---|
| | | var db = new Date() |
|---|
| | | db.setFullYear(ab[0], ab[1] - 1, ab[2]) |
|---|
| | | var de = new Date() |
|---|
| | | de.setFullYear(ae[0], ae[1] - 1, ae[2]) |
|---|
| | | var unixDb = db.getTime() - 24 * 60 * 60 * 1000 |
|---|
| | | var unixDe = de.getTime() - 24 * 60 * 60 * 1000 |
|---|
| | | for (var k = unixDb; k <= unixDe;) { |
|---|
| | | k = k + 24 * 60 * 60 * 1000 |
|---|
| | | arr.push(this.getDate(new Date(parseInt(k))).fullDate) |
|---|
| | | } |
|---|
| | | return arr |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åå¤éç¶æ |
|---|
| | | */ |
|---|
| | | setMultiple(fullDate) { |
|---|
| | | let { |
|---|
| | | before, |
|---|
| | | after |
|---|
| | | } = this.multipleStatus |
|---|
| | | if (!this.range) return |
|---|
| | | if (before && after) { |
|---|
| | | if (!this.lastHover) { |
|---|
| | | this.lastHover = true |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.multipleStatus.before = fullDate |
|---|
| | | this.multipleStatus.after = '' |
|---|
| | | this.multipleStatus.data = [] |
|---|
| | | this.multipleStatus.fulldate = '' |
|---|
| | | this.lastHover = false |
|---|
| | | } else { |
|---|
| | | if (!before) { |
|---|
| | | this.multipleStatus.before = fullDate |
|---|
| | | this.lastHover = false |
|---|
| | | } else { |
|---|
| | | this.multipleStatus.after = fullDate |
|---|
| | | if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { |
|---|
| | | this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus |
|---|
| | | .after); |
|---|
| | | } else { |
|---|
| | | this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus |
|---|
| | | .before); |
|---|
| | | } |
|---|
| | | this.lastHover = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this._getWeek(fullDate) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * é¼ æ hover æ´æ°å¤éç¶æ |
|---|
| | | */ |
|---|
| | | setHoverMultiple(fullDate) { |
|---|
| | | let { |
|---|
| | | before, |
|---|
| | | after |
|---|
| | | } = this.multipleStatus |
|---|
| | | |
|---|
| | | if (!this.range) return |
|---|
| | | if (this.lastHover) return |
|---|
| | | |
|---|
| | | if (!before) { |
|---|
| | | this.multipleStatus.before = fullDate |
|---|
| | | } else { |
|---|
| | | this.multipleStatus.after = fullDate |
|---|
| | | if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { |
|---|
| | | this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after); |
|---|
| | | } else { |
|---|
| | | this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this._getWeek(fullDate) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ´æ°é»è®¤å¼å¤éç¶æ |
|---|
| | | */ |
|---|
| | | setDefaultMultiple(before, after) { |
|---|
| | | this.multipleStatus.before = before |
|---|
| | | this.multipleStatus.after = after |
|---|
| | | if (before && after) { |
|---|
| | | if (this.dateCompare(before, after)) { |
|---|
| | | this.multipleStatus.data = this.geDateAll(before, after); |
|---|
| | | this._getWeek(after) |
|---|
| | | } else { |
|---|
| | | this.multipleStatus.data = this.geDateAll(after, before); |
|---|
| | | this._getWeek(before) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åæ¯å¨æ°æ® |
|---|
| | | * @param {Object} dateData |
|---|
| | | */ |
|---|
| | | _getWeek(dateData) { |
|---|
| | | const { |
|---|
| | | fullDate, |
|---|
| | | year, |
|---|
| | | month, |
|---|
| | | date, |
|---|
| | | day |
|---|
| | | } = this.getDate(dateData) |
|---|
| | | let firstDay = new Date(year, month - 1, 1).getDay() |
|---|
| | | let currentDay = new Date(year, month, 0).getDate() |
|---|
| | | let dates = { |
|---|
| | | lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // ä¸ä¸ªææ«å°¾å 天 |
|---|
| | | currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // æ¬æå¤©æ° |
|---|
| | | nextMonthDays: [], // ä¸ä¸ªæå¼å§å 天 |
|---|
| | | weeks: [] |
|---|
| | | } |
|---|
| | | let canlender = [] |
|---|
| | | const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length) |
|---|
| | | dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData)) |
|---|
| | | canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays) |
|---|
| | | let weeks = {} |
|---|
| | | // æ¼æ¥æ°ç» ä¸ä¸ªæå¼å§å 天 + æ¬æ天æ°+ ä¸ä¸ªæå¼å§å 天 |
|---|
| | | for (let i = 0; i < canlender.length; i++) { |
|---|
| | | if (i % 7 === 0) { |
|---|
| | | weeks[parseInt(i / 7)] = new Array(7) |
|---|
| | | } |
|---|
| | | weeks[parseInt(i / 7)][i % 7] = canlender[i] |
|---|
| | | } |
|---|
| | | this.canlender = canlender |
|---|
| | | this.weeks = weeks |
|---|
| | | } |
|---|
| | | |
|---|
| | | //éææ¹æ³ |
|---|
| | | // static init(date) { |
|---|
| | | // if (!this.instance) { |
|---|
| | | // this.instance = new Calendar(date); |
|---|
| | | // } |
|---|
| | | // return this.instance; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | export default Calendar |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-datetime-picker", |
|---|
| | | "displayName": "uni-datetime-picker æ¥æéæ©å¨", |
|---|
| | | "version": "2.2.11", |
|---|
| | | "description": "uni-datetime-picker æ¥ææ¶é´éæ©å¨ï¼æ¯ææ¥åï¼æ¯æèå´éæ©", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-datetime-picker", |
|---|
| | | "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", |
|---|
| | | "uni-icons" |
|---|
| | | ], |
|---|
| | | "encrypt": [], |
|---|
| | | "platforms": { |
|---|
| | | "cloud": { |
|---|
| | | "tcb": "y", |
|---|
| | | "aliyun": "y" |
|---|
| | | }, |
|---|
| | | "client": { |
|---|
| | | "App": { |
|---|
| | | "app-vue": "y", |
|---|
| | | "app-nvue": "n" |
|---|
| | | }, |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | > `éè¦éç¥ï¼ç»ä»¶å级æ´æ° 2.0.0 åï¼æ¯ææ¥æ+æ¶é´èå´éæ©ï¼ç»ä»¶ ui å°ä½¿ç¨æ¥åéæ©æ¥æï¼ui ååè¾å¤§ï¼åæ¶æ¯æ PC å 移å¨ç«¯ãæ¤çæ¬ä¸ååå
¼å®¹ï¼ä¸åæ¯æåç¬çæ¶é´éæ©ï¼type=timeï¼åç¸å
³ç hide-second å±æ§ï¼æ¶é´éå¯ä½¿ç¨å
ç½®ç»ä»¶ pickerï¼ãè¥ä»é使ç¨æ§çæ¬ï¼å¯å¨æ件å¸åºä¸è½½*éuni_modulesçæ¬*ï¼æ§çæ¬å°ä¸åç»´æ¤` |
|---|
| | | |
|---|
| | | ## DatetimePicker æ¶é´éæ©å¨ |
|---|
| | | |
|---|
| | | > **ç»ä»¶åï¼uni-datetime-picker** |
|---|
| | | > 代ç åï¼ `uDatetimePicker` |
|---|
| | | |
|---|
| | | |
|---|
| | | 该ç»ä»¶çä¼å¿æ¯ï¼æ¯æ**æ¶é´æ³**è¾å
¥åè¾åºï¼èµ·å§æ¶é´ãç»æ¢æ¶é´ä¹æ¯ææ¶é´æ³ï¼ï¼å¯**åæ¶éæ©**æ¥æåæ¶é´ã |
|---|
| | | |
|---|
| | | è¥åªæ¯éè¦åç¬éæ©æ¥æåæ¶é´ï¼ä¸éè¦æ¶é´æ³è¾å
¥åè¾åºï¼å¯ä½¿ç¨åçç picker ç»ä»¶ã |
|---|
| | | |
|---|
| | | **_ç¹å» picker é»è®¤å¼è§åï¼_** |
|---|
| | | |
|---|
| | | - è¥è®¾ç½®åå§å¼ value, ä¼æ¾ç¤ºå¨ picker æ¾ç¤ºæ¡ä¸ |
|---|
| | | - è¥æ åå§å¼ valueï¼ååå§å¼ value 为å½åæ¬å°æ¶é´ Date.now()ï¼ ä½ä¸ä¼æ¾ç¤ºå¨ picker æ¾ç¤ºæ¡ä¸ |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.2.1ï¼2021-11-22ï¼ |
|---|
| | | - ä¿®å¤ vue3ä¸ä¸ªå«scssåéæ æ³æ¾å°çé®é¢ |
|---|
| | | ## 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-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer) |
|---|
| | | ## 1.1.1ï¼2021-07-30ï¼ |
|---|
| | | - ä¼å vue3ä¸äºä»¶è¦åçé®é¢ |
|---|
| | | ## 1.1.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.0.7ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.0.6ï¼2021-02-04ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // #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 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear"> |
|---|
| | | <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" /> |
|---|
| | | <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef H5 --> |
|---|
| | | <keypress @esc="close('mask')" /> |
|---|
| | | <!-- #endif --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef H5 |
|---|
| | | import keypress from './keypress.js' |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * Drawer æ½å± |
|---|
| | | * @description æ½å±ä¾§æ»èå |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=26 |
|---|
| | | * @property {Boolean} mask = [true | false] æ¯å¦æ¾ç¤ºé®ç½© |
|---|
| | | * @property {Boolean} maskClick = [true | false] ç¹å»é®ç½©æ¯å¦å
³é |
|---|
| | | * @property {Boolean} mode = [left | right] Drawer æ»åºä½ç½® |
|---|
| | | * @value left ä»å·¦ä¾§æ»åº |
|---|
| | | * @value right ä»å³ä¾§ä¾§æ»åº |
|---|
| | | * @property {Number} width æ½å±ç宽度 ï¼ä»
vue 页é¢çæ |
|---|
| | | * @event {Function} close ç»ä»¶å
³éæ¶è§¦åäºä»¶ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniDrawer', |
|---|
| | | components: { |
|---|
| | | // #ifdef H5 |
|---|
| | | keypress |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | emits:['change'], |
|---|
| | | props: { |
|---|
| | | /** |
|---|
| | | * æ¾ç¤ºæ¨¡å¼ï¼å·¦ãå³ï¼ï¼åªå¨åå§åçæ |
|---|
| | | */ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * èå±æ¾ç¤ºç¶æ |
|---|
| | | */ |
|---|
| | | mask: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * é®ç½©æ¯å¦å¯ç¹å»å
³é |
|---|
| | | */ |
|---|
| | | maskClick:{ |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * æ½å±å®½åº¦ |
|---|
| | | */ |
|---|
| | | width: { |
|---|
| | | type: Number, |
|---|
| | | default: 220 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | visibleSync: false, |
|---|
| | | showDrawer: false, |
|---|
| | | rightMode: false, |
|---|
| | | watchTimer: null, |
|---|
| | | drawerWidth: 220 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.drawerWidth = this.width |
|---|
| | | // #endif |
|---|
| | | this.rightMode = this.mode === 'right' |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | clear(){}, |
|---|
| | | close(type) { |
|---|
| | | // fixed by mehaotian æ½å±å°æªå®å
¨å
³éæé®ç½©ç¦æ¢ç¹å»æ¶ä¸è§¦å以ä¸é»è¾ |
|---|
| | | if((type === 'mask' && !this.maskClick) || !this.visibleSync) return |
|---|
| | | this._change('showDrawer', 'visibleSync', false) |
|---|
| | | }, |
|---|
| | | open() { |
|---|
| | | // fixed by mehaotian å¤çéå¤ç¹å»æå¼çäºä»¶ |
|---|
| | | if(this.visibleSync) return |
|---|
| | | this._change('visibleSync', 'showDrawer', true) |
|---|
| | | }, |
|---|
| | | _change(param1, param2, status) { |
|---|
| | | this[param1] = status |
|---|
| | | if (this.watchTimer) { |
|---|
| | | clearTimeout(this.watchTimer) |
|---|
| | | } |
|---|
| | | this.watchTimer = setTimeout(() => { |
|---|
| | | this[param2] = status |
|---|
| | | this.$emit('change',status) |
|---|
| | | }, status ? 50 : 300) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | $uni-mask: rgba($color: #000000, $alpha: 0.4) ; |
|---|
| | | // æ½å±å®½åº¦ |
|---|
| | | $drawer-width: 220px; |
|---|
| | | |
|---|
| | | .uni-drawer { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | z-index: 999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-drawer__content { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | width: $drawer-width; |
|---|
| | | bottom: 0; |
|---|
| | | background-color: $uni-bg-color; |
|---|
| | | transition: transform 0.3s ease; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-drawer--left { |
|---|
| | | left: 0; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | transform: translateX(-$drawer-width); |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | transform: translateX(-100%); |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-drawer--right { |
|---|
| | | right: 0; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | transform: translateX($drawer-width); |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | transform: translateX(100%); |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-drawer__content--visible { |
|---|
| | | transform: translateX(0px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .uni-drawer__mask { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | opacity: 0; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | bottom: 0; |
|---|
| | | right: 0; |
|---|
| | | background-color: $uni-mask; |
|---|
| | | transition: opacity 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-drawer__mask--visible { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-drawer", |
|---|
| | | "displayName": "uni-drawer æ½å±", |
|---|
| | | "version": "1.2.1", |
|---|
| | | "description": "æ½å±å¼å¯¼èªï¼ç¨äºå±ç¤ºä¾§æ»èåï¼ä¾§æ»å¯¼èªã", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "drawer", |
|---|
| | | "æ½å±", |
|---|
| | | "侧æ»å¯¼èª" |
|---|
| | | ], |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## Drawer æ½å± |
|---|
| | | > **ç»ä»¶åï¼uni-drawer** |
|---|
| | | > 代ç åï¼ `uDrawer` |
|---|
| | | |
|---|
| | | æ½å±ä¾§æ»èåã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-drawer) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.1.0ï¼2022-06-30ï¼ |
|---|
| | | |
|---|
| | | - æ°å¢ å¨ uni-forms 1.4.0 ä¸ä½¿ç¨å¯ä»¥å¨ blur æ¶æ ¡éªå
容 |
|---|
| | | - æ°å¢ clear äºä»¶ï¼ç¹å»å³ä¾§åå·å¾æ 触å |
|---|
| | | - æ°å¢ change äºä»¶ ï¼ä»
å¨è¾å
¥æ¡å¤±å»ç¦ç¹æç¨æ·æä¸å车æ¶è§¦å |
|---|
| | | - ä¼å ç»ä»¶æ ·å¼ï¼ç»ä»¶è·åç¦ç¹æ¶é«äº®æ¾ç¤ºï¼å¾æ é¢è²è°æ´ç |
|---|
| | | - |
|---|
| | | |
|---|
| | | ## 1.0.5ï¼2022-06-07ï¼ |
|---|
| | | |
|---|
| | | - ä¼å clearable æ¾ç¤ºçç¥ |
|---|
| | | |
|---|
| | | ## 1.0.4ï¼2022-06-07ï¼ |
|---|
| | | |
|---|
| | | - ä¼å clearable æ¾ç¤ºçç¥ |
|---|
| | | |
|---|
| | | ## 1.0.3ï¼2022-05-20ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ å
³éå¾æ æäºæ
åµä¸æ æ³åæ¶ç bug |
|---|
| | | |
|---|
| | | ## 1.0.2ï¼2022-04-12ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ é»è®¤å¼ä¸çæç bug |
|---|
| | | |
|---|
| | | ## 1.0.1ï¼2022-04-02ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ value ä¸è½ä¸º 0 ç bug |
|---|
| | | |
|---|
| | | ## 1.0.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-easyinput](https://uniapp.dcloud.io/component/uniui/uni-easyinput) |
|---|
| | | |
|---|
| | | ## 0.1.4ï¼2021-08-20ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ å¨ uni-forms çå¨æ表åä¸é»è®¤å¼æ ¡éªä¸éè¿ç bug |
|---|
| | | |
|---|
| | | ## 0.1.3ï¼2021-08-11ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ å¨ uni-forms ä¸é置表åï¼é误信æ¯æ æ³æ¸
é¤çé®é¢ |
|---|
| | | |
|---|
| | | ## 0.1.2ï¼2021-07-30ï¼ |
|---|
| | | |
|---|
| | | - ä¼å vue3 ä¸äºä»¶è¦åçé®é¢ |
|---|
| | | |
|---|
| | | ## 0.1.1 |
|---|
| | | |
|---|
| | | - ä¼å errorMessage å±æ§æ¯æ Boolean ç±»å |
|---|
| | | |
|---|
| | | ## 0.1.0ï¼2021-07-13ï¼ |
|---|
| | | |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建 vue3 项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | |
|---|
| | | ## 0.0.16ï¼2021-06-29ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ confirmType å±æ§ï¼ä»
type="text" çæï¼å¯¼è´å¤è¡ææ¬æ¡æ æ³æ¢è¡ç bug |
|---|
| | | |
|---|
| | | ## 0.0.15ï¼2021-06-21ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ passwordIcon å±æ§æ¼åé误ç bug |
|---|
| | | |
|---|
| | | ## 0.0.14ï¼2021-06-18ï¼ |
|---|
| | | |
|---|
| | | - æ°å¢ passwordIcon å±æ§ï¼å½ type=password æ¶æ¯å¦æ¾ç¤ºå°ç¼çå¾æ |
|---|
| | | - ä¿®å¤ confirmType å±æ§ä¸çæçé®é¢ |
|---|
| | | |
|---|
| | | ## 0.0.13ï¼2021-06-04ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ disabled ç¶æå¯æ¸
åºå
容ç bug |
|---|
| | | |
|---|
| | | ## 0.0.12ï¼2021-05-12ï¼ |
|---|
| | | |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | |
|---|
| | | ## 0.0.11ï¼2021-05-07ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ input-border å±æ§ä¸çæçé®é¢ |
|---|
| | | |
|---|
| | | ## 0.0.10ï¼2021-04-30ï¼ |
|---|
| | | |
|---|
| | | - ä¿®å¤ ios é®æ¡æåãæ¾ç¤ºä¸åçé®é¢ |
|---|
| | | |
|---|
| | | ## 0.0.9ï¼2021-02-05ï¼ |
|---|
| | | |
|---|
| | | - è°æ´ä¸º uni_modules ç®å½è§è |
|---|
| | | - ä¼å å
¼å®¹ nvue é¡µé¢ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * @desc å½æ°é²æ |
|---|
| | | * @param func ç®æ å½æ° |
|---|
| | | * @param wait 延è¿æ§è¡æ¯«ç§æ° |
|---|
| | | * @param immediate true - ç«å³æ§è¡ï¼ false - 延è¿æ§è¡ |
|---|
| | | */ |
|---|
| | | export const debounce = function(func, wait = 1000, immediate = true) { |
|---|
| | | let timer; |
|---|
| | | console.log(1); |
|---|
| | | return function() { |
|---|
| | | console.log(123); |
|---|
| | | let context = this, |
|---|
| | | args = arguments; |
|---|
| | | if (timer) clearTimeout(timer); |
|---|
| | | if (immediate) { |
|---|
| | | let callNow = !timer; |
|---|
| | | timer = setTimeout(() => { |
|---|
| | | timer = null; |
|---|
| | | }, wait); |
|---|
| | | if (callNow) func.apply(context, args); |
|---|
| | | } else { |
|---|
| | | timer = setTimeout(() => { |
|---|
| | | func.apply(context, args); |
|---|
| | | }, wait) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * @desc å½æ°èæµ |
|---|
| | | * @param func å½æ° |
|---|
| | | * @param wait 延è¿æ§è¡æ¯«ç§æ° |
|---|
| | | * @param type 1 使ç¨è¡¨æ¶é´æ³ï¼å¨æ¶é´æ®µå¼å§çæ¶å触å 2 使ç¨è¡¨å®æ¶å¨ï¼å¨æ¶é´æ®µç»æçæ¶å触å |
|---|
| | | */ |
|---|
| | | export const throttle = (func, wait = 1000, type = 1) => { |
|---|
| | | let previous = 0; |
|---|
| | | let timeout; |
|---|
| | | return function() { |
|---|
| | | let context = this; |
|---|
| | | let args = arguments; |
|---|
| | | if (type === 1) { |
|---|
| | | let now = Date.now(); |
|---|
| | | |
|---|
| | | if (now - previous > wait) { |
|---|
| | | func.apply(context, args); |
|---|
| | | previous = now; |
|---|
| | | } |
|---|
| | | } else if (type === 2) { |
|---|
| | | if (!timeout) { |
|---|
| | | timeout = setTimeout(() => { |
|---|
| | | timeout = null; |
|---|
| | | func.apply(context, args) |
|---|
| | | }, wait) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="uni-easyinput" |
|---|
| | | :class="{ 'uni-easyinput-error': msg }" |
|---|
| | | :style="boxStyle" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="uni-easyinput__content" |
|---|
| | | :class="inputContentClass" |
|---|
| | | :style="inputContentStyle" |
|---|
| | | > |
|---|
| | | <slot name="prefixIcon"> |
|---|
| | | <uni-icons |
|---|
| | | v-if="prefixIcon" |
|---|
| | | class="content-clear-icon" |
|---|
| | | :type="prefixIcon" |
|---|
| | | color="#c0c4cc" |
|---|
| | | @click="onClickIcon('prefix')" |
|---|
| | | size="22" |
|---|
| | | ></uni-icons> |
|---|
| | | </slot> |
|---|
| | | <textarea |
|---|
| | | v-if="type === 'textarea'" |
|---|
| | | class="uni-easyinput__content-textarea" |
|---|
| | | :class="{ 'input-padding': inputBorder }" |
|---|
| | | :name="name" |
|---|
| | | :value="val" |
|---|
| | | :placeholder="placeholder" |
|---|
| | | :placeholderStyle="placeholderStyle" |
|---|
| | | :disabled="disabled" |
|---|
| | | placeholder-class="uni-easyinput__placeholder-class" |
|---|
| | | :maxlength="inputMaxlength" |
|---|
| | | :focus="focused" |
|---|
| | | :autoHeight="autoHeight" |
|---|
| | | @input="onInput" |
|---|
| | | @blur="_Blur" |
|---|
| | | @focus="_Focus" |
|---|
| | | @confirm="onConfirm" |
|---|
| | | ></textarea> |
|---|
| | | <input |
|---|
| | | v-else |
|---|
| | | :type="type === 'password' ? 'text' : type" |
|---|
| | | class="uni-easyinput__content-input" |
|---|
| | | :style="inputStyle" |
|---|
| | | :name="name" |
|---|
| | | :value="val" |
|---|
| | | :password="!showPassword && type === 'password'" |
|---|
| | | :placeholder="placeholder" |
|---|
| | | :placeholderStyle="placeholderStyle" |
|---|
| | | placeholder-class="uni-easyinput__placeholder-class" |
|---|
| | | :disabled="disabled" |
|---|
| | | :maxlength="inputMaxlength" |
|---|
| | | :focus="focused" |
|---|
| | | :confirmType="confirmType" |
|---|
| | | @focus="_Focus" |
|---|
| | | @blur="_Blur" |
|---|
| | | @input="onInput" |
|---|
| | | @confirm="onConfirm" |
|---|
| | | /> |
|---|
| | | <template v-if="type === 'password' && passwordIcon"> |
|---|
| | | <!-- å¼å¯å¯ç æ¶æ¾ç¤ºå°ç¼ç --> |
|---|
| | | <uni-icons |
|---|
| | | v-if="isVal" |
|---|
| | | class="content-clear-icon" |
|---|
| | | :class="{ 'is-textarea-icon': type === 'textarea' }" |
|---|
| | | :type="showPassword ? 'eye-slash-filled' : 'eye-filled'" |
|---|
| | | :size="22" |
|---|
| | | :color="focusShow ? primaryColor : '#c0c4cc'" |
|---|
| | | @click="onEyes" |
|---|
| | | > |
|---|
| | | </uni-icons> |
|---|
| | | </template> |
|---|
| | | <template v-else-if="suffixIcon || $slots.suffixIcon"> |
|---|
| | | <slot name="suffixIcon"> |
|---|
| | | <uni-icons |
|---|
| | | v-if="suffixIcon" |
|---|
| | | class="content-clear-icon" |
|---|
| | | :type="suffixIcon" |
|---|
| | | color="#c0c4cc" |
|---|
| | | @click="onClickIcon('suffix')" |
|---|
| | | size="22" |
|---|
| | | ></uni-icons> |
|---|
| | | </slot> |
|---|
| | | </template> |
|---|
| | | <template v-else> |
|---|
| | | <uni-icons |
|---|
| | | v-if="clearable && isVal && !disabled && type !== 'textarea'" |
|---|
| | | class="content-clear-icon" |
|---|
| | | :class="{ 'is-textarea-icon': type === 'textarea' }" |
|---|
| | | type="clear" |
|---|
| | | :size="clearSize" |
|---|
| | | :color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" |
|---|
| | | @click="onClear" |
|---|
| | | ></uni-icons> |
|---|
| | | </template> |
|---|
| | | <slot name="right"></slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * Easyinput è¾å
¥æ¡ |
|---|
| | | * @description æ¤ç»ä»¶å¯ä»¥å®ç°è¡¨åçè¾å
¥ä¸æ ¡éªï¼å
æ¬ "text" å "textarea" ç±»åã |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=3455 |
|---|
| | | * @property {String} value è¾å
¥å
容 |
|---|
| | | * @property {String } type è¾å
¥æ¡çç±»åï¼é»è®¤textï¼ password/text/textarea/.. |
|---|
| | | * @value text ææ¬è¾å
¥é®ç |
|---|
| | | * @value textarea å¤è¡ææ¬è¾å
¥é®ç |
|---|
| | | * @value password å¯ç è¾å
¥é®ç |
|---|
| | | * @value number æ°åè¾å
¥é®çï¼æ³¨æiOSä¸app-vueå¼¹åºçæ°åé®ç并é9å®«æ ¼æ¹å¼ |
|---|
| | | * @value idcard 身份è¯è¾å
¥é®çï¼ä¿¡ãæ¯ä»å®ãç¾åº¦ãQQå°ç¨åº |
|---|
| | | * @value digit 带å°æ°ç¹çæ°åé®ç ï¼Appçnvue页é¢ã微信ãæ¯ä»å®ãç¾åº¦ã头æ¡ãQQå°ç¨åºæ¯æ |
|---|
| | | * @property {Boolean} clearable æ¯å¦æ¾ç¤ºå³ä¾§æ¸
空å
容çå¾æ æ§ä»¶ï¼ç¹å»å¯æ¸
空è¾å
¥æ¡å
容ï¼é»è®¤trueï¼ |
|---|
| | | * @property {Boolean} autoHeight æ¯å¦èªå¨å¢é«è¾å
¥åºåï¼type为textareaæ¶ææï¼é»è®¤trueï¼ |
|---|
| | | * @property {String } placeholder è¾å
¥æ¡çæ示æå |
|---|
| | | * @property {String } placeholderStyle placeholderçæ ·å¼(å
èæ ·å¼ï¼å符串)ï¼å¦"color: #ddd" |
|---|
| | | * @property {Boolean} focus æ¯å¦èªå¨è·å¾ç¦ç¹ï¼é»è®¤falseï¼ |
|---|
| | | * @property {Boolean} disabled æ¯å¦ç¦ç¨ï¼é»è®¤falseï¼ |
|---|
| | | * @property {Number } maxlength æ大è¾å
¥é¿åº¦ï¼è®¾ç½®ä¸º -1 çæ¶åä¸éå¶æ大é¿åº¦ï¼é»è®¤140ï¼ |
|---|
| | | * @property {String } confirmType 设置é®çå³ä¸è§æé®çæåï¼ä»
å¨type="text"æ¶çæï¼é»è®¤doneï¼ |
|---|
| | | * @property {Number } clearSize æ¸
é¤å¾æ ç大å°ï¼åä½pxï¼é»è®¤15ï¼ |
|---|
| | | * @property {String} prefixIcon è¾å
¥æ¡å¤´é¨å¾æ |
|---|
| | | * @property {String} suffixIcon è¾å
¥æ¡å°¾é¨å¾æ |
|---|
| | | * @property {String} primaryColor 设置主é¢è²ï¼é»è®¤#2979ffï¼ |
|---|
| | | * @property {Boolean} trim æ¯å¦èªå¨å»é¤ä¸¤ç«¯çç©ºæ ¼ |
|---|
| | | * @value both å»é¤ä¸¤ç«¯ç©ºæ ¼ |
|---|
| | | * @value left å»é¤å·¦ä¾§ç©ºæ ¼ |
|---|
| | | * @value right å»é¤å³ä¾§ç©ºæ ¼ |
|---|
| | | * @value start å»é¤å·¦ä¾§ç©ºæ ¼ |
|---|
| | | * @value end å»é¤å³ä¾§ç©ºæ ¼ |
|---|
| | | * @value all å»é¤å
¨é¨ç©ºæ ¼ |
|---|
| | | * @value none ä¸å»é¤ç©ºæ ¼ |
|---|
| | | * @property {Boolean} inputBorder æ¯å¦æ¾ç¤ºinputè¾å
¥æ¡çè¾¹æ¡ï¼é»è®¤trueï¼ |
|---|
| | | * @property {Boolean} passwordIcon type=passwordæ¶æ¯å¦æ¾ç¤ºå°ç¼çå¾æ |
|---|
| | | * @property {Object} styles èªå®ä¹é¢è² |
|---|
| | | * @event {Function} input è¾å
¥æ¡å
容åçååæ¶è§¦å |
|---|
| | | * @event {Function} focus è¾å
¥æ¡è·å¾ç¦ç¹æ¶è§¦å |
|---|
| | | * @event {Function} blur è¾å
¥æ¡å¤±å»ç¦ç¹æ¶è§¦å |
|---|
| | | * @event {Function} confirm ç¹å»å®ææé®æ¶è§¦å |
|---|
| | | * @event {Function} iconClick ç¹å»å¾æ æ¶è§¦å |
|---|
| | | * @slot prefixIcon è¾å
¥æ¡å¤´é¨æ槽 |
|---|
| | | * @slot suffixIcon è¾å
¥æ¡å°¾é¨æ槽 |
|---|
| | | * @example <uni-easyinput v-model="mobile"></uni-easyinput> |
|---|
| | | */ |
|---|
| | | function obj2strClass(obj) { |
|---|
| | | let classess = ""; |
|---|
| | | for (let key in obj) { |
|---|
| | | const val = obj[key]; |
|---|
| | | if (val) { |
|---|
| | | classess += `${key} `; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return classess; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function obj2strStyle(obj) { |
|---|
| | | let style = ""; |
|---|
| | | for (let key in obj) { |
|---|
| | | const val = obj[key]; |
|---|
| | | style += `${key}:${val};`; |
|---|
| | | } |
|---|
| | | return style; |
|---|
| | | } |
|---|
| | | export default { |
|---|
| | | name: "uni-easyinput", |
|---|
| | | emits: [ |
|---|
| | | "click", |
|---|
| | | "iconClick", |
|---|
| | | "update:modelValue", |
|---|
| | | "input", |
|---|
| | | "focus", |
|---|
| | | "blur", |
|---|
| | | "confirm", |
|---|
| | | "clear", |
|---|
| | | "eyes", |
|---|
| | | "change", |
|---|
| | | ], |
|---|
| | | model: { |
|---|
| | | prop: "modelValue", |
|---|
| | | event: "update:modelValue", |
|---|
| | | }, |
|---|
| | | options: { |
|---|
| | | virtualHost: true, |
|---|
| | | }, |
|---|
| | | inject: { |
|---|
| | | form: { |
|---|
| | | from: "uniForm", |
|---|
| | | default: null, |
|---|
| | | }, |
|---|
| | | formItem: { |
|---|
| | | from: "uniFormItem", |
|---|
| | | default: null, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | name: String, |
|---|
| | | value: [Number, String], |
|---|
| | | modelValue: [Number, String], |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: "text", |
|---|
| | | }, |
|---|
| | | clearable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true, |
|---|
| | | }, |
|---|
| | | autoHeight: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | placeholder: { |
|---|
| | | type: String, |
|---|
| | | default: " ", |
|---|
| | | }, |
|---|
| | | placeholderStyle: String, |
|---|
| | | focus: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | maxlength: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 140, |
|---|
| | | }, |
|---|
| | | confirmType: { |
|---|
| | | type: String, |
|---|
| | | default: "done", |
|---|
| | | }, |
|---|
| | | clearSize: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 24, |
|---|
| | | }, |
|---|
| | | inputBorder: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true, |
|---|
| | | }, |
|---|
| | | prefixIcon: { |
|---|
| | | type: String, |
|---|
| | | default: "", |
|---|
| | | }, |
|---|
| | | suffixIcon: { |
|---|
| | | type: String, |
|---|
| | | default: "", |
|---|
| | | }, |
|---|
| | | trim: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: true, |
|---|
| | | }, |
|---|
| | | passwordIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true, |
|---|
| | | }, |
|---|
| | | primaryColor: { |
|---|
| | | type: String, |
|---|
| | | default: "#2979ff", |
|---|
| | | }, |
|---|
| | | styles: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return { |
|---|
| | | color: "#333", |
|---|
| | | disableColor: "#F7F6F6", |
|---|
| | | borderColor: "#e5e5e5", |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | errorMessage: { |
|---|
| | | type: [String, Boolean], |
|---|
| | | default: "", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | focused: false, |
|---|
| | | val: "", |
|---|
| | | showMsg: "", |
|---|
| | | border: false, |
|---|
| | | isFirstBorder: false, |
|---|
| | | showClearIcon: false, |
|---|
| | | showPassword: false, |
|---|
| | | focusShow: false, |
|---|
| | | localMsg: "", |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // è¾å
¥æ¡å
æ¯å¦æå¼ |
|---|
| | | isVal() { |
|---|
| | | const val = this.val; |
|---|
| | | // fixed by mehaotian å¤çå¼ä¸º0çæ
åµï¼å符串0ä¸å¨å¤çèå´ |
|---|
| | | if (val || val === 0) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | return false; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | msg() { |
|---|
| | | // console.log('computed', this.form, this.formItem); |
|---|
| | | // if (this.form) { |
|---|
| | | // return this.errorMessage || this.formItem.errMsg; |
|---|
| | | // } |
|---|
| | | // TODO å¤çå¤´æ¡ formItem ä¸ errMsg ä¸æ´æ°çé®é¢ |
|---|
| | | return this.localMsg || this.errorMessage; |
|---|
| | | }, |
|---|
| | | // å 为uniappçinputç»ä»¶çmaxlengthç»ä»¶å¿
é¡»è¦æ°å¼ï¼è¿é转为æ°å¼ï¼ç¨æ·å¯ä»¥ä¼ å
¥å符串æ°å¼ |
|---|
| | | inputMaxlength() { |
|---|
| | | return Number(this.maxlength); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å¤çå¤å±æ ·å¼çstyle |
|---|
| | | boxStyle() { |
|---|
| | | return `color:${ |
|---|
| | | this.inputBorder && this.msg ? "#e43d33" : this.styles.color |
|---|
| | | };`; |
|---|
| | | }, |
|---|
| | | // input å
容çç±»åæ ·å¼å¤ç |
|---|
| | | inputContentClass() { |
|---|
| | | return obj2strClass({ |
|---|
| | | "is-input-border": this.inputBorder, |
|---|
| | | "is-input-error-border": this.inputBorder && this.msg, |
|---|
| | | "is-textarea": this.type === "textarea", |
|---|
| | | "is-disabled": this.disabled, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | inputContentStyle() { |
|---|
| | | const focusColor = this.focusShow |
|---|
| | | ? this.primaryColor |
|---|
| | | : this.styles.borderColor; |
|---|
| | | const borderColor = this.inputBorder && this.msg ? "#dd524d" : focusColor; |
|---|
| | | return obj2strStyle({ |
|---|
| | | "border-color": borderColor || "#e5e5e5", |
|---|
| | | "background-color": this.disabled |
|---|
| | | ? this.styles.disableColor |
|---|
| | | : this.styles.backgroundColor, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // inputå³ä¾§æ ·å¼ |
|---|
| | | inputStyle() { |
|---|
| | | const paddingRight = |
|---|
| | | this.type === "password" || this.clearable || this.prefixIcon |
|---|
| | | ? "" |
|---|
| | | : "10px"; |
|---|
| | | return obj2strStyle({ |
|---|
| | | "padding-right": paddingRight, |
|---|
| | | "padding-left": this.prefixIcon ? "" : "10px", |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | value(newVal) { |
|---|
| | | this.val = newVal; |
|---|
| | | }, |
|---|
| | | modelValue(newVal) { |
|---|
| | | this.val = newVal; |
|---|
| | | }, |
|---|
| | | focus(newVal) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.focused = this.focus; |
|---|
| | | this.focusShow = this.focus; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.init(); |
|---|
| | | // TODO å¤ç头æ¡vue3 computed ä¸çå¬ inject æ´æ¹çé®é¢ï¼formItem.errMsgï¼ |
|---|
| | | if (this.form && this.formItem) { |
|---|
| | | this.$watch("formItem.errMsg", (newVal) => { |
|---|
| | | this.localMsg = newVal; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.focused = this.focus; |
|---|
| | | this.focusShow = this.focus; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * åå§ååéå¼ |
|---|
| | | */ |
|---|
| | | init() { |
|---|
| | | if (this.value || this.value === 0) { |
|---|
| | | this.val = this.value; |
|---|
| | | } else if (this.modelValue || this.modelValue === 0) { |
|---|
| | | this.val = this.modelValue; |
|---|
| | | } else { |
|---|
| | | this.val = null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ç¹å»å¾æ æ¶è§¦å |
|---|
| | | * @param {Object} type |
|---|
| | | */ |
|---|
| | | onClickIcon(type) { |
|---|
| | | this.$emit("iconClick", type); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¾ç¤ºéèå
容ï¼å¯ç æ¡æ¶çæ |
|---|
| | | */ |
|---|
| | | onEyes() { |
|---|
| | | this.showPassword = !this.showPassword; |
|---|
| | | this.$emit("eyes", this.showPassword); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è¾å
¥æ¶è§¦å |
|---|
| | | * @param {Object} event |
|---|
| | | */ |
|---|
| | | onInput(event) { |
|---|
| | | let value = event.detail.value; |
|---|
| | | // å¤ææ¯å¦å»é¤ç©ºæ ¼ |
|---|
| | | if (this.trim) { |
|---|
| | | if (typeof this.trim === "boolean" && this.trim) { |
|---|
| | | value = this.trimStr(value); |
|---|
| | | } |
|---|
| | | if (typeof this.trim === "string") { |
|---|
| | | value = this.trimStr(value, this.trim); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.errMsg) this.errMsg = ""; |
|---|
| | | this.val = value; |
|---|
| | | // TODO å
¼å®¹ vue2 |
|---|
| | | this.$emit("input", value); |
|---|
| | | // TODOãå
¼å®¹ãvue3 |
|---|
| | | this.$emit("update:modelValue", value); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * è·åç¦ç¹æ¶è§¦å |
|---|
| | | * @param {Object} event |
|---|
| | | */ |
|---|
| | | onFocus() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.focused = true; |
|---|
| | | }); |
|---|
| | | this.$emit("focus", null); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _Focus(event) { |
|---|
| | | this.focusShow = true; |
|---|
| | | this.$emit("focus", event); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * 失å»ç¦ç¹æ¶è§¦å |
|---|
| | | * @param {Object} event |
|---|
| | | */ |
|---|
| | | onBlur() { |
|---|
| | | this.focused = false; |
|---|
| | | this.$emit("focus", null); |
|---|
| | | }, |
|---|
| | | _Blur(event) { |
|---|
| | | let value = event.detail.value; |
|---|
| | | this.focusShow = false; |
|---|
| | | this.$emit("blur", event); |
|---|
| | | // æ ¹æ®ç±»åè¿åå¼ï¼å¨eventä¸è·åçå¼ç论ä¸è®²é½æ¯string |
|---|
| | | this.$emit("change", this.val); |
|---|
| | | // 失å»ç¦ç¹æ¶åä¸è¡¨åæ ¡éª |
|---|
| | | if (this.form && this.formItem) { |
|---|
| | | const { validateTrigger } = this.form; |
|---|
| | | if (validateTrigger === "blur") { |
|---|
| | | this.formItem.onFieldChange(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æä¸é®ççåéé® |
|---|
| | | * @param {Object} e |
|---|
| | | */ |
|---|
| | | onConfirm(e) { |
|---|
| | | this.$emit("confirm", this.val); |
|---|
| | | this.$emit("change", this.val); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¸
çå
容 |
|---|
| | | * @param {Object} event |
|---|
| | | */ |
|---|
| | | onClear(event) { |
|---|
| | | this.val = ""; |
|---|
| | | // TODO å
¼å®¹ vue2 |
|---|
| | | this.$emit("input", ""); |
|---|
| | | // TODO å
¼å®¹ vue2 |
|---|
| | | // TODOãå
¼å®¹ãvue3 |
|---|
| | | this.$emit("update:modelValue", ""); |
|---|
| | | // ç¹å»åå·è§¦å |
|---|
| | | this.$emit("clear"); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å»é¤ç©ºæ ¼ |
|---|
| | | */ |
|---|
| | | trimStr(str, pos = "both") { |
|---|
| | | if (pos === "both") { |
|---|
| | | return str.trim(); |
|---|
| | | } else if (pos === "left") { |
|---|
| | | return str.trimLeft(); |
|---|
| | | } else if (pos === "right") { |
|---|
| | | return str.trimRight(); |
|---|
| | | } else if (pos === "start") { |
|---|
| | | return str.trimStart(); |
|---|
| | | } else if (pos === "end") { |
|---|
| | | return str.trimEnd(); |
|---|
| | | } else if (pos === "all") { |
|---|
| | | return str.replace(/\s+/g, ""); |
|---|
| | | } else if (pos === "none") { |
|---|
| | | return str; |
|---|
| | | } |
|---|
| | | return str; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-error: #e43d33; |
|---|
| | | $uni-border-1: #dcdfe6 !default; |
|---|
| | | |
|---|
| | | .uni-easyinput { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | position: relative; |
|---|
| | | text-align: left; |
|---|
| | | color: #333; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-easyinput__content { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | box-sizing: border-box; |
|---|
| | | // min-height: 36px; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | // å¤çborderå¨ç»åå¼å§æ¾ç¤ºé»è²çé®é¢ |
|---|
| | | border-color: #fff; |
|---|
| | | transition-property: border-color; |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-easyinput__content-input { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: auto; |
|---|
| | | /* #endif */ |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | flex: 1; |
|---|
| | | line-height: 1; |
|---|
| | | font-size: 14px; |
|---|
| | | height: 35px; |
|---|
| | | // min-height: 36px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-easyinput__placeholder-class { |
|---|
| | | color: #999; |
|---|
| | | font-size: 12px; |
|---|
| | | // font-weight: 200; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-textarea { |
|---|
| | | align-items: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-textarea-icon { |
|---|
| | | margin-top: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-easyinput__content-textarea { |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | flex: 1; |
|---|
| | | line-height: 1.5; |
|---|
| | | font-size: 14px; |
|---|
| | | margin: 6px; |
|---|
| | | margin-left: 0; |
|---|
| | | height: 80px; |
|---|
| | | min-height: 80px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | min-height: 80px; |
|---|
| | | width: auto; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .input-padding { |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-clear-icon { |
|---|
| | | padding: 0 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .label-icon { |
|---|
| | | margin-right: 5px; |
|---|
| | | margin-top: -1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¾ç¤ºè¾¹æ¡ |
|---|
| | | .is-input-border { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | border: 1px solid $uni-border-1; |
|---|
| | | border-radius: 4px; |
|---|
| | | /* #ifdef MP-ALIPAY */ |
|---|
| | | overflow: hidden; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-error-message { |
|---|
| | | position: absolute; |
|---|
| | | bottom: -17px; |
|---|
| | | left: 0; |
|---|
| | | line-height: 12px; |
|---|
| | | color: $uni-error; |
|---|
| | | font-size: 12px; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-error-msg--boeder { |
|---|
| | | position: relative; |
|---|
| | | bottom: 0; |
|---|
| | | line-height: 22px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-input-error-border { |
|---|
| | | border-color: $uni-error; |
|---|
| | | |
|---|
| | | .uni-easyinput__placeholder-class { |
|---|
| | | color: mix(#fff, $uni-error, 50%); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-easyinput--border { |
|---|
| | | margin-bottom: 0; |
|---|
| | | padding: 10px 15px; |
|---|
| | | // padding-bottom: 0; |
|---|
| | | border-top: 1px #eee solid; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-easyinput-error { |
|---|
| | | padding-bottom: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-first-border { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | border: none; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-width: 0; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-disabled { |
|---|
| | | background-color: #f7f6f6; |
|---|
| | | color: #d5d5d5; |
|---|
| | | |
|---|
| | | .uni-easyinput__placeholder-class { |
|---|
| | | color: #d5d5d5; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-easyinput", |
|---|
| | | "displayName": "uni-easyinput å¢å¼ºè¾å
¥æ¡", |
|---|
| | | "version": "1.1.3", |
|---|
| | | "description": "Easyinput ç»ä»¶æ¯å¯¹åçinputç»ä»¶çå¢å¼º", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "input", |
|---|
| | | "uni-easyinput", |
|---|
| | | "è¾å
¥æ¡" |
|---|
| | | ], |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ### Easyinput å¢å¼ºè¾å
¥æ¡ |
|---|
| | | > **ç»ä»¶åï¼uni-easyinput** |
|---|
| | | > 代ç åï¼ `uEasyinput` |
|---|
| | | |
|---|
| | | |
|---|
| | | easyinput ç»ä»¶æ¯å¯¹åçinputç»ä»¶çå¢å¼º ï¼æ¯ä¸é¨ä¸ºé
å表åç»ä»¶[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)è设计çï¼easyinput å
ç½®äºè¾¹æ¡ï¼å¾æ çï¼åæ¶å
å« input ææåè½ |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-easyinput) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 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端 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <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="plusempty" :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' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-fab", |
|---|
| | | "displayName": "uni-fab æ¬æµ®æé®", |
|---|
| | | "version": "1.2.4", |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## Fab æ¬æµ®æé® |
|---|
| | | > **ç»ä»¶åï¼uni-fab** |
|---|
| | | > 代ç åï¼ `uFab` |
|---|
| | | |
|---|
| | | |
|---|
| | | ç¹å»å¯å±å¼ä¸ä¸ªå¾å½¢æé®èå |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-fab) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.2.1ï¼2022-05-30ï¼ |
|---|
| | | - æ°å¢ stat å±æ§ ï¼æ¯å¦å¼å¯uniç»è®¡åè½ |
|---|
| | | ## 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-fav](https://uniapp.dcloud.io/component/uniui/uni-fav) |
|---|
| | | ## 1.1.1ï¼2021-08-24ï¼ |
|---|
| | | - æ°å¢ æ¯æå½é
å |
|---|
| | | ## 1.1.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.0.6ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.0.5ï¼2021-04-21ï¼ |
|---|
| | | - ä¼å æ·»å ä¾èµ uni-icons, 导å
¥åèªå¨ä¸è½½ä¾èµ |
|---|
| | | ## 1.0.4ï¼2021-02-05ï¼ |
|---|
| | | - ä¼å ç»ä»¶å¼ç¨å
³ç³»ï¼éè¿uni_moduleså¼ç¨ç»ä»¶ |
|---|
| | | ## 1.0.3ï¼2021-02-05ï¼ |
|---|
| | | - ä¼å ç»ä»¶å¼ç¨å
³ç³»ï¼éè¿uni_moduleså¼ç¨ç»ä»¶ |
|---|
| | | ## 1.0.2ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-fav.collect": "collect", |
|---|
| | | "uni-fav.collected": "collected" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-fav.collect": "æ¶è", |
|---|
| | | "uni-fav.collected": "å·²æ¶è" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-fav.collect": "æ¶è", |
|---|
| | | "uni-fav.collected": "å·²æ¶è" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]" |
|---|
| | | @click="onClick" class="uni-fav"> |
|---|
| | | <!-- #ifdef MP-ALIPAY --> |
|---|
| | | <view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')"> |
|---|
| | | <uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" /> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef MP-ALIPAY --> |
|---|
| | | <uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled" |
|---|
| | | v-if="!checked && (star === true || star === 'true')" /> |
|---|
| | | <!-- #endif --> |
|---|
| | | <text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentFav : contentDefault }}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Fav æ¶èæé® |
|---|
| | | * @description ç¨äºæ¶èåè½ï¼å¯ç¹å»åæ¢éä¸ãä¸éä¸çç¶æ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=864 |
|---|
| | | * @property {Boolean} star = [true|false] æé®æ¯å¦å¸¦ææ |
|---|
| | | * @property {String} bgColor æªæ¶èæ¶çèæ¯è² |
|---|
| | | * @property {String} bgColorChecked å·²æ¶èæ¶çèæ¯è² |
|---|
| | | * @property {String} fgColor æªæ¶èæ¶çæåé¢è² |
|---|
| | | * @property {String} fgColorChecked å·²æ¶èæ¶çæåé¢è² |
|---|
| | | * @property {Boolean} circle = [true|false] æ¯å¦ä¸ºåè§ |
|---|
| | | * @property {Boolean} checked = [true|false] æ¯å¦ä¸ºå·²æ¶è |
|---|
| | | * @property {Object} contentText = [true|false] æ¶èæé®æå |
|---|
| | | * @property {Boolean} stat æ¯å¦å¼å¯ç»è®¡åè½ |
|---|
| | | * @event {Function} click ç¹å» favæé®è§¦åäºä»¶ |
|---|
| | | * @example <uni-fav :checked="true"/> |
|---|
| | | */ |
|---|
| | | |
|---|
| | | import { |
|---|
| | | initVueI18n |
|---|
| | | } from '@dcloudio/uni-i18n' |
|---|
| | | import messages from './i18n/index.js' |
|---|
| | | const { t } = initVueI18n(messages) |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "UniFav", |
|---|
| | | // TODO å
¼å®¹ vue3ï¼éè¦æ³¨åäºä»¶ |
|---|
| | | emits: ['click'], |
|---|
| | | props: { |
|---|
| | | star: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: "#eeeeee" |
|---|
| | | }, |
|---|
| | | fgColor: { |
|---|
| | | type: String, |
|---|
| | | default: "#666666" |
|---|
| | | }, |
|---|
| | | bgColorChecked: { |
|---|
| | | type: String, |
|---|
| | | default: "#007aff" |
|---|
| | | }, |
|---|
| | | fgColorChecked: { |
|---|
| | | type: String, |
|---|
| | | default: "#FFFFFF" |
|---|
| | | }, |
|---|
| | | circle: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | checked: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | contentText: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | contentDefault: "", |
|---|
| | | contentFav: "" |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | stat:{ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | contentDefault() { |
|---|
| | | return this.contentText.contentDefault || t("uni-fav.collect") |
|---|
| | | }, |
|---|
| | | contentFav() { |
|---|
| | | return this.contentText.contentFav || t("uni-fav.collected") |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | checked() { |
|---|
| | | if (uni.report && this.stat) { |
|---|
| | | if (this.checked) { |
|---|
| | | uni.report("æ¶è", "æ¶è"); |
|---|
| | | } else { |
|---|
| | | uni.report("åæ¶æ¶è", "åæ¶æ¶è"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClick() { |
|---|
| | | this.$emit("click"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | $fav-height: 25px; |
|---|
| | | |
|---|
| | | .uni-fav { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 60px; |
|---|
| | | height: $fav-height; |
|---|
| | | line-height: $fav-height; |
|---|
| | | text-align: center; |
|---|
| | | border-radius: 3px; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-fav--circle { |
|---|
| | | border-radius: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-fav-star { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | height: $fav-height; |
|---|
| | | line-height: 24px; |
|---|
| | | margin-right: 3px; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-fav-text { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | height: $fav-height; |
|---|
| | | line-height: $fav-height; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-fav", |
|---|
| | | "displayName": "uni-fav æ¶èæé®", |
|---|
| | | "version": "1.2.1", |
|---|
| | | "description": " Fav æ¶èç»ä»¶ï¼å¯èªå®ä¹é¢è²ã大å°ã", |
|---|
| | | "keywords": [ |
|---|
| | | "fav", |
|---|
| | | "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", |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## Fav æ¶èæé® |
|---|
| | | > **ç»ä»¶åï¼uni-fav** |
|---|
| | | > 代ç åï¼ `uFav` |
|---|
| | | |
|---|
| | | ç¨äºæ¶èåè½ï¼å¯ç¹å»åæ¢éä¸ãä¸éä¸çç¶æã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-fav) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.0.2ï¼2022-07-04ï¼ |
|---|
| | | - ä¿®å¤ å¨uni-formsä¸æ ·å¼ä¸çæçbug |
|---|
| | | ## 1.0.1ï¼2021-11-23ï¼ |
|---|
| | | - ä¿®å¤ åæ°ä¸ºå¯¹è±¡çæ
åµä¸ï¼urlå¨æäºæ
åµæ¾ç¤ºé误çbug |
|---|
| | | ## 1.0.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-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker) |
|---|
| | | ## 0.2.16ï¼2021-11-08ï¼ |
|---|
| | | - ä¿®å¤ ä¼ å
¥ç©ºå¯¹è±¡ ï¼æ¾ç¤ºé误çBug |
|---|
| | | ## 0.2.15ï¼2021-08-30ï¼ |
|---|
| | | - ä¿®å¤ return-type="object" æ¶ä¸åå¨v-modelæ¶ï¼æ æ³å é¤æ件çBug |
|---|
| | | ## 0.2.14ï¼2021-08-23ï¼ |
|---|
| | | - æ°å¢ åæ°ä¸è¿å fileID å段 |
|---|
| | | ## 0.2.13ï¼2021-08-23ï¼ |
|---|
| | | - ä¿®å¤ è
¾è®¯äºä¼ å
¥fileID ä¸è½åæ¾çbug |
|---|
| | | - ä¿®å¤ éæ©å¾çåï¼ä¸è½æ¾å¤§çé®é¢ |
|---|
| | | ## 0.2.12ï¼2021-08-17ï¼ |
|---|
| | | - ä¿®å¤ ç±äº 0.2.11 çæ¬å¼èµ·çä¸è½åæ¾å¾ççBug |
|---|
| | | ## 0.2.11ï¼2021-08-16ï¼ |
|---|
| | | - æ°å¢ clearFiles(index) æ¹æ³ï¼å¯ä»¥æå¨å é¤æå®æ件 |
|---|
| | | - ä¿®å¤ v-model å¼è®¾ä¸º null æ¥éçBug |
|---|
| | | ## 0.2.10ï¼2021-08-13ï¼ |
|---|
| | | - ä¿®å¤ return-type="object" æ¶ï¼æ æ³å é¤æ件çBug |
|---|
| | | ## 0.2.9ï¼2021-08-03ï¼ |
|---|
| | | - ä¿®å¤ auto-upload å±æ§å¤±æçBug |
|---|
| | | ## 0.2.8ï¼2021-07-31ï¼ |
|---|
| | | - ä¿®å¤ fileExtnameå±æ§ä¸æå®å¼æ¥éçBug |
|---|
| | | ## 0.2.7ï¼2021-07-31ï¼ |
|---|
| | | - ä¿®å¤ å¨æç§åºæ¯ä¸å¾çä¸åæ¾çBug |
|---|
| | | ## 0.2.6ï¼2021-07-30ï¼ |
|---|
| | | - ä¿®å¤ return-type为objectä¸ï¼è¿åå¼ä¸æ£ç¡®çBug |
|---|
| | | ## 0.2.5ï¼2021-07-30ï¼ |
|---|
| | | - ä¿®å¤ï¼éè¦ï¼ H5 å¹³å°ä¸å¦æåuni-formsç»ä»¶ä¸å使ç¨å¯¼è´é¡µé¢å¡æ»çé®é¢ |
|---|
| | | ## 0.2.3ï¼2021-07-28ï¼ |
|---|
| | | - ä¼å è°æ´ç¤ºä¾ä»£ç |
|---|
| | | ## 0.2.2ï¼2021-07-27ï¼ |
|---|
| | | - ä¿®å¤ vue3 ä¸èµå¼é误çBug |
|---|
| | | - ä¼å h5å¹³å°ä¸ä¸ä¼ æ件导è´é¡µé¢å¡æ»çé®é¢ |
|---|
| | | ## 0.2.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 0.1.1ï¼2021-07-02ï¼ |
|---|
| | | - ä¿®å¤ sourceType 缺å°é»è®¤å¼å¯¼è´ ios æ æ³éæ©æ件 |
|---|
| | | ## 0.1.0ï¼2021-06-30ï¼ |
|---|
| | | - ä¼å 解è¦ä¸uniCloudç强ç»å®å
³ç³» ï¼å¦ä¸ç»å®æå¡ç©ºé´ï¼é»è®¤autoUpload为falseä¸ä¸å¯æ´æ¹ |
|---|
| | | ## 0.0.11ï¼2021-06-30ï¼ |
|---|
| | | - ä¿®å¤ ç± 0.0.10 çæ¬å¼åç returnType å±æ§å¤±æçé®é¢ |
|---|
| | | ## 0.0.10ï¼2021-06-29ï¼ |
|---|
| | | - ä¼å æ件ä¸ä¼ åè¿åº¦æ¡æ¶å¤±æ¶æº |
|---|
| | | ## 0.0.9ï¼2021-06-29ï¼ |
|---|
| | | - ä¿®å¤ å¨uni-forms ä¸ï¼å é¤æ件 ï¼è·åçå¼ä¸å¯¹çBug |
|---|
| | | ## 0.0.8ï¼2021-06-15ï¼ |
|---|
| | | - ä¿®å¤ å é¤æ件æ¶æ æ³è§¦å v-model çBug |
|---|
| | | ## 0.0.7ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 0.0.6ï¼2021-04-09ï¼ |
|---|
| | | - ä¿®å¤ éæ©çæ件é file-extname å段æå®çæ©å±åæ¥éçBug |
|---|
| | | ## 0.0.5ï¼2021-04-09ï¼ |
|---|
| | | - ä¼å æ´æ°ç»ä»¶ç¤ºä¾ |
|---|
| | | ## 0.0.4ï¼2021-04-09ï¼ |
|---|
| | | - ä¼å file-extname å段æ¯æå符串åæ³ï¼å¤ä¸ªæ©å±åéè¦ç¨éå·åé |
|---|
| | | ## 0.0.3ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| | | - ä¿®å¤ å¾®ä¿¡å°ç¨åºä¸æå® fileExtname å±æ§éæ©å¤±è´¥çBug |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | 'use strict'; |
|---|
| | | |
|---|
| | | const ERR_MSG_OK = 'chooseAndUploadFile:ok'; |
|---|
| | | const ERR_MSG_FAIL = 'chooseAndUploadFile:fail'; |
|---|
| | | |
|---|
| | | function chooseImage(opts) { |
|---|
| | | const { |
|---|
| | | count, |
|---|
| | | sizeType = ['original', 'compressed'], |
|---|
| | | sourceType = ['album', 'camera'], |
|---|
| | | extension |
|---|
| | | } = opts |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | uni.chooseImage({ |
|---|
| | | count, |
|---|
| | | sizeType, |
|---|
| | | sourceType, |
|---|
| | | extension, |
|---|
| | | success(res) { |
|---|
| | | resolve(normalizeChooseAndUploadFileRes(res, 'image')); |
|---|
| | | }, |
|---|
| | | fail(res) { |
|---|
| | | reject({ |
|---|
| | | errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL), |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function chooseVideo(opts) { |
|---|
| | | const { |
|---|
| | | camera, |
|---|
| | | compressed, |
|---|
| | | maxDuration, |
|---|
| | | sourceType = ['album', 'camera'], |
|---|
| | | extension |
|---|
| | | } = opts; |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | uni.chooseVideo({ |
|---|
| | | camera, |
|---|
| | | compressed, |
|---|
| | | maxDuration, |
|---|
| | | sourceType, |
|---|
| | | extension, |
|---|
| | | success(res) { |
|---|
| | | const { |
|---|
| | | tempFilePath, |
|---|
| | | duration, |
|---|
| | | size, |
|---|
| | | height, |
|---|
| | | width |
|---|
| | | } = res; |
|---|
| | | resolve(normalizeChooseAndUploadFileRes({ |
|---|
| | | errMsg: 'chooseVideo:ok', |
|---|
| | | tempFilePaths: [tempFilePath], |
|---|
| | | tempFiles: [ |
|---|
| | | { |
|---|
| | | name: (res.tempFile && res.tempFile.name) || '', |
|---|
| | | path: tempFilePath, |
|---|
| | | size, |
|---|
| | | type: (res.tempFile && res.tempFile.type) || '', |
|---|
| | | width, |
|---|
| | | height, |
|---|
| | | duration, |
|---|
| | | fileType: 'video', |
|---|
| | | cloudPath: '', |
|---|
| | | }, ], |
|---|
| | | }, 'video')); |
|---|
| | | }, |
|---|
| | | fail(res) { |
|---|
| | | reject({ |
|---|
| | | errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL), |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function chooseAll(opts) { |
|---|
| | | const { |
|---|
| | | count, |
|---|
| | | extension |
|---|
| | | } = opts; |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | let chooseFile = uni.chooseFile; |
|---|
| | | if (typeof wx !== 'undefined' && |
|---|
| | | typeof wx.chooseMessageFile === 'function') { |
|---|
| | | chooseFile = wx.chooseMessageFile; |
|---|
| | | } |
|---|
| | | if (typeof chooseFile !== 'function') { |
|---|
| | | return reject({ |
|---|
| | | errMsg: ERR_MSG_FAIL + ' 请æå® type ç±»åï¼è¯¥å¹³å°ä»
æ¯æéæ© image æ videoã', |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | chooseFile({ |
|---|
| | | type: 'all', |
|---|
| | | count, |
|---|
| | | extension, |
|---|
| | | success(res) { |
|---|
| | | resolve(normalizeChooseAndUploadFileRes(res)); |
|---|
| | | }, |
|---|
| | | fail(res) { |
|---|
| | | reject({ |
|---|
| | | errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL), |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function normalizeChooseAndUploadFileRes(res, fileType) { |
|---|
| | | res.tempFiles.forEach((item, index) => { |
|---|
| | | if (!item.name) { |
|---|
| | | item.name = item.path.substring(item.path.lastIndexOf('/') + 1); |
|---|
| | | } |
|---|
| | | if (fileType) { |
|---|
| | | item.fileType = fileType; |
|---|
| | | } |
|---|
| | | item.cloudPath = |
|---|
| | | Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.')); |
|---|
| | | }); |
|---|
| | | if (!res.tempFilePaths) { |
|---|
| | | res.tempFilePaths = res.tempFiles.map((file) => file.path); |
|---|
| | | } |
|---|
| | | return res; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function uploadCloudFiles(files, max = 5, onUploadProgress) { |
|---|
| | | files = JSON.parse(JSON.stringify(files)) |
|---|
| | | const len = files.length |
|---|
| | | let count = 0 |
|---|
| | | let self = this |
|---|
| | | return new Promise(resolve => { |
|---|
| | | while (count < max) { |
|---|
| | | next() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function next() { |
|---|
| | | let cur = count++ |
|---|
| | | if (cur >= len) { |
|---|
| | | !files.find(item => !item.url && !item.errMsg) && resolve(files) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | const fileItem = files[cur] |
|---|
| | | const index = self.files.findIndex(v => v.uuid === fileItem.uuid) |
|---|
| | | fileItem.url = '' |
|---|
| | | delete fileItem.errMsg |
|---|
| | | |
|---|
| | | uniCloud |
|---|
| | | .uploadFile({ |
|---|
| | | filePath: fileItem.path, |
|---|
| | | cloudPath: fileItem.cloudPath, |
|---|
| | | fileType: fileItem.fileType, |
|---|
| | | onUploadProgress: res => { |
|---|
| | | res.index = index |
|---|
| | | onUploadProgress && onUploadProgress(res) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .then(res => { |
|---|
| | | fileItem.url = res.fileID |
|---|
| | | fileItem.index = index |
|---|
| | | if (cur < len) { |
|---|
| | | next() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(res => { |
|---|
| | | fileItem.errMsg = res.errMsg || res.message |
|---|
| | | fileItem.index = index |
|---|
| | | if (cur < len) { |
|---|
| | | next() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | function uploadFiles(choosePromise, { |
|---|
| | | onChooseFile, |
|---|
| | | onUploadProgress |
|---|
| | | }) { |
|---|
| | | return choosePromise |
|---|
| | | .then((res) => { |
|---|
| | | if (onChooseFile) { |
|---|
| | | const customChooseRes = onChooseFile(res); |
|---|
| | | if (typeof customChooseRes !== 'undefined') { |
|---|
| | | return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === 'undefined' ? |
|---|
| | | res : chooseRes); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return res; |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | if (res === false) { |
|---|
| | | return { |
|---|
| | | errMsg: ERR_MSG_OK, |
|---|
| | | tempFilePaths: [], |
|---|
| | | tempFiles: [], |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | return res |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function chooseAndUploadFile(opts = { |
|---|
| | | type: 'all' |
|---|
| | | }) { |
|---|
| | | if (opts.type === 'image') { |
|---|
| | | return uploadFiles(chooseImage(opts), opts); |
|---|
| | | } |
|---|
| | | else if (opts.type === 'video') { |
|---|
| | | return uploadFiles(chooseVideo(opts), opts); |
|---|
| | | } |
|---|
| | | return uploadFiles(chooseAll(opts), opts); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export { |
|---|
| | | chooseAndUploadFile, |
|---|
| | | uploadCloudFiles |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-file-picker"> |
|---|
| | | <view v-if="title" class="uni-file-picker__header"> |
|---|
| | | <text class="file-title">{{ title }}</text> |
|---|
| | | <text class="file-count">{{ filesList.length }}/{{ limitLength }}</text> |
|---|
| | | </view> |
|---|
| | | <upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly" |
|---|
| | | :image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview" |
|---|
| | | :delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile"> |
|---|
| | | <slot> |
|---|
| | | <view class="is-add"> |
|---|
| | | <view class="icon-add"></view> |
|---|
| | | <view class="icon-add rotate"></view> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </upload-image> |
|---|
| | | <upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly" |
|---|
| | | :list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon" |
|---|
| | | @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile"> |
|---|
| | | <slot><button type="primary" size="mini">éæ©æ件</button></slot> |
|---|
| | | </upload-file> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | chooseAndUploadFile, |
|---|
| | | uploadCloudFiles |
|---|
| | | } from './choose-and-upload-file.js' |
|---|
| | | import { |
|---|
| | | get_file_ext, |
|---|
| | | get_extname, |
|---|
| | | get_files_and_is_max, |
|---|
| | | get_file_info, |
|---|
| | | get_file_data |
|---|
| | | } from './utils.js' |
|---|
| | | import uploadImage from './upload-image.vue' |
|---|
| | | import uploadFile from './upload-file.vue' |
|---|
| | | let fileInput = null |
|---|
| | | /** |
|---|
| | | * FilePicker æ件éæ©ä¸ä¼ |
|---|
| | | * @description æ件éæ©ä¸ä¼ ç»ä»¶ï¼å¯ä»¥éæ©å¾çãè§é¢çä»»ææ件并ä¸ä¼ å°å½åç»å®çæå¡ç©ºé´ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=4079 |
|---|
| | | * @property {Object|Array} value ç»ä»¶æ°æ®ï¼é常ç¨æ¥åæ¾ ,ç±»åç±return-typeå±æ§å³å® |
|---|
| | | * @property {Boolean} disabled = [true|false] ç»ä»¶ç¦ç¨ |
|---|
| | | * @value true ç¦ç¨ |
|---|
| | | * @value false åæ¶ç¦ç¨ |
|---|
| | | * @property {Boolean} readonly = [true|false] ç»ä»¶åªè¯»ï¼ä¸å¯éæ©ï¼ä¸æ¾ç¤ºè¿åº¦ï¼ä¸æ¾ç¤ºå é¤æé® |
|---|
| | | * @value true åªè¯» |
|---|
| | | * @value false åæ¶åªè¯» |
|---|
| | | * @property {String} return-type = [array|object] éå¶ value æ ¼å¼ï¼å½ä¸º object æ¶ ï¼ç»ä»¶åªè½åéï¼ä¸ä¼è¦ç |
|---|
| | | * @value array è§å® value å±æ§çç±»å为æ°ç» |
|---|
| | | * @value object è§å® value å±æ§çç±»å为对象 |
|---|
| | | * @property {Boolean} disable-preview = [true|false] ç¦ç¨å¾çé¢è§ï¼ä»
mode:grid æ¶çæ |
|---|
| | | * @value true ç¦ç¨å¾çé¢è§ |
|---|
| | | * @value false åæ¶ç¦ç¨å¾çé¢è§ |
|---|
| | | * @property {Boolean} del-icon = [true|false] æ¯å¦æ¾ç¤ºå é¤æé® |
|---|
| | | * @value true æ¾ç¤ºå é¤æé® |
|---|
| | | * @value false ä¸æ¾ç¤ºå é¤æé® |
|---|
| | | * @property {Boolean} auto-upload = [true|false] æ¯å¦èªå¨ä¸ä¼ ï¼å¼ä¸ºtrueååªè§¦å@select,å¯èªè¡ä¸ä¼ |
|---|
| | | * @value true èªå¨ä¸ä¼ |
|---|
| | | * @value false åæ¶èªå¨ä¸ä¼ |
|---|
| | | * @property {Number|String} limit æ大éæ©ä¸ªæ° ï¼h5 ä¼èªå¨å¿½ç¥å¤éçé¨å |
|---|
| | | * @property {String} title ç»ä»¶æ é¢ï¼å³ä¾§æ¾ç¤ºä¸ä¼ è®¡æ° |
|---|
| | | * @property {String} mode = [list|grid] éæ©æ件åçæ件åè¡¨æ ·å¼ |
|---|
| | | * @value list å表æ¾ç¤º |
|---|
| | | * @value grid å®«æ ¼æ¾ç¤º |
|---|
| | | * @property {String} file-mediatype = [image|video|all] éæ©æ件类å |
|---|
| | | * @value image åªéæ©å¾ç |
|---|
| | | * @value video åªéæ©è§é¢ |
|---|
| | | * @value all éæ©æææ件 |
|---|
| | | * @property {Array} file-extname éæ©æ件åç¼ï¼æ ¹æ® file-mediatype å±æ§èä¸å |
|---|
| | | * @property {Object} list-style mode:list æ¶çæ ·å¼ |
|---|
| | | * @property {Object} image-styles éæ©æ件åç¼ï¼æ ¹æ® file-mediatype å±æ§èä¸å |
|---|
| | | * @event {Function} select éæ©æ件å触å |
|---|
| | | * @event {Function} progress æ件ä¸ä¼ æ¶è§¦å |
|---|
| | | * @event {Function} success ä¸ä¼ æå触å |
|---|
| | | * @event {Function} fail ä¸ä¼ 失败触å |
|---|
| | | * @event {Function} delete æ件ä»å表移é¤æ¶è§¦å |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'uniFilePicker', |
|---|
| | | components: { |
|---|
| | | uploadImage, |
|---|
| | | uploadFile |
|---|
| | | }, |
|---|
| | | options: { |
|---|
| | | virtualHost: true |
|---|
| | | }, |
|---|
| | | emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'], |
|---|
| | | props: { |
|---|
| | | // #ifdef VUE3 |
|---|
| | | modelValue: { |
|---|
| | | type: [Array, Object], |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifndef VUE3 |
|---|
| | | value: { |
|---|
| | | type: [Array, Object], |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | disablePreview: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | delIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // èªå¨ä¸ä¼ |
|---|
| | | autoUpload: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ大éæ©ä¸ªæ° ï¼h5åªè½éå¶åéææ¯å¤é |
|---|
| | | limit: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 9 |
|---|
| | | }, |
|---|
| | | // åè¡¨æ ·å¼ grid | list | list-card |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'grid' |
|---|
| | | }, |
|---|
| | | // éæ©æ件类å image/video/all |
|---|
| | | fileMediatype: { |
|---|
| | | type: String, |
|---|
| | | default: 'image' |
|---|
| | | }, |
|---|
| | | // æ件类åçé |
|---|
| | | fileExtname: { |
|---|
| | | type: [Array, String], |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | listStyles: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | border: true, |
|---|
| | | // æ¯å¦æ¾ç¤ºåé线 |
|---|
| | | dividline: true, |
|---|
| | | // 线æ¡æ ·å¼ |
|---|
| | | borderStyle: {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | imageStyles: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | width: 'auto', |
|---|
| | | height: 'auto' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | readonly: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | returnType: { |
|---|
| | | type: String, |
|---|
| | | default: 'array' |
|---|
| | | }, |
|---|
| | | sizeType: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return ['original', 'compressed'] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | files: [], |
|---|
| | | localValue: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // #ifndef VUE3 |
|---|
| | | value: { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.setValue(newVal, oldVal) |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | // #ifdef VUE3 |
|---|
| | | modelValue: { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.setValue(newVal, oldVal) |
|---|
| | | }, |
|---|
| | | immediate: true |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | filesList() { |
|---|
| | | let files = [] |
|---|
| | | this.files.forEach(v => { |
|---|
| | | files.push(v) |
|---|
| | | }) |
|---|
| | | return files |
|---|
| | | }, |
|---|
| | | showType() { |
|---|
| | | if (this.fileMediatype === 'image') { |
|---|
| | | return this.mode |
|---|
| | | } |
|---|
| | | return 'list' |
|---|
| | | }, |
|---|
| | | limitLength() { |
|---|
| | | if (this.returnType === 'object') { |
|---|
| | | return 1 |
|---|
| | | } |
|---|
| | | if (!this.limit) { |
|---|
| | | return 1 |
|---|
| | | } |
|---|
| | | if (this.limit >= 9) { |
|---|
| | | return 9 |
|---|
| | | } |
|---|
| | | return this.limit |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // TODO å
¼å®¹ä¸å¼éæå¡ç©ºé´çæ
åµ |
|---|
| | | if (!(uniCloud.config && uniCloud.config.provider)) { |
|---|
| | | this.noSpace = true |
|---|
| | | uniCloud.chooseAndUploadFile = chooseAndUploadFile |
|---|
| | | } |
|---|
| | | this.form = this.getForm('uniForms') |
|---|
| | | this.formItem = this.getForm('uniFormsItem') |
|---|
| | | if (this.form && this.formItem) { |
|---|
| | | if (this.formItem.name) { |
|---|
| | | this.rename = this.formItem.name |
|---|
| | | this.form.inputChildrens.push(this) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * å
¬å¼ç¨æ·ä½¿ç¨ï¼æ¸
空æ件 |
|---|
| | | * @param {Object} index |
|---|
| | | */ |
|---|
| | | clearFiles(index) { |
|---|
| | | if (index !== 0 && !index) { |
|---|
| | | this.files = [] |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.setEmit() |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.files.splice(index, 1) |
|---|
| | | } |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.setEmit() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * å
¬å¼ç¨æ·ä½¿ç¨ï¼ç»§ç»ä¸ä¼ |
|---|
| | | */ |
|---|
| | | upload() { |
|---|
| | | let files = [] |
|---|
| | | this.files.forEach((v, index) => { |
|---|
| | | if (v.status === 'ready' || v.status === 'error') { |
|---|
| | | files.push(Object.assign({}, v)) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return this.uploadFiles(files) |
|---|
| | | }, |
|---|
| | | async setValue(newVal, oldVal) { |
|---|
| | | const newData = async (v) => { |
|---|
| | | const reg = /cloud:\/\/([\w.]+\/?)\S*/ |
|---|
| | | let url = '' |
|---|
| | | if(v.fileID){ |
|---|
| | | url = v.fileID |
|---|
| | | }else{ |
|---|
| | | url = v.url |
|---|
| | | } |
|---|
| | | if (reg.test(url)) { |
|---|
| | | v.fileID = url |
|---|
| | | v.url = await this.getTempFileURL(url) |
|---|
| | | } |
|---|
| | | if(v.url) v.path = v.url |
|---|
| | | return v |
|---|
| | | } |
|---|
| | | if (this.returnType === 'object') { |
|---|
| | | if (newVal) { |
|---|
| | | await newData(newVal) |
|---|
| | | } else { |
|---|
| | | newVal = {} |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (!newVal) newVal = [] |
|---|
| | | for(let i =0 ;i < newVal.length ;i++){ |
|---|
| | | let v = newVal[i] |
|---|
| | | await newData(v) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.localValue = newVal |
|---|
| | | if (this.form && this.formItem &&!this.is_reset) { |
|---|
| | | this.is_reset = false |
|---|
| | | this.formItem.setValue(this.localValue) |
|---|
| | | } |
|---|
| | | let filesData = Object.keys(newVal).length > 0 ? newVal : []; |
|---|
| | | this.files = [].concat(filesData) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éæ©æ件 |
|---|
| | | */ |
|---|
| | | choose() { |
|---|
| | | |
|---|
| | | if (this.disabled) return |
|---|
| | | if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType === |
|---|
| | | 'array') { |
|---|
| | | uni.showToast({ |
|---|
| | | title: `æ¨æå¤éæ© ${this.limitLength} 个æ件`, |
|---|
| | | icon: 'none' |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.chooseFiles() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éæ©æ件并ä¸ä¼ |
|---|
| | | */ |
|---|
| | | chooseFiles() { |
|---|
| | | const _extname = get_extname(this.fileExtname) |
|---|
| | | // è·ååç¼ |
|---|
| | | uniCloud |
|---|
| | | .chooseAndUploadFile({ |
|---|
| | | type: this.fileMediatype, |
|---|
| | | compressed: false, |
|---|
| | | sizeType: this.sizeType, |
|---|
| | | // TODO å¦æ为空ï¼video æé®é¢ |
|---|
| | | extension: _extname.length > 0 ? _extname : undefined, |
|---|
| | | count: this.limitLength - this.files.length, //é»è®¤9 |
|---|
| | | onChooseFile: this.chooseFileCallback, |
|---|
| | | onUploadProgress: progressEvent => { |
|---|
| | | this.setProgress(progressEvent, progressEvent.index) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .then(result => { |
|---|
| | | this.setSuccessAndError(result.tempFiles) |
|---|
| | | }) |
|---|
| | | .catch(err => { |
|---|
| | | console.log('éæ©å¤±è´¥', err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éæ©æ件åè° |
|---|
| | | * @param {Object} res |
|---|
| | | */ |
|---|
| | | async chooseFileCallback(res) { |
|---|
| | | const _extname = get_extname(this.fileExtname) |
|---|
| | | const is_one = (Number(this.limitLength) === 1 && |
|---|
| | | this.disablePreview && |
|---|
| | | !this.disabled) || |
|---|
| | | this.returnType === 'object' |
|---|
| | | // å¦æè¿æä¸ä¸ªæ件 ï¼éè¦æ¸
空æ¬å°ç¼åæ°æ® |
|---|
| | | if (is_one) { |
|---|
| | | this.files = [] |
|---|
| | | } |
|---|
| | | |
|---|
| | | let { |
|---|
| | | filePaths, |
|---|
| | | files |
|---|
| | | } = get_files_and_is_max(res, _extname) |
|---|
| | | if (!(_extname && _extname.length > 0)) { |
|---|
| | | filePaths = res.tempFilePaths |
|---|
| | | files = res.tempFiles |
|---|
| | | } |
|---|
| | | |
|---|
| | | let currentData = [] |
|---|
| | | for (let i = 0; i < files.length; i++) { |
|---|
| | | if (this.limitLength - this.files.length <= 0) break |
|---|
| | | files[i].uuid = Date.now() |
|---|
| | | let filedata = await get_file_data(files[i], this.fileMediatype) |
|---|
| | | filedata.progress = 0 |
|---|
| | | filedata.status = 'ready' |
|---|
| | | this.files.push(filedata) |
|---|
| | | currentData.push({ |
|---|
| | | ...filedata, |
|---|
| | | file: files[i] |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | this.$emit('select', { |
|---|
| | | tempFiles: currentData, |
|---|
| | | tempFilePaths: filePaths |
|---|
| | | }) |
|---|
| | | res.tempFiles = files |
|---|
| | | // åæ¢èªå¨ä¸ä¼ |
|---|
| | | if (!this.autoUpload || this.noSpace) { |
|---|
| | | res.tempFiles = [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¹ä¼ |
|---|
| | | * @param {Object} e |
|---|
| | | */ |
|---|
| | | uploadFiles(files) { |
|---|
| | | files = [].concat(files) |
|---|
| | | return uploadCloudFiles.call(this, files, 5, res => { |
|---|
| | | this.setProgress(res, res.index, true) |
|---|
| | | }) |
|---|
| | | .then(result => { |
|---|
| | | this.setSuccessAndError(result) |
|---|
| | | return result; |
|---|
| | | }) |
|---|
| | | .catch(err => { |
|---|
| | | console.log(err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æåæ失败 |
|---|
| | | */ |
|---|
| | | async setSuccessAndError(res, fn) { |
|---|
| | | let successData = [] |
|---|
| | | let errorData = [] |
|---|
| | | let tempFilePath = [] |
|---|
| | | let errorTempFilePath = [] |
|---|
| | | for (let i = 0; i < res.length; i++) { |
|---|
| | | const item = res[i] |
|---|
| | | const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index |
|---|
| | | |
|---|
| | | if (index === -1 || !this.files) break |
|---|
| | | if (item.errMsg === 'request:fail') { |
|---|
| | | this.files[index].url = item.path |
|---|
| | | this.files[index].status = 'error' |
|---|
| | | this.files[index].errMsg = item.errMsg |
|---|
| | | // this.files[index].progress = -1 |
|---|
| | | errorData.push(this.files[index]) |
|---|
| | | errorTempFilePath.push(this.files[index].url) |
|---|
| | | } else { |
|---|
| | | this.files[index].errMsg = '' |
|---|
| | | this.files[index].fileID = item.url |
|---|
| | | const reg = /cloud:\/\/([\w.]+\/?)\S*/ |
|---|
| | | if (reg.test(item.url)) { |
|---|
| | | this.files[index].url = await this.getTempFileURL(item.url) |
|---|
| | | }else{ |
|---|
| | | this.files[index].url = item.url |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.files[index].status = 'success' |
|---|
| | | this.files[index].progress += 1 |
|---|
| | | successData.push(this.files[index]) |
|---|
| | | tempFilePath.push(this.files[index].fileID) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (successData.length > 0) { |
|---|
| | | this.setEmit() |
|---|
| | | // ç¶ææ¹åè¿å |
|---|
| | | this.$emit('success', { |
|---|
| | | tempFiles: this.backObject(successData), |
|---|
| | | tempFilePaths: tempFilePath |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (errorData.length > 0) { |
|---|
| | | this.$emit('fail', { |
|---|
| | | tempFiles: this.backObject(errorData), |
|---|
| | | tempFilePaths: errorTempFilePath |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åè¿åº¦ |
|---|
| | | * @param {Object} progressEvent |
|---|
| | | * @param {Object} index |
|---|
| | | * @param {Object} type |
|---|
| | | */ |
|---|
| | | setProgress(progressEvent, index, type) { |
|---|
| | | const fileLenth = this.files.length |
|---|
| | | const percentNum = (index / fileLenth) * 100 |
|---|
| | | const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) |
|---|
| | | let idx = index |
|---|
| | | if (!type) { |
|---|
| | | idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid) |
|---|
| | | } |
|---|
| | | if (idx === -1 || !this.files[idx]) return |
|---|
| | | // fix by mehaotian 100 å°±ä¼æ¶å¤±ï¼-1 æ¯ä¸ºäºè®©è¿åº¦æ¡æ¶å¤± |
|---|
| | | this.files[idx].progress = percentCompleted - 1 |
|---|
| | | // ä¸ä¼ ä¸ |
|---|
| | | this.$emit('progress', { |
|---|
| | | index: idx, |
|---|
| | | progress: parseInt(percentCompleted), |
|---|
| | | tempFile: this.files[idx] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å é¤æ件 |
|---|
| | | * @param {Object} index |
|---|
| | | */ |
|---|
| | | delFile(index) { |
|---|
| | | this.$emit('delete', { |
|---|
| | | tempFile: this.files[index], |
|---|
| | | tempFilePath: this.files[index].url |
|---|
| | | }) |
|---|
| | | this.files.splice(index, 1) |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.setEmit() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åæ件åååç¼ |
|---|
| | | * @param {Object} name |
|---|
| | | */ |
|---|
| | | getFileExt(name) { |
|---|
| | | const last_len = name.lastIndexOf('.') |
|---|
| | | const len = name.length |
|---|
| | | return { |
|---|
| | | name: name.substring(0, last_len), |
|---|
| | | ext: name.substring(last_len + 1, len) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤çè¿åäºä»¶ |
|---|
| | | */ |
|---|
| | | setEmit() { |
|---|
| | | let data = [] |
|---|
| | | if (this.returnType === 'object') { |
|---|
| | | data = this.backObject(this.files)[0] |
|---|
| | | this.localValue = data?data:null |
|---|
| | | } else { |
|---|
| | | data = this.backObject(this.files) |
|---|
| | | if (!this.localValue) { |
|---|
| | | this.localValue = [] |
|---|
| | | } |
|---|
| | | this.localValue = [...data] |
|---|
| | | } |
|---|
| | | // #ifdef VUE3 |
|---|
| | | this.$emit('update:modelValue', this.localValue) |
|---|
| | | // #endif |
|---|
| | | // #ifndef VUE3 |
|---|
| | | this.$emit('input', this.localValue) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤çè¿ååæ° |
|---|
| | | * @param {Object} files |
|---|
| | | */ |
|---|
| | | backObject(files) { |
|---|
| | | let newFilesData = [] |
|---|
| | | files.forEach(v => { |
|---|
| | | newFilesData.push({ |
|---|
| | | extname: v.extname, |
|---|
| | | fileType: v.fileType, |
|---|
| | | image: v.image, |
|---|
| | | name: v.name, |
|---|
| | | path: v.path, |
|---|
| | | size: v.size, |
|---|
| | | fileID:v.fileID, |
|---|
| | | url: v.url |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | return newFilesData |
|---|
| | | }, |
|---|
| | | async getTempFileURL(fileList) { |
|---|
| | | fileList = { |
|---|
| | | fileList: [].concat(fileList) |
|---|
| | | } |
|---|
| | | const urls = await uniCloud.getTempFileURL(fileList) |
|---|
| | | return urls.fileList[0].tempFileURL || '' |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * è·åç¶å
ç´ å®ä¾ |
|---|
| | | */ |
|---|
| | | getForm(name = 'uniForms') { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .uni-file-picker { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | overflow: hidden; |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-file-picker__header { |
|---|
| | | padding-top: 5px; |
|---|
| | | padding-bottom: 10px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-title { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #333; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-count { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-add { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-add { |
|---|
| | | width: 50px; |
|---|
| | | height: 5px; |
|---|
| | | background-color: #f1f1f1; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rotate { |
|---|
| | | position: absolute; |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-file-picker__files"> |
|---|
| | | <view v-if="!readonly" class="files-button" @click="choose"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | <!-- :class="{'is-text-box':showType === 'list'}" --> |
|---|
| | | <view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle"> |
|---|
| | | <!-- ,'is-list-card':showType === 'list-card' --> |
|---|
| | | |
|---|
| | | <view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{ |
|---|
| | | 'files-border':index !== 0 && styles.dividline}" |
|---|
| | | :style="index !== 0 && styles.dividline &&borderLineStyle"> |
|---|
| | | <view class="uni-file-picker__item"> |
|---|
| | | <!-- :class="{'is-text-image':showType === 'list'}" --> |
|---|
| | | <!-- <view class="files__image is-text-image"> |
|---|
| | | <image class="header-image" :src="item.logo" mode="aspectFit"></image> |
|---|
| | | </view> --> |
|---|
| | | <view class="files__name">{{item.name}}</view> |
|---|
| | | <view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)"> |
|---|
| | | <view class="icon-del icon-files"></view> |
|---|
| | | <view class="icon-del rotate"></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress"> |
|---|
| | | <progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4" |
|---|
| | | :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" /> |
|---|
| | | </view> |
|---|
| | | <view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)"> |
|---|
| | | ç¹å»éè¯ |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "uploadFile", |
|---|
| | | emits:['uploadFiles','choose','delFile'], |
|---|
| | | props: { |
|---|
| | | filesList: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | delIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | limit: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 9 |
|---|
| | | }, |
|---|
| | | showType: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | listStyles: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | border: true, |
|---|
| | | // æ¯å¦æ¾ç¤ºåé线 |
|---|
| | | dividline: true, |
|---|
| | | // 线æ¡æ ·å¼ |
|---|
| | | borderStyle: {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | readonly:{ |
|---|
| | | type:Boolean, |
|---|
| | | default:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | list() { |
|---|
| | | let files = [] |
|---|
| | | this.filesList.forEach(v => { |
|---|
| | | files.push(v) |
|---|
| | | }) |
|---|
| | | return files |
|---|
| | | }, |
|---|
| | | styles() { |
|---|
| | | let styles = { |
|---|
| | | border: true, |
|---|
| | | dividline: true, |
|---|
| | | 'border-style': {} |
|---|
| | | } |
|---|
| | | return Object.assign(styles, this.listStyles) |
|---|
| | | }, |
|---|
| | | borderStyle() { |
|---|
| | | let { |
|---|
| | | borderStyle, |
|---|
| | | border |
|---|
| | | } = this.styles |
|---|
| | | let obj = {} |
|---|
| | | if (!border) { |
|---|
| | | obj.border = 'none' |
|---|
| | | } else { |
|---|
| | | let width = (borderStyle && borderStyle.width) || 1 |
|---|
| | | width = this.value2px(width) |
|---|
| | | let radius = (borderStyle && borderStyle.radius) || 5 |
|---|
| | | radius = this.value2px(radius) |
|---|
| | | obj = { |
|---|
| | | 'border-width': width, |
|---|
| | | 'border-style': (borderStyle && borderStyle.style) || 'solid', |
|---|
| | | 'border-color': (borderStyle && borderStyle.color) || '#eee', |
|---|
| | | 'border-radius': radius |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let classles = '' |
|---|
| | | for (let i in obj) { |
|---|
| | | classles += `${i}:${obj[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | }, |
|---|
| | | borderLineStyle() { |
|---|
| | | let obj = {} |
|---|
| | | let { |
|---|
| | | borderStyle |
|---|
| | | } = this.styles |
|---|
| | | if (borderStyle && borderStyle.color) { |
|---|
| | | obj['border-color'] = borderStyle.color |
|---|
| | | } |
|---|
| | | if (borderStyle && borderStyle.width) { |
|---|
| | | let width = borderStyle && borderStyle.width || 1 |
|---|
| | | let style = borderStyle && borderStyle.style || 0 |
|---|
| | | if (typeof width === 'number') { |
|---|
| | | width += 'px' |
|---|
| | | } else { |
|---|
| | | width = width.indexOf('px') ? width : width + 'px' |
|---|
| | | } |
|---|
| | | obj['border-width'] = width |
|---|
| | | |
|---|
| | | if (typeof style === 'number') { |
|---|
| | | style += 'px' |
|---|
| | | } else { |
|---|
| | | style = style.indexOf('px') ? style : style + 'px' |
|---|
| | | } |
|---|
| | | obj['border-top-style'] = style |
|---|
| | | } |
|---|
| | | let classles = '' |
|---|
| | | for (let i in obj) { |
|---|
| | | classles += `${i}:${obj[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | uploadFiles(item, index) { |
|---|
| | | this.$emit("uploadFiles", { |
|---|
| | | item, |
|---|
| | | index |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | choose() { |
|---|
| | | this.$emit("choose") |
|---|
| | | }, |
|---|
| | | delFile(index) { |
|---|
| | | this.$emit('delFile', index) |
|---|
| | | }, |
|---|
| | | value2px(value) { |
|---|
| | | if (typeof value === 'number') { |
|---|
| | | value += 'px' |
|---|
| | | } else { |
|---|
| | | value = value.indexOf('px') !== -1 ? value : value + 'px' |
|---|
| | | } |
|---|
| | | return value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .uni-file-picker__files { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .files-button { |
|---|
| | | // border: 1px red solid; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-file-picker__lists { |
|---|
| | | position: relative; |
|---|
| | | margin-top: 5px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-picker__mask { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 14px; |
|---|
| | | background-color: rgba(0, 0, 0, 0.4); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-file-picker__lists-box { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-file-picker__item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | padding: 8px 10px; |
|---|
| | | padding-right: 5px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .files-border { |
|---|
| | | border-top: 1px #eee solid; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .files__name { |
|---|
| | | flex: 1; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | margin-right: 25px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | word-break: break-all; |
|---|
| | | word-wrap: break-word; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-files { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | position: static; |
|---|
| | | background-color: initial; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | // .icon-files .icon-del { |
|---|
| | | // background-color: #333; |
|---|
| | | // width: 12px; |
|---|
| | | // height: 1px; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | |
|---|
| | | .is-list-card { |
|---|
| | | border: 1px #eee solid; |
|---|
| | | margin-bottom: 5px; |
|---|
| | | border-radius: 5px; |
|---|
| | | box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1); |
|---|
| | | padding: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .files__image { |
|---|
| | | width: 40px; |
|---|
| | | height: 40px; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-text-box { |
|---|
| | | border: 1px #eee solid; |
|---|
| | | border-radius: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-text-image { |
|---|
| | | width: 25px; |
|---|
| | | height: 25px; |
|---|
| | | margin-left: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rotate { |
|---|
| | | position: absolute; |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-del-box { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | margin: auto 0; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: absolute; |
|---|
| | | top: 0px; |
|---|
| | | bottom: 0; |
|---|
| | | right: 5px; |
|---|
| | | height: 26px; |
|---|
| | | width: 26px; |
|---|
| | | // border-radius: 50%; |
|---|
| | | // background-color: rgba(0, 0, 0, 0.5); |
|---|
| | | z-index: 2; |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-del { |
|---|
| | | width: 15px; |
|---|
| | | height: 1px; |
|---|
| | | background-color: #333; |
|---|
| | | // border-radius: 1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | @media all and (min-width: 768px) { |
|---|
| | | .uni-file-picker__files { |
|---|
| | | max-width: 375px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-file-picker__container"> |
|---|
| | | <view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle"> |
|---|
| | | <view class="file-picker__box-content" :style="borderStyle"> |
|---|
| | | <image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image> |
|---|
| | | <view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)"> |
|---|
| | | <view class="icon-del"></view> |
|---|
| | | <view class="icon-del rotate"></view> |
|---|
| | | </view> |
|---|
| | | <view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress"> |
|---|
| | | <progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4" |
|---|
| | | :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" /> |
|---|
| | | </view> |
|---|
| | | <view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)"> |
|---|
| | | ç¹å»éè¯ |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle"> |
|---|
| | | <view class="file-picker__box-content is-add" :style="borderStyle" @click="choose"> |
|---|
| | | <slot> |
|---|
| | | <view class="icon-add"></view> |
|---|
| | | <view class="icon-add rotate"></view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "uploadImage", |
|---|
| | | emits:['uploadFiles','choose','delFile'], |
|---|
| | | props: { |
|---|
| | | filesList: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | disabled:{ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | disablePreview: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | limit: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 9 |
|---|
| | | }, |
|---|
| | | imageStyles: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | width: 'auto', |
|---|
| | | height: 'auto', |
|---|
| | | border: {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | delIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | readonly:{ |
|---|
| | | type:Boolean, |
|---|
| | | default:false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | styles() { |
|---|
| | | let styles = { |
|---|
| | | width: 'auto', |
|---|
| | | height: 'auto', |
|---|
| | | border: {} |
|---|
| | | } |
|---|
| | | return Object.assign(styles, this.imageStyles) |
|---|
| | | }, |
|---|
| | | boxStyle() { |
|---|
| | | const { |
|---|
| | | width = 'auto', |
|---|
| | | height = 'auto' |
|---|
| | | } = this.styles |
|---|
| | | let obj = {} |
|---|
| | | if (height === 'auto') { |
|---|
| | | if (width !== 'auto') { |
|---|
| | | obj.height = this.value2px(width) |
|---|
| | | obj['padding-top'] = 0 |
|---|
| | | } else { |
|---|
| | | obj.height = 0 |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | obj.height = this.value2px(height) |
|---|
| | | obj['padding-top'] = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (width === 'auto') { |
|---|
| | | if (height !== 'auto') { |
|---|
| | | obj.width = this.value2px(height) |
|---|
| | | } else { |
|---|
| | | obj.width = '33.3%' |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | obj.width = this.value2px(width) |
|---|
| | | } |
|---|
| | | |
|---|
| | | let classles = '' |
|---|
| | | for(let i in obj){ |
|---|
| | | classles+= `${i}:${obj[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | }, |
|---|
| | | borderStyle() { |
|---|
| | | let { |
|---|
| | | border |
|---|
| | | } = this.styles |
|---|
| | | let obj = {} |
|---|
| | | const widthDefaultValue = 1 |
|---|
| | | const radiusDefaultValue = 3 |
|---|
| | | if (typeof border === 'boolean') { |
|---|
| | | obj.border = border ? '1px #eee solid' : 'none' |
|---|
| | | } else { |
|---|
| | | let width = (border && border.width) || widthDefaultValue |
|---|
| | | width = this.value2px(width) |
|---|
| | | let radius = (border && border.radius) || radiusDefaultValue |
|---|
| | | radius = this.value2px(radius) |
|---|
| | | obj = { |
|---|
| | | 'border-width': width, |
|---|
| | | 'border-style': (border && border.style) || 'solid', |
|---|
| | | 'border-color': (border && border.color) || '#eee', |
|---|
| | | 'border-radius': radius |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let classles = '' |
|---|
| | | for(let i in obj){ |
|---|
| | | classles+= `${i}:${obj[i]};` |
|---|
| | | } |
|---|
| | | return classles |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | uploadFiles(item, index) { |
|---|
| | | this.$emit("uploadFiles", item) |
|---|
| | | }, |
|---|
| | | choose() { |
|---|
| | | this.$emit("choose") |
|---|
| | | }, |
|---|
| | | delFile(index) { |
|---|
| | | this.$emit('delFile', index) |
|---|
| | | }, |
|---|
| | | prviewImage(img, index) { |
|---|
| | | let urls = [] |
|---|
| | | if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){ |
|---|
| | | this.$emit("choose") |
|---|
| | | } |
|---|
| | | if(this.disablePreview) return |
|---|
| | | this.filesList.forEach(i => { |
|---|
| | | urls.push(i.url) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | uni.previewImage({ |
|---|
| | | urls: urls, |
|---|
| | | current: index |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | value2px(value) { |
|---|
| | | if (typeof value === 'number') { |
|---|
| | | value += 'px' |
|---|
| | | } else { |
|---|
| | | if (value.indexOf('%') === -1) { |
|---|
| | | value = value.indexOf('px') !== -1 ? value : value + 'px' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .uni-file-picker__container { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | flex-wrap: wrap; |
|---|
| | | margin: -5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-picker__box { |
|---|
| | | position: relative; |
|---|
| | | // flex: 0 0 33.3%; |
|---|
| | | width: 33.3%; |
|---|
| | | height: 0; |
|---|
| | | padding-top: 33.33%; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-picker__box-content { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | margin: 5px; |
|---|
| | | border: 1px #eee solid; |
|---|
| | | border-radius: 5px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-picker__progress { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | /* border: 1px red solid; */ |
|---|
| | | z-index: 2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-picker__progress-item { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-picker__mask { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 12px; |
|---|
| | | background-color: rgba(0, 0, 0, 0.4); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .file-image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-add { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-add { |
|---|
| | | width: 50px; |
|---|
| | | height: 5px; |
|---|
| | | background-color: #f1f1f1; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rotate { |
|---|
| | | position: absolute; |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-del-box { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: absolute; |
|---|
| | | top: 3px; |
|---|
| | | right: 3px; |
|---|
| | | height: 26px; |
|---|
| | | width: 26px; |
|---|
| | | border-radius: 50%; |
|---|
| | | background-color: rgba(0, 0, 0, 0.5); |
|---|
| | | z-index: 2; |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-del { |
|---|
| | | width: 15px; |
|---|
| | | height: 2px; |
|---|
| | | background-color: #fff; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * è·åæ件åååç¼ |
|---|
| | | * @param {String} name |
|---|
| | | */ |
|---|
| | | export const get_file_ext = (name) => { |
|---|
| | | const last_len = name.lastIndexOf('.') |
|---|
| | | const len = name.length |
|---|
| | | return { |
|---|
| | | name: name.substring(0, last_len), |
|---|
| | | ext: name.substring(last_len + 1, len) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åæ©å±å |
|---|
| | | * @param {Array} fileExtname |
|---|
| | | */ |
|---|
| | | export const get_extname = (fileExtname) => { |
|---|
| | | if (!Array.isArray(fileExtname)) { |
|---|
| | | let extname = fileExtname.replace(/(\[|\])/g, '') |
|---|
| | | return extname.split(',') |
|---|
| | | } else { |
|---|
| | | return fileExtname |
|---|
| | | } |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åæ件åæ£æµæ¯å¦å¯é |
|---|
| | | */ |
|---|
| | | export const get_files_and_is_max = (res, _extname) => { |
|---|
| | | let filePaths = [] |
|---|
| | | let files = [] |
|---|
| | | if(!_extname || _extname.length === 0){ |
|---|
| | | return { |
|---|
| | | filePaths, |
|---|
| | | files |
|---|
| | | } |
|---|
| | | } |
|---|
| | | res.tempFiles.forEach(v => { |
|---|
| | | let fileFullName = get_file_ext(v.name) |
|---|
| | | const extname = fileFullName.ext.toLowerCase() |
|---|
| | | if (_extname.indexOf(extname) !== -1) { |
|---|
| | | files.push(v) |
|---|
| | | filePaths.push(v.path) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | if (files.length !== res.tempFiles.length) { |
|---|
| | | uni.showToast({ |
|---|
| | | title: `å½åéæ©äº${res.tempFiles.length}个æ件 ï¼${res.tempFiles.length - files.length} 个æä»¶æ ¼å¼ä¸æ£ç¡®`, |
|---|
| | | icon: 'none', |
|---|
| | | duration: 5000 |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | filePaths, |
|---|
| | | files |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åå¾çä¿¡æ¯ |
|---|
| | | * @param {Object} filepath |
|---|
| | | */ |
|---|
| | | export const get_file_info = (filepath) => { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | uni.getImageInfo({ |
|---|
| | | src: filepath, |
|---|
| | | success(res) { |
|---|
| | | resolve(res) |
|---|
| | | }, |
|---|
| | | fail(err) { |
|---|
| | | reject(err) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * è·åå°è£
æ°æ® |
|---|
| | | */ |
|---|
| | | export const get_file_data = async (files, type = 'image') => { |
|---|
| | | // æç»éè¦ä¸ä¼ æ°æ®åºçæ°æ® |
|---|
| | | let fileFullName = get_file_ext(files.name) |
|---|
| | | const extname = fileFullName.ext.toLowerCase() |
|---|
| | | let filedata = { |
|---|
| | | name: files.name, |
|---|
| | | uuid: files.uuid, |
|---|
| | | extname: extname || '', |
|---|
| | | cloudPath: files.cloudPath, |
|---|
| | | fileType: files.fileType, |
|---|
| | | url: files.path || files.path, |
|---|
| | | size: files.size, //åä½æ¯åè |
|---|
| | | image: {}, |
|---|
| | | path: files.path, |
|---|
| | | video: {} |
|---|
| | | } |
|---|
| | | if (type === 'image') { |
|---|
| | | const imageinfo = await get_file_info(files.path) |
|---|
| | | delete filedata.video |
|---|
| | | filedata.image.width = imageinfo.width |
|---|
| | | filedata.image.height = imageinfo.height |
|---|
| | | filedata.image.location = imageinfo.path |
|---|
| | | } else { |
|---|
| | | delete filedata.image |
|---|
| | | } |
|---|
| | | return filedata |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-file-picker", |
|---|
| | | "displayName": "uni-file-picker æ件éæ©ä¸ä¼ ", |
|---|
| | | "version": "1.0.2", |
|---|
| | | "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": "n" |
|---|
| | | }, |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | ## FilePicker æ件éæ©ä¸ä¼ |
|---|
| | | |
|---|
| | | > **ç»ä»¶åï¼uni-file-picker** |
|---|
| | | > 代ç åï¼ `uFilePicker` |
|---|
| | | |
|---|
| | | |
|---|
| | | æ件éæ©ä¸ä¼ ç»ä»¶ï¼å¯ä»¥éæ©å¾çãè§é¢çä»»ææ件并ä¸ä¼ å°å½åç»å®çæå¡ç©ºé´ |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-file-picker) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.4.8ï¼2022-08-23ï¼ |
|---|
| | | - ä¼å æ ¹æ® rules èªå¨æ·»å required çé®é¢ |
|---|
| | | ## 1.4.7ï¼2022-08-22ï¼ |
|---|
| | | - ä¿®å¤ item æªè®¾ç½® require å±æ§ï¼rules 设置 require åï¼æå·ä¹æ¾ç¤ºç bugï¼è¯¦è§ï¼[https://ask.dcloud.net.cn/question/151540](https://ask.dcloud.net.cn/question/151540) |
|---|
| | | ## 1.4.6ï¼2022-07-13ï¼ |
|---|
| | | - ä¿®å¤ model éè¦æ ¡éªçå¼æ²¡æ声æ对åºå段æ¶ï¼å¯¼è´ç¬¬ä¸æ¬¡ä¸è§¦åæ ¡éªçbug |
|---|
| | | ## 1.4.5ï¼2022-07-05ï¼ |
|---|
| | | - æ°å¢ æ´å¤è¡¨åç¤ºä¾ |
|---|
| | | - ä¼å å表åç»ä»¶è¿ææ示çé®é¢ |
|---|
| | | - ä¼å å表åç»ä»¶uni-datetime-pickerãuni-data-selectãuni-data-pickerçæ¾ç¤ºæ ·å¼ |
|---|
| | | ## 1.4.4ï¼2022-07-04ï¼ |
|---|
| | | - æ´æ° å é¤ç»ä»¶æ¥å¿ |
|---|
| | | ## 1.4.3ï¼2022-07-04ï¼ |
|---|
| | | - ä¿®å¤ ç± 1.4.0 å¼åç label æ槽ä¸çæçbug |
|---|
| | | ## 1.4.2ï¼2022-07-04ï¼ |
|---|
| | | - ä¿®å¤ åç»ä»¶æ¾ä¸å° setValue æ¥éçbug |
|---|
| | | ## 1.4.1ï¼2022-07-04ï¼ |
|---|
| | | - ä¿®å¤ uni-data-picker å¨ uni-forms-item ä¸æ¥éçbug |
|---|
| | | - ä¿®å¤ uni-data-picker å¨ uni-forms-item ä¸å®½åº¦ä¸æ£ç¡®çbug |
|---|
| | | ## 1.4.0ï¼2022-06-30ï¼ |
|---|
| | | - ãéè¦ãç»ä»¶é»è¾éæï¼é¨åç¨æ³ç¨æ§çæ¬ä¸å
¼å®¹ï¼è¯·æ³¨æå
¼å®¹é®é¢ |
|---|
| | | - ãéè¦ãç»ä»¶ä½¿ç¨ Provide/Inject æ¹å¼æ³¨å
¥ä¾èµï¼æä¾äºèªå®ä¹è¡¨åç»ä»¶è°ç¨ uni-forms æ ¡éªè¡¨åçè½å |
|---|
| | | - æ°å¢ model å±æ§ï¼çåäºå value/modelValue å±æ§ï¼æ§å±æ§å³å°åºå¼ |
|---|
| | | - æ°å¢ validateTrigger å±æ§ç blur å¼ï¼ä»
uni-easyinput çæ |
|---|
| | | - æ°å¢ onFieldChange æ¹æ³ï¼å¯ä»¥å¯¹å表åè¿è¡æ ¡éªï¼å¯æ¿ä»£binddataæ¹æ³ |
|---|
| | | - æ°å¢ å表åç setRules æ¹æ³ï¼é
åèªå®ä¹æ ¡éªå½æ°ä½¿ç¨ |
|---|
| | | - æ°å¢ uni-forms-item ç setRules æ¹æ³ï¼é
ç½®å¨æ表å使ç¨å¯å¨ææ´æ°æ ¡éªè§å |
|---|
| | | - ä¼å å¨æ表åæ ¡éªæ¹å¼ï¼åºå¼æ¼æ¥nameçæ¹å¼ |
|---|
| | | ## 1.3.3ï¼2022-06-22ï¼ |
|---|
| | | - ä¿®å¤ è¡¨åæ ¡éªé¡ºåºæ åºé®é¢ |
|---|
| | | ## 1.3.2ï¼2021-12-09ï¼ |
|---|
| | | - |
|---|
| | | ## 1.3.1ï¼2021-11-19ï¼ |
|---|
| | | - ä¿®å¤ label æ槽ä¸çæçbug |
|---|
| | | ## 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-forms](https://uniapp.dcloud.io/component/uniui/uni-forms) |
|---|
| | | ## 1.2.7ï¼2021-08-13ï¼ |
|---|
| | | - ä¿®å¤ æ²¡ææ·»å æ ¡éªè§åçå段ä¾ç¶æ¥éçBug |
|---|
| | | ## 1.2.6ï¼2021-08-11ï¼ |
|---|
| | | - ä¿®å¤ é置表åé误信æ¯æ æ³æ¸
é¤çé®é¢ |
|---|
| | | ## 1.2.5ï¼2021-08-11ï¼ |
|---|
| | | - ä¼å ç»ä»¶ææ¡£ |
|---|
| | | ## 1.2.4ï¼2021-08-11ï¼ |
|---|
| | | - ä¿®å¤ è¡¨åéªè¯åªçæä¸æ¬¡çé®é¢ |
|---|
| | | ## 1.2.3ï¼2021-07-30ï¼ |
|---|
| | | - ä¼å vue3ä¸äºä»¶è¦åçé®é¢ |
|---|
| | | ## 1.2.2ï¼2021-07-26ï¼ |
|---|
| | | - ä¿®å¤ vue2 ä¸æ¡ä»¶ç¼è¯å¯¼è´destroyedçå½å¨æ失æçBug |
|---|
| | | - ä¿®å¤ 1.2.1 å¼èµ·ç示ä¾å¨å°ç¨åºå¹³å°æ¥éçBug |
|---|
| | | ## 1.2.1ï¼2021-07-22ï¼ |
|---|
| | | - ä¿®å¤ å¨ææ ¡éªè¡¨åï¼é»è®¤å¼ä¸ºç©ºçæ
åµä¸æ ¡éªå¤±æçBug |
|---|
| | | - ä¿®å¤ ä¸æå®nameå±æ§æ¶ï¼è¿è¡æ¥éçBug |
|---|
| | | - ä¼å labelé»è®¤å®½åº¦ä»65è°æ´è³70ï¼ä½¿required为trueä¸ååæ¶ä¸æ¢è¡ |
|---|
| | | - ä¼å ç»ä»¶ç¤ºä¾ï¼æ°å¢å¨ææ ¡éªç¤ºä¾ä»£ç |
|---|
| | | - ä¼å ç»ä»¶ææ¡£ï¼ä½¿ç¨æ¹å¼æ´æ¸
æ° |
|---|
| | | ## 1.2.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.1.2ï¼2021-06-25ï¼ |
|---|
| | | - ä¿®å¤ pattern å±æ§å¨å¾®ä¿¡å°ç¨åºå¹³å°æ æçé®é¢ |
|---|
| | | ## 1.1.1ï¼2021-06-22ï¼ |
|---|
| | | - ä¿®å¤ validate-triggerå±æ§ä¸ºsubmitä¸err-show-typeå±æ§ä¸ºtoastæ¶ä¸è½å¼¹åºçBug |
|---|
| | | ## 1.1.0ï¼2021-06-22ï¼ |
|---|
| | | - ä¿®å¤ åªåsetRulesæ¹æ³è导è´æ ¡éªä¸çæçBug |
|---|
| | | - ä¿®å¤ ç±ä¸ä¸ªåæ³å¼åçé误æ示æåéä½çBug |
|---|
| | | ## 1.0.48ï¼2021-06-21ï¼ |
|---|
| | | - ä¿®å¤ ä¸è®¾ç½® label å±æ§ ï¼æ æ³è®¾ç½®labelæ槽çé®é¢ |
|---|
| | | ## 1.0.47ï¼2021-06-21ï¼ |
|---|
| | | - ä¿®å¤ ä¸è®¾ç½®labelå±æ§ï¼label-widthå±æ§ä¸çæçbug |
|---|
| | | - ä¿®å¤ setRules æ¹æ³ä¸ruleså±æ§å²çªçé®é¢ |
|---|
| | | ## 1.0.46ï¼2021-06-04ï¼ |
|---|
| | | - ä¿®å¤ å¨æå åæ°æ®å¯¼è´æ¥éçé®é¢ |
|---|
| | | ## 1.0.45ï¼2021-06-04ï¼ |
|---|
| | | - æ°å¢ modelValue å±æ§ ï¼value å³å°åºå¼ |
|---|
| | | ## 1.0.44ï¼2021-06-02ï¼ |
|---|
| | | - æ°å¢ uni-forms-item å¯ä»¥è®¾ç½®åç¬ç rules |
|---|
| | | - æ°å¢ validate äºä»¶å¢å keepitem åæ°ï¼å¯ä»¥éæ©é£äºå段ä¸è¿æ»¤ |
|---|
| | | - ä¼å submit äºä»¶éå½å为 validate |
|---|
| | | ## 1.0.43ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.0.42ï¼2021-04-30ï¼ |
|---|
| | | - ä¿®å¤ èªå®ä¹æ£éªå¨å¤±æçé®é¢ |
|---|
| | | ## 1.0.41ï¼2021-03-05ï¼ |
|---|
| | | - æ´æ° æ ¡éªå¨ |
|---|
| | | - ä¿®å¤ è¡¨åè§å设置类å为 number çæ
åµä¸ï¼å¼ä¸º0æ ¡éªå¤±è´¥çBug |
|---|
| | | ## 1.0.40ï¼2021-03-04ï¼ |
|---|
| | | - ä¿®å¤ å¨ææ¾ç¤ºuni-forms-itemçæ
åµä¸ï¼submit æ¹æ³è·åå¼é误çBug |
|---|
| | | ## 1.0.39ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| | | - ä¿®å¤ æ ¡éªå¨ä¼ å
¥ int çç±»å ï¼è¿åStringç±»åçBug |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-forms-item" |
|---|
| | | :class="['is-direction-' + localLabelPos ,border?'uni-forms-item--border':'' ,border && isFirstBorder?'is-first-border':'']"> |
|---|
| | | <slot name="label"> |
|---|
| | | <view class="uni-forms-item__label" :class="{'no-label':!label && !isRequired}" |
|---|
| | | :style="{width:localLabelWidth,justifyContent: localLabelAlign}"> |
|---|
| | | <text v-if="isRequired" class="is-required">*</text> |
|---|
| | | <text>{{label}}</text> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <view class="uni-forms-item__content"> |
|---|
| | | <slot></slot> |
|---|
| | | <view class="uni-forms-item__error" :class="{'msg--active':msg}"> |
|---|
| | | <text>{{msg}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <view class="uni-forms-item__nuve-content"> |
|---|
| | | <view class="uni-forms-item__content"> |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | <view class="uni-forms-item__error" :class="{'msg--active':msg}"> |
|---|
| | | <text class="error-text">{{msg}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * uni-fomrs-item 表ååç»ä»¶ |
|---|
| | | * @description uni-fomrs-item 表ååç»ä»¶ï¼æä¾äºåºç¡å¸å±å·²ç»æ ¡éªè½å |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=2773 |
|---|
| | | * @property {Boolean} required æ¯å¦å¿
å¡«ï¼å·¦è¾¹æ¾ç¤ºçº¢è²"*"å· |
|---|
| | | * @property {String } label è¾å
¥æ¡å·¦è¾¹çæåæ示 |
|---|
| | | * @property {Number } labelWidth labelç宽度ï¼åä½pxï¼é»è®¤65ï¼ |
|---|
| | | * @property {String } labelAlign = [left|center|right] labelçæå对é½æ¹å¼ï¼é»è®¤leftï¼ |
|---|
| | | * @value left label 左侧æ¾ç¤º |
|---|
| | | * @value center label å±
ä¸ |
|---|
| | | * @value right label å³ä¾§å¯¹é½ |
|---|
| | | * @property {String } errorMessage æ¾ç¤ºçé误æ示å
容ï¼å¦æ为空å符串æè
falseï¼åä¸æ¾ç¤ºéè¯¯ä¿¡æ¯ |
|---|
| | | * @property {String } name 表ååçå±æ§åï¼å¨ä½¿ç¨æ ¡éªè§åæ¶å¿
å¡« |
|---|
| | | * @property {String } leftIcon ã1.4.0åºå¼ãlabel左边çå¾æ ï¼é uni-ui çå¾æ å称 |
|---|
| | | * @property {String } iconColor ã1.4.0åºå¼ã左边éè¿iconé
ç½®çå¾æ çé¢è²ï¼é»è®¤#606266ï¼ |
|---|
| | | * @property {String} validateTrigger = [bind|submit|blur] ã1.4.0åºå¼ãæ ¡éªè§¦åå¨æ¹å¼ é»è®¤ submit |
|---|
| | | * @value bind åçååæ¶è§¦å |
|---|
| | | * @value submit æ交æ¶è§¦å |
|---|
| | | * @value blur 失å»ç¦ç¹è§¦å |
|---|
| | | * @property {String } labelPosition = [top|left] ã1.4.0åºå¼ãlabelçæåçä½ç½®ï¼é»è®¤leftï¼ |
|---|
| | | * @value top 顶é¨æ¾ç¤º label |
|---|
| | | * @value left 左侧æ¾ç¤º label |
|---|
| | | */ |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'uniFormsItem', |
|---|
| | | options: { |
|---|
| | | virtualHost: true |
|---|
| | | }, |
|---|
| | | provide() { |
|---|
| | | return { |
|---|
| | | uniFormItem: this |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | inject: { |
|---|
| | | form: { |
|---|
| | | from: 'uniForm', |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | // 表åæ ¡éªè§å |
|---|
| | | rules: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 表ååçå±æ§åï¼å¨ä½¿ç¨æ ¡éªè§åæ¶å¿
å¡« |
|---|
| | | name: { |
|---|
| | | type: [String, Array], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | required: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // labelç宽度 ï¼é»è®¤ 80 |
|---|
| | | labelWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // label å±
ä¸æ¹å¼ï¼é»è®¤ left åå¼ left/center/right |
|---|
| | | labelAlign: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // 强å¶æ¾ç¤ºéè¯¯ä¿¡æ¯ |
|---|
| | | errorMessage: { |
|---|
| | | type: [String, Boolean], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // 1.4.0 å¼ç¨ï¼ç»ä¸ä½¿ç¨ form çæ ¡éªæ¶æº |
|---|
| | | // validateTrigger: { |
|---|
| | | // type: String, |
|---|
| | | // default: '' |
|---|
| | | // }, |
|---|
| | | // 1.4.0 å¼ç¨ï¼ç»ä¸ä½¿ç¨ form çlabel ä½ç½® |
|---|
| | | // labelPosition: { |
|---|
| | | // type: String, |
|---|
| | | // default: '' |
|---|
| | | // }, |
|---|
| | | // 1.4.0 以ä¸å±æ§å·²ç»åºå¼ï¼è¯·ä½¿ç¨ #label ææ§½ä»£æ¿ |
|---|
| | | leftIcon: String, |
|---|
| | | iconColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#606266' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | errMsg: '', |
|---|
| | | isRequired: false, |
|---|
| | | userRules: null, |
|---|
| | | localLabelAlign: 'left', |
|---|
| | | localLabelWidth: '65px', |
|---|
| | | localLabelPos: 'left', |
|---|
| | | border: false, |
|---|
| | | isFirstBorder: false, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å¤çéè¯¯ä¿¡æ¯ |
|---|
| | | msg() { |
|---|
| | | return this.errorMessage || this.errMsg; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // è§ååçååéç¥åç»ä»¶æ´æ° |
|---|
| | | 'form.formRules'(val) { |
|---|
| | | // TODO å¤ç头æ¡vue3 watchä¸çæçé®é¢ |
|---|
| | | // #ifndef MP-TOUTIAO |
|---|
| | | this.init() |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | 'form.labelWidth'(val) { |
|---|
| | | // 宽度 |
|---|
| | | this.localLabelWidth = this._labelWidthUnit(val) |
|---|
| | | |
|---|
| | | }, |
|---|
| | | 'form.labelPosition'(val) { |
|---|
| | | // æ ç¾ä½ç½® |
|---|
| | | this.localLabelPos = this._labelPosition() |
|---|
| | | }, |
|---|
| | | 'form.labelAlign'(val) { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.init(true) |
|---|
| | | if (this.name && this.form) { |
|---|
| | | // TODO å¤ç头æ¡vue3 watchä¸çæçé®é¢ |
|---|
| | | // #ifdef MP-TOUTIAO |
|---|
| | | this.$watch('form.formRules', () => { |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // çå¬åå |
|---|
| | | this.$watch( |
|---|
| | | () => { |
|---|
| | | const val = this.form._getDataValue(this.name, this.form.localData) |
|---|
| | | return val |
|---|
| | | }, |
|---|
| | | (value, oldVal) => { |
|---|
| | | const isEqual = this.form._isEqual(value, oldVal) |
|---|
| | | // ç®åå¤æååå¼çååï¼åªæåçååæä¼åçæ ¡éª |
|---|
| | | // TODO å¦æ oldVal = undefined ï¼é£ä¹å¤§æ¦çæ¯æºæ°æ®é没æå¼å¯¼è´ ï¼è¿ä¸ªæ
åµä¸å¦æ ¡éª ,å¯è½ä¸ä¸¥è°¨ ï¼éè¦å¨åè§å¯ |
|---|
| | | // fix by mehaotian ææ¶åæ¶ && oldVal !== undefined ï¼å¦æformData ä¸ä¸åå¨ï¼å¯è½ä¼ä¸æ ¡éª |
|---|
| | | if (!isEqual) { |
|---|
| | | const val = this.itemSetValue(value) |
|---|
| | | this.onFieldChange(val, false) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | immediate: false |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // #ifndef VUE3 |
|---|
| | | destroyed() { |
|---|
| | | if (this.__isUnmounted) return |
|---|
| | | this.unInit() |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | // #ifdef VUE3 |
|---|
| | | unmounted() { |
|---|
| | | this.__isUnmounted = true |
|---|
| | | this.unInit() |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * 设置è§å ï¼ä¸»è¦ç¨äºå°ç¨åºèªå®ä¹æ£éªè§å |
|---|
| | | * @param {Array} rules è§åæºæ°æ® |
|---|
| | | */ |
|---|
| | | setRules(rules = null) { |
|---|
| | | this.userRules = rules |
|---|
| | | this.init(false) |
|---|
| | | }, |
|---|
| | | // å
¼å®¹èçæ¬è¡¨åç»ä»¶ |
|---|
| | | setValue() { |
|---|
| | | // console.log('setValue æ¹æ³å·²ç»å¼ç¨ï¼è¯·ä½¿ç¨ææ°çæ¬ç uni-forms 表åç»ä»¶ä»¥åå
¶ä»å
³èç»ä»¶ã'); |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * æ ¡éªæ°æ® |
|---|
| | | * @param {any} value éè¦æ ¡éªçæ°æ® |
|---|
| | | * @param {boolean} æ¯å¦ç«å³æ ¡éª |
|---|
| | | * @return {Array|null} æ ¡éªå
容 |
|---|
| | | */ |
|---|
| | | async onFieldChange(value, formtrigger = true) { |
|---|
| | | const { |
|---|
| | | formData, |
|---|
| | | localData, |
|---|
| | | errShowType, |
|---|
| | | validateCheck, |
|---|
| | | validateTrigger, |
|---|
| | | _isRequiredField, |
|---|
| | | _realName |
|---|
| | | } = this.form |
|---|
| | | const name = _realName(this.name) |
|---|
| | | if (!value) { |
|---|
| | | value = this.form.formData[name] |
|---|
| | | } |
|---|
| | | // fixd by mehaotian ä¸å¨æ ¡éªåæ¸
空信æ¯ï¼è§£å³éªå±çé®é¢ |
|---|
| | | // this.errMsg = ''; |
|---|
| | | |
|---|
| | | // fix by mehaotian 解å³æ²¡ææ£éªè§åçæ
åµä¸ï¼æåºé误çé®é¢ |
|---|
| | | const ruleLen = this.itemRules.rules && this.itemRules.rules.length |
|---|
| | | if (!this.validator || !ruleLen || ruleLen === 0) return; |
|---|
| | | |
|---|
| | | // æ£éªæ¶æº |
|---|
| | | // let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger); |
|---|
| | | const isRequiredField = _isRequiredField(this.itemRules.rules || []); |
|---|
| | | let result = null; |
|---|
| | | // åªæçäº bind æ¶ ï¼æè½å¼å¯æ¶å®æ ¡éª |
|---|
| | | if (validateTrigger === 'bind' || formtrigger) { |
|---|
| | | // æ ¡éªå½å表å项 |
|---|
| | | result = await this.validator.validateUpdate({ |
|---|
| | | [name]: value |
|---|
| | | }, |
|---|
| | | formData |
|---|
| | | ); |
|---|
| | | |
|---|
| | | // å¤ææ¯å¦å¿
å¡«,éå¿
å¡«ï¼ä¸å¡«ä¸æ ¡éªï¼å¡«åææ ¡éª ,ææ¶åªå¤ç undefined å空çæ
åµ |
|---|
| | | if (!isRequiredField && (value === undefined || value === '')) { |
|---|
| | | result = null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤æé误信æ¯æ¾ç¤ºç±»å |
|---|
| | | if (result && result.errorMessage) { |
|---|
| | | if (errShowType === 'undertext') { |
|---|
| | | // è·åéè¯¯ä¿¡æ¯ |
|---|
| | | this.errMsg = !result ? '' : result.errorMessage; |
|---|
| | | } |
|---|
| | | if (errShowType === 'toast') { |
|---|
| | | uni.showToast({ |
|---|
| | | title: result.errorMessage || 'æ ¡éªé误', |
|---|
| | | icon: 'none' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | if (errShowType === 'modal') { |
|---|
| | | uni.showModal({ |
|---|
| | | title: 'æ示', |
|---|
| | | content: result.errorMessage || 'æ ¡éªé误' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.errMsg = '' |
|---|
| | | } |
|---|
| | | // éç¥ form ç»ä»¶æ´æ°äºä»¶ |
|---|
| | | validateCheck(result ? result : null) |
|---|
| | | } else { |
|---|
| | | this.errMsg = '' |
|---|
| | | } |
|---|
| | | return result ? result : null; |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * åå§ç»ä»¶æ°æ® |
|---|
| | | */ |
|---|
| | | init(type = false) { |
|---|
| | | const { |
|---|
| | | validator, |
|---|
| | | formRules, |
|---|
| | | childrens, |
|---|
| | | formData, |
|---|
| | | localData, |
|---|
| | | _realName, |
|---|
| | | labelWidth, |
|---|
| | | _getDataValue, |
|---|
| | | _setDataValue |
|---|
| | | } = this.form || {} |
|---|
| | | // 对é½æ¹å¼ |
|---|
| | | this.localLabelAlign = this._justifyContent() |
|---|
| | | // 宽度 |
|---|
| | | this.localLabelWidth = this._labelWidthUnit(labelWidth) |
|---|
| | | // æ ç¾ä½ç½® |
|---|
| | | this.localLabelPos = this._labelPosition() |
|---|
| | | this.isRequired = this.required |
|---|
| | | // å°éè¦æ ¡éªçåç»ä»¶å å
¥form éå |
|---|
| | | this.form && type && childrens.push(this) |
|---|
| | | |
|---|
| | | if (!validator || !formRules) return |
|---|
| | | // å¤æ第ä¸ä¸ª item |
|---|
| | | if (!this.form.isFirstBorder) { |
|---|
| | | this.form.isFirstBorder = true; |
|---|
| | | this.isFirstBorder = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤æ group éç第ä¸ä¸ª item |
|---|
| | | if (this.group) { |
|---|
| | | if (!this.group.isFirstBorder) { |
|---|
| | | this.group.isFirstBorder = true; |
|---|
| | | this.isFirstBorder = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.border = this.form.border; |
|---|
| | | // è·åååççå®å称 |
|---|
| | | const name = _realName(this.name) |
|---|
| | | const itemRule = this.userRules || this.rules |
|---|
| | | if (typeof formRules === 'object' && itemRule) { |
|---|
| | | // åè§åæ¿æ¢ç¶è§å |
|---|
| | | formRules[name] = { |
|---|
| | | rules: itemRule |
|---|
| | | } |
|---|
| | | validator.updateSchema(formRules); |
|---|
| | | } |
|---|
| | | // 注åæ ¡éªè§å |
|---|
| | | const itemRules = formRules[name] || {} |
|---|
| | | this.itemRules = itemRules |
|---|
| | | // 注åæ ¡éªå½æ° |
|---|
| | | this.validator = validator |
|---|
| | | // é»è®¤å¼èµäº |
|---|
| | | this.itemSetValue(_getDataValue(this.name, localData)) |
|---|
| | | this.isRequired = this._isRequired() |
|---|
| | | |
|---|
| | | }, |
|---|
| | | unInit() { |
|---|
| | | if (this.form) { |
|---|
| | | const { |
|---|
| | | childrens, |
|---|
| | | formData, |
|---|
| | | _realName |
|---|
| | | } = this.form |
|---|
| | | childrens.forEach((item, index) => { |
|---|
| | | if (item === this) { |
|---|
| | | this.form.childrens.splice(index, 1) |
|---|
| | | delete formData[_realName(item.name)] |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 设置item çå¼ |
|---|
| | | itemSetValue(value) { |
|---|
| | | const name = this.form._realName(this.name) |
|---|
| | | const rules = this.itemRules.rules || [] |
|---|
| | | const val = this.form._getValue(name, value, rules) |
|---|
| | | this.form._setDataValue(name, this.form.formData, val) |
|---|
| | | return val |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 移é¤è¯¥è¡¨å项çæ ¡éªç»æ |
|---|
| | | */ |
|---|
| | | clearValidate() { |
|---|
| | | this.errMsg = ''; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ¯å¦æ¾ç¤ºæå· |
|---|
| | | _isRequired() { |
|---|
| | | // TODO ä¸æ ¹æ®è§åæ¾ç¤º æå·ï¼èèåç»å
¼å®¹ |
|---|
| | | // if (this.form) { |
|---|
| | | // if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) { |
|---|
| | | // return true |
|---|
| | | // } |
|---|
| | | // return false |
|---|
| | | // } |
|---|
| | | return this.required |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å¤ç对é½æ¹å¼ |
|---|
| | | _justifyContent() { |
|---|
| | | if (this.form) { |
|---|
| | | const { |
|---|
| | | labelAlign |
|---|
| | | } = this.form |
|---|
| | | let labelAli = this.labelAlign ? this.labelAlign : labelAlign; |
|---|
| | | if (labelAli === 'left') return 'flex-start'; |
|---|
| | | if (labelAli === 'center') return 'center'; |
|---|
| | | if (labelAli === 'right') return 'flex-end'; |
|---|
| | | } |
|---|
| | | return 'flex-start'; |
|---|
| | | }, |
|---|
| | | // å¤ç label宽度åä½ ,继æ¿ç¶å
ç´ çå¼ |
|---|
| | | _labelWidthUnit(labelWidth) { |
|---|
| | | |
|---|
| | | // if (this.form) { |
|---|
| | | // const { |
|---|
| | | // labelWidth |
|---|
| | | // } = this.form |
|---|
| | | return this.num2px(this.labelWidth ? this.labelWidth : (labelWidth || (this.label ? 65 : 'auto'))) |
|---|
| | | // } |
|---|
| | | // return '65px' |
|---|
| | | }, |
|---|
| | | // å¤ç label ä½ç½® |
|---|
| | | _labelPosition() { |
|---|
| | | if (this.form) return this.form.labelPosition || 'left' |
|---|
| | | return 'left' |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 触åæ¶æº |
|---|
| | | * @param {Object} rule å½åè§åå
æ¶æº |
|---|
| | | * @param {Object} itemRlue å½åç»ä»¶æ¶æº |
|---|
| | | * @param {Object} parentRule ç¶ç»ä»¶æ¶æº |
|---|
| | | */ |
|---|
| | | isTrigger(rule, itemRlue, parentRule) { |
|---|
| | | // bind submit |
|---|
| | | if (rule === 'submit' || !rule) { |
|---|
| | | if (rule === undefined) { |
|---|
| | | if (itemRlue !== 'bind') { |
|---|
| | | if (!itemRlue) { |
|---|
| | | return parentRule === '' ? 'bind' : 'submit'; |
|---|
| | | } |
|---|
| | | return 'submit'; |
|---|
| | | } |
|---|
| | | return 'bind'; |
|---|
| | | } |
|---|
| | | return 'submit'; |
|---|
| | | } |
|---|
| | | return 'bind'; |
|---|
| | | }, |
|---|
| | | num2px(num) { |
|---|
| | | if (typeof num === 'number') { |
|---|
| | | return `${num}px` |
|---|
| | | } |
|---|
| | | return num |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .uni-forms-item { |
|---|
| | | position: relative; |
|---|
| | | display: flex; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | // å¨ nvue ä¸ï¼ä½¿ç¨ margin-bottom error ä¿¡æ¯ä¼è¢«éè |
|---|
| | | padding-bottom: 22px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | margin-bottom: 22px; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | text-align: left; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #606266; |
|---|
| | | height: 36px; |
|---|
| | | padding: 0 12px 0 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | vertical-align: middle; |
|---|
| | | flex-shrink: 0; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | &.no-label { |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | /* #ifndef MP-TOUTIAO */ |
|---|
| | | // display: flex; |
|---|
| | | // align-items: center; |
|---|
| | | /* #endif */ |
|---|
| | | position: relative; |
|---|
| | | font-size: 14px; |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | |
|---|
| | | /* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */ |
|---|
| | | // TODO å 为å°ç¨åºå¹³å°ä¼å¤ä¸å±æ ç¾èç¹ ï¼æ以éè¦å¨å¤ä½èç¹ç»§æ¿å½åæ ·å¼ |
|---|
| | | &>uni-easyinput, |
|---|
| | | &>uni-data-picker { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | & .uni-forms-item__nuve-content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__error { |
|---|
| | | color: #f56c6c; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1; |
|---|
| | | padding-top: 4px; |
|---|
| | | position: absolute; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | top: 100%; |
|---|
| | | left: 0; |
|---|
| | | transition: transform 0.3s; |
|---|
| | | transform: translateY(-100%); |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | bottom: 5px; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | opacity: 0; |
|---|
| | | |
|---|
| | | .error-text { |
|---|
| | | // åªæ nvue ä¸è¿ä¸ªæ ·å¼æçæ |
|---|
| | | color: #f56c6c; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.msg--active { |
|---|
| | | opacity: 1; |
|---|
| | | transform: translateY(0%); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ä½ç½®ä¿®é¥°æ ·å¼ |
|---|
| | | &.is-direction-left { |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-direction-top { |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | .uni-forms-item__label { |
|---|
| | | padding: 0 0 8px; |
|---|
| | | line-height: 1.5715; |
|---|
| | | text-align: left; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | white-space: initial; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-required { |
|---|
| | | // color: $uni-color-error; |
|---|
| | | color: #dd524d; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .uni-forms-item--border { |
|---|
| | | margin-bottom: 0; |
|---|
| | | padding: 10px 0; |
|---|
| | | // padding-bottom: 0; |
|---|
| | | border-top: 1px #eee solid; |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-forms-item__content { |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: flex-start; |
|---|
| | | align-items: flex-start; |
|---|
| | | |
|---|
| | | .uni-forms-item__error { |
|---|
| | | position: relative; |
|---|
| | | top: 5px; |
|---|
| | | left: 0; |
|---|
| | | padding-top: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | .uni-forms-item__error { |
|---|
| | | position: relative; |
|---|
| | | top: 0px; |
|---|
| | | left: 0; |
|---|
| | | padding-top: 0; |
|---|
| | | margin-top: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-first-border { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | border: none; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-width: 0; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-forms"> |
|---|
| | | <form> |
|---|
| | | <slot></slot> |
|---|
| | | </form> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Validator from './validate.js'; |
|---|
| | | import { |
|---|
| | | deepCopy, |
|---|
| | | getValue, |
|---|
| | | isRequiredField, |
|---|
| | | setDataValue, |
|---|
| | | getDataValue, |
|---|
| | | realName, |
|---|
| | | isRealName, |
|---|
| | | rawData, |
|---|
| | | isEqual |
|---|
| | | } from './utils.js' |
|---|
| | | |
|---|
| | | // #ifndef VUE3 |
|---|
| | | // åç»ä¼æ
¢æ
¢åºå¼è¿ä¸ªæ¹æ³ |
|---|
| | | import Vue from 'vue'; |
|---|
| | | Vue.prototype.binddata = function(name, value, formName) { |
|---|
| | | if (formName) { |
|---|
| | | this.$refs[formName].setValue(name, value); |
|---|
| | | } else { |
|---|
| | | let formVm; |
|---|
| | | for (let i in this.$refs) { |
|---|
| | | const vm = this.$refs[i]; |
|---|
| | | if (vm && vm.$options && vm.$options.name === 'uniForms') { |
|---|
| | | formVm = vm; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (!formVm) return console.error('å½å uni-froms ç»ä»¶ç¼ºå° ref å±æ§'); |
|---|
| | | formVm.setValue(name, value); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * Forms 表å |
|---|
| | | * @description ç±è¾å
¥æ¡ãéæ©å¨ãåéæ¡ãå¤éæ¡çæ§ä»¶ç»æï¼ç¨ä»¥æ¶éãæ ¡éªãæ交æ°æ® |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=2773 |
|---|
| | | * @property {Object} rules 表åæ ¡éªè§å |
|---|
| | | * @property {String} validateTrigger = [bind|submit|blur] æ ¡éªè§¦åå¨æ¹å¼ é»è®¤ submit |
|---|
| | | * @value bind åçååæ¶è§¦å |
|---|
| | | * @value submit æ交æ¶è§¦å |
|---|
| | | * @value blur 失å»ç¦ç¹æ¶è§¦å |
|---|
| | | * @property {String} labelPosition = [top|left] label ä½ç½® é»è®¤ left |
|---|
| | | * @value top 顶é¨æ¾ç¤º label |
|---|
| | | * @value left 左侧æ¾ç¤º label |
|---|
| | | * @property {String} labelWidth label 宽度ï¼é»è®¤ 65px |
|---|
| | | * @property {String} labelAlign = [left|center|right] label å±
ä¸æ¹å¼ é»è®¤ left |
|---|
| | | * @value left label 左侧æ¾ç¤º |
|---|
| | | * @value center label å±
ä¸ |
|---|
| | | * @value right label å³ä¾§å¯¹é½ |
|---|
| | | * @property {String} errShowType = [undertext|toast|modal] æ ¡éªé误信æ¯æ示æ¹å¼ |
|---|
| | | * @value undertext é误信æ¯å¨åºé¨æ¾ç¤º |
|---|
| | | * @value toast é误信æ¯toastæ¾ç¤º |
|---|
| | | * @value modal é误信æ¯modalæ¾ç¤º |
|---|
| | | * @event {Function} submit æ交æ¶è§¦å |
|---|
| | | * @event {Function} validate æ ¡éªç»æåçåå触å |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'uniForms', |
|---|
| | | emits: ['validate', 'submit'], |
|---|
| | | options: { |
|---|
| | | virtualHost: true |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | // å³å°å¼ç¨ |
|---|
| | | value: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // vue3 æ¿æ¢ value å±æ§ |
|---|
| | | modelValue: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 1.4.0 å¼å§å°ä¸æ¯æ v-model ï¼ä¸åºå¼ value å modelValue |
|---|
| | | model: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 表åæ ¡éªè§å |
|---|
| | | rules: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return {}; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //æ ¡éªé误信æ¯æ示æ¹å¼ é»è®¤ undertext åå¼ [undertext|toast|modal] |
|---|
| | | errShowType: { |
|---|
| | | type: String, |
|---|
| | | default: 'undertext' |
|---|
| | | }, |
|---|
| | | // æ ¡éªè§¦åå¨æ¹å¼ é»è®¤ bind åå¼ [bind|submit] |
|---|
| | | validateTrigger: { |
|---|
| | | type: String, |
|---|
| | | default: 'submit' |
|---|
| | | }, |
|---|
| | | // label ä½ç½®ï¼é»è®¤ left åå¼ top/left |
|---|
| | | labelPosition: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | // label 宽度 |
|---|
| | | labelWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // label å±
ä¸æ¹å¼ï¼é»è®¤ left åå¼ left/center/right |
|---|
| | | labelAlign: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | provide() { |
|---|
| | | return { |
|---|
| | | uniForm: this |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // 表åæ¬å°å¼çè®°å½ï¼ä¸åºè¯¥ä¸ä¼ å¦çå¼è¿è¡å
³è |
|---|
| | | formData: {}, |
|---|
| | | formRules: {} |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // 计ç®æ°æ®æºååç |
|---|
| | | localData() { |
|---|
| | | const localVal = this.model || this.modelValue || this.value |
|---|
| | | if (localVal) { |
|---|
| | | return deepCopy(localVal) |
|---|
| | | } |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // çå¬æ°æ®åå ,ææ¶ä¸ä½¿ç¨ï¼éè¦åç¬èµå¼ |
|---|
| | | // localData: {}, |
|---|
| | | // çå¬è§ååå |
|---|
| | | rules: { |
|---|
| | | handler: function(val, oldVal) { |
|---|
| | | this.setRules(val) |
|---|
| | | }, |
|---|
| | | deep: true, |
|---|
| | | immediate: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // #ifdef VUE3 |
|---|
| | | let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata |
|---|
| | | if (!getbinddata) { |
|---|
| | | getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) { |
|---|
| | | if (formName) { |
|---|
| | | this.$refs[formName].setValue(name, value); |
|---|
| | | } else { |
|---|
| | | let formVm; |
|---|
| | | for (let i in this.$refs) { |
|---|
| | | const vm = this.$refs[i]; |
|---|
| | | if (vm && vm.$options && vm.$options.name === 'uniForms') { |
|---|
| | | formVm = vm; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (!formVm) return console.error('å½å uni-froms ç»ä»¶ç¼ºå° ref å±æ§'); |
|---|
| | | formVm.setValue(name, value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // åç»ä»¶å®ä¾æ°ç» |
|---|
| | | this.childrens = [] |
|---|
| | | // TODO å
¼å®¹æ§ç uni-data-picker ,æ°çæ¬ä¸æ æï¼åªæ¯é¿å
æ¥é |
|---|
| | | this.inputChildrens = [] |
|---|
| | | this.setRules(this.rules) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * 设置è§å ï¼ä¸»è¦ç¨äºå°ç¨åºèªå®ä¹æ£éªè§å |
|---|
| | | * @param {Array} rules è§åæºæ°æ® |
|---|
| | | */ |
|---|
| | | setRules(rules) { |
|---|
| | | // TODO æå¯è½åç»ä»¶å并è§åçæ¶æºæ¯è¿ä¸ªè¦æ©ï¼æ以éè¦å并对象 ï¼èä¸æ¯ç´æ¥èµå¼ï¼å¯è½ä¼è¢«è¦ç |
|---|
| | | this.formRules = Object.assign({}, this.formRules, rules) |
|---|
| | | // åå§åæ ¡éªå½æ° |
|---|
| | | this.validator = new Validator(rules); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * 设置æ°æ®ï¼ç¨äºè®¾ç½®è¡¨åæ°æ®ï¼å
¬å¼ç»ç¨æ·ä½¿ç¨ ï¼ ä¸æ¯æå¨å¨æ表åä¸ä½¿ç¨ |
|---|
| | | * @param {Object} key |
|---|
| | | * @param {Object} value |
|---|
| | | */ |
|---|
| | | setValue(key, value) { |
|---|
| | | let example = this.childrens.find(child => child.name === key); |
|---|
| | | if (!example) return null; |
|---|
| | | this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || []) |
|---|
| | | return example.onFieldChange(this.formData[key]); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * æå¨æäº¤æ ¡éªè¡¨å |
|---|
| | | * 对æ´ä¸ªè¡¨åè¿è¡æ ¡éªçæ¹æ³ï¼åæ°ä¸ºä¸ä¸ªåè°å½æ°ã |
|---|
| | | * @param {Array} keepitem ä¿çä¸åä¸æ ¡éªçå段 |
|---|
| | | * @param {type} callback æ¹æ³åè° |
|---|
| | | */ |
|---|
| | | validate(keepitem, callback) { |
|---|
| | | return this.checkAll(this.formData, keepitem, callback); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * é¨å表åæ ¡éª |
|---|
| | | * @param {Array|String} props éè¦æ ¡éªçå段 |
|---|
| | | * @param {Function} åè°å½æ° |
|---|
| | | */ |
|---|
| | | validateField(props = [], callback) { |
|---|
| | | props = [].concat(props); |
|---|
| | | let invalidFields = {}; |
|---|
| | | this.childrens.forEach(item => { |
|---|
| | | const name = realName(item.name) |
|---|
| | | if (props.indexOf(name) !== -1) { |
|---|
| | | invalidFields = Object.assign({}, invalidFields, { |
|---|
| | | [name]: this.formData[name] |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return this.checkAll(invalidFields, [], callback); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ |
|---|
| | | * 移é¤è¡¨å项çæ ¡éªç»æãä¼ å
¥å¾
移é¤ç表å项ç prop å±æ§æè
prop ç»æçæ°ç»ï¼å¦ä¸ä¼ å移é¤æ´ä¸ªè¡¨åçæ ¡éªç»æ |
|---|
| | | * @param {Array|String} props éè¦ç§»é¤æ ¡éªçå段 ï¼ä¸å¡«ä¸ºææ |
|---|
| | | */ |
|---|
| | | clearValidate(props = []) { |
|---|
| | | props = [].concat(props); |
|---|
| | | this.childrens.forEach(item => { |
|---|
| | | if (props.length === 0) { |
|---|
| | | item.errMsg = ''; |
|---|
| | | } else { |
|---|
| | | const name = realName(item.name) |
|---|
| | | if (props.indexOf(name) !== -1) { |
|---|
| | | item.errMsg = ''; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤é¨è°ç¨æ¹æ³ ï¼å³å°åºå¼ |
|---|
| | | * æå¨æäº¤æ ¡éªè¡¨å |
|---|
| | | * 对æ´ä¸ªè¡¨åè¿è¡æ ¡éªçæ¹æ³ï¼åæ°ä¸ºä¸ä¸ªåè°å½æ°ã |
|---|
| | | * @param {Array} keepitem ä¿çä¸åä¸æ ¡éªçå段 |
|---|
| | | * @param {type} callback æ¹æ³åè° |
|---|
| | | */ |
|---|
| | | submit(keepitem, callback, type) { |
|---|
| | | for (let i in this.dataValue) { |
|---|
| | | const itemData = this.childrens.find(v => v.name === i); |
|---|
| | | if (itemData) { |
|---|
| | | if (this.formData[i] === undefined) { |
|---|
| | | this.formData[i] = this._getValue(i, this.dataValue[i]); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!type) { |
|---|
| | | console.warn('submit æ¹æ³å³å°åºå¼ï¼è¯·ä½¿ç¨validateæ¹æ³ä»£æ¿ï¼'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return this.checkAll(this.formData, keepitem, callback, 'submit'); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ ¡éªææ |
|---|
| | | async checkAll(invalidFields, keepitem, callback, type) { |
|---|
| | | // ä¸åå¨æ ¡éªè§å ï¼ååæ¢æ ¡éªæµç¨ |
|---|
| | | if (!this.validator) return |
|---|
| | | let childrens = [] |
|---|
| | | // å¤çåä¸æ ¡éªçitemå®ä¾ |
|---|
| | | for (let i in invalidFields) { |
|---|
| | | const item = this.childrens.find(v => realName(v.name) === i) |
|---|
| | | if (item) { |
|---|
| | | childrens.push(item) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¦ævalidate第ä¸ä¸ªåæ°æ¯funciont ,é£å°±èµ°åè° |
|---|
| | | if (!callback && typeof keepitem === 'function') { |
|---|
| | | callback = keepitem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | let promise; |
|---|
| | | // å¦æä¸åå¨åè°ï¼é£ä¹ä½¿ç¨ Promise æ¹å¼è¿å |
|---|
| | | if (!callback && typeof callback !== 'function' && Promise) { |
|---|
| | | promise = new Promise((resolve, reject) => { |
|---|
| | | callback = function(valid, invalidFields) { |
|---|
| | | !valid ? resolve(invalidFields) : reject(valid); |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | let results = []; |
|---|
| | | // é¿å
å¼ç¨éä¹± ï¼å»ºè®®æ·è´å¯¹è±¡å¤ç |
|---|
| | | let tempFormData = JSON.parse(JSON.stringify(invalidFields)) |
|---|
| | | // ææåç»ä»¶åä¸æ ¡éª,ä½¿ç¨ for å¯ä»¥ä½¿ç¨ awiat |
|---|
| | | for (let i in childrens) { |
|---|
| | | const child = childrens[i] |
|---|
| | | let name = realName(child.name); |
|---|
| | | const result = await child.onFieldChange(tempFormData[name]); |
|---|
| | | if (result) { |
|---|
| | | results.push(result); |
|---|
| | | // toast ,modal åªéè¦æ§è¡ç¬¬ä¸æ¬¡å°±å¯ä»¥ |
|---|
| | | if (this.errShowType === 'toast' || this.errShowType === 'modal') break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | if (Array.isArray(results)) { |
|---|
| | | if (results.length === 0) results = null; |
|---|
| | | } |
|---|
| | | if (Array.isArray(keepitem)) { |
|---|
| | | keepitem.forEach(v => { |
|---|
| | | let vName = realName(v); |
|---|
| | | let value = getDataValue(v, this.localData) |
|---|
| | | if (value !== undefined) { |
|---|
| | | tempFormData[vName] = value |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // TODO submit å³å°åºå¼ |
|---|
| | | if (type === 'submit') { |
|---|
| | | this.$emit('submit', { |
|---|
| | | detail: { |
|---|
| | | value: tempFormData, |
|---|
| | | errors: results |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$emit('validate', results); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // const resetFormData = rawData(tempFormData, this.localData, this.name) |
|---|
| | | let resetFormData = {} |
|---|
| | | resetFormData = rawData(tempFormData, this.name) |
|---|
| | | callback && typeof callback === 'function' && callback(results, resetFormData); |
|---|
| | | |
|---|
| | | if (promise && callback) { |
|---|
| | | return promise; |
|---|
| | | } else { |
|---|
| | | return null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è¿åvalidateäºä»¶ |
|---|
| | | * @param {Object} result |
|---|
| | | */ |
|---|
| | | validateCheck(result) { |
|---|
| | | this.$emit('validate', result); |
|---|
| | | }, |
|---|
| | | _getValue: getValue, |
|---|
| | | _isRequiredField: isRequiredField, |
|---|
| | | _setDataValue: setDataValue, |
|---|
| | | _getDataValue: getDataValue, |
|---|
| | | _realName: realName, |
|---|
| | | _isRealName: isRealName, |
|---|
| | | _isEqual: isEqual |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .uni-forms {} |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * ç®åå¤ç对象æ·è´ |
|---|
| | | * @param {Obejct} 被æ·è´å¯¹è±¡ |
|---|
| | | * @@return {Object} æ·è´å¯¹è±¡ |
|---|
| | | */ |
|---|
| | | export const deepCopy = (val) => { |
|---|
| | | return JSON.parse(JSON.stringify(val)) |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * è¿æ»¤æ°åç±»å |
|---|
| | | * @param {String} format æ°åç±»å |
|---|
| | | * @@return {Boolean} è¿åæ¯å¦ä¸ºæ°åç±»å |
|---|
| | | */ |
|---|
| | | export const typeFilter = (format) => { |
|---|
| | | return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp'; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ value 转æ¢ææå®çç±»åï¼ç¨äºå¤çåå§å¼ï¼åå æ¯åå§å¼éè¦å
¥åºä¸è½ä¸º undefined |
|---|
| | | * @param {String} key å段å |
|---|
| | | * @param {any} value åæ®µå¼ |
|---|
| | | * @param {Object} rules 表åæ ¡éªè§å |
|---|
| | | */ |
|---|
| | | export const getValue = (key, value, rules) => { |
|---|
| | | const isRuleNumType = rules.find(val => val.format && typeFilter(val.format)); |
|---|
| | | const isRuleBoolType = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool'); |
|---|
| | | // è¾å
¥ç±»å为 number |
|---|
| | | if (!!isRuleNumType) { |
|---|
| | | if (!value && value !== 0) { |
|---|
| | | value = null |
|---|
| | | } else { |
|---|
| | | value = isNumber(Number(value)) ? Number(value) : value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è¾å
¥ç±»å为 boolean |
|---|
| | | if (!!isRuleBoolType) { |
|---|
| | | value = isBoolean(value) ? value : false |
|---|
| | | } |
|---|
| | | |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å表åæ°æ® |
|---|
| | | * @param {String|Array} name çå®å称ï¼éè¦ä½¿ç¨ realName è·å |
|---|
| | | * @param {Object} data åå§æ°æ® |
|---|
| | | * @param {any} value éè¦è®¾ç½®çå¼ |
|---|
| | | */ |
|---|
| | | export const setDataValue = (field, formdata, value) => { |
|---|
| | | formdata[field] = value |
|---|
| | | return value || '' |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å表åæ°æ® |
|---|
| | | * @param {String|Array} field çå®å称ï¼éè¦ä½¿ç¨ realName è·å |
|---|
| | | * @param {Object} data åå§æ°æ® |
|---|
| | | */ |
|---|
| | | export const getDataValue = (field, data) => { |
|---|
| | | return objGet(data, field) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å表åç±»å |
|---|
| | | * @param {String|Array} field çå®å称ï¼éè¦ä½¿ç¨ realName è·å |
|---|
| | | */ |
|---|
| | | export const getDataValueType = (field, data) => { |
|---|
| | | const value = getDataValue(field, data) |
|---|
| | | return { |
|---|
| | | type: type(value), |
|---|
| | | value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å表åå¯ç¨ççå®name |
|---|
| | | * @param {String|Array} name 表åname |
|---|
| | | * @@return {String} 表åå¯ç¨ççå®name |
|---|
| | | */ |
|---|
| | | export const realName = (name, data = {}) => { |
|---|
| | | const base_name = _basePath(name) |
|---|
| | | if (typeof base_name === 'object' && Array.isArray(base_name) && base_name.length > 1) { |
|---|
| | | const realname = base_name.reduce((a, b) => a += `#${b}`, '_formdata_') |
|---|
| | | return realname |
|---|
| | | } |
|---|
| | | return base_name[0] || name |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤ææ¯å¦è¡¨åå¯ç¨ççå®name |
|---|
| | | * @param {String|Array} name 表åname |
|---|
| | | * @@return {String} 表åå¯ç¨ççå®name |
|---|
| | | */ |
|---|
| | | export const isRealName = (name) => { |
|---|
| | | const reg = /^_formdata_#*/ |
|---|
| | | return reg.test(name) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å表åæ°æ®çåå§æ ¼å¼ |
|---|
| | | * @@return {Object|Array} object éè¦è§£æçæ°æ® |
|---|
| | | */ |
|---|
| | | export const rawData = (object = {}, name) => { |
|---|
| | | let newData = JSON.parse(JSON.stringify(object)) |
|---|
| | | let formData = {} |
|---|
| | | for(let i in newData){ |
|---|
| | | let path = name2arr(i) |
|---|
| | | objSet(formData,path,newData[i]) |
|---|
| | | } |
|---|
| | | return formData |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * çå®nameè¿å为 array |
|---|
| | | * @param {*} name |
|---|
| | | */ |
|---|
| | | export const name2arr = (name) => { |
|---|
| | | let field = name.replace('_formdata_#', '') |
|---|
| | | field = field.split('#').map(v => (isNumber(v) ? Number(v) : v)) |
|---|
| | | return field |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 对象ä¸è®¾ç½®å¼ |
|---|
| | | * @param {Object|Array} object æºæ°æ® |
|---|
| | | * @param {String| Array} path 'a.b.c' æ ['a',0,'b','c'] |
|---|
| | | * @param {String} value éè¦è®¾ç½®çå¼ |
|---|
| | | */ |
|---|
| | | export const objSet = (object, path, value) => { |
|---|
| | | if (typeof object !== 'object') return object; |
|---|
| | | _basePath(path).reduce((o, k, i, _) => { |
|---|
| | | if (i === _.length - 1) { |
|---|
| | | // è¥éåç»æç´æ¥èµå¼ |
|---|
| | | o[k] = value |
|---|
| | | return null |
|---|
| | | } else if (k in o) { |
|---|
| | | // è¥åå¨å¯¹åºè·¯å¾ï¼åè¿åæ¾å°ç对象ï¼è¿è¡ä¸ä¸æ¬¡éå |
|---|
| | | return o[k] |
|---|
| | | } else { |
|---|
| | | // è¥ä¸åå¨å¯¹åºè·¯å¾ï¼åå建对åºå¯¹è±¡ï¼è¥ä¸ä¸è·¯å¾æ¯æ°åï¼æ°å¯¹è±¡èµå¼ä¸ºç©ºæ°ç»ï¼å¦åèµå¼ä¸ºç©ºå¯¹è±¡ |
|---|
| | | o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {} |
|---|
| | | return o[k] |
|---|
| | | } |
|---|
| | | }, object) |
|---|
| | | // è¿åobject |
|---|
| | | return object; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤ç pathï¼ pathæä¸ç§å½¢å¼ï¼'a[0].b.c'ã'a.0.b.c' å ['a','0','b','c']ï¼éè¦ç»ä¸å¤çææ°ç»ï¼ä¾¿äºåç»ä½¿ç¨ |
|---|
| | | function _basePath(path) { |
|---|
| | | // è¥æ¯æ°ç»ï¼åç´æ¥è¿å |
|---|
| | | if (Array.isArray(path)) return path |
|---|
| | | // è¥æ '[',']'ï¼åæ¿æ¢æå° '[' æ¿æ¢æ '.',å»æ ']' |
|---|
| | | return path.replace(/\[/g, '.').replace(/\]/g, '').split('.') |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ä»å¯¹è±¡ä¸è·åå¼ |
|---|
| | | * @param {Object|Array} object æºæ°æ® |
|---|
| | | * @param {String| Array} path 'a.b.c' æ ['a',0,'b','c'] |
|---|
| | | * @param {String} defaultVal å¦ææ æ³ä»è°ç¨é¾ä¸è·åå¼çé»è®¤å¼ |
|---|
| | | */ |
|---|
| | | export const objGet = (object, path, defaultVal = 'undefined') => { |
|---|
| | | // å
å°pathå¤çæç»ä¸æ ¼å¼ |
|---|
| | | let newPath = _basePath(path) |
|---|
| | | // éå½å¤çï¼è¿åæåç»æ |
|---|
| | | let val = newPath.reduce((o, k) => { |
|---|
| | | return (o || {})[k] |
|---|
| | | }, object); |
|---|
| | | return !val || val !== undefined ? val : defaultVal |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯å¦ä¸º number ç±»å |
|---|
| | | * @param {any} num éè¦å¤æçå¼ |
|---|
| | | * @return {Boolean} æ¯å¦ä¸º number |
|---|
| | | */ |
|---|
| | | export const isNumber = (num) => { |
|---|
| | | return !isNaN(Number(num)) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¯å¦ä¸º boolean ç±»å |
|---|
| | | * @param {any} bool éè¦å¤æçå¼ |
|---|
| | | * @return {Boolean} æ¯å¦ä¸º boolean |
|---|
| | | */ |
|---|
| | | export const isBoolean = (bool) => { |
|---|
| | | return (typeof bool === 'boolean') |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * æ¯å¦æå¿
å¡«å段 |
|---|
| | | * @param {Object} rules è§å |
|---|
| | | * @return {Boolean} æ¯å¦æå¿
å¡«å段 |
|---|
| | | */ |
|---|
| | | export const isRequiredField = (rules) => { |
|---|
| | | let isNoField = false; |
|---|
| | | for (let i = 0; i < rules.length; i++) { |
|---|
| | | const ruleData = rules[i]; |
|---|
| | | if (ruleData.required) { |
|---|
| | | isNoField = true; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return isNoField; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åæ°æ®ç±»å |
|---|
| | | * @param {Any} obj éè¦è·åæ°æ®ç±»åçå¼ |
|---|
| | | */ |
|---|
| | | export const type = (obj) => { |
|---|
| | | var class2type = {}; |
|---|
| | | |
|---|
| | | // çæclass2typeæ å° |
|---|
| | | "Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) { |
|---|
| | | class2type["[object " + item + "]"] = item.toLowerCase(); |
|---|
| | | }) |
|---|
| | | if (obj == null) { |
|---|
| | | return obj + ""; |
|---|
| | | } |
|---|
| | | return typeof obj === "object" || typeof obj === "function" ? |
|---|
| | | class2type[Object.prototype.toString.call(obj)] || "object" : |
|---|
| | | typeof obj; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤æ两个å¼æ¯å¦ç¸ç |
|---|
| | | * @param {any} a å¼ |
|---|
| | | * @param {any} b å¼ |
|---|
| | | * @return {Boolean} æ¯å¦ç¸ç |
|---|
| | | */ |
|---|
| | | export const isEqual = (a, b) => { |
|---|
| | | //å¦æaåbæ¬æ¥å°±å
¨ç |
|---|
| | | if (a === b) { |
|---|
| | | //å¤ææ¯å¦ä¸º0å-0 |
|---|
| | | return a !== 0 || 1 / a === 1 / b; |
|---|
| | | } |
|---|
| | | //å¤ææ¯å¦ä¸ºnullåundefined |
|---|
| | | if (a == null || b == null) { |
|---|
| | | return a === b; |
|---|
| | | } |
|---|
| | | //æ¥ä¸æ¥å¤æaåbçæ°æ®ç±»å |
|---|
| | | var classNameA = toString.call(a), |
|---|
| | | classNameB = toString.call(b); |
|---|
| | | //å¦ææ°æ®ç±»åä¸ç¸çï¼åè¿åfalse |
|---|
| | | if (classNameA !== classNameB) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | //å¦ææ°æ®ç±»åç¸çï¼åæ ¹æ®ä¸åæ°æ®ç±»ååå«å¤æ |
|---|
| | | switch (classNameA) { |
|---|
| | | case '[object RegExp]': |
|---|
| | | case '[object String]': |
|---|
| | | //è¿è¡å符串转æ¢æ¯è¾ |
|---|
| | | return '' + a === '' + b; |
|---|
| | | case '[object Number]': |
|---|
| | | //è¿è¡æ°å转æ¢æ¯è¾,å¤ææ¯å¦ä¸ºNaN |
|---|
| | | if (+a !== +a) { |
|---|
| | | return +b !== +b; |
|---|
| | | } |
|---|
| | | //å¤ææ¯å¦ä¸º0æ-0 |
|---|
| | | return +a === 0 ? 1 / +a === 1 / b : +a === +b; |
|---|
| | | case '[object Date]': |
|---|
| | | case '[object Boolean]': |
|---|
| | | return +a === +b; |
|---|
| | | } |
|---|
| | | //å¦ææ¯å¯¹è±¡ç±»å |
|---|
| | | if (classNameA == '[object Object]') { |
|---|
| | | //è·åaåbçå±æ§é¿åº¦ |
|---|
| | | var propsA = Object.getOwnPropertyNames(a), |
|---|
| | | propsB = Object.getOwnPropertyNames(b); |
|---|
| | | if (propsA.length != propsB.length) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | for (var i = 0; i < propsA.length; i++) { |
|---|
| | | var propName = propsA[i]; |
|---|
| | | //å¦æ对åºå±æ§å¯¹åºå¼ä¸ç¸çï¼åè¿åfalse |
|---|
| | | if (a[propName] !== b[propName]) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | //å¦ææ¯æ°ç»ç±»å |
|---|
| | | if (classNameA == '[object Array]') { |
|---|
| | | if (a.toString() == b.toString()) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | var pattern = { |
|---|
| | | email: /^\S+?@\S+?\.\S+?$/, |
|---|
| | | idcard: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, |
|---|
| | | url: new RegExp( |
|---|
| | | "^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$", |
|---|
| | | 'i') |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const FORMAT_MAPPING = { |
|---|
| | | "int": 'integer', |
|---|
| | | "bool": 'boolean', |
|---|
| | | "double": 'number', |
|---|
| | | "long": 'number', |
|---|
| | | "password": 'string' |
|---|
| | | // "fileurls": 'array' |
|---|
| | | } |
|---|
| | | |
|---|
| | | function formatMessage(args, resources = '') { |
|---|
| | | var defaultMessage = ['label'] |
|---|
| | | defaultMessage.forEach((item) => { |
|---|
| | | if (args[item] === undefined) { |
|---|
| | | args[item] = '' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let str = resources |
|---|
| | | for (let key in args) { |
|---|
| | | let reg = new RegExp('{' + key + '}') |
|---|
| | | str = str.replace(reg, args[key]) |
|---|
| | | } |
|---|
| | | return str |
|---|
| | | } |
|---|
| | | |
|---|
| | | function isEmptyValue(value, type) { |
|---|
| | | if (value === undefined || value === null) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (typeof value === 'string' && !value) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (Array.isArray(value) && !value.length) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (type === 'object' && !Object.keys(value).length) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const types = { |
|---|
| | | integer(value) { |
|---|
| | | return types.number(value) && parseInt(value, 10) === value; |
|---|
| | | }, |
|---|
| | | string(value) { |
|---|
| | | return typeof value === 'string'; |
|---|
| | | }, |
|---|
| | | number(value) { |
|---|
| | | if (isNaN(value)) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | return typeof value === 'number'; |
|---|
| | | }, |
|---|
| | | "boolean": function(value) { |
|---|
| | | return typeof value === 'boolean'; |
|---|
| | | }, |
|---|
| | | "float": function(value) { |
|---|
| | | return types.number(value) && !types.integer(value); |
|---|
| | | }, |
|---|
| | | array(value) { |
|---|
| | | return Array.isArray(value); |
|---|
| | | }, |
|---|
| | | object(value) { |
|---|
| | | return typeof value === 'object' && !types.array(value); |
|---|
| | | }, |
|---|
| | | date(value) { |
|---|
| | | return value instanceof Date; |
|---|
| | | }, |
|---|
| | | timestamp(value) { |
|---|
| | | if (!this.integer(value) || Math.abs(value).toString().length > 16) { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | return true; |
|---|
| | | }, |
|---|
| | | file(value) { |
|---|
| | | return typeof value.url === 'string'; |
|---|
| | | }, |
|---|
| | | email(value) { |
|---|
| | | return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255; |
|---|
| | | }, |
|---|
| | | url(value) { |
|---|
| | | return typeof value === 'string' && !!value.match(pattern.url); |
|---|
| | | }, |
|---|
| | | pattern(reg, value) { |
|---|
| | | try { |
|---|
| | | return new RegExp(reg).test(value); |
|---|
| | | } catch (e) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | method(value) { |
|---|
| | | return typeof value === 'function'; |
|---|
| | | }, |
|---|
| | | idcard(value) { |
|---|
| | | return typeof value === 'string' && !!value.match(pattern.idcard); |
|---|
| | | }, |
|---|
| | | 'url-https'(value) { |
|---|
| | | return this.url(value) && value.startsWith('https://'); |
|---|
| | | }, |
|---|
| | | 'url-scheme'(value) { |
|---|
| | | return value.startsWith('://'); |
|---|
| | | }, |
|---|
| | | 'url-web'(value) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | class RuleValidator { |
|---|
| | | |
|---|
| | | constructor(message) { |
|---|
| | | this._message = message |
|---|
| | | } |
|---|
| | | |
|---|
| | | async validateRule(fieldKey, fieldValue, value, data, allData) { |
|---|
| | | var result = null |
|---|
| | | |
|---|
| | | let rules = fieldValue.rules |
|---|
| | | |
|---|
| | | let hasRequired = rules.findIndex((item) => { |
|---|
| | | return item.required |
|---|
| | | }) |
|---|
| | | if (hasRequired < 0) { |
|---|
| | | if (value === null || value === undefined) { |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | if (typeof value === 'string' && !value.length) { |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | var message = this._message |
|---|
| | | |
|---|
| | | if (rules === undefined) { |
|---|
| | | return message['default'] |
|---|
| | | } |
|---|
| | | |
|---|
| | | for (var i = 0; i < rules.length; i++) { |
|---|
| | | let rule = rules[i] |
|---|
| | | let vt = this._getValidateType(rule) |
|---|
| | | |
|---|
| | | Object.assign(rule, { |
|---|
| | | label: fieldValue.label || `["${fieldKey}"]` |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (RuleValidatorHelper[vt]) { |
|---|
| | | result = RuleValidatorHelper[vt](rule, value, message) |
|---|
| | | if (result != null) { |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (rule.validateExpr) { |
|---|
| | | let now = Date.now() |
|---|
| | | let resultExpr = rule.validateExpr(value, allData, now) |
|---|
| | | if (resultExpr === false) { |
|---|
| | | result = this._getMessage(rule, rule.errorMessage || this._message['default']) |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (rule.validateFunction) { |
|---|
| | | result = await this.validateFunction(rule, value, data, allData, vt) |
|---|
| | | if (result !== null) { |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (result !== null) { |
|---|
| | | result = message.TAG + result |
|---|
| | | } |
|---|
| | | |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | |
|---|
| | | async validateFunction(rule, value, data, allData, vt) { |
|---|
| | | let result = null |
|---|
| | | try { |
|---|
| | | let callbackMessage = null |
|---|
| | | const res = await rule.validateFunction(rule, value, allData || data, (message) => { |
|---|
| | | callbackMessage = message |
|---|
| | | }) |
|---|
| | | if (callbackMessage || (typeof res === 'string' && res) || res === false) { |
|---|
| | | result = this._getMessage(rule, callbackMessage || res, vt) |
|---|
| | | } |
|---|
| | | } catch (e) { |
|---|
| | | result = this._getMessage(rule, e.message, vt) |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | |
|---|
| | | _getMessage(rule, message, vt) { |
|---|
| | | return formatMessage(rule, message || rule.errorMessage || this._message[vt] || message['default']) |
|---|
| | | } |
|---|
| | | |
|---|
| | | _getValidateType(rule) { |
|---|
| | | var result = '' |
|---|
| | | if (rule.required) { |
|---|
| | | result = 'required' |
|---|
| | | } else if (rule.format) { |
|---|
| | | result = 'format' |
|---|
| | | } else if (rule.arrayType) { |
|---|
| | | result = 'arrayTypeFormat' |
|---|
| | | } else if (rule.range) { |
|---|
| | | result = 'range' |
|---|
| | | } else if (rule.maximum !== undefined || rule.minimum !== undefined) { |
|---|
| | | result = 'rangeNumber' |
|---|
| | | } else if (rule.maxLength !== undefined || rule.minLength !== undefined) { |
|---|
| | | result = 'rangeLength' |
|---|
| | | } else if (rule.pattern) { |
|---|
| | | result = 'pattern' |
|---|
| | | } else if (rule.validateFunction) { |
|---|
| | | result = 'validateFunction' |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const RuleValidatorHelper = { |
|---|
| | | required(rule, value, message) { |
|---|
| | | if (rule.required && isEmptyValue(value, rule.format || typeof value)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message.required); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | range(rule, value, message) { |
|---|
| | | const { |
|---|
| | | range, |
|---|
| | | errorMessage |
|---|
| | | } = rule; |
|---|
| | | |
|---|
| | | let list = new Array(range.length); |
|---|
| | | for (let i = 0; i < range.length; i++) { |
|---|
| | | const item = range[i]; |
|---|
| | | if (types.object(item) && item.value !== undefined) { |
|---|
| | | list[i] = item.value; |
|---|
| | | } else { |
|---|
| | | list[i] = item; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let result = false |
|---|
| | | if (Array.isArray(value)) { |
|---|
| | | result = (new Set(value.concat(list)).size === list.length); |
|---|
| | | } else { |
|---|
| | | if (list.indexOf(value) > -1) { |
|---|
| | | result = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!result) { |
|---|
| | | return formatMessage(rule, errorMessage || message['enum']); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | rangeNumber(rule, value, message) { |
|---|
| | | if (!types.number(value)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message.pattern.mismatch); |
|---|
| | | } |
|---|
| | | |
|---|
| | | let { |
|---|
| | | minimum, |
|---|
| | | maximum, |
|---|
| | | exclusiveMinimum, |
|---|
| | | exclusiveMaximum |
|---|
| | | } = rule; |
|---|
| | | let min = exclusiveMinimum ? value <= minimum : value < minimum; |
|---|
| | | let max = exclusiveMaximum ? value >= maximum : value > maximum; |
|---|
| | | |
|---|
| | | if (minimum !== undefined && min) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMinimum ? |
|---|
| | | 'exclusiveMinimum' : 'minimum' |
|---|
| | | ]) |
|---|
| | | } else if (maximum !== undefined && max) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMaximum ? |
|---|
| | | 'exclusiveMaximum' : 'maximum' |
|---|
| | | ]) |
|---|
| | | } else if (minimum !== undefined && maximum !== undefined && (min || max)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message['number'].range) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | rangeLength(rule, value, message) { |
|---|
| | | if (!types.string(value) && !types.array(value)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message.pattern.mismatch); |
|---|
| | | } |
|---|
| | | |
|---|
| | | let min = rule.minLength; |
|---|
| | | let max = rule.maxLength; |
|---|
| | | let val = value.length; |
|---|
| | | |
|---|
| | | if (min !== undefined && val < min) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message['length'].minLength) |
|---|
| | | } else if (max !== undefined && val > max) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message['length'].maxLength) |
|---|
| | | } else if (min !== undefined && max !== undefined && (val < min || val > max)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message['length'].range) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | pattern(rule, value, message) { |
|---|
| | | if (!types['pattern'](rule.pattern, value)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message.pattern.mismatch); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | format(rule, value, message) { |
|---|
| | | var customTypes = Object.keys(types); |
|---|
| | | var format = FORMAT_MAPPING[rule.format] ? FORMAT_MAPPING[rule.format] : (rule.format || rule.arrayType); |
|---|
| | | |
|---|
| | | if (customTypes.indexOf(format) > -1) { |
|---|
| | | if (!types[format](value)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message.typeError); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | arrayTypeFormat(rule, value, message) { |
|---|
| | | if (!Array.isArray(value)) { |
|---|
| | | return formatMessage(rule, rule.errorMessage || message.typeError); |
|---|
| | | } |
|---|
| | | |
|---|
| | | for (let i = 0; i < value.length; i++) { |
|---|
| | | const element = value[i]; |
|---|
| | | let formatResult = this.format(rule, element, message) |
|---|
| | | if (formatResult !== null) { |
|---|
| | | return formatResult |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | class SchemaValidator extends RuleValidator { |
|---|
| | | |
|---|
| | | constructor(schema, options) { |
|---|
| | | super(SchemaValidator.message); |
|---|
| | | |
|---|
| | | this._schema = schema |
|---|
| | | this._options = options || null |
|---|
| | | } |
|---|
| | | |
|---|
| | | updateSchema(schema) { |
|---|
| | | this._schema = schema |
|---|
| | | } |
|---|
| | | |
|---|
| | | async validate(data, allData) { |
|---|
| | | let result = this._checkFieldInSchema(data) |
|---|
| | | if (!result) { |
|---|
| | | result = await this.invokeValidate(data, false, allData) |
|---|
| | | } |
|---|
| | | return result.length ? result[0] : null |
|---|
| | | } |
|---|
| | | |
|---|
| | | async validateAll(data, allData) { |
|---|
| | | let result = this._checkFieldInSchema(data) |
|---|
| | | if (!result) { |
|---|
| | | result = await this.invokeValidate(data, true, allData) |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | |
|---|
| | | async validateUpdate(data, allData) { |
|---|
| | | let result = this._checkFieldInSchema(data) |
|---|
| | | if (!result) { |
|---|
| | | result = await this.invokeValidateUpdate(data, false, allData) |
|---|
| | | } |
|---|
| | | return result.length ? result[0] : null |
|---|
| | | } |
|---|
| | | |
|---|
| | | async invokeValidate(data, all, allData) { |
|---|
| | | let result = [] |
|---|
| | | let schema = this._schema |
|---|
| | | for (let key in schema) { |
|---|
| | | let value = schema[key] |
|---|
| | | let errorMessage = await this.validateRule(key, value, data[key], data, allData) |
|---|
| | | if (errorMessage != null) { |
|---|
| | | result.push({ |
|---|
| | | key, |
|---|
| | | errorMessage |
|---|
| | | }) |
|---|
| | | if (!all) break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | |
|---|
| | | async invokeValidateUpdate(data, all, allData) { |
|---|
| | | let result = [] |
|---|
| | | for (let key in data) { |
|---|
| | | let errorMessage = await this.validateRule(key, this._schema[key], data[key], data, allData) |
|---|
| | | if (errorMessage != null) { |
|---|
| | | result.push({ |
|---|
| | | key, |
|---|
| | | errorMessage |
|---|
| | | }) |
|---|
| | | if (!all) break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | |
|---|
| | | _checkFieldInSchema(data) { |
|---|
| | | var keys = Object.keys(data) |
|---|
| | | var keys2 = Object.keys(this._schema) |
|---|
| | | if (new Set(keys.concat(keys2)).size === keys2.length) { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | |
|---|
| | | var noExistFields = keys.filter((key) => { |
|---|
| | | return keys2.indexOf(key) < 0; |
|---|
| | | }) |
|---|
| | | var errorMessage = formatMessage({ |
|---|
| | | field: JSON.stringify(noExistFields) |
|---|
| | | }, SchemaValidator.message.TAG + SchemaValidator.message['defaultInvalid']) |
|---|
| | | return [{ |
|---|
| | | key: 'invalid', |
|---|
| | | errorMessage |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function Message() { |
|---|
| | | return { |
|---|
| | | TAG: "", |
|---|
| | | default: 'éªè¯é误', |
|---|
| | | defaultInvalid: 'æ交çå段{field}å¨æ°æ®åºä¸å¹¶ä¸åå¨', |
|---|
| | | validateFunction: 'éªè¯æ æ', |
|---|
| | | required: '{label}å¿
å¡«', |
|---|
| | | 'enum': '{label}è¶
åºèå´', |
|---|
| | | timestamp: '{label}æ ¼å¼æ æ', |
|---|
| | | whitespace: '{label}ä¸è½ä¸ºç©º', |
|---|
| | | typeError: '{label}ç±»åæ æ', |
|---|
| | | date: { |
|---|
| | | format: '{label}æ¥æ{value}æ ¼å¼æ æ', |
|---|
| | | parse: '{label}æ¥ææ æ³è§£æ,{value}æ æ', |
|---|
| | | invalid: '{label}æ¥æ{value}æ æ' |
|---|
| | | }, |
|---|
| | | length: { |
|---|
| | | minLength: '{label}é¿åº¦ä¸è½å°äº{minLength}', |
|---|
| | | maxLength: '{label}é¿åº¦ä¸è½è¶
è¿{maxLength}', |
|---|
| | | range: '{label}å¿
é¡»ä»äº{minLength}å{maxLength}ä¹é´' |
|---|
| | | }, |
|---|
| | | number: { |
|---|
| | | minimum: '{label}ä¸è½å°äº{minimum}', |
|---|
| | | maximum: '{label}ä¸è½å¤§äº{maximum}', |
|---|
| | | exclusiveMinimum: '{label}ä¸è½å°äºçäº{minimum}', |
|---|
| | | exclusiveMaximum: '{label}ä¸è½å¤§äºçäº{maximum}', |
|---|
| | | range: '{label}å¿
é¡»ä»äº{minimum}and{maximum}ä¹é´' |
|---|
| | | }, |
|---|
| | | pattern: { |
|---|
| | | mismatch: '{label}æ ¼å¼ä¸å¹é
' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | SchemaValidator.message = new Message(); |
|---|
| | | |
|---|
| | | export default SchemaValidator |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-forms", |
|---|
| | | "displayName": "uni-forms 表å", |
|---|
| | | "version": "1.4.8", |
|---|
| | | "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", |
|---|
| | | "èç": "u" |
|---|
| | | }, |
|---|
| | | "Vue": { |
|---|
| | | "vue2": "y", |
|---|
| | | "vue3": "y" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## Forms 表å |
|---|
| | | |
|---|
| | | > **ç»ä»¶åï¼uni-forms** |
|---|
| | | > 代ç åï¼ `uForms`ã`uni-forms-item` |
|---|
| | | > å
³èç»ä»¶ï¼`uni-forms-item`ã`uni-easyinput`ã`uni-data-checkbox`ã`uni-group`ã |
|---|
| | | |
|---|
| | | |
|---|
| | | uni-appçå
ç½®ç»ä»¶å·²ç»æäº `<form>`ç»ä»¶ï¼ç¨äºæ交表åå
容ã |
|---|
| | | |
|---|
| | | ç¶èå ä¹æ¯ä¸ªè¡¨åé½éè¦å表åéªè¯ï¼ä¸ºäºæ¹ä¾¿å表åéªè¯ï¼åå°éå¤å¼åï¼`uni ui` ååºäº `<form>`ç»ä»¶å°è£
äº `<uni-forms>`ç»ä»¶ï¼å
ç½®äºè¡¨åéªè¯åè½ã |
|---|
| | | |
|---|
| | | `<uni-forms>` æä¾äº `rules`å±æ§æ¥æè¿°æ ¡éªè§åã`<uni-forms-item>`åç»ä»¶æ¥å
裹å
·ä½ç表å项ï¼ä»¥åç»åçæä¸æ¹ç»ä»¶æä¾äº `binddata()` æ¥è®¾ç½®è¡¨åå¼ã |
|---|
| | | |
|---|
| | | æ¯ä¸ªè¦æ ¡éªç表å项ï¼ä¸ç®¡inputè¿æ¯checkboxï¼é½å¿
é¡»æ¾å¨`<uni-forms-item>`ç»ä»¶ä¸ï¼ä¸ä¸ä¸ª`<uni-forms-item>`ç»ä»¶åªè½æ¾ç½®ä¸ä¸ªè¡¨å项ã |
|---|
| | | |
|---|
| | | `<uni-forms-item>`ç»ä»¶å
é¨é¢çäºæ¾ç¤ºerror messageçåºåï¼é»è®¤æ¯å¨è¡¨å项çåºé¨ã |
|---|
| | | |
|---|
| | | å¦å¤ï¼`<uni-forms>`ç»ä»¶ä¸é¢çå个表å项ï¼å¯ä»¥éè¿`<uni-group>`å
裹为ä¸åçåç»ãåä¸`<uni-group>`ä¸çä¸å表å项ç®å°èæ¢å¨ä¸èµ·ï¼åå
¶ä»groupä¿æåç´é´è·ã`<uni-group>`ä»
å½±åè§è§ææã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-forms) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.2.1ï¼2022-05-30ï¼ |
|---|
| | | - æ°å¢ statå±æ§ï¼æ¯å¦å¼å¯uniç»è®¡åè½ |
|---|
| | | ## 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-goods-nav](https://uniapp.dcloud.io/component/uniui/uni-goods-nav) |
|---|
| | | ## 1.1.1ï¼2021-08-24ï¼ |
|---|
| | | - æ°å¢ æ¯æå½é
å |
|---|
| | | ## 1.1.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.0.7ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.0.6ï¼2021-04-21ï¼ |
|---|
| | | - ä¼å æ·»å ä¾èµ uni-icons, 导å
¥åèªå¨ä¸è½½ä¾èµ |
|---|
| | | ## 1.0.5ï¼2021-02-05ï¼ |
|---|
| | | - ä¼å ç»ä»¶å¼ç¨å
³ç³»ï¼éè¿uni_moduleså¼ç¨ç»ä»¶ |
|---|
| | | |
|---|
| | | ## 1.0.4ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-goods-nav.options.shop": "shop", |
|---|
| | | "uni-goods-nav.options.cart": "cart", |
|---|
| | | "uni-goods-nav.buttonGroup.addToCart": "add to cart", |
|---|
| | | "uni-goods-nav.buttonGroup.buyNow": "buy now" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-goods-nav.options.shop": "åºéº", |
|---|
| | | "uni-goods-nav.options.cart": "è´ç©è½¦", |
|---|
| | | "uni-goods-nav.buttonGroup.addToCart": "å å
¥è´ç©è½¦", |
|---|
| | | "uni-goods-nav.buttonGroup.buyNow": "ç«å³è´ä¹°" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-goods-nav.options.shop": "åºéª", |
|---|
| | | "uni-goods-nav.options.cart": "è³¼ç©è»", |
|---|
| | | "uni-goods-nav.buttonGroup.addToCart": "å å
¥è³¼ç©è»", |
|---|
| | | "uni-goods-nav.buttonGroup.buyNow": "ç«å³è³¼è²·" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-goods-nav"> |
|---|
| | | <!-- åºé¨å ä½ --> |
|---|
| | | <view class="uni-tab__seat" /> |
|---|
| | | <view class="uni-tab__cart-box flex"> |
|---|
| | | <view class="flex uni-tab__cart-sub-left"> |
|---|
| | | <view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)"> |
|---|
| | | <view class="uni-tab__icon"> |
|---|
| | | <uni-icons :type="item.icon" size="20" color="#646566"></uni-icons> |
|---|
| | | <!-- <image class="image" :src="item.icon" mode="widthFix" /> --> |
|---|
| | | </view> |
|---|
| | | <text class="uni-tab__text">{{ item.text }}</text> |
|---|
| | | <view class="flex uni-tab__dot-box"> |
|---|
| | | <text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000', |
|---|
| | | color:item.infoColor?item.infoColor:'#fff' |
|---|
| | | }">{{ item.info }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right "> |
|---|
| | | <view v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}" |
|---|
| | | class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | initVueI18n |
|---|
| | | } from '@dcloudio/uni-i18n' |
|---|
| | | import messages from './i18n/index.js' |
|---|
| | | const { t } = initVueI18n(messages) |
|---|
| | | /** |
|---|
| | | * GoodsNav ååå¯¼èª |
|---|
| | | * @description ååå å
¥è´ç©è½¦ãç«å³è´ä¹°ç |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=865 |
|---|
| | | * @property {Array} options ç»ä»¶åæ° |
|---|
| | | * @property {Array} buttonGroup ç»ä»¶æé®ç»åæ° |
|---|
| | | * @property {Boolean} fill = [true | false] ç»ä»¶æé®ç»åæ° |
|---|
| | | * @property {Boolean} stat æ¯å¦å¼å¯ç»è®¡åè½ |
|---|
| | | * @event {Function} click 左侧ç¹å»äºä»¶ |
|---|
| | | * @event {Function} buttonClick å³ä¾§æé®ç»ç¹å»äºä»¶ |
|---|
| | | * @example <uni-goods-nav :fill="true" options="" buttonGroup="buttonGroup" @click="" @buttonClick="" /> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniGoodsNav', |
|---|
| | | emits:['click','buttonClick'], |
|---|
| | | props: { |
|---|
| | | options: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [{ |
|---|
| | | icon: 'shop', |
|---|
| | | text: t("uni-goods-nav.options.shop"), |
|---|
| | | }, { |
|---|
| | | icon: 'cart', |
|---|
| | | text: t("uni-goods-nav.options.cart") |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | buttonGroup: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [{ |
|---|
| | | text: t("uni-goods-nav.buttonGroup.addToCart"), |
|---|
| | | backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)', |
|---|
| | | color: '#fff' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | text: t("uni-goods-nav.buttonGroup.buyNow"), |
|---|
| | | backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)', |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fill: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | stat:{ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClick(index, item) { |
|---|
| | | this.$emit('click', { |
|---|
| | | index, |
|---|
| | | content: item, |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | buttonClick(index, item) { |
|---|
| | | if (uni.report && this.stat) { |
|---|
| | | uni.report(item.text, item.text) |
|---|
| | | } |
|---|
| | | this.$emit('buttonClick', { |
|---|
| | | index, |
|---|
| | | content: item |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | .flex { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-goods-nav { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-box { |
|---|
| | | flex: 1; |
|---|
| | | height: 50px; |
|---|
| | | background-color: #fff; |
|---|
| | | z-index: 900; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-sub-left { |
|---|
| | | padding: 0 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-sub-right { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__right { |
|---|
| | | margin: 5px 0; |
|---|
| | | margin-right: 10px; |
|---|
| | | border-radius: 100px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-button-left { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | // flex: 1; |
|---|
| | | position: relative; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-direction: column; |
|---|
| | | margin: 0 10px; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__icon { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .image { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__text { |
|---|
| | | margin-top: 3px; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #646566; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-button-right { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-button-right-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__cart-button-right:active { |
|---|
| | | opacity: 0.7; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__dot-box { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | /* #endif */ |
|---|
| | | position: absolute; |
|---|
| | | right: -2px; |
|---|
| | | top: 2px; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | // width: 0; |
|---|
| | | // height: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__dot { |
|---|
| | | // width: 30rpx; |
|---|
| | | // height: 30rpx; |
|---|
| | | padding: 0 4px; |
|---|
| | | line-height: 15px; |
|---|
| | | color: #ffffff; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 12px; |
|---|
| | | background-color: #ff0000; |
|---|
| | | border-radius: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-tab__dots { |
|---|
| | | padding: 0 4px; |
|---|
| | | // width: auto; |
|---|
| | | border-radius: 15px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-goods-nav", |
|---|
| | | "displayName": "uni-goods-nav åå导èª", |
|---|
| | | "version": "1.2.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", |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## GoodsNav ååå¯¼èª |
|---|
| | | > **ç»ä»¶åï¼uni-goods-nav** |
|---|
| | | > 代ç åï¼ `uGoodsNav` |
|---|
| | | |
|---|
| | | ååå å
¥è´ç©è½¦ï¼ç«å³è´ä¹°çã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-goods-nav) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.4.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-grid](https://uniapp.dcloud.io/component/uniui/uni-grid) |
|---|
| | | ## 1.3.2ï¼2021-11-09ï¼ |
|---|
| | | - æ°å¢ æä¾ç»ä»¶è®¾è®¡èµæºï¼ç»ä»¶æ ·å¼è°æ´ |
|---|
| | | ## 1.3.1ï¼2021-07-30ï¼ |
|---|
| | | - ä¼å vue3ä¸äºä»¶è¦åçé®é¢ |
|---|
| | | ## 1.3.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.2.4ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.2.3ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item"> |
|---|
| | | <view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }" |
|---|
| | | :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }" |
|---|
| | | class="uni-grid-item__box" @click="_onClick"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * GridItem å®«æ ¼ |
|---|
| | | * @description å®«æ ¼ç»ä»¶ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=27 |
|---|
| | | * @property {Number} index åç»ä»¶çå¯ä¸æ è¯ ï¼ç¹å»girdä¼è¿åå½åçæ è¯ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniGridItem', |
|---|
| | | inject: ['grid'], |
|---|
| | | props: { |
|---|
| | | index: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | column: 0, |
|---|
| | | showBorder: true, |
|---|
| | | square: true, |
|---|
| | | highlight: true, |
|---|
| | | left: 0, |
|---|
| | | top: 0, |
|---|
| | | openNum: 2, |
|---|
| | | width: 0, |
|---|
| | | borderColor: '#e5e5e5' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.column = this.grid.column |
|---|
| | | this.showBorder = this.grid.showBorder |
|---|
| | | this.square = this.grid.square |
|---|
| | | this.highlight = this.grid.highlight |
|---|
| | | this.top = this.hor === 0 ? this.grid.hor : this.hor |
|---|
| | | this.left = this.ver === 0 ? this.grid.ver : this.ver |
|---|
| | | this.borderColor = this.grid.borderColor |
|---|
| | | this.grid.children.push(this) |
|---|
| | | // this.grid.init() |
|---|
| | | this.width = this.grid.width |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | this.grid.children.forEach((item, index) => { |
|---|
| | | if (item === this) { |
|---|
| | | this.grid.children.splice(index, 1) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | _onClick() { |
|---|
| | | this.grid.change({ |
|---|
| | | detail: { |
|---|
| | | index: this.index |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .uni-grid-item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-grid-item__box { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | position: relative; |
|---|
| | | flex: 1; |
|---|
| | | flex-direction: column; |
|---|
| | | // justify-content: center; |
|---|
| | | // align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-grid-item--border { |
|---|
| | | position: relative; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-bottom-color: #D2D2D2; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | border-bottom-width: 0.5px; |
|---|
| | | border-right-color: #D2D2D2; |
|---|
| | | border-right-style: solid; |
|---|
| | | border-right-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | z-index: 0; |
|---|
| | | border-bottom: 1px #D2D2D2 solid; |
|---|
| | | border-right: 1px #D2D2D2 solid; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .uni-grid-item--border-top { |
|---|
| | | position: relative; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-top-color: #D2D2D2; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | border-top: 1px #D2D2D2 solid; |
|---|
| | | z-index: 0; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .uni-highlight:active { |
|---|
| | | background-color: #f1f1f1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-grid-wrap"> |
|---|
| | | <view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = uni.requireNativePlugin('dom'); |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Grid å®«æ ¼ |
|---|
| | | * @description å®«æ ¼ç»ä»¶ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=27 |
|---|
| | | * @property {Number} column æ¯åæ¾ç¤ºä¸ªæ° |
|---|
| | | * @property {String} borderColor è¾¹æ¡é¢è² |
|---|
| | | * @property {Boolean} showBorder æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | * @property {Boolean} square æ¯å¦æ¹å½¢æ¾ç¤º |
|---|
| | | * @property {Boolean} Boolean ç¹å»èæ¯æ¯å¦é«äº® |
|---|
| | | * @event {Function} change ç¹å» grid 触åï¼e={detail:{index:0}}ï¼index 为å½åç¹å» gird ä¸æ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniGrid', |
|---|
| | | emits:['change'], |
|---|
| | | props: { |
|---|
| | | // æ¯åæ¾ç¤ºä¸ªæ° |
|---|
| | | column: { |
|---|
| | | type: Number, |
|---|
| | | default: 3 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | showBorder: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // è¾¹æ¡é¢è² |
|---|
| | | borderColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#D2D2D2' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ£æ¹å½¢æ¾ç¤º,é»è®¤ä¸º true |
|---|
| | | square: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | highlight: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | provide() { |
|---|
| | | return { |
|---|
| | | grid: this |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
|---|
| | | return { |
|---|
| | | elId, |
|---|
| | | width: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | setTimeout(() => { |
|---|
| | | this._getSize((width) => { |
|---|
| | | this.children.forEach((item, index) => { |
|---|
| | | item.width = width |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, 50) |
|---|
| | | }, |
|---|
| | | change(e) { |
|---|
| | | this.$emit('change', e) |
|---|
| | | }, |
|---|
| | | _getSize(fn) { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | uni.createSelectorQuery() |
|---|
| | | .in(this) |
|---|
| | | .select(`#${this.elId}`) |
|---|
| | | .boundingClientRect() |
|---|
| | | .exec(ret => { |
|---|
| | | this.width = parseInt((ret[0].width - 1) / this.column) + 'px' |
|---|
| | | fn(this.width) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | dom.getComponentRect(this.$refs['uni-grid'], (ret) => { |
|---|
| | | this.width = parseInt((ret.size.width - 1) / this.column) + 'px' |
|---|
| | | fn(this.width) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .uni-grid-wrap { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | flex-direction: column; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-grid { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | // flex: 1; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-grid--border { |
|---|
| | | position: relative; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-left-color: #D2D2D2; |
|---|
| | | border-left-style: solid; |
|---|
| | | border-left-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | z-index: 1; |
|---|
| | | border-left: 1px #D2D2D2 solid; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-grid", |
|---|
| | | "displayName": "uni-grid å®«æ ¼", |
|---|
| | | "version": "1.4.0", |
|---|
| | | "description": "Grid å®«æ ¼ç»ä»¶ï¼æä¾ç§»å¨ç«¯å¸¸è§çå®«æ ¼å¸å±ï¼å¦ä¹å®«æ ¼ã", |
|---|
| | | "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","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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## Grid å®«æ ¼ |
|---|
| | | > **ç»ä»¶åï¼uni-grid** |
|---|
| | | > 代ç åï¼ `uGrid` |
|---|
| | | |
|---|
| | | |
|---|
| | | å®«æ ¼ç»ä»¶ã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-grid) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.2.2ï¼2022-05-30ï¼ |
|---|
| | | - æ°å¢ statå±æ§ï¼æ¯å¦å¼å¯uniç»è®¡åè½ |
|---|
| | | ## 1.2.1ï¼2021-11-22ï¼ |
|---|
| | | - ä¿®å¤ vue3ä¸æäºscssåéæ æ³æ¾å°çé®é¢ |
|---|
| | | ## 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-group](https://uniapp.dcloud.io/component/uniui/uni-group) |
|---|
| | | ## 1.1.7ï¼2021-11-08ï¼ |
|---|
| | | ## 1.1.0ï¼2021-07-30ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | - ä¼å ç»ä»¶ææ¡£ |
|---|
| | | ## 1.0.3ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.0.2ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| | | - ä¼å å
¼å®¹ nvue é¡µé¢ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-group" :class="['uni-group--'+mode ,margin?'group-margin':'']" :style="{marginTop: `${top}px` }"> |
|---|
| | | <slot name="title"> |
|---|
| | | <view v-if="title" class="uni-group__title" :style="{'padding-left':border?'30px':'15px'}"> |
|---|
| | | <text class="uni-group__title-text">{{ title }}</text> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <view class="uni-group__content" :class="{'group-conent-padding':border}"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * Group åç» |
|---|
| | | * @description 表åå段åç» |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=3281 |
|---|
| | | * @property {String} title 主æ é¢ |
|---|
| | | * @property {Number} top åç»é´é |
|---|
| | | * @property {Number} mode æ¨¡å¼ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'uniGroup', |
|---|
| | | emits:['click'], |
|---|
| | | props: { |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | top: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 10 |
|---|
| | | }, |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'default' |
|---|
| | | }, |
|---|
| | | stat:{ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | margin: false, |
|---|
| | | border: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | title(newVal) { |
|---|
| | | if (uni.report && this.stat && newVal !== '') { |
|---|
| | | uni.report('title', newVal) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.form = this.getForm() |
|---|
| | | if (this.form) { |
|---|
| | | this.margin = true |
|---|
| | | this.border = this.form.border |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * è·åç¶å
ç´ å®ä¾ |
|---|
| | | */ |
|---|
| | | getForm() { |
|---|
| | | let parent = this.$parent; |
|---|
| | | let parentName = parent.$options.name; |
|---|
| | | while (parentName !== 'uniForms') { |
|---|
| | | parent = parent.$parent; |
|---|
| | | if (!parent) return false |
|---|
| | | parentName = parent.$options.name; |
|---|
| | | } |
|---|
| | | return parent; |
|---|
| | | }, |
|---|
| | | onClick() { |
|---|
| | | this.$emit('click') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" > |
|---|
| | | .uni-group { |
|---|
| | | background: #fff; |
|---|
| | | margin-top: 10px; |
|---|
| | | // border: 1px red solid; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .group-margin { |
|---|
| | | // margin: 0 -15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-group__title { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | padding-left: 15px; |
|---|
| | | height: 40px; |
|---|
| | | background-color: #eee; |
|---|
| | | font-weight: normal; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-group__content { |
|---|
| | | padding: 15px; |
|---|
| | | // padding-bottom: 5px; |
|---|
| | | // background-color: #FFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .group-conent-padding { |
|---|
| | | padding: 0 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-group__title-text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .distraction { |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-group--card { |
|---|
| | | margin: 10px; |
|---|
| | | border-radius: 5px; |
|---|
| | | overflow: hidden; |
|---|
| | | box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-group", |
|---|
| | | "displayName": "uni-group åç»", |
|---|
| | | "version": "1.2.2", |
|---|
| | | "description": "åç»ç»ä»¶å¯ç¨äºå°ç»ä»¶ç¨äºåç»ï¼æ·»å é´éï¼ä»¥äº§çææ¾çåºå", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "group", |
|---|
| | | "åç»", |
|---|
| | | "" |
|---|
| | | ], |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | ## Group åç» |
|---|
| | | > **ç»ä»¶åï¼uni-group** |
|---|
| | | > 代ç åï¼ `uGroup` |
|---|
| | | |
|---|
| | | åç»ç»ä»¶å¯ç¨äºå°ç»ä»¶åç»ï¼æ·»å é´éï¼ä»¥äº§çææ¾çåºåã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-group) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 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ç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | "id": "2852637", |
|---|
| | | "name": "uniuiå¾æ åº", |
|---|
| | | "font_family": "uniicons", |
|---|
| | | "css_prefix_text": "uniui-", |
|---|
| | | "description": "", |
|---|
| | | "glyphs": [ |
|---|
| | | { |
|---|
| | | "icon_id": "25027049", |
|---|
| | | "name": "yanse", |
|---|
| | | "font_class": "color", |
|---|
| | | "unicode": "e6cf", |
|---|
| | | "unicode_decimal": 59087 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "25027048", |
|---|
| | | "name": "wallet", |
|---|
| | | "font_class": "wallet", |
|---|
| | | "unicode": "e6b1", |
|---|
| | | "unicode_decimal": 59057 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "25015720", |
|---|
| | | "name": "settings-filled", |
|---|
| | | "font_class": "settings-filled", |
|---|
| | | "unicode": "e6ce", |
|---|
| | | "unicode_decimal": 59086 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "25015434", |
|---|
| | | "name": "shimingrenzheng-filled", |
|---|
| | | "font_class": "auth-filled", |
|---|
| | | "unicode": "e6cc", |
|---|
| | | "unicode_decimal": 59084 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24934246", |
|---|
| | | "name": "shop-filled", |
|---|
| | | "font_class": "shop-filled", |
|---|
| | | "unicode": "e6cd", |
|---|
| | | "unicode_decimal": 59085 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24934159", |
|---|
| | | "name": "staff-filled-01", |
|---|
| | | "font_class": "staff-filled", |
|---|
| | | "unicode": "e6cb", |
|---|
| | | "unicode_decimal": 59083 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932461", |
|---|
| | | "name": "VIP-filled", |
|---|
| | | "font_class": "vip-filled", |
|---|
| | | "unicode": "e6c6", |
|---|
| | | "unicode_decimal": 59078 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932462", |
|---|
| | | "name": "plus_circle_fill", |
|---|
| | | "font_class": "plus-filled", |
|---|
| | | "unicode": "e6c7", |
|---|
| | | "unicode_decimal": 59079 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932463", |
|---|
| | | "name": "folder_add-filled", |
|---|
| | | "font_class": "folder-add-filled", |
|---|
| | | "unicode": "e6c8", |
|---|
| | | "unicode_decimal": 59080 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932464", |
|---|
| | | "name": "yanse-filled", |
|---|
| | | "font_class": "color-filled", |
|---|
| | | "unicode": "e6c9", |
|---|
| | | "unicode_decimal": 59081 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932465", |
|---|
| | | "name": "tune-filled", |
|---|
| | | "font_class": "tune-filled", |
|---|
| | | "unicode": "e6ca", |
|---|
| | | "unicode_decimal": 59082 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932455", |
|---|
| | | "name": "a-rilidaka-filled", |
|---|
| | | "font_class": "calendar-filled", |
|---|
| | | "unicode": "e6c0", |
|---|
| | | "unicode_decimal": 59072 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932456", |
|---|
| | | "name": "notification-filled", |
|---|
| | | "font_class": "notification-filled", |
|---|
| | | "unicode": "e6c1", |
|---|
| | | "unicode_decimal": 59073 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932457", |
|---|
| | | "name": "wallet-filled", |
|---|
| | | "font_class": "wallet-filled", |
|---|
| | | "unicode": "e6c2", |
|---|
| | | "unicode_decimal": 59074 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932458", |
|---|
| | | "name": "paihangbang-filled", |
|---|
| | | "font_class": "medal-filled", |
|---|
| | | "unicode": "e6c3", |
|---|
| | | "unicode_decimal": 59075 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932459", |
|---|
| | | "name": "gift-filled", |
|---|
| | | "font_class": "gift-filled", |
|---|
| | | "unicode": "e6c4", |
|---|
| | | "unicode_decimal": 59076 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24932460", |
|---|
| | | "name": "fire-filled", |
|---|
| | | "font_class": "fire-filled", |
|---|
| | | "unicode": "e6c5", |
|---|
| | | "unicode_decimal": 59077 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24928001", |
|---|
| | | "name": "refreshempty", |
|---|
| | | "font_class": "refreshempty", |
|---|
| | | "unicode": "e6bf", |
|---|
| | | "unicode_decimal": 59071 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24926853", |
|---|
| | | "name": "location-ellipse", |
|---|
| | | "font_class": "location-filled", |
|---|
| | | "unicode": "e6af", |
|---|
| | | "unicode_decimal": 59055 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24926735", |
|---|
| | | "name": "person-filled", |
|---|
| | | "font_class": "person-filled", |
|---|
| | | "unicode": "e69d", |
|---|
| | | "unicode_decimal": 59037 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24926703", |
|---|
| | | "name": "personadd-filled", |
|---|
| | | "font_class": "personadd-filled", |
|---|
| | | "unicode": "e698", |
|---|
| | | "unicode_decimal": 59032 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923351", |
|---|
| | | "name": "back", |
|---|
| | | "font_class": "back", |
|---|
| | | "unicode": "e6b9", |
|---|
| | | "unicode_decimal": 59065 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923352", |
|---|
| | | "name": "forward", |
|---|
| | | "font_class": "forward", |
|---|
| | | "unicode": "e6ba", |
|---|
| | | "unicode_decimal": 59066 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923353", |
|---|
| | | "name": "arrowthinright", |
|---|
| | | "font_class": "arrow-right", |
|---|
| | | "unicode": "e6bb", |
|---|
| | | "unicode_decimal": 59067 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923353", |
|---|
| | | "name": "arrowthinright", |
|---|
| | | "font_class": "arrowthinright", |
|---|
| | | "unicode": "e6bb", |
|---|
| | | "unicode_decimal": 59067 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923354", |
|---|
| | | "name": "arrowthinleft", |
|---|
| | | "font_class": "arrow-left", |
|---|
| | | "unicode": "e6bc", |
|---|
| | | "unicode_decimal": 59068 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923354", |
|---|
| | | "name": "arrowthinleft", |
|---|
| | | "font_class": "arrowthinleft", |
|---|
| | | "unicode": "e6bc", |
|---|
| | | "unicode_decimal": 59068 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923355", |
|---|
| | | "name": "arrowthinup", |
|---|
| | | "font_class": "arrow-up", |
|---|
| | | "unicode": "e6bd", |
|---|
| | | "unicode_decimal": 59069 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923355", |
|---|
| | | "name": "arrowthinup", |
|---|
| | | "font_class": "arrowthinup", |
|---|
| | | "unicode": "e6bd", |
|---|
| | | "unicode_decimal": 59069 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923356", |
|---|
| | | "name": "arrowthindown", |
|---|
| | | "font_class": "arrow-down", |
|---|
| | | "unicode": "e6be", |
|---|
| | | "unicode_decimal": 59070 |
|---|
| | | },{ |
|---|
| | | "icon_id": "24923356", |
|---|
| | | "name": "arrowthindown", |
|---|
| | | "font_class": "arrowthindown", |
|---|
| | | "unicode": "e6be", |
|---|
| | | "unicode_decimal": 59070 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923349", |
|---|
| | | "name": "arrowdown", |
|---|
| | | "font_class": "bottom", |
|---|
| | | "unicode": "e6b8", |
|---|
| | | "unicode_decimal": 59064 |
|---|
| | | },{ |
|---|
| | | "icon_id": "24923349", |
|---|
| | | "name": "arrowdown", |
|---|
| | | "font_class": "arrowdown", |
|---|
| | | "unicode": "e6b8", |
|---|
| | | "unicode_decimal": 59064 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923346", |
|---|
| | | "name": "arrowright", |
|---|
| | | "font_class": "right", |
|---|
| | | "unicode": "e6b5", |
|---|
| | | "unicode_decimal": 59061 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923346", |
|---|
| | | "name": "arrowright", |
|---|
| | | "font_class": "arrowright", |
|---|
| | | "unicode": "e6b5", |
|---|
| | | "unicode_decimal": 59061 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923347", |
|---|
| | | "name": "arrowup", |
|---|
| | | "font_class": "top", |
|---|
| | | "unicode": "e6b6", |
|---|
| | | "unicode_decimal": 59062 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923347", |
|---|
| | | "name": "arrowup", |
|---|
| | | "font_class": "arrowup", |
|---|
| | | "unicode": "e6b6", |
|---|
| | | "unicode_decimal": 59062 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923348", |
|---|
| | | "name": "arrowleft", |
|---|
| | | "font_class": "left", |
|---|
| | | "unicode": "e6b7", |
|---|
| | | "unicode_decimal": 59063 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923348", |
|---|
| | | "name": "arrowleft", |
|---|
| | | "font_class": "arrowleft", |
|---|
| | | "unicode": "e6b7", |
|---|
| | | "unicode_decimal": 59063 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923334", |
|---|
| | | "name": "eye", |
|---|
| | | "font_class": "eye", |
|---|
| | | "unicode": "e651", |
|---|
| | | "unicode_decimal": 58961 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923335", |
|---|
| | | "name": "eye-filled", |
|---|
| | | "font_class": "eye-filled", |
|---|
| | | "unicode": "e66a", |
|---|
| | | "unicode_decimal": 58986 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923336", |
|---|
| | | "name": "eye-slash", |
|---|
| | | "font_class": "eye-slash", |
|---|
| | | "unicode": "e6b3", |
|---|
| | | "unicode_decimal": 59059 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923337", |
|---|
| | | "name": "eye-slash-filled", |
|---|
| | | "font_class": "eye-slash-filled", |
|---|
| | | "unicode": "e6b4", |
|---|
| | | "unicode_decimal": 59060 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923305", |
|---|
| | | "name": "info-filled", |
|---|
| | | "font_class": "info-filled", |
|---|
| | | "unicode": "e649", |
|---|
| | | "unicode_decimal": 58953 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923299", |
|---|
| | | "name": "reload-01", |
|---|
| | | "font_class": "reload", |
|---|
| | | "unicode": "e6b2", |
|---|
| | | "unicode_decimal": 59058 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923195", |
|---|
| | | "name": "mic_slash_fill", |
|---|
| | | "font_class": "micoff-filled", |
|---|
| | | "unicode": "e6b0", |
|---|
| | | "unicode_decimal": 59056 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923165", |
|---|
| | | "name": "map-pin-ellipse", |
|---|
| | | "font_class": "map-pin-ellipse", |
|---|
| | | "unicode": "e6ac", |
|---|
| | | "unicode_decimal": 59052 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923166", |
|---|
| | | "name": "map-pin", |
|---|
| | | "font_class": "map-pin", |
|---|
| | | "unicode": "e6ad", |
|---|
| | | "unicode_decimal": 59053 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923167", |
|---|
| | | "name": "location", |
|---|
| | | "font_class": "location", |
|---|
| | | "unicode": "e6ae", |
|---|
| | | "unicode_decimal": 59054 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923064", |
|---|
| | | "name": "starhalf", |
|---|
| | | "font_class": "starhalf", |
|---|
| | | "unicode": "e683", |
|---|
| | | "unicode_decimal": 59011 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923065", |
|---|
| | | "name": "star", |
|---|
| | | "font_class": "star", |
|---|
| | | "unicode": "e688", |
|---|
| | | "unicode_decimal": 59016 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24923066", |
|---|
| | | "name": "star-filled", |
|---|
| | | "font_class": "star-filled", |
|---|
| | | "unicode": "e68f", |
|---|
| | | "unicode_decimal": 59023 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899646", |
|---|
| | | "name": "a-rilidaka", |
|---|
| | | "font_class": "calendar", |
|---|
| | | "unicode": "e6a0", |
|---|
| | | "unicode_decimal": 59040 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899647", |
|---|
| | | "name": "fire", |
|---|
| | | "font_class": "fire", |
|---|
| | | "unicode": "e6a1", |
|---|
| | | "unicode_decimal": 59041 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899648", |
|---|
| | | "name": "paihangbang", |
|---|
| | | "font_class": "medal", |
|---|
| | | "unicode": "e6a2", |
|---|
| | | "unicode_decimal": 59042 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899649", |
|---|
| | | "name": "font", |
|---|
| | | "font_class": "font", |
|---|
| | | "unicode": "e6a3", |
|---|
| | | "unicode_decimal": 59043 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899650", |
|---|
| | | "name": "gift", |
|---|
| | | "font_class": "gift", |
|---|
| | | "unicode": "e6a4", |
|---|
| | | "unicode_decimal": 59044 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899651", |
|---|
| | | "name": "link", |
|---|
| | | "font_class": "link", |
|---|
| | | "unicode": "e6a5", |
|---|
| | | "unicode_decimal": 59045 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899652", |
|---|
| | | "name": "notification", |
|---|
| | | "font_class": "notification", |
|---|
| | | "unicode": "e6a6", |
|---|
| | | "unicode_decimal": 59046 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899653", |
|---|
| | | "name": "staff", |
|---|
| | | "font_class": "staff", |
|---|
| | | "unicode": "e6a7", |
|---|
| | | "unicode_decimal": 59047 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899654", |
|---|
| | | "name": "VIP", |
|---|
| | | "font_class": "vip", |
|---|
| | | "unicode": "e6a8", |
|---|
| | | "unicode_decimal": 59048 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899655", |
|---|
| | | "name": "folder_add", |
|---|
| | | "font_class": "folder-add", |
|---|
| | | "unicode": "e6a9", |
|---|
| | | "unicode_decimal": 59049 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899656", |
|---|
| | | "name": "tune", |
|---|
| | | "font_class": "tune", |
|---|
| | | "unicode": "e6aa", |
|---|
| | | "unicode_decimal": 59050 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899657", |
|---|
| | | "name": "shimingrenzheng", |
|---|
| | | "font_class": "auth", |
|---|
| | | "unicode": "e6ab", |
|---|
| | | "unicode_decimal": 59051 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899565", |
|---|
| | | "name": "person", |
|---|
| | | "font_class": "person", |
|---|
| | | "unicode": "e699", |
|---|
| | | "unicode_decimal": 59033 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899566", |
|---|
| | | "name": "email-filled", |
|---|
| | | "font_class": "email-filled", |
|---|
| | | "unicode": "e69a", |
|---|
| | | "unicode_decimal": 59034 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899567", |
|---|
| | | "name": "phone-filled", |
|---|
| | | "font_class": "phone-filled", |
|---|
| | | "unicode": "e69b", |
|---|
| | | "unicode_decimal": 59035 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899568", |
|---|
| | | "name": "phone", |
|---|
| | | "font_class": "phone", |
|---|
| | | "unicode": "e69c", |
|---|
| | | "unicode_decimal": 59036 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899570", |
|---|
| | | "name": "email", |
|---|
| | | "font_class": "email", |
|---|
| | | "unicode": "e69e", |
|---|
| | | "unicode_decimal": 59038 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899571", |
|---|
| | | "name": "personadd", |
|---|
| | | "font_class": "personadd", |
|---|
| | | "unicode": "e69f", |
|---|
| | | "unicode_decimal": 59039 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899558", |
|---|
| | | "name": "chatboxes-filled", |
|---|
| | | "font_class": "chatboxes-filled", |
|---|
| | | "unicode": "e692", |
|---|
| | | "unicode_decimal": 59026 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899559", |
|---|
| | | "name": "contact", |
|---|
| | | "font_class": "contact", |
|---|
| | | "unicode": "e693", |
|---|
| | | "unicode_decimal": 59027 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899560", |
|---|
| | | "name": "chatbubble-filled", |
|---|
| | | "font_class": "chatbubble-filled", |
|---|
| | | "unicode": "e694", |
|---|
| | | "unicode_decimal": 59028 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899561", |
|---|
| | | "name": "contact-filled", |
|---|
| | | "font_class": "contact-filled", |
|---|
| | | "unicode": "e695", |
|---|
| | | "unicode_decimal": 59029 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899562", |
|---|
| | | "name": "chatboxes", |
|---|
| | | "font_class": "chatboxes", |
|---|
| | | "unicode": "e696", |
|---|
| | | "unicode_decimal": 59030 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24899563", |
|---|
| | | "name": "chatbubble", |
|---|
| | | "font_class": "chatbubble", |
|---|
| | | "unicode": "e697", |
|---|
| | | "unicode_decimal": 59031 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881290", |
|---|
| | | "name": "upload-filled", |
|---|
| | | "font_class": "upload-filled", |
|---|
| | | "unicode": "e68e", |
|---|
| | | "unicode_decimal": 59022 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881292", |
|---|
| | | "name": "upload", |
|---|
| | | "font_class": "upload", |
|---|
| | | "unicode": "e690", |
|---|
| | | "unicode_decimal": 59024 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881293", |
|---|
| | | "name": "weixin", |
|---|
| | | "font_class": "weixin", |
|---|
| | | "unicode": "e691", |
|---|
| | | "unicode_decimal": 59025 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881274", |
|---|
| | | "name": "compose", |
|---|
| | | "font_class": "compose", |
|---|
| | | "unicode": "e67f", |
|---|
| | | "unicode_decimal": 59007 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881275", |
|---|
| | | "name": "qq", |
|---|
| | | "font_class": "qq", |
|---|
| | | "unicode": "e680", |
|---|
| | | "unicode_decimal": 59008 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881276", |
|---|
| | | "name": "download-filled", |
|---|
| | | "font_class": "download-filled", |
|---|
| | | "unicode": "e681", |
|---|
| | | "unicode_decimal": 59009 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881277", |
|---|
| | | "name": "pengyouquan", |
|---|
| | | "font_class": "pyq", |
|---|
| | | "unicode": "e682", |
|---|
| | | "unicode_decimal": 59010 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881279", |
|---|
| | | "name": "sound", |
|---|
| | | "font_class": "sound", |
|---|
| | | "unicode": "e684", |
|---|
| | | "unicode_decimal": 59012 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881280", |
|---|
| | | "name": "trash-filled", |
|---|
| | | "font_class": "trash-filled", |
|---|
| | | "unicode": "e685", |
|---|
| | | "unicode_decimal": 59013 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881281", |
|---|
| | | "name": "sound-filled", |
|---|
| | | "font_class": "sound-filled", |
|---|
| | | "unicode": "e686", |
|---|
| | | "unicode_decimal": 59014 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881282", |
|---|
| | | "name": "trash", |
|---|
| | | "font_class": "trash", |
|---|
| | | "unicode": "e687", |
|---|
| | | "unicode_decimal": 59015 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881284", |
|---|
| | | "name": "videocam-filled", |
|---|
| | | "font_class": "videocam-filled", |
|---|
| | | "unicode": "e689", |
|---|
| | | "unicode_decimal": 59017 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881285", |
|---|
| | | "name": "spinner-cycle", |
|---|
| | | "font_class": "spinner-cycle", |
|---|
| | | "unicode": "e68a", |
|---|
| | | "unicode_decimal": 59018 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881286", |
|---|
| | | "name": "weibo", |
|---|
| | | "font_class": "weibo", |
|---|
| | | "unicode": "e68b", |
|---|
| | | "unicode_decimal": 59019 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881288", |
|---|
| | | "name": "videocam", |
|---|
| | | "font_class": "videocam", |
|---|
| | | "unicode": "e68c", |
|---|
| | | "unicode_decimal": 59020 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24881289", |
|---|
| | | "name": "download", |
|---|
| | | "font_class": "download", |
|---|
| | | "unicode": "e68d", |
|---|
| | | "unicode_decimal": 59021 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879601", |
|---|
| | | "name": "help", |
|---|
| | | "font_class": "help", |
|---|
| | | "unicode": "e679", |
|---|
| | | "unicode_decimal": 59001 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879602", |
|---|
| | | "name": "navigate-filled", |
|---|
| | | "font_class": "navigate-filled", |
|---|
| | | "unicode": "e67a", |
|---|
| | | "unicode_decimal": 59002 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879603", |
|---|
| | | "name": "plusempty", |
|---|
| | | "font_class": "plusempty", |
|---|
| | | "unicode": "e67b", |
|---|
| | | "unicode_decimal": 59003 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879604", |
|---|
| | | "name": "smallcircle", |
|---|
| | | "font_class": "smallcircle", |
|---|
| | | "unicode": "e67c", |
|---|
| | | "unicode_decimal": 59004 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879605", |
|---|
| | | "name": "minus-filled", |
|---|
| | | "font_class": "minus-filled", |
|---|
| | | "unicode": "e67d", |
|---|
| | | "unicode_decimal": 59005 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879606", |
|---|
| | | "name": "micoff", |
|---|
| | | "font_class": "micoff", |
|---|
| | | "unicode": "e67e", |
|---|
| | | "unicode_decimal": 59006 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879588", |
|---|
| | | "name": "closeempty", |
|---|
| | | "font_class": "closeempty", |
|---|
| | | "unicode": "e66c", |
|---|
| | | "unicode_decimal": 58988 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879589", |
|---|
| | | "name": "clear", |
|---|
| | | "font_class": "clear", |
|---|
| | | "unicode": "e66d", |
|---|
| | | "unicode_decimal": 58989 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879590", |
|---|
| | | "name": "navigate", |
|---|
| | | "font_class": "navigate", |
|---|
| | | "unicode": "e66e", |
|---|
| | | "unicode_decimal": 58990 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879591", |
|---|
| | | "name": "minus", |
|---|
| | | "font_class": "minus", |
|---|
| | | "unicode": "e66f", |
|---|
| | | "unicode_decimal": 58991 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879592", |
|---|
| | | "name": "image", |
|---|
| | | "font_class": "image", |
|---|
| | | "unicode": "e670", |
|---|
| | | "unicode_decimal": 58992 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879593", |
|---|
| | | "name": "mic", |
|---|
| | | "font_class": "mic", |
|---|
| | | "unicode": "e671", |
|---|
| | | "unicode_decimal": 58993 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879594", |
|---|
| | | "name": "paperplane", |
|---|
| | | "font_class": "paperplane", |
|---|
| | | "unicode": "e672", |
|---|
| | | "unicode_decimal": 58994 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879595", |
|---|
| | | "name": "close", |
|---|
| | | "font_class": "close", |
|---|
| | | "unicode": "e673", |
|---|
| | | "unicode_decimal": 58995 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879596", |
|---|
| | | "name": "help-filled", |
|---|
| | | "font_class": "help-filled", |
|---|
| | | "unicode": "e674", |
|---|
| | | "unicode_decimal": 58996 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879597", |
|---|
| | | "name": "plus-filled", |
|---|
| | | "font_class": "paperplane-filled", |
|---|
| | | "unicode": "e675", |
|---|
| | | "unicode_decimal": 58997 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879598", |
|---|
| | | "name": "plus", |
|---|
| | | "font_class": "plus", |
|---|
| | | "unicode": "e676", |
|---|
| | | "unicode_decimal": 58998 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879599", |
|---|
| | | "name": "mic-filled", |
|---|
| | | "font_class": "mic-filled", |
|---|
| | | "unicode": "e677", |
|---|
| | | "unicode_decimal": 58999 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24879600", |
|---|
| | | "name": "image-filled", |
|---|
| | | "font_class": "image-filled", |
|---|
| | | "unicode": "e678", |
|---|
| | | "unicode_decimal": 59000 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855900", |
|---|
| | | "name": "locked-filled", |
|---|
| | | "font_class": "locked-filled", |
|---|
| | | "unicode": "e668", |
|---|
| | | "unicode_decimal": 58984 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855901", |
|---|
| | | "name": "info", |
|---|
| | | "font_class": "info", |
|---|
| | | "unicode": "e669", |
|---|
| | | "unicode_decimal": 58985 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855903", |
|---|
| | | "name": "locked", |
|---|
| | | "font_class": "locked", |
|---|
| | | "unicode": "e66b", |
|---|
| | | "unicode_decimal": 58987 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855884", |
|---|
| | | "name": "camera-filled", |
|---|
| | | "font_class": "camera-filled", |
|---|
| | | "unicode": "e658", |
|---|
| | | "unicode_decimal": 58968 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855885", |
|---|
| | | "name": "chat-filled", |
|---|
| | | "font_class": "chat-filled", |
|---|
| | | "unicode": "e659", |
|---|
| | | "unicode_decimal": 58969 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855886", |
|---|
| | | "name": "camera", |
|---|
| | | "font_class": "camera", |
|---|
| | | "unicode": "e65a", |
|---|
| | | "unicode_decimal": 58970 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855887", |
|---|
| | | "name": "circle", |
|---|
| | | "font_class": "circle", |
|---|
| | | "unicode": "e65b", |
|---|
| | | "unicode_decimal": 58971 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855888", |
|---|
| | | "name": "checkmarkempty", |
|---|
| | | "font_class": "checkmarkempty", |
|---|
| | | "unicode": "e65c", |
|---|
| | | "unicode_decimal": 58972 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855889", |
|---|
| | | "name": "chat", |
|---|
| | | "font_class": "chat", |
|---|
| | | "unicode": "e65d", |
|---|
| | | "unicode_decimal": 58973 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855890", |
|---|
| | | "name": "circle-filled", |
|---|
| | | "font_class": "circle-filled", |
|---|
| | | "unicode": "e65e", |
|---|
| | | "unicode_decimal": 58974 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855891", |
|---|
| | | "name": "flag", |
|---|
| | | "font_class": "flag", |
|---|
| | | "unicode": "e65f", |
|---|
| | | "unicode_decimal": 58975 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855892", |
|---|
| | | "name": "flag-filled", |
|---|
| | | "font_class": "flag-filled", |
|---|
| | | "unicode": "e660", |
|---|
| | | "unicode_decimal": 58976 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855893", |
|---|
| | | "name": "gear-filled", |
|---|
| | | "font_class": "gear-filled", |
|---|
| | | "unicode": "e661", |
|---|
| | | "unicode_decimal": 58977 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855894", |
|---|
| | | "name": "home", |
|---|
| | | "font_class": "home", |
|---|
| | | "unicode": "e662", |
|---|
| | | "unicode_decimal": 58978 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855895", |
|---|
| | | "name": "home-filled", |
|---|
| | | "font_class": "home-filled", |
|---|
| | | "unicode": "e663", |
|---|
| | | "unicode_decimal": 58979 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855896", |
|---|
| | | "name": "gear", |
|---|
| | | "font_class": "gear", |
|---|
| | | "unicode": "e664", |
|---|
| | | "unicode_decimal": 58980 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855897", |
|---|
| | | "name": "smallcircle-filled", |
|---|
| | | "font_class": "smallcircle-filled", |
|---|
| | | "unicode": "e665", |
|---|
| | | "unicode_decimal": 58981 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855898", |
|---|
| | | "name": "map-filled", |
|---|
| | | "font_class": "map-filled", |
|---|
| | | "unicode": "e666", |
|---|
| | | "unicode_decimal": 58982 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855899", |
|---|
| | | "name": "map", |
|---|
| | | "font_class": "map", |
|---|
| | | "unicode": "e667", |
|---|
| | | "unicode_decimal": 58983 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855825", |
|---|
| | | "name": "refresh-filled", |
|---|
| | | "font_class": "refresh-filled", |
|---|
| | | "unicode": "e656", |
|---|
| | | "unicode_decimal": 58966 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855826", |
|---|
| | | "name": "refresh", |
|---|
| | | "font_class": "refresh", |
|---|
| | | "unicode": "e657", |
|---|
| | | "unicode_decimal": 58967 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855808", |
|---|
| | | "name": "cloud-upload", |
|---|
| | | "font_class": "cloud-upload", |
|---|
| | | "unicode": "e645", |
|---|
| | | "unicode_decimal": 58949 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855809", |
|---|
| | | "name": "cloud-download-filled", |
|---|
| | | "font_class": "cloud-download-filled", |
|---|
| | | "unicode": "e646", |
|---|
| | | "unicode_decimal": 58950 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855810", |
|---|
| | | "name": "cloud-download", |
|---|
| | | "font_class": "cloud-download", |
|---|
| | | "unicode": "e647", |
|---|
| | | "unicode_decimal": 58951 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855811", |
|---|
| | | "name": "cloud-upload-filled", |
|---|
| | | "font_class": "cloud-upload-filled", |
|---|
| | | "unicode": "e648", |
|---|
| | | "unicode_decimal": 58952 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855813", |
|---|
| | | "name": "redo", |
|---|
| | | "font_class": "redo", |
|---|
| | | "unicode": "e64a", |
|---|
| | | "unicode_decimal": 58954 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855814", |
|---|
| | | "name": "images-filled", |
|---|
| | | "font_class": "images-filled", |
|---|
| | | "unicode": "e64b", |
|---|
| | | "unicode_decimal": 58955 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855815", |
|---|
| | | "name": "undo-filled", |
|---|
| | | "font_class": "undo-filled", |
|---|
| | | "unicode": "e64c", |
|---|
| | | "unicode_decimal": 58956 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855816", |
|---|
| | | "name": "more", |
|---|
| | | "font_class": "more", |
|---|
| | | "unicode": "e64d", |
|---|
| | | "unicode_decimal": 58957 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855817", |
|---|
| | | "name": "more-filled", |
|---|
| | | "font_class": "more-filled", |
|---|
| | | "unicode": "e64e", |
|---|
| | | "unicode_decimal": 58958 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855818", |
|---|
| | | "name": "undo", |
|---|
| | | "font_class": "undo", |
|---|
| | | "unicode": "e64f", |
|---|
| | | "unicode_decimal": 58959 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855819", |
|---|
| | | "name": "images", |
|---|
| | | "font_class": "images", |
|---|
| | | "unicode": "e650", |
|---|
| | | "unicode_decimal": 58960 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855821", |
|---|
| | | "name": "paperclip", |
|---|
| | | "font_class": "paperclip", |
|---|
| | | "unicode": "e652", |
|---|
| | | "unicode_decimal": 58962 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855822", |
|---|
| | | "name": "settings", |
|---|
| | | "font_class": "settings", |
|---|
| | | "unicode": "e653", |
|---|
| | | "unicode_decimal": 58963 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855823", |
|---|
| | | "name": "search", |
|---|
| | | "font_class": "search", |
|---|
| | | "unicode": "e654", |
|---|
| | | "unicode_decimal": 58964 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24855824", |
|---|
| | | "name": "redo-filled", |
|---|
| | | "font_class": "redo-filled", |
|---|
| | | "unicode": "e655", |
|---|
| | | "unicode_decimal": 58965 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841702", |
|---|
| | | "name": "list", |
|---|
| | | "font_class": "list", |
|---|
| | | "unicode": "e644", |
|---|
| | | "unicode_decimal": 58948 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841489", |
|---|
| | | "name": "mail-open-filled", |
|---|
| | | "font_class": "mail-open-filled", |
|---|
| | | "unicode": "e63a", |
|---|
| | | "unicode_decimal": 58938 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841491", |
|---|
| | | "name": "hand-thumbsdown-filled", |
|---|
| | | "font_class": "hand-down-filled", |
|---|
| | | "unicode": "e63c", |
|---|
| | | "unicode_decimal": 58940 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841492", |
|---|
| | | "name": "hand-thumbsdown", |
|---|
| | | "font_class": "hand-down", |
|---|
| | | "unicode": "e63d", |
|---|
| | | "unicode_decimal": 58941 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841493", |
|---|
| | | "name": "hand-thumbsup-filled", |
|---|
| | | "font_class": "hand-up-filled", |
|---|
| | | "unicode": "e63e", |
|---|
| | | "unicode_decimal": 58942 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841494", |
|---|
| | | "name": "hand-thumbsup", |
|---|
| | | "font_class": "hand-up", |
|---|
| | | "unicode": "e63f", |
|---|
| | | "unicode_decimal": 58943 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841496", |
|---|
| | | "name": "heart-filled", |
|---|
| | | "font_class": "heart-filled", |
|---|
| | | "unicode": "e641", |
|---|
| | | "unicode_decimal": 58945 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841498", |
|---|
| | | "name": "mail-open", |
|---|
| | | "font_class": "mail-open", |
|---|
| | | "unicode": "e643", |
|---|
| | | "unicode_decimal": 58947 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24841488", |
|---|
| | | "name": "heart", |
|---|
| | | "font_class": "heart", |
|---|
| | | "unicode": "e639", |
|---|
| | | "unicode_decimal": 58937 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24839963", |
|---|
| | | "name": "loop", |
|---|
| | | "font_class": "loop", |
|---|
| | | "unicode": "e633", |
|---|
| | | "unicode_decimal": 58931 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24839866", |
|---|
| | | "name": "pulldown", |
|---|
| | | "font_class": "pulldown", |
|---|
| | | "unicode": "e632", |
|---|
| | | "unicode_decimal": 58930 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813798", |
|---|
| | | "name": "scan", |
|---|
| | | "font_class": "scan", |
|---|
| | | "unicode": "e62a", |
|---|
| | | "unicode_decimal": 58922 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813786", |
|---|
| | | "name": "bars", |
|---|
| | | "font_class": "bars", |
|---|
| | | "unicode": "e627", |
|---|
| | | "unicode_decimal": 58919 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813788", |
|---|
| | | "name": "cart-filled", |
|---|
| | | "font_class": "cart-filled", |
|---|
| | | "unicode": "e629", |
|---|
| | | "unicode_decimal": 58921 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813790", |
|---|
| | | "name": "checkbox", |
|---|
| | | "font_class": "checkbox", |
|---|
| | | "unicode": "e62b", |
|---|
| | | "unicode_decimal": 58923 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813791", |
|---|
| | | "name": "checkbox-filled", |
|---|
| | | "font_class": "checkbox-filled", |
|---|
| | | "unicode": "e62c", |
|---|
| | | "unicode_decimal": 58924 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813794", |
|---|
| | | "name": "shop", |
|---|
| | | "font_class": "shop", |
|---|
| | | "unicode": "e62f", |
|---|
| | | "unicode_decimal": 58927 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813795", |
|---|
| | | "name": "headphones", |
|---|
| | | "font_class": "headphones", |
|---|
| | | "unicode": "e630", |
|---|
| | | "unicode_decimal": 58928 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "icon_id": "24813796", |
|---|
| | | "name": "cart", |
|---|
| | | "font_class": "cart", |
|---|
| | | "unicode": "e631", |
|---|
| | | "unicode_decimal": 58929 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import icons from './icons.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: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | icons: icons.glyphs |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | unicode(){ |
|---|
| | | let code = this.icons.find(v=>v.font_class === this.type) |
|---|
| | | if(code){ |
|---|
| | | return unescape(`%u${code.unicode}`) |
|---|
| | | } |
|---|
| | | return '' |
|---|
| | | }, |
|---|
| | | iconSize(){ |
|---|
| | | return getVal(this.size) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | _onClick() { |
|---|
| | | this.$emit('click') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | @import './uniicons.css'; |
|---|
| | | @font-face { |
|---|
| | | font-family: uniicons; |
|---|
| | | src: url('./uniicons.ttf') format('truetype'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | .uni-icons { |
|---|
| | | font-family: uniicons; |
|---|
| | | text-decoration: none; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .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-gift-filled:before { |
|---|
| | | content: "\e6c4"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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-back:before { |
|---|
| | | content: "\e6b9"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-forward:before { |
|---|
| | | content: "\e6ba"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrow-right:before { |
|---|
| | | content: "\e6bb"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowthinright:before { |
|---|
| | | content: "\e6bb"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrow-left:before { |
|---|
| | | content: "\e6bc"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowthinleft:before { |
|---|
| | | content: "\e6bc"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrow-up:before { |
|---|
| | | content: "\e6bd"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowthinup:before { |
|---|
| | | content: "\e6bd"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrow-down:before { |
|---|
| | | content: "\e6be"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowthindown:before { |
|---|
| | | content: "\e6be"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-bottom:before { |
|---|
| | | content: "\e6b8"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowdown:before { |
|---|
| | | content: "\e6b8"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-right:before { |
|---|
| | | content: "\e6b5"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowright:before { |
|---|
| | | content: "\e6b5"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-top:before { |
|---|
| | | content: "\e6b6"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowup:before { |
|---|
| | | content: "\e6b6"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-left:before { |
|---|
| | | content: "\e6b7"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uniui-arrowleft:before { |
|---|
| | | content: "\e6b7"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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-cart-filled:before { |
|---|
| | | content: "\e629"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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"; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-icons", |
|---|
| | | "displayName": "uni-icons å¾æ ", |
|---|
| | | "version": "1.3.5", |
|---|
| | | "description": "å¾æ ç»ä»¶ï¼ç¨äºå±ç¤ºç§»å¨ç«¯å¸¸è§çå¾æ ï¼å¯èªå®ä¹é¢è²ã大å°ã", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "icon", |
|---|
| | | "å¾æ " |
|---|
| | | ], |
|---|
| | | "repository": "https://github.com/dcloudio/uni-ui", |
|---|
| | | "engines": { |
|---|
| | | "HBuilderX": "^3.2.14" |
|---|
| | | }, |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## Icons å¾æ |
|---|
| | | > **ç»ä»¶åï¼uni-icons** |
|---|
| | | > 代ç åï¼ `uIcons` |
|---|
| | | |
|---|
| | | ç¨äºå±ç¤º icons å¾æ ã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.2.1ï¼2021-11-22ï¼ |
|---|
| | | - ä¿®å¤ vue3ä¸æäºscssåéæ æ³æ¾å°çé®é¢ |
|---|
| | | ## 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-indexed-list](https://uniapp.dcloud.io/component/uniui/uni-indexed-list) |
|---|
| | | ## 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-21ï¼ |
|---|
| | | - ä¼å æ·»å ä¾èµ uni-icons, 导å
¥åèªå¨ä¸è½½ä¾èµ |
|---|
| | | ## 1.0.9ï¼2021-02-05ï¼ |
|---|
| | | - ä¼å ç»ä»¶å¼ç¨å
³ç³»ï¼éè¿uni_moduleså¼ç¨ç»ä»¶ |
|---|
| | | |
|---|
| | | ## 1.0.8ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| | | - æ°å¢ æ¯æ PC 端 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper"> |
|---|
| | | <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text> |
|---|
| | | </view> |
|---|
| | | <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list"> |
|---|
| | | <view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover"> |
|---|
| | | <view class="uni-indexed-list__item-container" @click="onClick(idx, index)"> |
|---|
| | | <view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}"> |
|---|
| | | <view v-if="showSelect" style="margin-right: 20rpx;"> |
|---|
| | | <uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" /> |
|---|
| | | </view> |
|---|
| | | <text class="uni-indexed-list__item-content">{{ item.name }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'UniIndexedList', |
|---|
| | | emits:['itemClick'], |
|---|
| | | props: { |
|---|
| | | loaded: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | idx: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | list: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | showSelect: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClick(idx, index) { |
|---|
| | | this.$emit("itemClick", { |
|---|
| | | idx, |
|---|
| | | index |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | .uni-indexed-list__list { |
|---|
| | | background-color: $uni-bg-color; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 1px; |
|---|
| | | border-top-color: #DEDEDE; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__item { |
|---|
| | | font-size: 14px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__item-container { |
|---|
| | | padding-left: 15px; |
|---|
| | | flex: 1; |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__item-border { |
|---|
| | | flex: 1; |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | height: 50px; |
|---|
| | | padding: 25px; |
|---|
| | | padding-left: 0; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | border-bottom-width: 1px; |
|---|
| | | border-bottom-color: #DEDEDE; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__item-border--last { |
|---|
| | | border-bottom-width: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__item-content { |
|---|
| | | flex: 1; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #191919; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__title-wrapper { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | background-color: #f7f7f7; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__title { |
|---|
| | | padding: 6px 12px; |
|---|
| | | line-height: 24px; |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 500; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-indexed-list" ref="list" id="list"> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false"> |
|---|
| | | <cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx"> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y> |
|---|
| | | <view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx"> |
|---|
| | | <!-- #endif --> |
|---|
| | | <indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect" |
|---|
| | | @itemClick="onClick"></indexed-list-item> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </cell> |
|---|
| | | </list> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" |
|---|
| | | @touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove" |
|---|
| | | @mouseleave.stop="mouseleave"> |
|---|
| | | <view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item" |
|---|
| | | :class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''"> |
|---|
| | | <text class="uni-indexed-list__menu-text" |
|---|
| | | :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="touchmove" class="uni-indexed-list__alert-wrapper"> |
|---|
| | | <text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import indexedListItem from './uni-indexed-list-item.vue' |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = weex.requireModule('dom'); |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-PLUS |
|---|
| | | function throttle(func, delay) { |
|---|
| | | var prev = Date.now(); |
|---|
| | | return function() { |
|---|
| | | var context = this; |
|---|
| | | var args = arguments; |
|---|
| | | var now = Date.now(); |
|---|
| | | if (now - prev >= delay) { |
|---|
| | | func.apply(context, args); |
|---|
| | | prev = Date.now(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchMove(e) { |
|---|
| | | let pageY = e.touches[0].pageY |
|---|
| | | let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight) |
|---|
| | | if (this.touchmoveIndex === index) { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | let item = this.lists[index] |
|---|
| | | if (item) { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.scrollViewId = 'uni-indexed-list-' + index |
|---|
| | | this.touchmoveIndex = index |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], { |
|---|
| | | animated: false |
|---|
| | | }) |
|---|
| | | this.touchmoveIndex = index |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const throttleTouchMove = throttle(touchMove, 40) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * IndexedList ç´¢å¼å表 |
|---|
| | | * @description ç¨äºå±ç¤ºç´¢å¼å表 |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=375 |
|---|
| | | * @property {Boolean} showSelect = [true|false] å±ç¤ºæ¨¡å¼ |
|---|
| | | * @value true å±ç¤ºæ¨¡å¼ |
|---|
| | | * @value false éæ©æ¨¡å¼ |
|---|
| | | * @property {Object} options ç´¢å¼å表éè¦çæ°æ®å¯¹è±¡ |
|---|
| | | * @event {Function} click ç¹å»å表äºä»¶ ï¼è¿åå½åéæ©é¡¹çäºä»¶å¯¹è±¡ |
|---|
| | | * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniIndexedList', |
|---|
| | | components: { |
|---|
| | | indexedListItem |
|---|
| | | }, |
|---|
| | | emits: ['click'], |
|---|
| | | props: { |
|---|
| | | options: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | showSelect: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | lists: [], |
|---|
| | | winHeight: 0, |
|---|
| | | itemHeight: 0, |
|---|
| | | winOffsetY: 0, |
|---|
| | | touchmove: false, |
|---|
| | | touchmoveIndex: -1, |
|---|
| | | scrollViewId: '', |
|---|
| | | touchmovable: true, |
|---|
| | | loaded: false, |
|---|
| | | isPC: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | options: { |
|---|
| | | handler: function() { |
|---|
| | | this.setList() |
|---|
| | | }, |
|---|
| | | deep: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // #ifdef H5 |
|---|
| | | this.isPC = this.IsPC() |
|---|
| | | // #endif |
|---|
| | | setTimeout(() => { |
|---|
| | | this.setList() |
|---|
| | | }, 50) |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loaded = true |
|---|
| | | }, 300); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | setList() { |
|---|
| | | let index = 0; |
|---|
| | | this.lists = [] |
|---|
| | | this.options.forEach((value) => { |
|---|
| | | if (value.data.length === 0) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | let indexBefore = index |
|---|
| | | let items = value.data.map(item => { |
|---|
| | | let obj = {} |
|---|
| | | obj['key'] = value.letter |
|---|
| | | obj['name'] = item |
|---|
| | | obj['itemIndex'] = index |
|---|
| | | index++ |
|---|
| | | obj.checked = item.checked ? item.checked : false |
|---|
| | | return obj |
|---|
| | | }) |
|---|
| | | this.lists.push({ |
|---|
| | | title: value.letter, |
|---|
| | | key: value.letter, |
|---|
| | | items: items, |
|---|
| | | itemIndex: indexBefore |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | uni.createSelectorQuery() |
|---|
| | | .in(this) |
|---|
| | | .select('#list') |
|---|
| | | .boundingClientRect() |
|---|
| | | .exec(ret => { |
|---|
| | | this.winOffsetY = ret[0].top |
|---|
| | | this.winHeight = ret[0].height |
|---|
| | | this.itemHeight = this.winHeight / this.lists.length |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | dom.getComponentRect(this.$refs['list'], (res) => { |
|---|
| | | this.winOffsetY = res.size.top |
|---|
| | | this.winHeight = res.size.height |
|---|
| | | this.itemHeight = this.winHeight / this.lists.length |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | touchStart(e) { |
|---|
| | | this.touchmove = true |
|---|
| | | let pageY = this.isPC ? e.pageY : e.touches[0].pageY |
|---|
| | | let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight) |
|---|
| | | let item = this.lists[index] |
|---|
| | | if (item) { |
|---|
| | | this.scrollViewId = 'uni-indexed-list-' + index |
|---|
| | | this.touchmoveIndex = index |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], { |
|---|
| | | animated: false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | touchMove(e) { |
|---|
| | | // #ifndef APP-PLUS |
|---|
| | | let pageY = this.isPC ? e.pageY : e.touches[0].pageY |
|---|
| | | let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight) |
|---|
| | | if (this.touchmoveIndex === index) { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | let item = this.lists[index] |
|---|
| | | if (item) { |
|---|
| | | this.scrollViewId = 'uni-indexed-list-' + index |
|---|
| | | this.touchmoveIndex = index |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-PLUS |
|---|
| | | throttleTouchMove.call(this, e) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | touchEnd() { |
|---|
| | | this.touchmove = false |
|---|
| | | // this.touchmoveIndex = -1 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å
¼å®¹ PC @tian |
|---|
| | | */ |
|---|
| | | |
|---|
| | | mousedown(e) { |
|---|
| | | if (!this.isPC) return |
|---|
| | | this.touchStart(e) |
|---|
| | | }, |
|---|
| | | mousemove(e) { |
|---|
| | | if (!this.isPC) return |
|---|
| | | this.touchMove(e) |
|---|
| | | }, |
|---|
| | | mouseleave(e) { |
|---|
| | | if (!this.isPC) return |
|---|
| | | this.touchEnd(e) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // #ifdef H5 |
|---|
| | | IsPC() { |
|---|
| | | var userAgentInfo = navigator.userAgent; |
|---|
| | | var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; |
|---|
| | | var flag = true; |
|---|
| | | for (let v = 0; v < Agents.length - 1; v++) { |
|---|
| | | if (userAgentInfo.indexOf(Agents[v]) > 0) { |
|---|
| | | flag = false; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return flag; |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | |
|---|
| | | onClick(e) { |
|---|
| | | let { |
|---|
| | | idx, |
|---|
| | | index |
|---|
| | | } = e |
|---|
| | | let obj = {} |
|---|
| | | for (let key in this.lists[idx].items[index]) { |
|---|
| | | obj[key] = this.lists[idx].items[index][key] |
|---|
| | | } |
|---|
| | | let select = [] |
|---|
| | | if (this.showSelect) { |
|---|
| | | this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked |
|---|
| | | this.lists.forEach((value, idx) => { |
|---|
| | | value.items.forEach((item, index) => { |
|---|
| | | if (item.checked) { |
|---|
| | | let obj = {} |
|---|
| | | for (let key in this.lists[idx].items[index]) { |
|---|
| | | obj[key] = this.lists[idx].items[index][key] |
|---|
| | | } |
|---|
| | | select.push(obj) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | this.$emit('click', { |
|---|
| | | item: obj, |
|---|
| | | select: select |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" > |
|---|
| | | .uni-indexed-list { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__scroll { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__menu { |
|---|
| | | width: 24px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__menu-item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex: 1; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__menu-text { |
|---|
| | | font-size: 12px; |
|---|
| | | text-align: center; |
|---|
| | | color: #aaa; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__menu--active { |
|---|
| | | // background-color: rgb(200, 200, 200); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__menu--active {} |
|---|
| | | |
|---|
| | | .uni-indexed-list__menu-text--active { |
|---|
| | | border-radius: 16px; |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | line-height: 16px; |
|---|
| | | background-color: #007aff; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__alert-wrapper { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-indexed-list__alert { |
|---|
| | | width: 80px; |
|---|
| | | height: 80px; |
|---|
| | | border-radius: 80px; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 80px; |
|---|
| | | font-size: 35px; |
|---|
| | | color: #fff; |
|---|
| | | background-color: rgba(0, 0, 0, 0.5); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-indexed-list", |
|---|
| | | "displayName": "uni-indexed-list ç´¢å¼å表", |
|---|
| | | "version": "1.2.1", |
|---|
| | | "description": "ç´¢å¼å表ç»ä»¶ï¼å³ä¾§å¸¦ç´¢å¼çå表ï¼æ¹ä¾¿å¿«éå®ä½å°å
·ä½å
容ï¼é常ç¨äºåå¸/æºåºéæ©çåºæ¯", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "ç´¢å¼å表", |
|---|
| | | "ç´¢å¼", |
|---|
| | | "å表" |
|---|
| | | ], |
|---|
| | | "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", |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## IndexedList ç´¢å¼å表 |
|---|
| | | > **ç»ä»¶åï¼uni-indexed-list** |
|---|
| | | > 代ç åï¼ `uIndexedList` |
|---|
| | | |
|---|
| | | |
|---|
| | | ç¨äºå±ç¤ºç´¢å¼å表ã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-indexed-list) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.0.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-link](https://uniapp.dcloud.io/component/uniui/uni-link) |
|---|
| | | ## 1.1.7ï¼2021-11-08ï¼ |
|---|
| | | ## 0.0.7ï¼2021-09-03ï¼ |
|---|
| | | - ä¿®å¤ å¨ nvue ä¸ä¸æ¾ç¤ºç bug |
|---|
| | | ## 0.0.6ï¼2021-07-30ï¼ |
|---|
| | | - æ°å¢ æ¯æèªå®ä¹æ槽 |
|---|
| | | ## 0.0.5ï¼2021-06-21ï¼ |
|---|
| | | - æ°å¢ download å±æ§ï¼H5å¹³å°ä¸è½½æ件å |
|---|
| | | ## 0.0.4ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 0.0.3ï¼2021-03-09ï¼ |
|---|
| | | - æ°å¢ href å±æ§æ¯æ tel:|mailto: |
|---|
| | | |
|---|
| | | ## 0.0.2ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <a v-if="isShowA" class="uni-link" :href="href" |
|---|
| | | :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" |
|---|
| | | :style="{color,fontSize:fontSize+'px'}" :download="download"> |
|---|
| | | <slot>{{text}}</slot> |
|---|
| | | </a> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" |
|---|
| | | :style="{color,fontSize:fontSize+'px'}" @click="openURL"> |
|---|
| | | <slot>{{text}}</slot> |
|---|
| | | </text> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" |
|---|
| | | :style="{color,fontSize:fontSize+'px'}" @click="openURL"> |
|---|
| | | {{text}} |
|---|
| | | </text> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * Link å¤é¨ç½é¡µè¶
é¾æ¥ç»ä»¶ |
|---|
| | | * @description uni-linkæ¯ä¸ä¸ªå¤é¨ç½é¡µè¶
é¾æ¥ç»ä»¶ï¼å¨å°ç¨åºå
å¤å¶urlï¼å¨appå
æå¼å¤é¨æµè§å¨ï¼å¨h5端æå¼æ°ç½é¡µ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=1182 |
|---|
| | | * @property {String} href ç¹å»åæå¼çå¤é¨ç½é¡µurl |
|---|
| | | * @property {String} text æ¾ç¤ºçæå |
|---|
| | | * @property {String} downlaod H5å¹³å°ä¸è½½æ件å |
|---|
| | | * @property {Boolean} showUnderLine æ¯å¦æ¾ç¤ºä¸å线 |
|---|
| | | * @property {String} copyTips å¨å°ç¨åºç«¯å¤å¶é¾æ¥æ¶æ¾ç¤ºçæç¤ºè¯ |
|---|
| | | * @property {String} color é¾æ¥æåé¢è² |
|---|
| | | * @property {String} fontSize é¾æ¥æåå¤§å° |
|---|
| | | * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'uniLink', |
|---|
| | | props: { |
|---|
| | | href: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | download: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | showUnderLine: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | copyTips: { |
|---|
| | | type: String, |
|---|
| | | default: 'å·²èªå¨å¤å¶ç½åï¼è¯·å¨ææºæµè§å¨éç²è´´è¯¥ç½å' |
|---|
| | | }, |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: '#999999' |
|---|
| | | }, |
|---|
| | | fontSize: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 14 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | isShowA() { |
|---|
| | | // #ifdef H5 |
|---|
| | | this._isH5 = true; |
|---|
| | | // #endif |
|---|
| | | if ((this.isMail() || this.isTel()) && this._isH5 === true) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this._isH5 = null; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | isMail() { |
|---|
| | | return this.href.startsWith('mailto:'); |
|---|
| | | }, |
|---|
| | | isTel() { |
|---|
| | | return this.href.startsWith('tel:'); |
|---|
| | | }, |
|---|
| | | openURL() { |
|---|
| | | // #ifdef APP-PLUS |
|---|
| | | if (this.isTel()) { |
|---|
| | | this.makePhoneCall(this.href.replace('tel:', '')); |
|---|
| | | } else { |
|---|
| | | plus.runtime.openURL(this.href); |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | // #ifdef H5 |
|---|
| | | window.open(this.href) |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP |
|---|
| | | uni.setClipboardData({ |
|---|
| | | data: this.href |
|---|
| | | }); |
|---|
| | | uni.showModal({ |
|---|
| | | content: this.copyTips, |
|---|
| | | showCancel: false |
|---|
| | | }); |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | makePhoneCall(phoneNumber) { |
|---|
| | | uni.makePhoneCall({ |
|---|
| | | phoneNumber |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-link { |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | .uni-link--withline { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-link", |
|---|
| | | "displayName": "uni-link è¶
é¾æ¥", |
|---|
| | | "version": "1.0.0", |
|---|
| | | "description": "uni-linkæ¯ä¸ä¸ªå¤é¨ç½é¡µè¶
é¾æ¥ç»ä»¶ï¼å¨å°ç¨åºå
å¤å¶urlï¼å¨appå
æå¼å¤é¨æµè§å¨ï¼å¨h5端æ", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "link", |
|---|
| | | "è¶
é¾æ¥", |
|---|
| | | "" |
|---|
| | | ], |
|---|
| | | "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" |
|---|
| | | }, |
|---|
| | | "å¿«åºç¨": { |
|---|
| | | "å为": "y", |
|---|
| | | "èç": "y" |
|---|
| | | }, |
|---|
| | | "Vue": { |
|---|
| | | "vue2": "y", |
|---|
| | | "vue3": "y" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## Link é¾æ¥ |
|---|
| | | > **ç»ä»¶åï¼uni-link** |
|---|
| | | > 代ç åï¼ `uLink` |
|---|
| | | |
|---|
| | | |
|---|
| | | uni-linkæ¯ä¸ä¸ªå¤é¨ç½é¡µè¶
é¾æ¥ç»ä»¶ï¼å¨å°ç¨åºå
å¤å¶urlï¼å¨appå
æå¼å¤é¨æµè§å¨ï¼å¨h5端æå¼æ°ç½é¡µã |
|---|
| | | |
|---|
| | | ### [æ¥çææ¡£](https://uniapp.dcloud.io/component/uniui/uni-link) |
|---|
| | | #### å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.2.1ï¼2022-03-30ï¼ |
|---|
| | | - å é¤æ ç¨æ件 |
|---|
| | | ## 1.2.0ï¼2021-11-23ï¼ |
|---|
| | | - ä¼å ç»ä»¶UIï¼å¹¶æä¾è®¾è®¡èµæºï¼è¯¦è§:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|---|
| | | - ææ¡£è¿ç§»ï¼è¯¦è§:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list) |
|---|
| | | ## 1.1.3ï¼2021-08-30ï¼ |
|---|
| | | - ä¿®å¤ å¨vue3ä¸toå±æ§å¨åè¡åºç¨çæ¶åæ¥éçbug |
|---|
| | | ## 1.1.2ï¼2021-07-30ï¼ |
|---|
| | | - ä¼å vue3ä¸äºä»¶è¦åçé®é¢ |
|---|
| | | ## 1.1.1ï¼2021-07-21ï¼ |
|---|
| | | - ä¿®å¤ ä¸å
¶ä»ç»ä»¶åµå¥ä½¿ç¨æ¶ï¼ç¹å»å¤±æçBug |
|---|
| | | ## 1.1.0ï¼2021-07-13ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.0.17ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.0.16ï¼2021-02-05ï¼ |
|---|
| | | - ä¼å ç»ä»¶å¼ç¨å
³ç³»ï¼éè¿uni_moduleså¼ç¨ç»ä»¶ |
|---|
| | | ## 1.0.15ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| | | - ä¿®å¤ uni-list-chat è§æ æ¾ç¤ºä¸æ£å¸¸çé®é¢ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view class="uni-list-ad"> |
|---|
| | | <view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view> |
|---|
| | | <ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111" |
|---|
| | | unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = uni.requireNativePlugin('dom'); |
|---|
| | | // #endif |
|---|
| | | export default { |
|---|
| | | name: 'UniListAd', |
|---|
| | | props: { |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '', |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // inject: ['list'], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isFirstChild: false, |
|---|
| | | border: false, |
|---|
| | | borderShow: true, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted() { |
|---|
| | | this.list = this.getForm() |
|---|
| | | if (this.list) { |
|---|
| | | if (!this.list.firstChildAppend) { |
|---|
| | | this.list.firstChildAppend = true |
|---|
| | | this.isFirstChild = true |
|---|
| | | } |
|---|
| | | this.border = this.list.border |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * è·åç¶å
ç´ å®ä¾ |
|---|
| | | */ |
|---|
| | | getForm(name = 'uniList') { |
|---|
| | | 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; |
|---|
| | | }, |
|---|
| | | aderror(e) { |
|---|
| | | console.log("aderror: " + JSON.stringify(e.detail)); |
|---|
| | | }, |
|---|
| | | closeAd(e) { |
|---|
| | | this.borderShow = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | .uni-list-ad { |
|---|
| | | position: relative; |
|---|
| | | border: 1px red solid; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list--border { |
|---|
| | | position: relative; |
|---|
| | | padding-bottom: 1px; |
|---|
| | | /* #ifdef APP-PLUS */ |
|---|
| | | border-top-color: $uni-border-color; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | margin-left: $uni-spacing-row-lg; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-list--border:after { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | height: 1px; |
|---|
| | | content: ''; |
|---|
| | | -webkit-transform: scaleY(.5); |
|---|
| | | transform: scaleY(.5); |
|---|
| | | background-color: $uni-border-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-item--first:after { |
|---|
| | | height: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * è¿éæ¯ uni-list ç»ä»¶å
ç½®ç常ç¨æ ·å¼åé |
|---|
| | | * å¦æéè¦è¦çæ ·å¼ï¼è¿éæä¾äºåºæ¬çç»ä»¶æ ·å¼åéï¼æ¨å¯ä»¥å°è¯ä¿®æ¹è¿éçåéï¼å»å®ææ ·å¼æ¿æ¢ï¼èä¸ç¨å»ä¿®æ¹æºç |
|---|
| | | * |
|---|
| | | */ |
|---|
| | | |
|---|
| | | // èæ¯è² |
|---|
| | | $background-color : #fff; |
|---|
| | | // åå²çº¿é¢è² |
|---|
| | | $divide-line-color : #e5e5e5; |
|---|
| | | |
|---|
| | | // é»è®¤å¤´å大å°ï¼å¦éè¦ä¿®æ¹æ¤å¼ï¼æ³¨æåæ¥ä¿®æ¹ js ä¸çå¼ const avatarWidth = xx ï¼ç®ååªæ¯ææ¹å½¢å¤´å |
|---|
| | | // nvue 页é¢ä¸æ¯æä¿®æ¹å¤´åå¤§å° |
|---|
| | | $avatar-width : 45px ; |
|---|
| | | |
|---|
| | | // 头åè¾¹æ¡ |
|---|
| | | $avatar-border-radius: 5px; |
|---|
| | | $avatar-border-color: #eee; |
|---|
| | | $avatar-border-width: 1px; |
|---|
| | | |
|---|
| | | // æ é¢æåæ ·å¼ |
|---|
| | | $title-size : 16px; |
|---|
| | | $title-color : #3b4144; |
|---|
| | | $title-weight : normal; |
|---|
| | | |
|---|
| | | // æè¿°æåæ ·å¼ |
|---|
| | | $note-size : 12px; |
|---|
| | | $note-color : #999; |
|---|
| | | $note-weight : normal; |
|---|
| | | |
|---|
| | | // å³ä¾§é¢å¤å
容é»è®¤æ ·å¼ |
|---|
| | | $right-text-size : 12px; |
|---|
| | | $right-text-color : #999; |
|---|
| | | $right-text-weight : normal; |
|---|
| | | |
|---|
| | | // è§æ æ ·å¼ |
|---|
| | | // nvue 页é¢ä¸æ¯æä¿®æ¹åç¹ä½ç½®ä»¥åå¤§å° |
|---|
| | | // è§æ å¨å·¦ä¾§æ¶ï¼è§æ çä½ç½®ï¼é»è®¤ä¸º 0 ï¼è´æ°å·¦/ä¸ç§»å¨ï¼æ£æ°å³/ä¸ç§»å¨ |
|---|
| | | $badge-left: 0px; |
|---|
| | | $badge-top: 0px; |
|---|
| | | |
|---|
| | | // æ¾ç¤ºåç¹æ¶ï¼åç¹å¤§å° |
|---|
| | | $dot-width: 10px; |
|---|
| | | $dot-height: 10px; |
|---|
| | | |
|---|
| | | // æ¾ç¤ºè§æ æ¶ï¼è§æ 大å°ååä½å¤§å° |
|---|
| | | $badge-size : 18px; |
|---|
| | | $badge-font : 12px; |
|---|
| | | // æ¾ç¤ºè§æ æ¶ï¼è§æ åæ¯è² |
|---|
| | | $badge-color : #fff; |
|---|
| | | // æ¾ç¤ºè§æ æ¶ï¼è§æ èæ¯è² |
|---|
| | | $badge-background-color : #ff5a5f; |
|---|
| | | // æ¾ç¤ºè§æ æ¶ï¼è§æ å·¦å³é´è· |
|---|
| | | $badge-space : 6px; |
|---|
| | | |
|---|
| | | // ç¶ææ ·å¼ |
|---|
| | | // éä¸é¢è² |
|---|
| | | $hover : #f5f5f5; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick"> |
|---|
| | | <view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view> |
|---|
| | | <view class="uni-list-chat__container"> |
|---|
| | | <view class="uni-list-chat__header-warp"> |
|---|
| | | <view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }"> |
|---|
| | | <image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatar" mode="aspectFill"></image> |
|---|
| | | </view> |
|---|
| | | <!-- 头åç» --> |
|---|
| | | <view v-else class="uni-list-chat__header"> |
|---|
| | | <view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar" |
|---|
| | | :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }"> |
|---|
| | | <image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url" |
|---|
| | | mode="aspectFill"></image> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]"> |
|---|
| | | <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-list-chat__content"> |
|---|
| | | <view class="uni-list-chat__content-main"> |
|---|
| | | <text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text> |
|---|
| | | <text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text> |
|---|
| | | </view> |
|---|
| | | <view class="uni-list-chat__content-extra"> |
|---|
| | | <slot> |
|---|
| | | <text class="uni-list-chat__content-extra-text">{{ time }}</text> |
|---|
| | | <view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']"> |
|---|
| | | <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // 头åå¤§å° |
|---|
| | | const avatarWidth = 45; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ListChat è天å表 |
|---|
| | | * @description è天å表,ç¨äºå建è天类å表 |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=24 |
|---|
| | | * @property {String} title æ é¢ |
|---|
| | | * @property {String} note æè¿° |
|---|
| | | * @property {Boolean} clickable = [true|false] æ¯å¦å¼å¯ç¹å»åé¦ï¼é»è®¤ä¸ºfalse |
|---|
| | | * @property {String} badgeText æ°åè§æ å
容 |
|---|
| | | * @property {String} badgePositon = [left|right] è§æ ä½ç½®ï¼é»è®¤ä¸º right |
|---|
| | | * @property {String} link = [falseï½navigateTo|redirectTo|reLaunch|switchTab] æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ï¼é»è®¤ä¸ºfalse |
|---|
| | | * @value false ä¸å¼å¯ |
|---|
| | | * @value navigateTo å uni.navigateTo() |
|---|
| | | * @value redirectTo å uni.redirectTo() |
|---|
| | | * @value reLaunch å uni.reLaunch() |
|---|
| | | * @value switchTab å uni.switchTab() |
|---|
| | | * @property {String | PageURIString} to 跳转ç®æ é¡µé¢ |
|---|
| | | * @property {String} time å³ä¾§æ¶é´æ¾ç¤º |
|---|
| | | * @property {Boolean} avatarCircle = [true|false] æ¯å¦æ¾ç¤ºå形头åï¼é»è®¤ä¸ºfalse |
|---|
| | | * @property {String} avatar 头åå°åï¼avatarCircle ä¸å¡«æ¶çæ |
|---|
| | | * @property {Array} avatarList 头åç»ï¼æ ¼å¼ä¸º [{url:''}] |
|---|
| | | * @event {Function} click ç¹å» uniListChat 触åäºä»¶ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniListChat', |
|---|
| | | emits:['click'], |
|---|
| | | props: { |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | note: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | clickable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | link: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | to: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | badgeText: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | badgePositon: { |
|---|
| | | type: String, |
|---|
| | | default: 'right' |
|---|
| | | }, |
|---|
| | | time: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | avatarCircle: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | avatar: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | avatarList: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return []; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // inject: ['list'], |
|---|
| | | computed: { |
|---|
| | | isSingle() { |
|---|
| | | if (this.badgeText === 'dot') { |
|---|
| | | return 'uni-badge--dot'; |
|---|
| | | } else { |
|---|
| | | const badgeText = this.badgeText.toString(); |
|---|
| | | if (badgeText.length > 1) { |
|---|
| | | return 'uni-badge--complex'; |
|---|
| | | } else { |
|---|
| | | return 'uni-badge--single'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computedAvatar() { |
|---|
| | | if (this.avatarList.length > 4) { |
|---|
| | | this.imageWidth = avatarWidth * 0.31; |
|---|
| | | return 'avatarItem--3'; |
|---|
| | | } else if (this.avatarList.length > 1) { |
|---|
| | | this.imageWidth = avatarWidth * 0.47; |
|---|
| | | return 'avatarItem--2'; |
|---|
| | | } else { |
|---|
| | | this.imageWidth = avatarWidth; |
|---|
| | | return 'avatarItem--1'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isFirstChild: false, |
|---|
| | | border: true, |
|---|
| | | // avatarList: 3, |
|---|
| | | imageWidth: 50 |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.list = this.getForm() |
|---|
| | | if (this.list) { |
|---|
| | | if (!this.list.firstChildAppend) { |
|---|
| | | this.list.firstChildAppend = true; |
|---|
| | | this.isFirstChild = true; |
|---|
| | | } |
|---|
| | | this.border = this.list.border; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * è·åç¶å
ç´ å®ä¾ |
|---|
| | | */ |
|---|
| | | getForm(name = 'uniList') { |
|---|
| | | 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; |
|---|
| | | }, |
|---|
| | | onClick() { |
|---|
| | | if (this.to !== '') { |
|---|
| | | this.openPage(); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.clickable || this.link) { |
|---|
| | | this.$emit('click', { |
|---|
| | | data: {} |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | openPage() { |
|---|
| | | if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) { |
|---|
| | | this.pageApi(this.link); |
|---|
| | | } else { |
|---|
| | | this.pageApi('navigateTo'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | pageApi(api) { |
|---|
| | | uni[api]({ |
|---|
| | | url: this.to, |
|---|
| | | success: res => { |
|---|
| | | this.$emit('click', { |
|---|
| | | data: res |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | fail: err => { |
|---|
| | | this.$emit('click', { |
|---|
| | | data: err |
|---|
| | | }); |
|---|
| | | console.error(err.errMsg); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | $uni-font-size-lg:16px; |
|---|
| | | $uni-spacing-row-sm: 5px; |
|---|
| | | $uni-spacing-row-base: 10px; |
|---|
| | | $uni-spacing-row-lg: 15px; |
|---|
| | | $background-color: #fff; |
|---|
| | | $divide-line-color: #e5e5e5; |
|---|
| | | $avatar-width: 45px; |
|---|
| | | $avatar-border-radius: 5px; |
|---|
| | | $avatar-border-color: #eee; |
|---|
| | | $avatar-border-width: 1px; |
|---|
| | | $title-size: 16px; |
|---|
| | | $title-color: #3b4144; |
|---|
| | | $title-weight: normal; |
|---|
| | | $note-size: 12px; |
|---|
| | | $note-color: #999; |
|---|
| | | $note-weight: normal; |
|---|
| | | $right-text-size: 12px; |
|---|
| | | $right-text-color: #999; |
|---|
| | | $right-text-weight: normal; |
|---|
| | | $badge-left: 0px; |
|---|
| | | $badge-top: 0px; |
|---|
| | | $dot-width: 10px; |
|---|
| | | $dot-height: 10px; |
|---|
| | | $badge-size: 18px; |
|---|
| | | $badge-font: 12px; |
|---|
| | | $badge-color: #fff; |
|---|
| | | $badge-background-color: #ff5a5f; |
|---|
| | | $badge-space: 6px; |
|---|
| | | $hover: #f5f5f5; |
|---|
| | | |
|---|
| | | .uni-list-chat { |
|---|
| | | font-size: $uni-font-size-lg; |
|---|
| | | position: relative; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | background-color: $background-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // .uni-list-chat--disabled { |
|---|
| | | // opacity: 0.3; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | .uni-list-chat--hover { |
|---|
| | | background-color: $hover; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list--border { |
|---|
| | | position: relative; |
|---|
| | | margin-left: $uni-spacing-row-lg; |
|---|
| | | /* #ifdef APP-PLUS */ |
|---|
| | | border-top-color: $divide-line-color; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-list--border:after { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | height: 1px; |
|---|
| | | content: ''; |
|---|
| | | -webkit-transform: scaleY(0.5); |
|---|
| | | transform: scaleY(0.5); |
|---|
| | | background-color: $divide-line-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-item--first:after { |
|---|
| | | height: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | .uni-list-chat--first { |
|---|
| | | border-top-width: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | lines: 1; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | lines: 2; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__container { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | flex: 1; |
|---|
| | | padding: $uni-spacing-row-base $uni-spacing-row-lg; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__header-warp { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__header { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | align-content: center; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-wrap: wrap-reverse; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: $avatar-width; |
|---|
| | | height: $avatar-width; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | border-radius: $avatar-border-radius; |
|---|
| | | border-color: $avatar-border-color; |
|---|
| | | border-width: $avatar-border-width; |
|---|
| | | border-style: solid; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__header-box { |
|---|
| | | /* #ifndef APP-PLUS */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | display: flex; |
|---|
| | | width: $avatar-width; |
|---|
| | | height: $avatar-width; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | /* #endif */ |
|---|
| | | overflow: hidden; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__header-image { |
|---|
| | | margin: 1px; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: $avatar-width; |
|---|
| | | height: $avatar-width; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-list-chat__header-image { |
|---|
| | | display: block; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatarItem--1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatarItem--2 { |
|---|
| | | width: 47%; |
|---|
| | | height: 47%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatarItem--3 { |
|---|
| | | width: 32%; |
|---|
| | | height: 32%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | .header--circle { |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__content { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | padding: 2px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__content-main { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding-left: $uni-spacing-row-base; |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__content-title { |
|---|
| | | font-size: $title-size; |
|---|
| | | color: $title-color; |
|---|
| | | font-weight: $title-weight; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__content-note { |
|---|
| | | margin-top: 3px; |
|---|
| | | color: $note-color; |
|---|
| | | font-size: $note-size; |
|---|
| | | font-weight: $title-weight; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__content-extra { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | flex-shrink: 0; |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: flex-end; |
|---|
| | | margin-left: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__content-extra-text { |
|---|
| | | color: $right-text-color; |
|---|
| | | font-size: $right-text-size; |
|---|
| | | font-weight: $right-text-weight; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__badge-pos { |
|---|
| | | position: absolute; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | left: 55px; |
|---|
| | | top: 3px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left}); |
|---|
| | | top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top}); |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__badge { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | border-radius: 100px; |
|---|
| | | background-color: $badge-background-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat__badge-text { |
|---|
| | | color: $badge-color; |
|---|
| | | font-size: $badge-font; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-badge--single { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | // left: calc(#{$avatar-width} + 7px + #{$badge-left}); |
|---|
| | | /* #endif */ |
|---|
| | | width: $badge-size; |
|---|
| | | height: $badge-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-badge--complex { |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | left: 50px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: auto; |
|---|
| | | /* #endif */ |
|---|
| | | height: $badge-size; |
|---|
| | | padding: 0 $badge-space; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-badge--dot { |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | left: 60px; |
|---|
| | | top: 6px; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left}); |
|---|
| | | /* #endif */ |
|---|
| | | width: $dot-width; |
|---|
| | | height: $dot-height; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list-chat--right { |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | left: 0; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | |
|---|
| | | <view :class="{ 'uni-list-item--disabled': disabled }" |
|---|
| | | :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'" |
|---|
| | | class="uni-list-item" @click="onClick"> |
|---|
| | | <view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view> |
|---|
| | | <view class="uni-list-item__container" |
|---|
| | | :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }"> |
|---|
| | | <slot name="header"> |
|---|
| | | <view class="uni-list-item__header"> |
|---|
| | | <view v-if="thumb" class="uni-list-item__icon"> |
|---|
| | | <image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" /> |
|---|
| | | </view> |
|---|
| | | <view v-else-if="showExtraIcon" class="uni-list-item__icon"> |
|---|
| | | <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <slot name="body"> |
|---|
| | | <view class="uni-list-item__content" |
|---|
| | | :class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }"> |
|---|
| | | <text v-if="title" class="uni-list-item__content-title" |
|---|
| | | :class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text> |
|---|
| | | <text v-if="note" class="uni-list-item__content-note">{{ note }}</text> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <slot name="footer"> |
|---|
| | | <view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra" |
|---|
| | | :class="{ 'flex--justify': direction === 'column' }"> |
|---|
| | | <text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text> |
|---|
| | | <uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" /> |
|---|
| | | <switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" |
|---|
| | | @change="onSwitchChange" /> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * ListItem å表åç»ä»¶ |
|---|
| | | * @description å表åç»ä»¶ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=24 |
|---|
| | | * @property {String} title æ é¢ |
|---|
| | | * @property {String} note æè¿° |
|---|
| | | * @property {String} thumb 左侧缩ç¥å¾ï¼è¥thumbæå¼ï¼åä¸ä¼æ¾ç¤ºæ©å±å¾æ |
|---|
| | | * @property {String} thumbSize = [lg|base|sm] ç¥ç¼©å¾å¤§å° |
|---|
| | | * @value lg å¤§å¾ |
|---|
| | | * @value base ä¸è¬ |
|---|
| | | * @value sm å°å¾ |
|---|
| | | * @property {String} badgeText æ°åè§æ å
容 |
|---|
| | | * @property {String} badgeType æ°åè§æ ç±»åï¼åè[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) |
|---|
| | | * @property {Object} badgeStyle æ°åè§æ æ ·å¼ |
|---|
| | | * @property {String} rightText å³ä¾§æåå
容 |
|---|
| | | * @property {Boolean} disabled = [true|false] æ¯å¦ç¦ç¨ |
|---|
| | | * @property {Boolean} clickable = [true|false] æ¯å¦å¼å¯ç¹å»åé¦ |
|---|
| | | * @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ |
|---|
| | | * @value navigateTo å uni.navigateTo() |
|---|
| | | * @value redirectTo å uni.redirectTo() |
|---|
| | | * @value reLaunch å uni.reLaunch() |
|---|
| | | * @value switchTab å uni.switchTab() |
|---|
| | | * @property {String | PageURIString} to 跳转ç®æ é¡µé¢ |
|---|
| | | * @property {Boolean} showBadge = [true|false] æ¯å¦æ¾ç¤ºæ°åè§æ |
|---|
| | | * @property {Boolean} showSwitch = [true|false] æ¯å¦æ¾ç¤ºSwitch |
|---|
| | | * @property {Boolean} switchChecked = [true|false] Switchæ¯å¦è¢«éä¸ |
|---|
| | | * @property {Boolean} showExtraIcon = [true|false] 左侧æ¯å¦æ¾ç¤ºæ©å±å¾æ |
|---|
| | | * @property {Object} extraIcon æ©å±å¾æ åæ°ï¼æ ¼å¼ä¸º {color: '#4cd964',size: '22',type: 'spinner'} |
|---|
| | | * @property {String} direction = [row|column] æçæ¹å |
|---|
| | | * @value row æ°´å¹³æå |
|---|
| | | * @value column åç´æå |
|---|
| | | * @event {Function} click ç¹å» uniListItem 触åäºä»¶ |
|---|
| | | * @event {Function} switchChange ç¹å»åæ¢ Switch æ¶è§¦å |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniListItem', |
|---|
| | | emits: ['click', 'switchChange'], |
|---|
| | | props: { |
|---|
| | | direction: { |
|---|
| | | type: String, |
|---|
| | | default: 'row' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | note: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | ellipsis: { |
|---|
| | | type: [Number,String], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | clickable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | showArrow: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | link: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | to: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | showBadge: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | showSwitch: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | switchChecked: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | badgeText: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | badgeType: { |
|---|
| | | type: String, |
|---|
| | | default: 'success' |
|---|
| | | }, |
|---|
| | | badgeStyle:{ |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | rightText: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | thumb: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | thumbSize: { |
|---|
| | | type: String, |
|---|
| | | default: 'base' |
|---|
| | | }, |
|---|
| | | showExtraIcon: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | extraIcon: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | type: '', |
|---|
| | | color: '#000000', |
|---|
| | | size: 20 |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // inject: ['list'], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isFirstChild: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.list = this.getForm() |
|---|
| | | // å¤ææ¯å¦åå¨ uni-list ç»ä»¶ |
|---|
| | | if (this.list) { |
|---|
| | | if (!this.list.firstChildAppend) { |
|---|
| | | this.list.firstChildAppend = true; |
|---|
| | | this.isFirstChild = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | /** |
|---|
| | | * è·åç¶å
ç´ å®ä¾ |
|---|
| | | */ |
|---|
| | | getForm(name = 'uniList') { |
|---|
| | | 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; |
|---|
| | | }, |
|---|
| | | onClick() { |
|---|
| | | if (this.to !== '') { |
|---|
| | | this.openPage(); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (this.clickable || this.link) { |
|---|
| | | this.$emit('click', { |
|---|
| | | data: {} |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onSwitchChange(e) { |
|---|
| | | this.$emit('switchChange', e.detail); |
|---|
| | | }, |
|---|
| | | openPage() { |
|---|
| | | if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) { |
|---|
| | | this.pageApi(this.link); |
|---|
| | | } else { |
|---|
| | | this.pageApi('navigateTo'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | pageApi(api) { |
|---|
| | | let callback = { |
|---|
| | | url: this.to, |
|---|
| | | success: res => { |
|---|
| | | this.$emit('click', { |
|---|
| | | data: res |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | fail: err => { |
|---|
| | | this.$emit('click', { |
|---|
| | | data: err |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | switch (api) { |
|---|
| | | case 'navigateTo': |
|---|
| | | uni.navigateTo(callback) |
|---|
| | | break |
|---|
| | | case 'redirectTo': |
|---|
| | | uni.redirectTo(callback) |
|---|
| | | break |
|---|
| | | case 'reLaunch': |
|---|
| | | uni.reLaunch(callback) |
|---|
| | | break |
|---|
| | | case 'switchTab': |
|---|
| | | uni.switchTab(callback) |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | uni.navigateTo(callback) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | $uni-font-size-sm:12px; |
|---|
| | | $uni-font-size-base:14px; |
|---|
| | | $uni-font-size-lg:16px; |
|---|
| | | $uni-spacing-col-lg: 12px; |
|---|
| | | $uni-spacing-row-lg: 15px; |
|---|
| | | $uni-img-size-sm:20px; |
|---|
| | | $uni-img-size-base:26px; |
|---|
| | | $uni-img-size-lg:40px; |
|---|
| | | $uni-border-color:#e5e5e5; |
|---|
| | | $uni-bg-color-hover:#f1f1f1; |
|---|
| | | $uni-text-color-grey:#999; |
|---|
| | | $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; |
|---|
| | | .uni-list-item { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | font-size: $uni-font-size-lg; |
|---|
| | | position: relative; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | background-color: #fff; |
|---|
| | | flex-direction: row; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | cursor: pointer; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .uni-list-item--disabled { |
|---|
| | | opacity: 0.3; |
|---|
| | | } |
|---|
| | | .uni-list-item--hover { |
|---|
| | | background-color: $uni-bg-color-hover; |
|---|
| | | } |
|---|
| | | .uni-list-item__container { |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | padding: $list-item-pd; |
|---|
| | | padding-left: $uni-spacing-row-lg; |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | // align-items: center; |
|---|
| | | } |
|---|
| | | .container--right { |
|---|
| | | padding-right: 0; |
|---|
| | | } |
|---|
| | | // .border--left { |
|---|
| | | // margin-left: $uni-spacing-row-lg; |
|---|
| | | // } |
|---|
| | | .uni-list--border { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-top-color: $uni-border-color; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-list--border:after { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | height: 1px; |
|---|
| | | content: ''; |
|---|
| | | -webkit-transform: scaleY(0.5); |
|---|
| | | transform: scaleY(0.5); |
|---|
| | | background-color: $uni-border-color; |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | .uni-list-item__content { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | padding-right: 8px; |
|---|
| | | flex: 1; |
|---|
| | | color: #3b4144; |
|---|
| | | // overflow: hidden; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .uni-list-item__content--center { |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | .uni-list-item__content-title { |
|---|
| | | font-size: $uni-font-size-base; |
|---|
| | | color: #3b4144; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .uni-list-item__content-note { |
|---|
| | | margin-top: 6rpx; |
|---|
| | | color: $uni-text-color-grey; |
|---|
| | | font-size: $uni-font-size-sm; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .uni-list-item__extra { |
|---|
| | | // width: 25%; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: flex-end; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .uni-list-item__header { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .uni-list-item__icon { |
|---|
| | | margin-right: 18rpx; |
|---|
| | | flex-direction: row; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .uni-list-item__icon-img { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | height: $uni-img-size-base; |
|---|
| | | width: $uni-img-size-base; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | .uni-icon-wrapper { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | padding: 0 10px; |
|---|
| | | } |
|---|
| | | .flex--direction { |
|---|
| | | flex-direction: column; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | align-items: initial; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .flex--justify { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | justify-content: initial; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .uni-list--lg { |
|---|
| | | height: $uni-img-size-lg; |
|---|
| | | width: $uni-img-size-lg; |
|---|
| | | } |
|---|
| | | .uni-list--base { |
|---|
| | | height: $uni-img-size-base; |
|---|
| | | width: $uni-img-size-base; |
|---|
| | | } |
|---|
| | | .uni-list--sm { |
|---|
| | | height: $uni-img-size-sm; |
|---|
| | | width: $uni-img-size-sm; |
|---|
| | | } |
|---|
| | | .uni-list-item__extra-text { |
|---|
| | | color: $uni-text-color-grey; |
|---|
| | | font-size: $uni-font-size-sm; |
|---|
| | | } |
|---|
| | | .uni-ellipsis-1 { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | overflow: hidden; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | lines: 1; |
|---|
| | | text-overflow:ellipsis; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | .uni-ellipsis-2 { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | lines: 2; |
|---|
| | | text-overflow:ellipsis; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <view class="uni-list uni-border-top-bottom"> |
|---|
| | | <view v-if="border" class="uni-list--border-top"></view> |
|---|
| | | <slot /> |
|---|
| | | <view v-if="border" class="uni-list--border-bottom"></view> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * List å表 |
|---|
| | | * @description å表ç»ä»¶ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=24 |
|---|
| | | * @property {String} border = [true|false] æ é¢ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'uniList', |
|---|
| | | 'mp-weixin': { |
|---|
| | | options: { |
|---|
| | | multipleSlots: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | enableBackToTop: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | scrollY: { |
|---|
| | | type: [Boolean, String], |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // provide() { |
|---|
| | | // return { |
|---|
| | | // list: this |
|---|
| | | // }; |
|---|
| | | // }, |
|---|
| | | created() { |
|---|
| | | this.firstChildAppend = false; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | loadMore(e) { |
|---|
| | | this.$emit('scrolltolower'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" > |
|---|
| | | $uni-bg-color:#ffffff; |
|---|
| | | $uni-border-color:#e5e5e5; |
|---|
| | | .uni-list { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | background-color: $uni-bg-color; |
|---|
| | | position: relative; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list--border { |
|---|
| | | position: relative; |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | border-top-color: $uni-border-color; |
|---|
| | | border-top-style: solid; |
|---|
| | | border-top-width: 0.5px; |
|---|
| | | border-bottom-color: $uni-border-color; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | border-bottom-width: 0.5px; |
|---|
| | | /* #endif */ |
|---|
| | | z-index: -1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | |
|---|
| | | .uni-list--border-top { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | height: 1px; |
|---|
| | | -webkit-transform: scaleY(0.5); |
|---|
| | | transform: scaleY(0.5); |
|---|
| | | background-color: $uni-border-color; |
|---|
| | | z-index: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-list--border-bottom { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | right: 0; |
|---|
| | | left: 0; |
|---|
| | | height: 1px; |
|---|
| | | -webkit-transform: scaleY(0.5); |
|---|
| | | transform: scaleY(0.5); |
|---|
| | | background-color: $uni-border-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown"> |
|---|
| | | <slot /> |
|---|
| | | </refresh> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <view ref="uni-refresh" class="uni-refresh" v-show="isShow"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'UniRefresh', |
|---|
| | | props: { |
|---|
| | | display: { |
|---|
| | | type: [String], |
|---|
| | | default: "hide" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | pulling: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | isShow() { |
|---|
| | | if (this.display === "show" || this.pulling === true) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() {}, |
|---|
| | | methods: { |
|---|
| | | onchange(value) { |
|---|
| | | this.pulling = value; |
|---|
| | | }, |
|---|
| | | onrefresh(e) { |
|---|
| | | this.$emit("refresh", e); |
|---|
| | | }, |
|---|
| | | onpullingdown(e) { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | this.$emit("pullingdown", e); |
|---|
| | | // #endif |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | var detail = { |
|---|
| | | viewHeight: 90, |
|---|
| | | pullingDistance: e.height |
|---|
| | | } |
|---|
| | | this.$emit("pullingdown", detail); |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .uni-refresh { |
|---|
| | | height: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | var pullDown = { |
|---|
| | | threshold: 95, |
|---|
| | | maxHeight: 200, |
|---|
| | | callRefresh: 'onrefresh', |
|---|
| | | callPullingDown: 'onpullingdown', |
|---|
| | | refreshSelector: '.uni-refresh' |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function ready(newValue, oldValue, ownerInstance, instance) { |
|---|
| | | var state = instance.getState() |
|---|
| | | state.canPullDown = newValue; |
|---|
| | | // console.log(newValue); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchStart(e, instance) { |
|---|
| | | var state = instance.getState(); |
|---|
| | | state.refreshInstance = instance.selectComponent(pullDown.refreshSelector); |
|---|
| | | state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined); |
|---|
| | | if (!state.canPullDown) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | // console.log("touchStart"); |
|---|
| | | |
|---|
| | | state.height = 0; |
|---|
| | | state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY; |
|---|
| | | state.refreshInstance.setStyle({ |
|---|
| | | 'height': 0 |
|---|
| | | }); |
|---|
| | | state.refreshInstance.callMethod("onchange", true); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchMove(e, ownerInstance) { |
|---|
| | | var instance = e.instance; |
|---|
| | | var state = instance.getState(); |
|---|
| | | if (!state.canPullDown) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | var oldHeight = state.height; |
|---|
| | | var endY = e.touches[0].pageY || e.changedTouches[0].pageY; |
|---|
| | | var height = endY - state.touchStartY; |
|---|
| | | if (height > pullDown.maxHeight) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | var refreshInstance = state.refreshInstance; |
|---|
| | | refreshInstance.setStyle({ |
|---|
| | | 'height': height + 'px' |
|---|
| | | }); |
|---|
| | | |
|---|
| | | height = height < pullDown.maxHeight ? height : pullDown.maxHeight; |
|---|
| | | state.height = height; |
|---|
| | | refreshInstance.callMethod(pullDown.callPullingDown, { |
|---|
| | | height: height |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function touchEnd(e, ownerInstance) { |
|---|
| | | var state = e.instance.getState(); |
|---|
| | | if (!state.canPullDown) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | state.refreshInstance.callMethod("onchange", false); |
|---|
| | | |
|---|
| | | var refreshInstance = state.refreshInstance; |
|---|
| | | if (state.height > pullDown.threshold) { |
|---|
| | | refreshInstance.callMethod(pullDown.callRefresh); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | refreshInstance.setStyle({ |
|---|
| | | 'height': 0 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function propObserver(newValue, oldValue, instance) { |
|---|
| | | pullDown = newValue; |
|---|
| | | } |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | touchmove: touchMove, |
|---|
| | | touchstart: touchStart, |
|---|
| | | touchend: touchEnd, |
|---|
| | | propObserver: propObserver |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-list", |
|---|
| | | "displayName": "uni-list å表", |
|---|
| | | "version": "1.2.1", |
|---|
| | | "description": "List ç»ä»¶ ï¼å¸®å©ä½¿ç¨è
å¿«éæ建å表ã", |
|---|
| | | "keywords": [ |
|---|
| | | "", |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "å表", |
|---|
| | | "", |
|---|
| | | "list" |
|---|
| | | ], |
|---|
| | | "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-badge", |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## List å表 |
|---|
| | | > **ç»ä»¶åï¼uni-list** |
|---|
| | | > 代ç åï¼ `uList`ã`uListItem` |
|---|
| | | > å
³èç»ä»¶ï¼`uni-list-item`ã`uni-badge`ã`uni-icons`ã`uni-list-chat`ã`uni-list-ad` |
|---|
| | | |
|---|
| | | |
|---|
| | | List å表ç»ä»¶ï¼å
å«åºæ¬åè¡¨æ ·å¼ãå¯æ©å±æ槽æºå¶ãé¿å表æ§è½ä¼åãå¤ç«¯å
¼å®¹ã |
|---|
| | | |
|---|
| | | å¨vue页é¢éï¼å®é»è®¤ä½¿ç¨é¡µé¢çº§æ»å¨ãå¨app-nvue页é¢éï¼å®é»è®¤ä½¿ç¨åçlistç»ä»¶æ»å¨ãè¿æ ·çé¿å表ï¼å¨æ»å¨åºå±å¹å¤åï¼ç³»ç»ä¼åæ¶ä¸å¯è§åºåç渲æå
åèµæºï¼ä¸ä¼é ææ»å¨è¶é¿ææºè¶å¡çé®é¢ã |
|---|
| | | |
|---|
| | | uni-listç»ä»¶æ¯ç¶å®¹å¨ï¼éé¢çæ ¸å¿æ¯uni-list-itemåç»ä»¶ï¼å®ä»£è¡¨å表ä¸çä¸ä¸ªå¯éå¤è¡ï¼åç»ä»¶å¯ä»¥æ é循ç¯ã |
|---|
| | | |
|---|
| | | uni-list-itemæå¾å¤é£æ ¼ï¼uni-list-itemç»ä»¶éè¿å
ç½®çå±æ§ï¼æ»¡è¶³ä¸äºå¸¸ç¨çåºæ¯ãå½å
ç½®å±æ§ä¸æ»¡è¶³éæ±æ¶ï¼å¯ä»¥éè¿æ©å±æ槽æ¥èªå®ä¹å表å
容ã |
|---|
| | | |
|---|
| | | å
ç½®å±æ§å¯ä»¥è¦ççåºæ¯å
æ¬ï¼å¯¼èªå表ã设置å表ãå°å¾æ å表ãéä¿¡å½å表ãè天记å½å表ã |
|---|
| | | |
|---|
| | | æ¶åå¾å¤å¤§å¾æ丰å¯å
容çå表ï¼æ¯å¦ç±»ä»æ¥å¤´æ¡çæ°é»å表ãç±»æ·å®ççµåå表ï¼éè¦éè¿æ©å±æ槽å®ç°ã |
|---|
| | | |
|---|
| | | ä¸æåææ ·ä¾ç»åºã |
|---|
| | | |
|---|
| | | uni-listä¸å
å«ä¸æå·æ°åä¸æ翻页ãä¸æ翻页å¦è§ç»ä»¶ï¼[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29) |
|---|
| | | |
|---|
| | | |
|---|
| | | ### å®è£
æ¹å¼ |
|---|
| | | |
|---|
| | | æ¬ç»ä»¶ç¬¦å[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)è§èï¼`HBuilderX 2.5.5`èµ·ï¼åªéå°æ¬ç»ä»¶å¯¼å
¥é¡¹ç®ï¼å¨é¡µé¢`template`ä¸å³å¯ç´æ¥ä½¿ç¨ï¼æ éå¨é¡µé¢ä¸`import`å注å`components`ã |
|---|
| | | |
|---|
| | | å¦ééè¿`npm`æ¹å¼ä½¿ç¨`uni-ui`ç»ä»¶ï¼å¦è§ææ¡£ï¼[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) |
|---|
| | | |
|---|
| | | > **注æäºé¡¹** |
|---|
| | | > 为äºé¿å
é误使ç¨ï¼ç»å¤§å®¶å¸¦æ¥ä¸å¥½çå¼åä½éªï¼è¯·å¨ä½¿ç¨ç»ä»¶åä»ç»é
读ä¸é¢ç注æäºé¡¹ï¼å¯ä»¥å¸®ä½ é¿å
ä¸äºé误ã |
|---|
| | | > - ç»ä»¶éè¦ä¾èµ `sass` æ件 ï¼è¯·èªè¡æå¨å®è£
|
|---|
| | | > - ç»ä»¶å
é¨ä¾èµ `'uni-icons'` ã`uni-badge` ç»ä»¶ |
|---|
| | | > - `uni-list` å `uni-list-item` éè¦é
å¥ä½¿ç¨ï¼æä¸æ¯æåç¬ä½¿ç¨ `uni-list-item` |
|---|
| | | > - åªæå¼å¯ç¹å»åé¦åï¼ä¼æç¹å»éä¸ææ |
|---|
| | | > - 使ç¨æ槽æ¶ï¼å¯ä»¥å®å
¨èªå®ä¹å
容 |
|---|
| | | > - note ãrightText å±æ§ææ¶æ²¡åéå¶ï¼ä¸æ¯ææå溢åºéèï¼ä½¿ç¨æ¶åºè¯¥æ§å¶é¿åº¦æ¾ç¤ºæéè¿é»è®¤æ槽èªè¡æ©å± |
|---|
| | | > - æ¯ä»å®å°ç¨åºå¹³å°éè¦å¨æ¯ä»å®å°ç¨åºå¼åè
å·¥å
·éå¼å¯ component2 ç¼è¯æ¨¡å¼ï¼å¼å¯æ¹å¼ï¼ 详æ
--> 项ç®é
ç½® --> å¯ç¨ component2 ç¼è¯ |
|---|
| | | > - å¦æéè¦ä¿®æ¹ `switch`ã`badge` æ ·å¼ï¼è¯·ä½¿ç¨æ槽èªå®ä¹ |
|---|
| | | > - å¨ `HBuilderX` ä½çæ¬ä¸ï¼å¯è½ä¼åºç°ç»ä»¶æ¾ç¤º `undefined` çé®é¢ï¼è¯·å级ææ°ç `HBuilderX` æè
`cli` |
|---|
| | | > - å¦ä½¿ç¨è¿ç¨ä¸æä»»ä½é®é¢ï¼æè
æ¨å¯¹uni-uiæä¸äºå¥½ç建议ï¼æ¬¢è¿å å
¥ uni-ui 交æµç¾¤ï¼871950839 |
|---|
| | | |
|---|
| | | |
|---|
| | | ### åºæ¬ç¨æ³ |
|---|
| | | |
|---|
| | | - 设置 `title` å±æ§ï¼å¯ä»¥æ¾ç¤ºå表æ é¢ |
|---|
| | | - 设置 `disabled` å±æ§ï¼å¯ä»¥ç¦ç¨å½å项 |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item title="å表æå" ></uni-list-item> |
|---|
| | | <uni-list-item :disabled="true" title="å表ç¦ç¨ç¶æ" ></uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### å¤è¡å
容æ¾ç¤º |
|---|
| | | |
|---|
| | | - 设置 `note` å±æ§ ï¼å¯ä»¥å¨ç¬¬äºè¡æ¾ç¤ºæè¿°ææ¬ä¿¡æ¯ |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item title="å表æå" note="å表æè¿°ä¿¡æ¯"></uni-list-item> |
|---|
| | | <uni-list-item :disabled="true" title="å表æå" note="å表ç¦ç¨ç¶æ"></uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### å³ä¾§æ¾ç¤ºè§æ ãswitch |
|---|
| | | |
|---|
| | | - 设置 `show-badge` å±æ§ ï¼å¯ä»¥æ¾ç¤ºè§æ å
容 |
|---|
| | | - 设置 `show-switch` å±æ§ï¼å¯ä»¥æ¾ç¤º switch å¼å
³ |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item title="å表å³ä¾§æ¾ç¤ºè§æ " :show-badge="true" badge-text="12" ></uni-list-item> |
|---|
| | | <uni-list-item title="å表å³ä¾§æ¾ç¤º switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 左侧æ¾ç¤ºç¥ç¼©å¾ãå¾æ |
|---|
| | | |
|---|
| | | - 设置 `thumb` å±æ§ ï¼å¯ä»¥å¨å表左侧æ¾ç¤ºç¥ç¼©å¾ |
|---|
| | | - 设置 `show-extra-icon` å±æ§ï¼å¹¶æå® `extra-icon` å¯ä»¥å¨å·¦ä¾§æ¾ç¤ºå¾æ |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item title="å表左侧带ç¥ç¼©å¾" note="å表æè¿°ä¿¡æ¯" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" |
|---|
| | | thumb-size="lg" rightText="å³ä¾§æå"></uni-list-item> |
|---|
| | | <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="å表左侧带æ©å±å¾æ " ></uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### å¼å¯ç¹å»åé¦åå³ä¾§ç®å¤´ |
|---|
| | | - 设置 `clickable` 为 `true` ï¼å表示è¿æ¯ä¸ä¸ªå¯ç¹å»çå表ï¼ä¼é»è®¤ç»ä¸ä¸ªç¹å»ææï¼å¹¶å¯ä»¥çå¬ `click` äºä»¶ |
|---|
| | | - 设置 `link` å±æ§ï¼ä¼èªå¨å¼å¯ç¹å»åé¦ï¼å¹¶ç»å表å³ä¾§æ·»å ä¸ä¸ªç®å¤´ |
|---|
| | | - 设置 `to` å±æ§ï¼å¯ä»¥è·³è½¬é¡µé¢ï¼`link` çå¼è¡¨ç¤ºè·³è½¬æ¹å¼ï¼å¦æä¸æå®ï¼é»è®¤ä¸º `navigateTo` |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item title="å¼å¯ç¹å»åé¦" clickable @click="onClick" ></uni-list-item> |
|---|
| | | <uni-list-item title="é»è®¤ navigateTo æ¹å¼è·³è½¬é¡µé¢" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> |
|---|
| | | <uni-list-item title="reLaunch æ¹å¼è·³è½¬é¡µé¢" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | |
|---|
| | | ### è天åè¡¨ç¤ºä¾ |
|---|
| | | - 设置 `clickable` 为 `true` ï¼å表示è¿æ¯ä¸ä¸ªå¯ç¹å»çå表ï¼ä¼é»è®¤ç»ä¸ä¸ªç¹å»ææï¼å¹¶å¯ä»¥çå¬ `click` äºä»¶ |
|---|
| | | - 设置 `link` å±æ§ï¼ä¼èªå¨å¼å¯ç¹å»åé¦ï¼`link` çå¼è¡¨ç¤ºè·³è½¬æ¹å¼ï¼å¦æä¸æå®ï¼é»è®¤ä¸º `navigateTo` |
|---|
| | | - 设置 `to` å±æ§ï¼å¯ä»¥è·³è½¬é¡µé¢ |
|---|
| | | - `time` å±æ§ï¼é常ä¼è®¾ç½®ææ¶é´æ¾ç¤ºï¼ä½æ¯è¿ä¸ªå±æ§ä¸ä»
ä»
å¯ä»¥è®¾ç½®æ¶é´ï¼ä½ å¯ä»¥ä¼ å
¥ä»»ä½ææ¬ï¼æ³¨æææ¬é¿åº¦å¯è½ä¼å½±åæ¾ç¤º |
|---|
| | | - `avatar` å `avatarList` å±æ§åæ¶åªä¼æä¸ä¸ªçæï¼åæ¶è®¾ç½®çè¯ï¼`avatarList` å±æ§çé¿åº¦å¤§äº1 ï¼`avatar` å±æ§å°å¤±æ |
|---|
| | | - å¯ä»¥éè¿é»è®¤æ槽èªå®ä¹å表å³ä¾§å
容 |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | |
|---|
| | | <uni-list> |
|---|
| | | <uni-list :border="true"> |
|---|
| | | <!-- æ¾ç¤ºå形头å --> |
|---|
| | | <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="æ¨æ¶å°ä¸æ¡æ°çæ¶æ¯" time="2020-02-02 20:20" ></uni-list-chat> |
|---|
| | | <!-- å³ä¾§å¸¦è§æ --> |
|---|
| | | <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="æ¨æ¶å°ä¸æ¡æ°çæ¶æ¯" time="2020-02-02 20:20" badge-text="12" :badge-style="{backgroundColor:'#FF80AB'}"></uni-list-chat> |
|---|
| | | <!-- 头åæ¾ç¤ºåç¹ --> |
|---|
| | | <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="æ¨æ¶å°ä¸æ¡æ°çæ¶æ¯" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> |
|---|
| | | <!-- 头åæ¾ç¤ºè§æ --> |
|---|
| | | <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="æ¨æ¶å°ä¸æ¡æ°çæ¶æ¯" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> |
|---|
| | | <!-- æ¾ç¤ºå¤å¤´å --> |
|---|
| | | <uni-list-chat title="uni-app" :avatar-list="avatarList" note="æ¨æ¶å°ä¸æ¡æ°çæ¶æ¯" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> |
|---|
| | | <!-- èªå®ä¹å³ä¾§å
容 --> |
|---|
| | | <uni-list-chat title="uni-app" :avatar-list="avatarList" note="æ¨æ¶å°ä¸æ¡æ°çæ¶æ¯" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"> |
|---|
| | | <view class="chat-custom-right"> |
|---|
| | | <text class="chat-custom-text">åå</text> |
|---|
| | | <!-- éè¦ä½¿ç¨ uni-icons 请èªè¡å¼å
¥ --> |
|---|
| | | <uni-icons type="star-filled" color="#999" size="18"></uni-icons> |
|---|
| | | </view> |
|---|
| | | </uni-list-chat> |
|---|
| | | </uni-list> |
|---|
| | | </uni-list> |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ```javascript |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: {}, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | avatarList: [{ |
|---|
| | | url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' |
|---|
| | | }, { |
|---|
| | | url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' |
|---|
| | | }, { |
|---|
| | | url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | |
|---|
| | | ```css |
|---|
| | | |
|---|
| | | .chat-custom-right { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: flex-end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .chat-custom-text { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## API |
|---|
| | | |
|---|
| | | ### List Props |
|---|
| | | |
|---|
| | | å±æ§å |ç±»å |é»è®¤å¼ | 说æ |
|---|
| | | :-: |:-: |:-: | :-: |
|---|
| | | border |Boolean |true | æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | |
|---|
| | | |
|---|
| | | ### ListItem Props |
|---|
| | | |
|---|
| | | å±æ§å |ç±»å |é»è®¤å¼ | 说æ |
|---|
| | | :-: |:-: |:-: | :-: |
|---|
| | | title |String |- | æ é¢ |
|---|
| | | note |String |- | æè¿° |
|---|
| | | ellipsis |Number |0 | title æ¯å¦æº¢åºéèï¼å¯éå¼ï¼0:é»è®¤; 1:æ¾ç¤ºä¸è¡; 2:æ¾ç¤ºä¸¤è¡;ãnvue æä¸æ¯æã |
|---|
| | | thumb |String |- | 左侧缩ç¥å¾ï¼è¥thumbæå¼ï¼åä¸ä¼æ¾ç¤ºæ©å±å¾æ |
|---|
| | | thumbSize |String |medium | ç¥ç¼©å¾å°ºå¯¸ï¼å¯éå¼ï¼lg:大å¾; medium:ä¸è¬; sm:å°å¾; |
|---|
| | | showBadge |Boolean |false | æ¯å¦æ¾ç¤ºæ°åè§æ |
|---|
| | | badgeText |String |- | æ°åè§æ å
容 |
|---|
| | | badgeType |String |- | æ°åè§æ ç±»åï¼åè[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) |
|---|
| | | badgeStyle |Object |- | æ°åè§æ æ ·å¼ï¼ä½¿ç¨uni-badgeçcustom-styleåæ° |
|---|
| | | rightText |String |- | å³ä¾§æåå
容 |
|---|
| | | disabled |Boolean |false | æ¯å¦ç¦ç¨ |
|---|
| | | showArrow |Boolean |true | æ¯å¦æ¾ç¤ºç®å¤´å¾æ |
|---|
| | | link |String |navigateTo | æ°é¡µé¢è·³è½¬æ¹å¼ï¼å¯éå¼è§ä¸è¡¨ |
|---|
| | | to |String |- | æ°é¡µé¢è·³è½¬å°åï¼å¦å¡«åæ¤å±æ§ï¼click ä¼è¿å页é¢æ¯å¦è·³è½¬æå |
|---|
| | | clickable |Boolean |false | æ¯å¦å¼å¯ç¹å»åé¦ |
|---|
| | | showSwitch |Boolean |false | æ¯å¦æ¾ç¤ºSwitch |
|---|
| | | switchChecked |Boolean |false | Switchæ¯å¦è¢«éä¸ |
|---|
| | | showExtraIcon |Boolean |false | 左侧æ¯å¦æ¾ç¤ºæ©å±å¾æ |
|---|
| | | extraIcon |Object |- | æ©å±å¾æ åæ°ï¼æ ¼å¼ä¸º ``{color: '#4cd964',size: '22',type: 'spinner'}``ï¼åè [uni-icons](https://ext.dcloud.net.cn/plugin?id=28) |
|---|
| | | direction | String |row | æçæ¹åï¼å¯éå¼ï¼row:æ°´å¹³æå; column:åç´æå; 3个æ槽æ¯æ°´å¹³æè¿æ¯åç´æï¼ä¹åæ¤å±æ§æ§å¶ |
|---|
| | | |
|---|
| | | |
|---|
| | | #### Link Options |
|---|
| | | |
|---|
| | | å±æ§å | 说æ |
|---|
| | | :-: | :-: |
|---|
| | | navigateTo | å uni.navigateTo() |
|---|
| | | redirectTo | å uni.reLaunch() |
|---|
| | | reLaunch | å uni.reLaunch() |
|---|
| | | switchTab | å uni.switchTab() |
|---|
| | | |
|---|
| | | ### ListItem Events |
|---|
| | | |
|---|
| | | äºä»¶ç§°å |说æ |è¿ååæ° |
|---|
| | | :-: |:-: |:-: |
|---|
| | | click |ç¹å» uniListItem 触åäºä»¶ï¼éå¼å¯ç¹å»åé¦ |- |
|---|
| | | switchChange |ç¹å»åæ¢ Switch æ¶è§¦åï¼éæ¾ç¤º switch |e={value:checked} |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | ### ListItem Slots |
|---|
| | | |
|---|
| | | å称 | 说æ |
|---|
| | | :-: | :-: |
|---|
| | | header | å·¦/ä¸å
容æ槽ï¼å¯å®å
¨èªå®ä¹é»è®¤æ¾ç¤º |
|---|
| | | body | ä¸é´å
容æ槽ï¼å¯å®å
¨èªå®ä¹ä¸é´å
容 |
|---|
| | | footer | å³/ä¸å
容æ槽ï¼å¯å®å
¨èªå®ä¹å³ä¾§å
容 |
|---|
| | | |
|---|
| | | |
|---|
| | | > **éè¿æ槽æ©å±** |
|---|
| | | > éè¦æ³¨æçæ¯å½ä½¿ç¨æ槽æ¶ï¼å
ç½®æ ·å¼å°ä¼å¤±æï¼åªä¿çæçæ ·å¼ï¼æ¤æ¶çæ ·å¼éè¦å¼åè
èªå·±å®ç° |
|---|
| | | > å¦æ `uni-list-item` ç»ä»¶å
ç½®å±æ§æ ·å¼æ æ³æ»¡è¶³éæ±ï¼å¯ä»¥ä½¿ç¨æ槽æ¥èªå®ä¹uni-list-iteméçå
容ã |
|---|
| | | > uni-list-itemæä¾äº3个å¯æ©å±çæ槽ï¼`header`ã`body`ã`footer` |
|---|
| | | > - å½ `direction` å±æ§ä¸º `row` æ¶è¡¨ç¤ºæ°´å¹³æåï¼æ¤æ¶ `header` 表示å表ç左边é¨åï¼`body` 表示å表çä¸é´é¨åï¼`footer` 表示å表çå³è¾¹é¨å |
|---|
| | | > - å½ `direction` å±æ§ä¸º `column` æ¶è¡¨ç¤ºåç´æåï¼æ¤æ¶ `header` 表示å表çä¸è¾¹é¨åï¼`body` 表示å表çä¸é´é¨åï¼`footer` 表示å表çä¸è¾¹é¨å |
|---|
| | | > å¼åè
å¯ä»¥åªç¨1个æ槽ï¼ä¹å¯ä»¥3个ä¸èµ·ä½¿ç¨ãå¨æ槽ä¸å¯èªä¸»ç¼åviewæ ç¾ï¼å®ç°èªå·±æéçææã |
|---|
| | | |
|---|
| | | |
|---|
| | | **示ä¾** |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <uni-list> |
|---|
| | | <uni-list-item title="èªå®ä¹å³ä¾§æ槽" note="å表æè¿°ä¿¡æ¯" link> |
|---|
| | | <template slot="header"> |
|---|
| | | <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | <uni-list-item> |
|---|
| | | <!-- èªå®ä¹ header --> |
|---|
| | | <view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view> |
|---|
| | | <!-- èªå®ä¹ body --> |
|---|
| | | <text slot="body" class="slot-box slot-text">èªå®ä¹æ槽</text> |
|---|
| | | <!-- èªå®ä¹ footer--> |
|---|
| | | <template slot="footer"> |
|---|
| | | <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> |
|---|
| | | </template> |
|---|
| | | </uni-list-item> |
|---|
| | | </uni-list> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | ### ListItemChat Props |
|---|
| | | |
|---|
| | | å±æ§å |ç±»å |é»è®¤å¼ | 说æ |
|---|
| | | :-: |:-: |:-: | :-: |
|---|
| | | title |String |- | æ é¢ |
|---|
| | | note |String |- | æè¿° |
|---|
| | | clickable |Boolean |false | æ¯å¦å¼å¯ç¹å»åé¦ |
|---|
| | | badgeText |String |- | æ°åè§æ å
容ï¼è®¾ç½®ä¸º `dot` å°æ¾ç¤ºåç¹ |
|---|
| | | badgePositon |String |right | è§æ ä½ç½® |
|---|
| | | link |String |navigateTo | æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ï¼å¯éå¼è§ä¸è¡¨ |
|---|
| | | clickable |Boolean |false | æ¯å¦å¼å¯ç¹å»åé¦ |
|---|
| | | to |String |- | 跳转页é¢å°åï¼å¦å¡«åæ¤å±æ§ï¼click ä¼è¿å页é¢æ¯å¦è·³è½¬æå |
|---|
| | | time |String |- | å³ä¾§æ¶é´æ¾ç¤º |
|---|
| | | avatarCircle |Boolean |false | æ¯å¦æ¾ç¤ºå形头å |
|---|
| | | avatar |String |- | 头åå°åï¼avatarCircle ä¸å¡«æ¶çæ |
|---|
| | | avatarList |Array |- | 头åç»ï¼æ ¼å¼ä¸º [{url:''}] |
|---|
| | | |
|---|
| | | #### Link Options |
|---|
| | | |
|---|
| | | å±æ§å | 说æ |
|---|
| | | :-: | :-: |
|---|
| | | navigateTo | å uni.navigateTo() |
|---|
| | | redirectTo | å uni.reLaunch() |
|---|
| | | reLaunch | å uni.reLaunch() |
|---|
| | | switchTab | å uni.switchTab() |
|---|
| | | |
|---|
| | | ### ListItemChat Slots |
|---|
| | | |
|---|
| | | å称 | 说æ |
|---|
| | | :- | :- |
|---|
| | | default | èªå®ä¹å表å³ä¾§å
容ï¼å
æ¬æ¶é´åè§æ æ¾ç¤ºï¼ |
|---|
| | | |
|---|
| | | ### ListItemChat Events |
|---|
| | | äºä»¶ç§°å | 说æ | è¿ååæ° |
|---|
| | | :-: | :-: | :-: |
|---|
| | | @click | ç¹å» uniListChat 触åäºä»¶ | {data:{}} ï¼å¦æ to å±æ§ï¼ä¼è¿å页é¢è·³è½¬ä¿¡æ¯ |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## åºäºuni-listæ©å±ç页é¢æ¨¡æ¿ |
|---|
| | | |
|---|
| | | éè¿æ©å±æ槽ï¼å¯å®ç°å¤ç§å¸¸è§æ ·å¼çå表 |
|---|
| | | |
|---|
| | | **æ°é»å表类** |
|---|
| | | |
|---|
| | | 1. äºç«¯ä¸ä½æ··åå¸å±ï¼[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546) |
|---|
| | | 2. äºç«¯ä¸ä½åç´å¸å±ï¼å¤§å¾æ¨¡å¼ï¼[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583) |
|---|
| | | 3. äºç«¯ä¸ä½åç´å¸å±ï¼å¤è¡å¾ææ··æï¼[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584) |
|---|
| | | 4. äºç«¯ä¸ä½åç´å¸å±ï¼å¤å¾æ¨¡å¼ï¼[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585) |
|---|
| | | 5. äºç«¯ä¸ä½æ°´å¹³å¸å±ï¼å·¦å¾å³æï¼[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586) |
|---|
| | | 6. äºç«¯ä¸ä½æ°´å¹³å¸å±ï¼å·¦æå³å¾ï¼[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587) |
|---|
| | | 7. äºç«¯ä¸ä½åç´å¸å±ï¼æ å¾æ¨¡å¼ï¼ä¸»æ é¢+å¯æ é¢ï¼[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588) |
|---|
| | | |
|---|
| | | **ååå表类** |
|---|
| | | |
|---|
| | | 1. äºç«¯ä¸ä½å表/å®«æ ¼è§å¾äºåï¼[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651) |
|---|
| | | 2. äºç«¯ä¸ä½å表ï¼å®«æ ¼æ¨¡å¼ï¼ï¼[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671) |
|---|
| | | 3. äºç«¯ä¸ä½å表ï¼å表模å¼ï¼ï¼[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672) |
|---|
| | | |
|---|
| | | ## ç»ä»¶ç¤ºä¾ |
|---|
| | | |
|---|
| | | ç¹å»æ¥çï¼[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 1.3.3ï¼2022-01-20ï¼ |
|---|
| | | - æ°å¢ showTextå±æ§ ï¼æ¯å¦æ¾ç¤ºææ¬ |
|---|
| | | ## 1.3.2ï¼2022-01-19ï¼ |
|---|
| | | - ä¿®å¤ nvue å¹³å°ä¸ä¸æ¾ç¤ºææ¬çbug |
|---|
| | | ## 1.3.1ï¼2022-01-19ï¼ |
|---|
| | | - ä¿®å¤ å¾®ä¿¡å°ç¨åºå¹³å°æ ·å¼éæ©å¨æ¥è¦åçé®é¢ |
|---|
| | | ## 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-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more) |
|---|
| | | ## 1.2.1ï¼2021-08-24ï¼ |
|---|
| | | - æ°å¢ æ¯æå½é
å |
|---|
| | | ## 1.2.0ï¼2021-07-30ï¼ |
|---|
| | | - ç»ä»¶å
¼å®¹ vue3ï¼å¦ä½å建vue3项ç®ï¼è¯¦è§ [uni-app 项ç®æ¯æ vue3 ä»ç»](https://ask.dcloud.net.cn/article/37834) |
|---|
| | | ## 1.1.8ï¼2021-05-12ï¼ |
|---|
| | | - æ°å¢ ç»ä»¶ç¤ºä¾å°å |
|---|
| | | ## 1.1.7ï¼2021-03-30ï¼ |
|---|
| | | - ä¿®å¤ uni-load-more å¨é¦é¡µä½¿ç¨æ¶ï¼h5 å¹³å°æ¥ 'uni is not defined' ç bug |
|---|
| | | ## 1.1.6ï¼2021-02-05ï¼ |
|---|
| | | - è°æ´ä¸ºuni_modulesç®å½è§è |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-load-more.contentdown": "Pull up to show more", |
|---|
| | | "uni-load-more.contentrefresh": "loading...", |
|---|
| | | "uni-load-more.contentnomore": "No more data" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-load-more.contentdown": "ä¸ææ¾ç¤ºæ´å¤", |
|---|
| | | "uni-load-more.contentrefresh": "æ£å¨å è½½...", |
|---|
| | | "uni-load-more.contentnomore": "没ææ´å¤æ°æ®äº" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "uni-load-more.contentdown": "ä¸æ顯示æ´å¤", |
|---|
| | | "uni-load-more.contentrefresh": "æ£å¨å è¼...", |
|---|
| | | "uni-load-more.contentnomore": "æ²ææ´å¤æ¸æäº" |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="uni-load-more" @click="onClick"> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon" |
|---|
| | | :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true" |
|---|
| | | class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef H5 --> |
|---|
| | | <svg width="24" height="24" viewBox="25 25 50 50" |
|---|
| | | v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" |
|---|
| | | :style="{width:iconSize+'px',height:iconSize+'px'}" |
|---|
| | | class="uni-load-more__img uni-load-more__img--android-H5"> |
|---|
| | | <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle> |
|---|
| | | </svg> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE || H5 --> |
|---|
| | | <view |
|---|
| | | v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" |
|---|
| | | :style="{width:iconSize+'px',height:iconSize+'px'}" |
|---|
| | | class="uni-load-more__img uni-load-more__img--android-MP"> |
|---|
| | | <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> |
|---|
| | | <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> |
|---|
| | | <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <view v-else-if="!webviewHide && status === 'loading' && showIcon" |
|---|
| | | :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5"> |
|---|
| | | <image :src="imgBase64" mode="widthFix"></image> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <text v-if="showText" class="uni-load-more__text" |
|---|
| | | :style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let platform |
|---|
| | | setTimeout(() => { |
|---|
| | | platform = uni.getSystemInfoSync().platform |
|---|
| | | }, 16) |
|---|
| | | |
|---|
| | | import { |
|---|
| | | initVueI18n |
|---|
| | | } from '@dcloudio/uni-i18n' |
|---|
| | | import messages from './i18n/index.js' |
|---|
| | | const { |
|---|
| | | t |
|---|
| | | } = initVueI18n(messages) |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * LoadMore å è½½æ´å¤ |
|---|
| | | * @description ç¨äºå表ä¸ï¼åæ»å¨å 载使ç¨ï¼å±ç¤º loading çåç§ç¶æ |
|---|
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=29 |
|---|
| | | * @property {String} status = [more|loading|noMore] loading çç¶æ |
|---|
| | | * @value more loadingå |
|---|
| | | * @value loading loadingä¸ |
|---|
| | | * @value noMore 没ææ´å¤äº |
|---|
| | | * @property {Number} iconSize æå®å¾æ å¤§å° |
|---|
| | | * @property {Boolean} iconSize = [true|false] æ¯å¦æ¾ç¤º loading å¾æ |
|---|
| | | * @property {String} iconType = [snow|circle|auto] æå®å¾æ æ ·å¼ |
|---|
| | | * @value snow ioséªè±å è½½æ ·å¼ |
|---|
| | | * @value circle å®åå¤éå è½½æ ·å¼ |
|---|
| | | * @value auto æ ¹æ®å¹³å°èªå¨éæ©å è½½æ ·å¼ |
|---|
| | | * @property {String} color å¾æ åæåé¢è² |
|---|
| | | * @property {Object} contentText åç¶ææå说æï¼å¼ä¸ºï¼{contentdown: "ä¸ææ¾ç¤ºæ´å¤",contentrefresh: "æ£å¨å è½½...",contentnomore: "没ææ´å¤æ°æ®äº"} |
|---|
| | | * @event {Function} clickLoadMore ç¹å»å è½½æ´å¤æ¶è§¦å |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'UniLoadMore', |
|---|
| | | emits: ['clickLoadMore'], |
|---|
| | | props: { |
|---|
| | | status: { |
|---|
| | | // ä¸æçç¶æï¼more-loadingåï¼loading-loadingä¸ï¼noMore-没ææ´å¤äº |
|---|
| | | type: String, |
|---|
| | | default: 'more' |
|---|
| | | }, |
|---|
| | | showIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | iconType: { |
|---|
| | | type: String, |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | iconSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 24 |
|---|
| | | }, |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: '#777777' |
|---|
| | | }, |
|---|
| | | contentText: { |
|---|
| | | type: Object, |
|---|
| | | default () { |
|---|
| | | return { |
|---|
| | | contentdown: '', |
|---|
| | | contentrefresh: '', |
|---|
| | | contentnomore: '' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | showText: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | webviewHide: false, |
|---|
| | | platform: platform, |
|---|
| | | imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZVHb98LM+F5bHL8khA1iSeiyQBCRM+YGqKUnnJTDLGI0BGZlKDIU2MMglUiDApEZvSsZnQtBRJtKwQNKQMFYeRDR10WOLd8ljYXdh+v8v5fR3Od+797t1dnOnO/Ofce77z+J//+b/P+ZqtXbs2sJ9MJhNUV1cHJ06cCJo3bx7EPc2aNcvpy7pWrVoF+/fvDyoqKoI2bdoE9fX1F7TjN8a+EXBn/fkfvw942Tf+wYMHg9mzZwfjxo0LDhw4EPa1x2MbFw/fOGfPng1qa2tzcCkILsLDydq2bRsunpOTMM7TD/W/tZDZhPdeKD+yGxHhdu3aBV27dg3OnDlzMVANMheLAO3btw8KCwuDmpoaX5OxbgUIMEq7K8IcPnw4KCsrC/r37x8cP378/4cAXAB3vqSkJMuiDhTkw+XcuXNhOWbMmKBly5YhUT8xArhyFvP0BfwRsAuwxJZJsm/nzp2DTp06he/OU+cZ64K6o0ePBkOHDg2GDx8e6gEbJ5Q/NHNuAJQ1hgBeHUDlR7nVTkY8rQAvAi4z34vR/mPs1FoRsaCgIJThI0eOBC1atEiFGGV+5MiRoS45efJkqFjJFXV1dQuA012m2WcwTw98fy6CqBdsaiIO4CScrGPHjvk4odhavPquRtFWXEC25VgkREKOCh/qDSq+vn37htzD/mZTOmOc5U7zKzBPEedygWshcDyWvs30igAbU+6oyMgJBCFhwQE0fccxN60Ay9iebbjoDh06hMowjQxT4fXq1SskArmHZpkArvixp/kWzHdMeArExSJEaiXIjjRjRJ4DaAGWpibLzXN3Fm1vA5teBgh3j1Rv3bp1YgKwPdmf2p9zcyNYYgPKMfY0T5f5nNYdw158nJ8QawW4CLKwiOBSEgO/hok2eBydR+3dYH+PLxA5J8Vv0KBBwenTp0P2JWAx6+yFEBfs8lMY+y0SWMBNI9E4ThKi58VKTg3FQZS1RQF1cz27eC0QHMu+3E0SkUowjhVt5VdaWhp07949ZHv2Qd1EjDXM2cla1M0nl3GxAs3J9yREzyTdFVKVFOaE9qRA8GM0WebRuo9JGZKA7Mv2SeS/Z8+eoQ9BArMfFrLGo6jvxbhHbJZnKX2Rzz1O7QhJJ9Cs2ZMaWIyq/zhdeqPNfIoHd58clIQD+JSXl4dKlyIAuBdVXZwFVWKspSSoxE++h8x4k3uCnEhE4I5KwRiFWGOU0QWKiCYLbdoRMRKAu2kQ9vkfLU6dOhX06NEjlH+yMRZSinnuyWnYosVcji8CEA/6Cg2JF+IIUBqnGKUTCNwtwBN4f89RiK1R96DEgO2o0NDmtEdvVFdVVYV+P3UAPUEs6GFwV3PHmXkD4vh74iDFJysVI/MlaQhwKeBNTLYX5VuA8T4/gZxA4MRGFxDB6R7OmYPfyykGRJbyie+XnGYnQIC/coH9+vULiYrxrkL9ZA9+0ykaHIfEpM7ge8TiJ2CsHYwyMfafAF1yCGBHYIbCVDjDjKt7BeB51D+LgQa6OkG7IDYEEtvQ7lnXLKLtLdLuJBpE4gPUXcW2+PkZwOex+4cGDhwYDBkyRL7/HFcEwUGPo/8uWRUpYnfxGHco8HkewLHLyYmAawAPuIFZxhOpDfJQ8gbUv41yORAptMWBNr6oqMhWird5+u+iHmBb2nhjDV7HWBNQTgK8y11l5NetWzc5ULscAtSj7nbNI0skhWeUZCc0W4nyH/jO4Vz0u1IeYhbk4AiwM6tjxIWByHsoZ9qcIBPJd/y+DwPfBESOmCa/QF3WiZHucLlEDpNxcNhmheEOPgdQNx6/VZFQzFZ5TN08AHXQt2Ii3EdyFuUsPtTcGPhW5iMiCNELvz+Gdn9huG4HUJaW/w3g0wxV0XaG7arG2WeKiUWYM4Y7GO5ezshTARbbWGw/DvXkpp/ivVvE0JVoMxN4rpGzJMhE5Pl+xlATsDIqikP9F9D2z3h9nOksEUFhK+qO4rcPkoalMQ/HqJLIyb3F3JdjrCcw1yZ8joyJLR5gCo54etlag7qIoeNh1N1BRYj3DTFJ0elotxPlVzkGuYAmL0VSJVGAJA41c4Z6A3BzTLfn0HYwYKEI6CUAMzZEWvLsIcQOo1AmmyyM72nHJCfYsogflGV6jEk9vyQZXSuq6w4c16NsGcGZbwOPr+H1RkOk2LEzjNepxQkihHSCQ4ynAYNRx2zMKV92CQMWqj8J0BRE8EShxRFN6YrfCRhC0x3r/Zm4IbQCcmJoV0kMamllccR6FjHqUC5F2R/wS2dcymOlfAKOS4KmzQb5cpNC2MC7JhVn5wjXoJ44rYhLh8n0eXOCorJxa7POjbSlCGVczr34/RsAmrcvo9s+wGp3tzVhntxiXiJ4nvEYb4FJkf0O8HocAePmLvCxnL0AORraVekJk6TYjDabRVXfRE2lCN1h6ZQRN1+InUbsCpKwoBZHh0dODN9JBCUffItXxEavTQkUtnfTVAplCWL3JISz29h4NjotnuSsQKJCk8dF+kJR6RARjrqFVmfPnj3ZbK8cIJ0msd6jgHPGtfVTQ8VLmlvh4mct9sobRmPic0DyDQQnx/NlfYUgyz59+oScsH379pAwXABD32nTpoUHIToESeI5mnbE/UqDdyLcafEBf2MCqgC7NwxIbMREJQ0g4D4sfJwnD+AmRrII05cfMWJE+L1169bQr+fip06dGp4oJ83lmYd5wj/EmMa4TaHivo4EeCguYZBnkB5g2aWA69OIEnUHOaGysjIYMGBAMGnSpODYsWPZwCpFmm4lNq+4gSLQA7jcX8DwtjEyRC8wjabnXEx9kfWnTJkSJkAo90xpJVV+FmcVNeYAF5zWngS4C4O91MBxmAv8blLEpbjI5sz9MTdAhcgkCT1RO8mZkAjfiYpTEvStAS53Uw1vAiUGgZ3GpuQEYvoiBqlIan7kSDHnTwJQFNiPu0+5VxCVYhcZIjNrdXUDdp+Eq5AZ3Gkg8QAyVZRZIk4Tl4QAbF9cXJxNYZMAtAokgs4BrNxEpCtteXg7DDTMDKYNSuQdKsnJBek7HxewvxaosWxLYXtw+cJp18217wql4aKCfBNoEu0O5VU+PhctJ0YeXD4C6JQpyrlpSLTojpGGGN5YwNziChdIZLk4lvLcFJ9jMX3QdiImY9bmGQU+TRUL5CHITTRlgF8D9ouD1MfmLoEPl5xokIumZ2cfgMpHt47IW9N64Hsh7wQYYjyIugWuF5fCqYncXRd5vPMWyizzvhi/32+nvG0dZc9vR6fZOu0md5e+uC408FvKSIOZwXlGvxPv95izA2Vtvg1xKFWARI+vMX66HUhpQQb643uW1bSjuTWyw2SBvDrBvjFic1eGGlz5esq3ko9uSIlBRqPuFcCv8F4WIcN12nVaBd0SaYwI6PDDImR11JkqgHcPmQssjxIn6bUshygDFJUTxPMpHk+jfjPgupgdnYV2R/g7xSjtpah8RJBewhwf0gGK6XI92u4wXFEU40afJ4DN4h5LcAd+40HI3JgJecuT0c062W0i2hQJUTcxan3/CMW1PF2K6bbA+Daz4xRs1D3Br1Cm0OihKCqizW78/nXAF/G5TXrEcVzaNMH6CyMswqsAHqDyDLEyou8lwOXnKF8DjI6KjV3KzMBiXkDH8ij/H214J5A596ekrZ3F0zXlWeL7+P5eUrNo3/QwC15uxthuzidy7DzKRwEDaAViiDgKbTbz7CJnzo0bN7pIfIiid8SuPwn25o3QCmpnyjlZkyxPP8EomCJzrGb7GJMx7tNsq4MT2xMUYaiErZOluTzKsnz3gwCeCZyVRZJfYplNEokEjwrPtxlxjeYAk+F1F74VAzPxQRNYYdtpOUvWs8J1sGhBJMNsb7igN8plJs1eSmLIhLKE4rvaCX27gOhLpLOsIzJ7qn/i+wZzcvSOZ23/du8TZjwV8zHIXoP4R3ifBxiFz1dcVpa3aPntPE+c6TmIWE9EtcMmAcPdWAhYhAXxcLOQi9L1WhD1Sc8p1d2oL7XGiRKp8F4A2i8K/nfI+y/gsTDJ/YC/8+AD5Uh04KHiGl+cIFPnBDDrPMjwRGkLXyxO4VGbfQWnDH2v0bVWE3C9QOXlepbgjEfIJQI6XDG3z5ahD9cw2pS78ipB85wyScNTvsVzlzzhL8/jRrnmVjfFJK/m3m4nj9vbgQTguT8XZTjsm672R5uJKEaQmBI/c58gyus8ZDagLpEVSJBIyHp4jn++xqPV71OgQgJYEWOtZ/haxRtKmWOBu8xdBLftWltsY84zE6WIEy/eIOWL+BaayMx+KHtL7EAkqdNDLiEXmEMUHniedtJqg9HmZtfvt26vNi0BdG3Ft3g8ZOf7PAu59TxtzivLNIekyi+wD1i8CuUiD9FXAa8C+/xS3JPmZnomyc7H+fb4/Se0bk41Fel621r4cgVxbq91V4jVqwB7HTe2M7jgB+QWHavZkDRPmZcASoZEmBx6i75bGjPcMdL4/VKGFAGWZkGzPG0XAbdL9A81G5LOmUnC9hHKJeO7dcUMjblSl12867ElFTtaGl20xvvLGPdVz/8TVuU7y0x1PG7vtNg24oz9Uo/Z412++VFWI7Fcog9tu9Lm6gvRmIPv9x1xmQAu6RDkXtbOtlGEmpgD5Nvnyc0dcv0EE6cfdi1HmhMf9wDF3k3gtRvEedhxjpgfqPb9PU9iEJHnyOUA7bQUXh6kq/D7l2iTjWv7XOD530BDr8jIrus+srXjt4MzumJMHuTsBa63YKE1+RR5lBjEikCCnWKWiHdzOgKO+nRIBAF88za/IFmJ3eMZov4CYxGBabcpGL8EYx+SeMXJeRwHNsV/h+vdxeuhEpN3ZyNY78Gm2fknJxVGhyjixPiQvVkNzT1elD9Py/aTAL64Hb9vcYmC9zfdXdT/C1LeGbg4rnBaAihDFJH12W5ulfNCNe/xTsP3bp8ikzJs5BF+5PNfAQYAPaseTdsEcaYAAAAASUVORK5CYII=' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | iconSnowWidth() { |
|---|
| | | return (Math.floor(this.iconSize / 24) || 1) * 2 |
|---|
| | | }, |
|---|
| | | contentdownText() { |
|---|
| | | return this.contentText.contentdown || t("uni-load-more.contentdown") |
|---|
| | | }, |
|---|
| | | contentrefreshText() { |
|---|
| | | return this.contentText.contentrefresh || t("uni-load-more.contentrefresh") |
|---|
| | | }, |
|---|
| | | contentnomoreText() { |
|---|
| | | return this.contentText.contentnomore || t("uni-load-more.contentnomore") |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // #ifdef APP-PLUS |
|---|
| | | var pages = getCurrentPages(); |
|---|
| | | var page = pages[pages.length - 1]; |
|---|
| | | var currentWebview = page.$getAppWebview(); |
|---|
| | | currentWebview.addEventListener('hide', () => { |
|---|
| | | this.webviewHide = true |
|---|
| | | }) |
|---|
| | | currentWebview.addEventListener('show', () => { |
|---|
| | | this.webviewHide = false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onClick() { |
|---|
| | | this.$emit('clickLoadMore', { |
|---|
| | | detail: { |
|---|
| | | status: this.status, |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | .uni-load-more { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | height: 40px; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__text { |
|---|
| | | font-size: 14px; |
|---|
| | | margin-left: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img { |
|---|
| | | width: 24px; |
|---|
| | | height: 24px; |
|---|
| | | // margin-right: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--nvue { |
|---|
| | | color: #666666; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--android, |
|---|
| | | .uni-load-more__img--ios { |
|---|
| | | width: 24px; |
|---|
| | | height: 24px; |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .uni-load-more__img--android { |
|---|
| | | animation: loading-ios 1s 0s linear infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--ios-H5 { |
|---|
| | | position: relative; |
|---|
| | | animation: loading-ios-H5 1s 0s step-end infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--ios-H5 image { |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-ios-H5 { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 8% { |
|---|
| | | transform: rotate(30deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 16% { |
|---|
| | | transform: rotate(60deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 24% { |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 32% { |
|---|
| | | transform: rotate(120deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 40% { |
|---|
| | | transform: rotate(150deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 48% { |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 56% { |
|---|
| | | transform: rotate(210deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 64% { |
|---|
| | | transform: rotate(240deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 73% { |
|---|
| | | transform: rotate(270deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 82% { |
|---|
| | | transform: rotate(300deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 91% { |
|---|
| | | transform: rotate(330deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | .uni-load-more__img--android-H5 { |
|---|
| | | animation: loading-android-H5-rotate 2s linear infinite; |
|---|
| | | transform-origin: center center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--android-H5 circle { |
|---|
| | | display: inline-block; |
|---|
| | | animation: loading-android-H5-dash 1.5s ease-in-out infinite; |
|---|
| | | stroke: currentColor; |
|---|
| | | stroke-linecap: round; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android-H5-rotate { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android-H5-dash { |
|---|
| | | 0% { |
|---|
| | | stroke-dasharray: 1, 200; |
|---|
| | | stroke-dashoffset: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 50% { |
|---|
| | | stroke-dasharray: 90, 150; |
|---|
| | | stroke-dashoffset: -40; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | stroke-dasharray: 90, 150; |
|---|
| | | stroke-dashoffset: -120; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE || H5 */ |
|---|
| | | .uni-load-more__img--android-MP { |
|---|
| | | position: relative; |
|---|
| | | width: 24px; |
|---|
| | | height: 24px; |
|---|
| | | transform: rotate(0deg); |
|---|
| | | animation: loading-ios 1s 0s ease infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--android-MP .uni-load-more__img-icon { |
|---|
| | | position: absolute; |
|---|
| | | box-sizing: border-box; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | border-radius: 50%; |
|---|
| | | border: solid 2px transparent; |
|---|
| | | border-top: solid 2px #777777; |
|---|
| | | transform-origin: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) { |
|---|
| | | animation: loading-android-MP-1 1s 0s linear infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) { |
|---|
| | | animation: loading-android-MP-2 1s 0s linear infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) { |
|---|
| | | animation: loading-android-MP-3 1s 0s linear infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android-MP-1 { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 50% { |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android-MP-2 { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 50% { |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes loading-android-MP-3 { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 50% { |
|---|
| | | transform: rotate(270deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "uni-load-more", |
|---|
| | | "displayName": "uni-load-more å è½½æ´å¤", |
|---|
| | | "version": "1.3.3", |
|---|
| | | "description": "LoadMore ç»ä»¶ï¼å¸¸ç¨å¨å表éé¢ï¼åæ»å¨å 载使ç¨ã", |
|---|
| | | "keywords": [ |
|---|
| | | "uni-ui", |
|---|
| | | "uniui", |
|---|
| | | "å è½½æ´å¤", |
|---|
| | | "load-more" |
|---|
| | | ], |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| src/uni_modules/uni-load-more/readme.md
src/uni_modules/uni-nav-bar/changelog.md
src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
src/uni_modules/uni-nav-bar/package.json
src/uni_modules/uni-nav-bar/readme.md
src/uni_modules/uni-notice-bar/changelog.md
src/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
src/uni_modules/uni-notice-bar/package.json
src/uni_modules/uni-notice-bar/readme.md
src/uni_modules/uni-number-box/changelog.md
src/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
src/uni_modules/uni-number-box/package.json
src/uni_modules/uni-number-box/readme.md
src/uni_modules/uni-pagination/changelog.md
src/uni_modules/uni-pagination/components/uni-pagination/i18n/en.json
src/uni_modules/uni-pagination/components/uni-pagination/i18n/es.json
src/uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json
src/uni_modules/uni-pagination/components/uni-pagination/i18n/index.js
src/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json
src/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json
src/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue
src/uni_modules/uni-pagination/package.json
src/uni_modules/uni-pagination/readme.md
src/uni_modules/uni-popup/changelog.md
src/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
src/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
src/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
src/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
src/uni_modules/uni-popup/components/uni-popup/i18n/en.json
src/uni_modules/uni-popup/components/uni-popup/i18n/index.js
src/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
src/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
src/uni_modules/uni-popup/components/uni-popup/keypress.js
src/uni_modules/uni-popup/components/uni-popup/popup.js
src/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
src/uni_modules/uni-popup/package.json
src/uni_modules/uni-popup/readme.md
src/uni_modules/uni-rate/changelog.md
src/uni_modules/uni-rate/components/uni-rate/uni-rate.vue
src/uni_modules/uni-rate/package.json
src/uni_modules/uni-rate/readme.md
src/uni_modules/uni-row/changelog.md
src/uni_modules/uni-row/components/uni-col/uni-col.vue
src/uni_modules/uni-row/components/uni-row/uni-row.vue
src/uni_modules/uni-row/package.json
src/uni_modules/uni-row/readme.md
src/uni_modules/uni-scss/changelog.md
src/uni_modules/uni-scss/index.scss
src/uni_modules/uni-scss/package.json
src/uni_modules/uni-scss/readme.md
src/uni_modules/uni-scss/styles/index.scss
src/uni_modules/uni-scss/styles/setting/_border.scss
src/uni_modules/uni-scss/styles/setting/_color.scss
src/uni_modules/uni-scss/styles/setting/_radius.scss
src/uni_modules/uni-scss/styles/setting/_space.scss
src/uni_modules/uni-scss/styles/setting/_styles.scss
src/uni_modules/uni-scss/styles/setting/_text.scss
src/uni_modules/uni-scss/styles/setting/_variables.scss
src/uni_modules/uni-scss/styles/tools/functions.scss
src/uni_modules/uni-scss/theme.scss
src/uni_modules/uni-scss/variables.scss
src/uni_modules/uni-search-bar/changelog.md
src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
src/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
src/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
src/uni_modules/uni-search-bar/package.json
src/uni_modules/uni-search-bar/readme.md
src/uni_modules/uni-segmented-control/changelog.md
src/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
src/uni_modules/uni-segmented-control/package.json
src/uni_modules/uni-segmented-control/readme.md
src/uni_modules/uni-steps/changelog.md
src/uni_modules/uni-steps/components/uni-steps/uni-steps.vue
src/uni_modules/uni-steps/package.json
src/uni_modules/uni-steps/readme.md
src/uni_modules/uni-swipe-action/changelog.md
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/bindingx.js
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/isPC.js
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpalipay.js
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpother.js
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/render.js
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue
src/uni_modules/uni-swipe-action/components/uni-swipe-action-item/wx.wxs
src/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue
src/uni_modules/uni-swipe-action/package.json
src/uni_modules/uni-swipe-action/readme.md
src/uni_modules/uni-swiper-dot/changelog.md
src/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
src/uni_modules/uni-swiper-dot/package.json
src/uni_modules/uni-swiper-dot/readme.md
src/uni_modules/uni-table/changelog.md
src/uni_modules/uni-table/components/uni-table/uni-table.vue
src/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
src/uni_modules/uni-table/components/uni-td/uni-td.vue
src/uni_modules/uni-table/components/uni-th/filter-dropdown.vue
src/uni_modules/uni-table/components/uni-th/uni-th.vue
src/uni_modules/uni-table/components/uni-thead/uni-thead.vue
src/uni_modules/uni-table/components/uni-tr/table-checkbox.vue
src/uni_modules/uni-table/components/uni-tr/uni-tr.vue
src/uni_modules/uni-table/i18n/en.json
src/uni_modules/uni-table/i18n/es.json
src/uni_modules/uni-table/i18n/fr.json
src/uni_modules/uni-table/i18n/index.js
src/uni_modules/uni-table/i18n/zh-Hans.json
src/uni_modules/uni-table/i18n/zh-Hant.json
src/uni_modules/uni-table/package.json
src/uni_modules/uni-table/readme.md
src/uni_modules/uni-tag/changelog.md
src/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
src/uni_modules/uni-tag/package.json
src/uni_modules/uni-tag/readme.md
src/uni_modules/uni-title/changelog.md
src/uni_modules/uni-title/components/uni-title/uni-title.vue
src/uni_modules/uni-title/package.json
src/uni_modules/uni-title/readme.md
src/uni_modules/uni-tooltip/changelog.md
src/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue
src/uni_modules/uni-tooltip/package.json
src/uni_modules/uni-tooltip/readme.md
src/uni_modules/uni-transition/changelog.md
src/uni_modules/uni-transition/components/uni-transition/createAnimation.js
src/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
src/uni_modules/uni-transition/package.json
src/uni_modules/uni-transition/readme.md
src/utils/auth.ts
src/utils/common.ts
src/utils/constant.ts
src/utils/dict.ts
src/utils/errorCode.ts
src/utils/geek.ts
src/utils/permission.ts
src/utils/request.ts
src/utils/ruoyi.js
src/utils/storage.ts
src/utils/upload.ts
tsconfig.json
vite.config.js
yarn.lock |
