初始化万家商超用户端仓库
This commit is contained in:
wangxiaowei
154
components/elementComponents/fu-button-diy/fu-button-diy.vue
Normal file
154
components/elementComponents/fu-button-diy/fu-button-diy.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<button
|
||||
v-if="
|
||||
query.handleSalta &&
|
||||
query.handleSalta[0] &&
|
||||
query.handleSalta[0] != 'niente'
|
||||
"
|
||||
@tap.stop="handleEven"
|
||||
:typeKey="index"
|
||||
class="cu-btn"
|
||||
:class="[
|
||||
query.info.border.value ? 'line-' + color : 'bg-' + color,
|
||||
query.info.round.value ? 'round' : '',
|
||||
query.info.size.value,
|
||||
query.info.shadow.value ? 'shadow' : '',
|
||||
]"
|
||||
:style="{
|
||||
color: query.info.color.value,
|
||||
backgroundColor: query.info.border.value
|
||||
? 'transparent'
|
||||
: query.info.backgroundColor.value,
|
||||
width: query.info.width.value + 'rpx',
|
||||
height: query.info.height.value + 'rpx',
|
||||
margin: `${query.info.marginTop ? query.info.marginTop.value : 0}rpx ${
|
||||
query.info.marginRight ? query.info.marginRight.value : 0
|
||||
}rpx ${query.info.marginBottom ? query.info.marginBottom.value : 0}rpx ${
|
||||
query.info.marginLeft ? query.info.marginLeft.value : 0
|
||||
}rpx `,
|
||||
}"
|
||||
>
|
||||
{{ query.info.textVal.value }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="cu-btn"
|
||||
:class="[
|
||||
query.info.border.value ? 'line-' + color : 'bg-' + color,
|
||||
query.info.round.value ? 'round' : '',
|
||||
query.info.size.value,
|
||||
query.info.shadow.value ? 'shadow' : '',
|
||||
]"
|
||||
:style="{
|
||||
color: query.info.color.value,
|
||||
backgroundColor: query.info.border.value
|
||||
? 'transparent'
|
||||
: query.info.backgroundColor.value,
|
||||
width: query.info.width.value + 'rpx',
|
||||
height: query.info.height.value + 'rpx',
|
||||
margin: `${query.info.marginTop ? query.info.marginTop.value : 0}rpx ${
|
||||
query.info.marginRight ? query.info.marginRight.value : 0
|
||||
}rpx ${query.info.marginBottom ? query.info.marginBottom.value : 0}rpx ${
|
||||
query.info.marginLeft ? query.info.marginLeft.value : 0
|
||||
}rpx `,
|
||||
}"
|
||||
>
|
||||
{{ query.info.textVal.value }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fu-button-diy",
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: "fu-button-diy",
|
||||
info: {
|
||||
textVal: {
|
||||
type: "text",
|
||||
label: "内容",
|
||||
value: "按钮",
|
||||
},
|
||||
color: {
|
||||
type: "color",
|
||||
label: "文字颜色",
|
||||
value: "#ffffff",
|
||||
},
|
||||
backgroundColor: {
|
||||
type: "color",
|
||||
label: "背景颜色",
|
||||
value: "#e54d42",
|
||||
},
|
||||
round: {
|
||||
type: "switch",
|
||||
label: "是否圆角",
|
||||
value: false,
|
||||
},
|
||||
size: {
|
||||
type: "select",
|
||||
label: "选择尺寸",
|
||||
value: "",
|
||||
options: [
|
||||
{
|
||||
label: "小",
|
||||
value: "sm",
|
||||
},
|
||||
{
|
||||
label: "中",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
label: "大",
|
||||
value: "lg",
|
||||
},
|
||||
],
|
||||
},
|
||||
shadow: {
|
||||
type: "switch",
|
||||
label: "是否添加阴影",
|
||||
value: true,
|
||||
},
|
||||
border: {
|
||||
type: "switch",
|
||||
label: "是否镂空",
|
||||
value: false,
|
||||
},
|
||||
marginTop: { type: "number", label: "按钮上外边距", value: "" },
|
||||
marginRight: { type: "number", label: "按钮右外边距", value: "" },
|
||||
marginBottom: { type: "number", label: "按钮下外边距", value: "" },
|
||||
marginLeft: { type: "number", label: "按钮左外边距", value: "" },
|
||||
width: { type: "number", label: "按钮宽度", value: "" },
|
||||
height: { type: "number", label: "按钮高度", value: "" },
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "red",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(JSON.stringify(this.query));
|
||||
},
|
||||
methods: {
|
||||
handleEven() {
|
||||
this.$util.handleAllFn(...this.query.handleSalta);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
78
components/elementComponents/fu-icon-diy/fu-icon-diy.vue
Normal file
78
components/elementComponents/fu-icon-diy/fu-icon-diy.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="
|
||||
query.handleSalta &&
|
||||
query.handleSalta[0] &&
|
||||
query.handleSalta[0] != 'niente'
|
||||
"
|
||||
@tap.stop="handleEven"
|
||||
:typeKey="index"
|
||||
:class="{
|
||||
'component-element': true,
|
||||
'fu-iconfont': iconType == 0,
|
||||
'fu-iconfont2': iconType == 1,
|
||||
}"
|
||||
:style="{
|
||||
color: query.info.color.value,
|
||||
fontSize: query.info.size.value + 'rpx',
|
||||
fontWeight: query.info.bold.value,
|
||||
}"
|
||||
>{{ query.info.iconVal.value ? query.info.iconVal.value : data }}
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
:typeKey="index"
|
||||
:class="{
|
||||
'component-element': true,
|
||||
'fu-iconfont': iconType == 0,
|
||||
'fu-iconfont2': iconType == 1,
|
||||
}"
|
||||
:style="{
|
||||
color: query.info.color.value,
|
||||
fontSize: query.info.size.value + 'rpx',
|
||||
fontWeight: query.info.bold.value,
|
||||
}"
|
||||
>{{ query.info.iconVal.value ? query.info.iconVal.value : data }}
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "fu-icon-diy",
|
||||
props: {
|
||||
data: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
iconType() {
|
||||
return this.query.info.iconVal.iconType || "0";
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.query);
|
||||
},
|
||||
methods: {
|
||||
handleEven() {
|
||||
this.$util.handleAllFn(...this.query.handleSalta);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fu-iconfont {
|
||||
display: inline;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
90
components/elementComponents/fu-image-diy/fu-image-diy.vue
Normal file
90
components/elementComponents/fu-image-diy/fu-image-diy.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<image
|
||||
v-if="
|
||||
query.handleSalta &&
|
||||
query.handleSalta[0] &&
|
||||
query.handleSalta[0] != 'niente'
|
||||
"
|
||||
@tap.stop="handleEven"
|
||||
class="component-element flex align-center justify-center"
|
||||
:typeKey="index"
|
||||
:src="query.info.url.value ? query.info.url.value : data"
|
||||
mode=""
|
||||
:style="{
|
||||
width: query.info.width.value + 'rpx',
|
||||
height: query.info.height.value + 'rpx',
|
||||
borderRadius: query.info.radius.value + 'rpx',
|
||||
margin: `${query.info.marginTop ? query.info.marginTop.value : 0}rpx ${
|
||||
query.info.marginRight ? query.info.marginRight.value : 0
|
||||
}rpx ${query.info.marginBottom ? query.info.marginBottom.value : 0}rpx ${
|
||||
query.info.marginLeft ? query.info.marginLeft.value : 0
|
||||
}rpx `,
|
||||
}"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="component-element flex align-center justify-center"
|
||||
:typeKey="index"
|
||||
:src="query.info.url.value ? query.info.url.value : data"
|
||||
mode=""
|
||||
:style="{
|
||||
width: query.info.width.value + 'rpx',
|
||||
height: query.info.height.value + 'rpx',
|
||||
borderRadius: query.info.radius.value + 'rpx',
|
||||
margin: `${query.info.marginTop ? query.info.marginTop.value : 0}rpx ${
|
||||
query.info.marginRight ? query.info.marginRight.value : 0
|
||||
}rpx ${query.info.marginBottom ? query.info.marginBottom.value : 0}rpx ${
|
||||
query.info.marginLeft ? query.info.marginLeft.value : 0
|
||||
}rpx `,
|
||||
}"
|
||||
></image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fu-image-diy",
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: "fu-image-diy",
|
||||
info: {
|
||||
marginTop: { type: "number", label: "图片上外边距", value: "0" },
|
||||
marginRight: { type: "number", label: "图片右外边距", value: "0" },
|
||||
marginBottom: { type: "number", label: "图片下外边距", value: "0" },
|
||||
marginLeft: { type: "number", label: "图片左外边距", value: "0" },
|
||||
width: { type: "number", label: "图片宽度", value: "32" },
|
||||
height: { type: "number", label: "图片高度", value: "32" },
|
||||
radius: { type: "number", label: "图片圆角", value: "0" },
|
||||
url: {
|
||||
type: "text",
|
||||
label: "图片地址",
|
||||
value: "https://picsum.photos/200/200?image=42",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleEven() {
|
||||
this.$util.handleAllFn(...this.query.handleSalta);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
91
components/elementComponents/fu-text/fu-text.vue
Normal file
91
components/elementComponents/fu-text/fu-text.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="
|
||||
query.handleSalta &&
|
||||
query.handleSalta[0] &&
|
||||
query.handleSalta[0] != 'niente'
|
||||
"
|
||||
@tap.stop="handleEven"
|
||||
:typeKey="index"
|
||||
:class="{
|
||||
'component-element': true,
|
||||
'text-cut': query.info.isOne.value,
|
||||
'text-cut-2': !query.info.isOne.value,
|
||||
'bulletin-text': true,
|
||||
}"
|
||||
:style="{
|
||||
width: query.info.width.value ? query.info.width.value + 'rpx' : 'auto',
|
||||
color: query.info.color.value,
|
||||
fontSize: query.info.size.value + 'rpx',
|
||||
fontWeight: query.info.bold.value,
|
||||
}"
|
||||
>
|
||||
{{ query.info.textVal.value ? query.info.textVal.value : data }}
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
:typeKey="index"
|
||||
:class="{
|
||||
'component-element': true,
|
||||
'text-cut': query.info.isOne.value,
|
||||
'text-cut-2': !query.info.isOne.value,
|
||||
'bulletin-text': true,
|
||||
}"
|
||||
:style="{
|
||||
width: query.info.width.value ? query.info.width.value + 'rpx' : 'auto',
|
||||
color: query.info.color.value,
|
||||
fontSize: query.info.size.value + 'rpx',
|
||||
fontWeight: query.info.bold.value,
|
||||
}"
|
||||
>
|
||||
<!-- <view class="typeList-edit">
|
||||
<text @tap="chooseCurComponent(i)" class="fu-iconfont"></text>
|
||||
</view> -->
|
||||
{{ query.info.textVal.value ? query.info.textVal.value : data }}
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "fu-text",
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
chooseCurComponent(item, i) {},
|
||||
handleEven() {
|
||||
this.$util.handleAllFn(...this.query.handleSalta);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.text-cut {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.text-cut-2 {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user