From 807d0f5ee9b78824f18788ea8a50b8dfd9f9bb2e Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期四, 27 七月 2023 11:05:49 +0800
Subject: [PATCH] 输入框选择图片
---
src/views/layer/layerDetail.vue | 123 +++++++++++++++++++++++++++++++++++------
1 files changed, 105 insertions(+), 18 deletions(-)
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 47d26cd..077e04f 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -11,23 +11,26 @@
<!-- <el-checkbox @change="handlCheckAllChange" v-model="layerState">{{
layerName
}}</el-checkbox> -->
- {{ layerData.name }}
+ {{ layerData.cnName }}
<img src="../../assets/img/layer.png" alt="" />
</div>
<div class="slider-demo-block">
<div class="demonstration">閫忔槑搴�</div>
- <el-slider v-model="transparence" />
+ <el-slider
+ v-model="transparence"
+ @change="sliderChange"
+ :format-tooltip="formatTooltip"
+ />
<div class="demonstration">{{ transparence }}%</div>
</div>
<div class="selectBox">
<div class="selectTile demonstration">鎷変几鏂瑰紡</div>
<el-select
v-model="stretchValue"
- class="m-2"
- placeholder="Select"
+ class="imgSelect"
+ placeholder="閫夋嫨鎷変几鏂瑰紡"
size="small"
- @change="changeSelection(stretchValue)"
- ref="select"
+ clearable
>
<el-option
v-for="item in stretchOptions"
@@ -35,8 +38,30 @@
: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 class="selectBox">
+ <div class="selectTile demonstration">娓叉煋绫诲瀷</div>
+ <el-select
+ v-model="renderType"
+ class="imgSelect"
+ placeholder="閫夋嫨娓叉煋绫诲瀷"
+ size="small"
+ @change="changeSelection(renderType)"
+ ref="select"
+ clearable
+ >
+ <el-option
+ v-for="item in renderTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ <!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
+ <span>{{ item.label }}</span> -->
+
+ <img :src="item.url" style="height: 30px; width: 100%" />
</el-option>
</el-select>
</div>
@@ -53,12 +78,14 @@
defineProps,
defineEmits,
} from "vue";
+import server from "@/assets/js/Map/server";
const stretchValue = ref("");
const transparence = ref(0);
let layerName = ref("鍥惧眰鍚嶇О");
let layerState = ref(false);
let select = ref();
-const stretchOptions = [
+let renderType = ref("");
+const renderTypeOptions = [
{
value: "Option1",
label: "Option1",
@@ -70,31 +97,91 @@
url: "https://img1.baidu.com/it/u=3226786080,888437008&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
},
];
+const stretchOptions = [
+ {
+ value: "Option1",
+ label: "Option1",
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ },
+];
+const formatTooltip = (val: number) => {
+ return val / 100;
+};
const emits = defineEmits(["detailClose"]);
//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
const props = defineProps({
layerData: Object,
});
+const layerLength = ref();
const setSpatialClose = () => {
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.$el.children);
+ if (scope == "") {
+ select.value.$el.children[0].children[0].removeAttribute("style");
+ select.value.$el.children[0].children[0].children[0].removeAttribute(
+ "style"
+ );
+ select.value.$el.children[0].children[0].children[0].children[0].removeAttribute(
+ "style"
+ );
+ return;
+ }
+ for (let index in renderTypeOptions) {
+ let obj = renderTypeOptions[index];
+ if (obj.value == scope) {
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;"
+ `background: url(${obj.url}) no-repeat;
+ width: 100%; height: 100%;
+ border: none;
+ height: 33px;
+ background-size:100% 100%`
+ );
+ select.value.$el.children[0].children[0].children[0].setAttribute(
+ "style",
+ `display: flex;
+ justify-content: flex-end;
+ background:transparent;`
+ );
+ select.value.$el.children[0].children[0].children[0].children[0].setAttribute(
+ "style",
+ `display: none;`
);
}
}
+
+ // let brand = scope;
+ // for (let index in stretchOptions) {
+ // let aa = stretchOptions[index];
+ // let value = aa.value;
+ // if (brand === value) {
+ // console.log(select.value.$el.children);
+ // 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;"
+ // );
+ // }
+ // }
};
+//婊戝潡鍙樺姩
+const sliderChange = (val) => {
+ server.layerList[layerLength.value].layerData.alpha = val / 100;
+};
+onMounted(() => {
+ server.layerList.forEach((e, i) => {
+ if (props.layerData.id == e.id) {
+ layerLength.value = i;
+ transparence.value = e.layerData.alpha * 100;
+ }
+ });
+});
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3