const allBorder = [ 'border-top', 'border-bottom', 'border-left', 'border-right', ] const width = position.find((item) => item.trim().includes('border-width')) const widthValue = width.split(':')?.[1] const styles = position.find((item) => item.trim().includes('border-style')) const stylesValue = styles.split(':')?.[1] const borderValue = `${widthValue} ${value.trim()} ${stylesValue}` allBorder.forEach((item) => { this.sheet.current.setStyle(target, item, borderValue); })优化代码

你可以尝试使用数组的`map`方法来优化这段代码。这样你就不需要使用`forEach`循环来遍历`allBorder`数组了。以下是优化后的代码示例：

const allBorder = [
  'border-top',
  'border-bottom',
  'border-left',
  'border-right',
];

const width = position.find((item) => item.trim().includes('border-width'));
const widthValue = width.split(':')?.[1];

const styles = position.find((item) => item.trim().includes('border-style'));
const stylesValue = styles.split(':')?.[1];
const borderValue = `${widthValue} ${value.trim()} ${stylesValue}`;

allBorder.map(item => this.sheet.current.setStyle(target, item, borderValue));

使用`map`方法可以更简洁地实现对数组元素的遍历，并且可以直接调用`setStyle`方法进行样式设置。

相关问题

请根据代码片段仿写实现div左下角拖拽移动用具体代码实现，import Vue from 'vue' Vue.directive('dialogZoomOut', { bind(el, binding, vnode, oldVnode) { let minWidth = 400;let minHeight = 300;let isFullScreen = false; let nowWidth = 0;let nowHight = 0;let nowMarginTop = 0;const dialogHeaderEl = el.querySelector('.el-dialog__header');const dragDom = el.querySelector('.el-dialog');dragDom.style.overflow = "auto";dialogHeaderEl.onselectstart = new Function("return false");dialogHeaderEl.style.cursor = 'move';const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);let moveDown = (e) => {const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;let styL, styT;if (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);} else {styL = +sty.left.replace(/px/g, '');styT = +sty.top.replace(/px/g, '');};document.onmousemove = function (e) {const l = e.clientX - disX;const t = e.clientY - disY;dragDom.style.left = `${l + styL}px`;dragDom.style.top = `${t + styT}px`;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}dialogHeaderEl.onmousedown = moveDown;dialogHeaderEl.ondblclick = (e) => {if (isFullScreen == false) {nowHight = dragDom.clientHeight;nowWidth = dragDom.clientWidth;nowMarginTop = dragDom.style.marginTop;dragDom.style.left = 0;dragDom.style.top = 0;dragDom.style.height = "100VH";dragDom.style.width = "100VW";dragDom.style.marginTop = 0;isFullScreen = true;dialogHeaderEl.style.cursor = 'initial';dialogHeaderEl.onmousedown = null;} else {dragDom.style.height = "auto";dragDom.style.width = nowWidth + 'px';dragDom.style.marginTop = nowMarginTop;isFullScreen = false;dialogHeaderEl.style.cursor = 'move';dialogHeaderEl.onmousedown = moveDown;}}let resizeEl = document.createElement("div");dragDom.appendChild(resizeEl);resizeEl.style.cursor = 'se-resize';resizeEl.style.position = 'absolute';resizeEl.style.height = '10px';resizeEl.style.width = '10px';resizeEl.style.right = '0px';resizeEl.style.bottom = '0px';resizeEl.style.zIndex = '99';resizeEl.onmousedown = (e) => {let clientX = e.clientX;let disX = e.clientX - resizeEl.offsetLeft;let disY = e.clientY - resizeEl.offsetTop;document.onmousemove = function (e) {e.preventDefault(); let x = e.clientX - disX + (e.clientX - clientX);let y = e.clientY - disY;dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}}})

以下是仿写的代码实现：

<template>
  <div class="dialog-wrapper" v-dialog-zoom-out>
    <div class="el-dialog">
      <div class="el-dialog__header">Dialog Title</div>
      <div class="el-dialog__body">Dialog Content</div>
      <div class="el-dialog__footer">
        <button @click="$emit('close')">Close</button>
      </div>
      <div class="el-dialog__resize"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dialog",
};
</script>

<style>
.dialog-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.el-dialog__header {
  padding: 16px;
  background-color: #f5f7fa;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: move;
}

.el-dialog__body {
  padding: 16px;
}

.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  background-color: #f5f7fa;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.el-dialog__footer button {
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  cursor: pointer;
}

.el-dialog__resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  cursor: se-resize;
  background-color: #c1c1c1;
}
</style>

import Vue from "vue";

Vue.directive("dialogZoomOut", {
  bind(el, binding, vnode, oldVnode) {
    let minWidth = 400;
    let minHeight = 300;
    let isFullScreen = false;
    let nowWidth = 0;
    let nowHight = 0;
    let nowMarginTop = 0;
    const dialogHeaderEl = el.querySelector(".el-dialog__header");
    const dragDom = el.querySelector(".el-dialog");
    dragDom.style.overflow = "auto";
    dialogHeaderEl.onselectstart = new Function("return false");
    dialogHeaderEl.style.cursor = "move";
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    let moveDown = (e) => {
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;
      let styL, styT;
      if (sty.left.includes("%")) {
        styL = +document.body.clientWidth * (+sty.left.replace(/%/g, "") / 100);
        styT = +document.body.clientHeight * (+sty.top.replace(/%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/px/g, "");
        styT = +sty.top.replace(/px/g, "");
      }
      document.onmousemove = function (e) {
        const l = e.clientX - disX;
        const t = e.clientY - disY;
        dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;
      };
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
    dialogHeaderEl.onmousedown = moveDown;
    dialogHeaderEl.ondblclick = (e) => {
      if (isFullScreen == false) {
        nowHight = dragDom.clientHeight;
        nowWidth = dragDom.clientWidth;
        nowMarginTop = dragDom.style.marginTop;
        dragDom.style.left = 0;
        dragDom.style.top = 0;
        dragDom.style.height = "100VH";
        dragDom.style.width = "100VW";
        dragDom.style.marginTop = 0;
        isFullScreen = true;
        dialogHeaderEl.style.cursor = "initial";
        dialogHeaderEl.onmousedown = null;
      } else {
        dragDom.style.height = "auto";
        dragDom.style.width = nowWidth + "px";
        dragDom.style.marginTop = nowMarginTop;
        isFullScreen = false;
        dialogHeaderEl.style.cursor = "move";
        dialogHeaderEl.onmousedown = moveDown;
      }
    };
    let resizeEl = document.createElement("div");
    dragDom.appendChild(resizeEl);
    resizeEl.style.cursor = "se-resize";
    resizeEl.style.position = "absolute";
    resizeEl.style.height = "10px";
    resizeEl.style.width = "10px";
    resizeEl.style.right = "0px";
    resizeEl.style.bottom = "0px";
    resizeEl.style.zIndex = "99";
    resizeEl.onmousedown = (e) => {
      let clientX = e.clientX;
      let disX = e.clientX - resizeEl.offsetLeft;
      let disY = e.clientY - resizeEl.offsetTop;
      document.onmousemove = function (e) {
        e.preventDefault();
        let x = e.clientX - disX + (e.clientX - clientX);
        let y = e.clientY - disY;
        dragDom.style.width = x > minWidth ? `${x}px` : minWidth + "px";
        dragDom.style.height = y > minHeight ? `${y}px` : minHeight + "px";
      };
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

上述代码实现了一个类似于Element UI中的Dialog组件的拖拽和缩放功能。在使用时，只需要将 `v-dialog-zoom-out` 指令绑定到Dialog组件的容器元素上，即可实现拖拽和缩放功能。

<template> <view class="box"> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">男生</view> </view> <view class="mid"> <view class="flex" style="justify-content: space-between;"> <view class="males">{{ malePercent }}%</view> <view class="females">{{ femalePercent }}%</view> </view> <view class="progress-bar"> <view class="male" :style="{ width: malePercent + '%' }"></view> <view class="progress"> <view class="progress-bar-inner" :style="{ width: percent + '%' }"></view> </view> <view class="female" :style="{ width: femalePercent + '%' }"></view> </view> </view> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">女生</view> </view> </view> </template> <script setup> import { computed } from 'vue' const props = defineProps({ male: { type: Number, requirde: true }, female: { type: Number, requirde: true }, }) // 总比例 const percent = computed(() => { return props.male / (props.male + props.female) * 100 }) // 男生比例 const malePercent = computed(() => { return Math.round(props.male / (props.male + props.female) * 100) }) // 女生比例 const femalePercent = computed(() => { return Math.round(props.female / (props.male + props.female) * 100) }) </script> <style lang="scss" scoped> .progress-bar { display: flex; align-items: center; height: 30rpx; width: 100%; border: 1px solid #ccc; border-radius: 30rpx; overflow: hidden; } .progress-bar .male, .progress-bar .female { display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; font-size: 14px; font-weight: bold; } .progress-bar .male { flex: 0 0 auto; background-color: #007bff; } .progress-bar .progress { flex: 1 1 auto; height: 100%; position: relative; } .progress-bar .progress .progress-bar-inner { height: 100%; background-color: #28a745; position: absolute; top: 0; left: 0; } .progress-bar .female { flex: 0 0 auto; background-color: #dc3545; } .content { justify-content: space-between; } .males { color: #007bff; font-size: 24rpx; } .females { color: #dc3545; font-size: 24rpx; } .box { display: flex; justify-content: space-around; align-items: center; margin-top: 50rpx; margin-bottom: 50rpx; .mid { width: 70%; } } .image { height: 60rpx; width: 60rpx; } </style> 帮我把上述代码改成只传male一个值就可以显示出male和female两个的比例出来

好的，可以这样修改代码：

<template>
<view class="box">
<view style="text-align: center;padding: 10rpx;">
<image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" />
<view style="font-size: 24rpx;color: #a6a8ac;">男生</view>
</view>
<view class="mid">
<view class="flex" style="justify-content: space-between;">
<view class="males">{{ malePercent }}%</view>
<view class="females">{{ femalePercent }}%</view>
</view>
<view class="progress-bar">
<view class="male" :style="{ width: malePercent + '%' }"></view>
<view class="progress">
<view class="progress-bar-inner" :style="{ width: percent + '%' }"></view>
</view>
<view class="female" :style="{ width: femalePercent + '%' }"></view>
</view>
</view>
<view style="text-align: center;padding: 10rpx;">
<image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" />
<view style="font-size: 24rpx;color: #a6a8ac;">女生</view>
</view>
</view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
male: { type: Number, requirde: true },
})

// 总人数
const total = computed(() => {
return props.male * 2
})

// 总比例
const percent = computed(() => {
return props.male / total.value * 100
})

// 男生比例
const malePercent = computed(() => {
return Math.round(props.male / total.value * 100)
})

// 女生比例
const femalePercent = computed(() => {
return Math.round((total.value - props.male) / total.value * 100)
})
</script>

<style lang="scss" scoped>
.progress-bar {
display: flex;
align-items: center;
height: 30rpx;
width: 100%;
border: 1px solid #ccc;
border-radius: 30rpx;
overflow: hidden;

.male,
.female {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
font-size: 14px;
font-weight: bold;
}

.male {
flex: 0 0 auto;
background-color: #007bff;
}

.progress {
flex: 1 1 auto;
height: 100%;
position: relative;
}

.progress .progress-bar-inner {
height: 100%;
background-color: #28a745;
position: absolute;
top: 0;
left: 0;
}

.female {
flex: 0 0 auto;
background-color: #dc3545;
}
}

.content {
justify-content: space-between;
}

.males {
color: #007bff;
font-size: 24rpx;
}

.females {
color: #dc3545;
font-size: 24rpx;
}

.box {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 50rpx;
margin-bottom: 50rpx;

.mid {
width: 70%;
}
}

.image {
height: 60rpx;
width: 60rpx;
}
</style>

这样在调用组件的时候，只需要传入一个male的值即可，组件会自动计算出总人数和男女比例。