From bf48462e6ce0e0baa899c1c64c24c05290dc77fd Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 21 七月 2023 18:01:32 +0800
Subject: [PATCH] 图层树开发方法（待验证）下拉框选择图片（有bug）
---
src/views/layer/layerDetail.vue | 38 +++++++++++++++++++++++++-------------
1 files changed, 25 insertions(+), 13 deletions(-)
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 35270c0..be47681 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -26,13 +26,18 @@
class="m-2"
placeholder="Select"
size="small"
+ @change="changeSelection(stretchValue)"
+ ref="select"
>
<el-option
v-for="item in stretchOptions"
:key="item.value"
:label="item.label"
:value="item.value"
- />
+ >
+ <img :src="item.url" style="height: 30px; margin-right: 10px" />
+ <span>{{ item.label }}</span>
+ </el-option>
</el-select>
</div>
</div>
@@ -52,26 +57,17 @@
const transparence = ref(0);
let layerName = ref("鍥惧眰鍚嶇О");
let layerState = ref(false);
+let select = ref();
const stretchOptions = [
{
value: "Option1",
label: "Option1",
+ url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
},
{
value: "Option2",
label: "Option2",
- },
- {
- value: "Option3",
- label: "Option3",
- },
- {
- value: "Option4",
- label: "Option4",
- },
- {
- value: "Option5",
- label: "Option5",
+ url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
},
];
const emits = defineEmits(["detailClose"]);
@@ -83,6 +79,22 @@
emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
+const changeSelection = (scope) => {
+ let brand = scope;
+ for (let index in stretchOptions) {
+ let aa = stretchOptions[index];
+ let value = aa.value;
+ if (brand === value) {
+ console.log(select.value);
+ select.value.$el.children[0].children[0].setAttribute(
+ "style",
+ "background:url(" +
+ aa.url +
+ ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
+ );
+ }
+ }
+};
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3