From 38430ddb8612fce15a2f1c940f9bd57d4da3e70b Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期四, 16 九月 2021 11:59:39 +0800 Subject: [PATCH] add new key --- components/uni-badge/uni-badge.vue | 300 ++++++++++++++++++++++++++++++------------------------------ 1 files changed, 150 insertions(+), 150 deletions(-) diff --git a/components/uni-badge/uni-badge.vue b/components/uni-badge/uni-badge.vue index f5e0ca6..9ee0c7c 100644 --- a/components/uni-badge/uni-badge.vue +++ b/components/uni-badge/uni-badge.vue @@ -1,151 +1,151 @@ -<template> - <text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size" - :style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text> -</template> - -<script> - /** - * Badge 鏁板瓧瑙掓爣 - * @description 鏁板瓧瑙掓爣涓�鑸拰鍏跺畠鎺т欢锛堝垪琛ㄣ��9瀹牸绛夛級閰嶅悎浣跨敤锛岀敤浜庤繘琛屾暟閲忔彁绀猴紝榛樿涓哄疄蹇冪伆鑹茶儗鏅� - * @tutorial https://ext.dcloud.net.cn/plugin?id=21 - * @property {String} text 瑙掓爣鍐呭 - * @property {String} type = [default|primary|success|warning|error] 棰滆壊绫诲瀷 - * @value default 鐏拌壊 - * @value primary 钃濊壊 - * @value success 缁胯壊 - * @value warning 榛勮壊 - * @value error 绾㈣壊 - * @property {String} size = [normal|small] Badge 澶у皬 - * @value normal 涓�鑸昂瀵� - * @value small 灏忓昂瀵� - * @property {String} inverted = [true|false] 鏄惁鏃犻渶鑳屾櫙棰滆壊 - * @event {Function} click 鐐瑰嚮 Badge 瑙﹀彂浜嬩欢 - * @example <uni-badge text="1"></uni-badge> - */ - export default { - name: 'UniBadge', - props: { - type: { - type: String, - default: 'default' - }, - inverted: { - type: Boolean, - default: false - }, - text: { - type: [String, Number], - default: '' - }, - size: { - type: String, - default: 'normal' - } - }, - data() { - return { - badgeStyle: '' - }; - }, - watch: { - text() { - this.setStyle() - } - }, - mounted() { - this.setStyle() - }, - methods: { - setStyle() { - this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px` - }, - onClick() { - this.$emit('click'); - } - } - }; -</script> - -<style lang="scss" scoped> - $bage-size: 12px; - $bage-small: scale(0.8); - $bage-height: 20px; - - .uni-badge { - /* #ifndef APP-PLUS */ - display: flex; - /* #endif */ - justify-content: center; - flex-direction: row; - height: $bage-height; - line-height: $bage-height; - color: $uni-text-color; - border-radius: 100px; - background-color: $uni-bg-color-hover; - background-color: transparent; - text-align: center; - font-family: 'Helvetica Neue', Helvetica, sans-serif; - font-size: $bage-size; - padding: 0px 6px; - } - - .uni-badge--inverted { - padding: 0 5px 0 0; - color: $uni-bg-color-hover; - } - - .uni-badge--default { - color: $uni-text-color; - background-color: $uni-bg-color-hover; - } - - .uni-badge--default-inverted { - color: $uni-text-color-grey; - background-color: transparent; - } - - .uni-badge--primary { - color: $uni-text-color-inverse; - background-color: $uni-color-primary; - } - - .uni-badge--primary-inverted { - color: $uni-color-primary; - background-color: transparent; - } - - .uni-badge--success { - color: $uni-text-color-inverse; - background-color: $uni-color-success; - } - - .uni-badge--success-inverted { - color: $uni-color-success; - background-color: transparent; - } - - .uni-badge--warning { - color: $uni-text-color-inverse; - background-color: $uni-color-warning; - } - - .uni-badge--warning-inverted { - color: $uni-color-warning; - background-color: transparent; - } - - .uni-badge--error { - color: $uni-text-color-inverse; - background-color: $uni-color-error; - } - - .uni-badge--error-inverted { - color: $uni-color-error; - background-color: transparent; - } - - .uni-badge--small { - transform: $bage-small; - transform-origin: center center; - } +<template> + <text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size" + :style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text> +</template> + +<script> + /** + * Badge 鏁板瓧瑙掓爣 + * @description 鏁板瓧瑙掓爣涓�鑸拰鍏跺畠鎺т欢锛堝垪琛ㄣ��9瀹牸绛夛級閰嶅悎浣跨敤锛岀敤浜庤繘琛屾暟閲忔彁绀猴紝榛樿涓哄疄蹇冪伆鑹茶儗鏅� + * @tutorial https://ext.dcloud.net.cn/plugin?id=21 + * @property {String} text 瑙掓爣鍐呭 + * @property {String} type = [default|primary|success|warning|error] 棰滆壊绫诲瀷 + * @value default 鐏拌壊 + * @value primary 钃濊壊 + * @value success 缁胯壊 + * @value warning 榛勮壊 + * @value error 绾㈣壊 + * @property {String} size = [normal|small] Badge 澶у皬 + * @value normal 涓�鑸昂瀵� + * @value small 灏忓昂瀵� + * @property {String} inverted = [true|false] 鏄惁鏃犻渶鑳屾櫙棰滆壊 + * @event {Function} click 鐐瑰嚮 Badge 瑙﹀彂浜嬩欢 + * @example <uni-badge text="1"></uni-badge> + */ + export default { + name: 'UniBadge', + props: { + type: { + type: String, + default: 'default' + }, + inverted: { + type: Boolean, + default: false + }, + text: { + type: [String, Number], + default: '' + }, + size: { + type: String, + default: 'normal' + } + }, + data() { + return { + badgeStyle: '' + }; + }, + watch: { + text() { + this.setStyle() + } + }, + mounted() { + this.setStyle() + }, + methods: { + setStyle() { + this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px` + }, + onClick() { + this.$emit('click'); + } + } + }; +</script> + +<style lang="scss" scoped> + $bage-size: 12px; + $bage-small: scale(0.8); + $bage-height: 20px; + + .uni-badge { + /* #ifndef APP-PLUS */ + display: flex; + /* #endif */ + justify-content: center; + flex-direction: row; + height: $bage-height; + line-height: $bage-height; + color: $uni-text-color; + border-radius: 100px; + background-color: $uni-bg-color-hover; + background-color: transparent; + text-align: center; + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-size: $bage-size; + padding: 0px 6px; + } + + .uni-badge--inverted { + padding: 0 5px 0 0; + color: $uni-bg-color-hover; + } + + .uni-badge--default { + color: $uni-text-color; + background-color: $uni-bg-color-hover; + } + + .uni-badge--default-inverted { + color: $uni-text-color-grey; + background-color: transparent; + } + + .uni-badge--primary { + color: $uni-text-color-inverse; + background-color: $uni-color-primary; + } + + .uni-badge--primary-inverted { + color: $uni-color-primary; + background-color: transparent; + } + + .uni-badge--success { + color: $uni-text-color-inverse; + background-color: $uni-color-success; + } + + .uni-badge--success-inverted { + color: $uni-color-success; + background-color: transparent; + } + + .uni-badge--warning { + color: $uni-text-color-inverse; + background-color: $uni-color-warning; + } + + .uni-badge--warning-inverted { + color: $uni-color-warning; + background-color: transparent; + } + + .uni-badge--error { + color: $uni-text-color-inverse; + background-color: $uni-color-error; + } + + .uni-badge--error-inverted { + color: $uni-color-error; + background-color: transparent; + } + + .uni-badge--small { + transform: $bage-small; + transform-origin: center center; + } </style> -- Gitblit v1.8.0