🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@antdigital/card-button

Package Overview
Dependencies
Maintainers
5
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@antdigital/card-button - npm Package Compare versions

Comparing version
9.0.1
 to
9.0.4
+289
main.vue
<template>
<div
:class="`root ${disabled ? 'disabled' : ''} ${type} ${className} ${
backgroundImage ? 'btn-backgroundImage' : ''
}`"
:style="realBtnStyle"
@click="onClick()"
>
<image
:class="`icon_${type}_${iconPosition}`"
v-if="icon && iconPosition === 'start'"
:src="icon"
/>
<text
:class="`main_text text_${type} `"
:value="realText"
:style="fontStyle"
:name="name"
:addManualSpm="addManualSpm"
:spmBizCode="spmBizCode"
:scm="scm"
:spm="spm"
:entityId="entityId"
:extraParams4="extraParams4"
/>
<image
:class="`icon_${type}_${iconPosition}`"
v-if="icon && iconPosition === 'end'"
:src="icon"
/>
</div>
</template>
<script>
const ac = requireModule("ac");
var main = {
props: {
// primary | default | danger | ghost | text
type: {
default: "default"
},
className: {
default: ""
},
style: {
default: {}
},
disabled: {
default: false
},
// TODO
loading: {
default: false
},
clickable: {
default: true
},
icon: {
default: null
},
// start | end
iconPosition: {
default: "start"
},
backgroundImage: {
default: ""
},
text: {
default: "按钮"
},
// 是否文字溢出
overflow: {
default: "hidden"
},
// target cube下都是blank
href: {
default: null
},
autoInsertSpace: {
default: true
},
params: {
default: null
},
// 埋点
addManualSpm: {
default: true
},
spmBizCode: {
default: "HomeAssistant"
},
name: {
default: "exposure"
},
spm: {
default: null
},
scm: {
default: null
},
entityId: {
default: null
},
extraParams4: {
default: null
}
},
onCreated() {
this.useParams();
},
onUpdated() {
this.useParams();
},
methods: {
useParams() {
if (this.params) {
for (let key in this.params) {
this[key] = this.params[key];
}
}
},
onClick() {
if (!this.clickable) {
return;
}
if (this.href) {
ac.call("openURL", {
url: this.href,
check: true
}, res => {});
}
if (!this.disabled) {
this.$emit("click", this.text);
this.$emit("onClick", this.text);
}
}
},
computed: {
realText() {
if (this.text.length === 2 && this.autoInsertSpace) {
return this.text[0] + " " + this.text[1];
} else {
return this.text;
}
},
fontStyle() {
return {
color: this.style?.color,
fontWeight: this.style?.fontWeight,
lineHeight: this.style?.lineHeight,
fontSize: this.style?.fontSize,
fontFamily: this.style?.fontFamily,
lines: this.style?.lines || 1,
textAlign: this.style?.textAlign || "center",
flexGrow: this.style?.flexGrow,
textOverflow: this.style?.textOverflow || "ellipsis",
overflow: this.overflow || this.style?.overflow,
whiteSpace: this.style?.whiteSpace || "nowrap"
};
},
realBtnStyle() {
if (this.backgroundImage) {
return {
...this.style,
backgroundColor: "transparent",
backgroundImage: `url(${this.backgroundImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%"
};
} else {
return {
...this.style
};
}
}
}
};
export { main as default };
</script>
<style>
.root {
max-width: 100%;
height: 72rpx;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 36rpx;
overflow: hidden;
background-color: rgba(22, 119, 255, 0.08);
padding: 18rpx 48rpx;
}
.main_text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
lines: 1;
font-size: 26rpx;
font-weight: 400;
color: #1677ff;
}
.disabled {
opacity: 0.4;
}
.primary {
background-color: #1677ff;
}
.text_primary {
font-size: 34rpx;
font-weight: 600;
color: #fff;
}
.icon_primary_start {
height: 38rpx;
width: 38rpx;
margin-right: 16rpx;
}
.icon_primary_end {
height: 38rpx;
width: 38rpx;
margin-left: 16rpx;
}
.icon_default_start {
height: 30rpx;
width: 30rpx;
margin-right: 12rpx;
}
.icon_default_end {
height: 30rpx;
width: 30rpx;
margin-left: 12rpx;
}
.danger {
background-color: rgba(247, 74, 50, 0.08);
}
.text_danger {
font-size: 26rpx;
font-weight: 600;
color: #f43f5e;
}
.icon_danger_start {
height: 30rpx;
width: 30rpx;
margin-right: 12rpx;
}
.icon_danger_end {
height: 30rpx;
width: 30rpx;
margin-left: 12rpx;
}
.ghost {
background-color: transparent;
}
.text_ghost {
font-weight: 400;
font-size: 26rpx;
color: #4f6c8c;
}
.icon_ghost_start {
height: 30rpx;
width: 30rpx;
margin-right: 12rpx;
}
.icon_ghost_end {
height: 30rpx;
width: 30rpx;
margin-left: 12rpx;
}
.text {
background-color: transparent;
padding: 0;
}
.text_text {
font-size: 24rpx;
font-weight: 500;
color: #4f6c8c;
}
.icon_text_start {
height: 28rpx;
width: 28rpx;
margin-right: 8rpx;
}
.icon_text_end {
height: 28rpx;
width: 28rpx;
margin-left: 8rpx;
}
</style>
+8
manifest.json
{
"name": "@antdigital/card-button",
"compilerType": 1,
"jsformat": 1,
"isComponent": true,
"assetId": "180020010101324441",
"useComponents": {}
}
+4
-2
package.json
{
"name": "@antdigital/card-button",
"version": "9.0.1",
"version": "9.0.4",
"yuyanId": "180020010101324441",

@@ -20,3 +20,5 @@ "repository": {

"esm",
"main.zst"
"main.zst",
"main.vue",
"manifest.json"
],

@@ -23,0 +25,0 @@ "keywords": [