style="direction:inherit"的作用

本文介绍CSS中direction属性的作用及用法,包括ltr、rtl和inherit三个取值的意义,并解释了这些选项如何影响文本的流向。此外还提到了unicode-bidi属性的应用场景。

语法:direction : ltr | rtl | inherit

取值:

ltr : 默认值。文本从左到右流入

rtl : 文本从右到左流入

inherit : 文本流入方向由继承获得

说明:

用于设置文本流入的方向。请参阅对象的 dir 属性。

此属性不会影响拉丁文的字母数字字符,它们总是以 ltr 值被呈递。

但是此属性会作用于拉丁文的标点符号。假如您想应用此属性于内联文本,您必须设定 unicode-bidi 属性为 embed 或 bidi-override 。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 direction 。

<template> <Layout :have-tab-bar="false" icon=""> <span slot="title" class="topBarTitle">我的项目</span> <view class="container"> <view class="containerBody"> <view class="search"> <view class="text">数据</view> </view> <view class="history_item"> <view style="padding:10px"> <view style="color: #82D4FF;margin-bottom: 38rpx;display: flex;justify-content: space-between"> 项目基本信息 <view style="width: 25px;height: 25px;"> <uni-icons @click="editData" type="compose" size="20" color="#fff"></uni-icons> </view> </view> <view style="display: flex"> <view> <view class="info"> <view class="label">项目名称</view> <view>{{name}}</view> </view> <view class="info"> <view class="label">项目地址</view> <view>{{projAddr}}</view> </view> </view> </view> <view style="color: #82D4FF;margin-bottom: 38rpx">项目基本情况</view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view style="width: 118px"> 盾构机直径m </view> <view class="project-item-input"> <input disabled :value="diameter" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item"> <view class="project-item-num" style="white-space: nowrap"> 掘进速度cm/min </view> <view class="project-item-input"> <input disabled :value="speed" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item"> <view class="project-item-num"> 送泥比重g/cm³ </view> <view class="project-item-input"> <input disabled :value="propor" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view class="project-item-num"> 每小时送泥流量 <view class="unit">g/cm³</view> </view> <view class="project-item-input"> <input disabled :value="timesend" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item" style="margin-top: 42rpx"> <view class="project-item-num"> 管片宽度m </view> <view class="project-item-input"> <input disabled :value="width" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item" style="margin-top: 42rpx"> <view class="project-item-num"> 日掘进环数 </view> <view class="project-item-input"> <input disabled :value="dayTunnelleCylindernumber" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view class="project-item-num"> 每小时排泥流量 <view>cm/min</view> </view> <view class="project-item-input"> <input disabled :value="hourSpoildisposal" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view class="situation" style="height: 400px;"> <view class="every"> <view>各地层基本情况</view> <!-- <view @click="addStratum">--> <!-- <uni-icons type="plusempty" size="16" color="#fff"></uni-icons>--> <!-- </view>--> </view> <view class="item" v-for="(item, index) in stratumList" :key="index"> <view style="color: #fff;margin-left: 10px;display: flex;">地层编号: <input disabled :value="item.num" style="background-color: #303E63;margin-left: 10px;border-radius: 5px" /> <!-- <view style="width: 25px;height:25px;margin-left:10px;background-color: #303E63;color: #B6BAFF;border-radius: 6px;text-align: center">{{ index + 1}}</view>--> </view> <view style="color: #fff;margin-left: 10px;margin-top:10px;display: flex;">地层名称: <input disabled :value="item.name" style="background-color: #303E63;margin-left: 10px;border-radius: 5px" /> <!-- <view style="width: 25px;height:25px;margin-left:10px;background-color: #303E63;color: #B6BAFF;border-radius: 6px;text-align: center">{{ index + 1}}</view>--> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view>地层特性</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :value="item.features1" :localdata="characterOne" :disabled="disabled" style="width: 100%;"></uni-data-select> </uni-section> </view> <view v-if="value === 0" style="margin-left: 10px"> <uni-section> <uni-data-select :value="item.features2" :localdata="characterTwo" :disabled="disabled" style="width: 100%;"></uni-data-select> </uni-section> </view> </view> </view> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view> 地层比重g/cm³ </view> <view class="stratum-input"> <input disabled :value="item.proportion" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view>地层含水%</view> <view class="stratum-input"> <input disabled :value="item.water" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="situation_item"> <view style="padding: 7px"> <view>颗分区间</view> <view class="interval"> <view style="display: flex"> <view class="interval-item"> <view class="interval-item-num"> >10 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size1" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 10-2 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size2" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 2-0.5 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size3" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 0.5-0.25 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size4" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="interval"> <view style="display: flex"> <view class="interval-item"> <view class="interval-item-num"> 0.25-0.075 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size5" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num" style="white-space: nowrap"> 0.075-0.005 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size6" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 小于0.005 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size7" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> </view> </view> </view> <view class="clay"> <view style="color: #82D4FF;margin-left: 18rpx;padding-top: 18rpx">泥水设备百分比设定</view> <view style="color:#fff;margin-left: 28rpx;margin-top: 18rpx">黏土</view> <view class="clay_item"> <view class="stratum"> <view class="title">滚动筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="rollRange" :disabled="disabled" :value="gdsObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <!-- <view class="number" style="width: 80px">--> <!-- <uni-easyinput--> <!-- type="number"--> <!-- placeholder="0"--> <!-- :styles="{--> <!-- backgroundColor: 'rgba(187, 200, 242, 0.1)',--> <!-- borderRadius: '4px'--> <!-- }"--> <!-- >--> <!-- <template #right>--> <!-- <view style="display:flex;flex-direction: column">--> <!-- <uni-icons type="top" size="14" color="#ff0000" style="height: 15px"></uni-icons>--> <!-- <uni-icons type="down" size="14" color="#ff0000" style="height: 15px"></uni-icons>--> <!-- </view>--> <!-- </template>--> <!-- </uni-easyinput>--> <!-- </view>--> <view style="margin-left: 10px"> <uni-number-box disabled :step="0.001" :value="gdsObject.value" @change="changeValue" /> </view> <view class="checkbox" style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum"> <view class="title">振动筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="vibrationRange" :disabled="disabled" :value="zdsObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="zdsObject.value" @change="changeValue" /> </view> <view class="checkbox" style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum" style="white-space: nowrap"> <view class="title">一级旋流器</view> <view class="stratum-select-one"> <view> <uni-section> <uni-data-select :localdata="oneRange" :disabled="disabled" :value="xlq1Object.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="xlq1Object.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum" style="white-space: nowrap"> <view class="title">二级旋流器</view> <view class="stratum-select-two"> <view> <uni-section> <uni-data-select :localdata="twoRange" :disabled="disabled" :value="xlq2Object.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="xlq2Object.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum"> <view class="title">脱水筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="dehydrationRange" :disabled="disabled" :value="tssObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="tssObject.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item" style="height: 198rpx;"> <view class="sieve"> <view class="title">滚动筛</view> <view class="sieve-select"> <view>滚动筛喷淋水容量:</view> <view> <uni-number-box disabled :step="0.001" :value="gdsDzsplsrl" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 198rpx;"> <view class="sieve"> <view class="title">脱水筛</view> <view class="sieve-select"> <view>筛上物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="ttsSswmd" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 258rpx;"> <view class="sieve"> <view class="title">预筛</view> <view class="sieve-select" style="margin-bottom: 18rpx"> <view>筛上物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="ysSswmd" @change="changeValue" /> </view> </view> <view class="sieve-select"> <view>振动筛喷淋水容量:</view> <view> <uni-number-box disabled :step="0.001" :value="ysZdsplsrl" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 258rpx;"> <view class="sieve"> <view class="title">旋流器</view> <view class="sieve-select" style="margin-bottom: 18rpx"> <view>一级底流物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="xlq1Dlwmd" @change="changeValue" /> </view> </view> <view class="sieve-select"> <view>二级底流物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="xlq2Dlwm" @change="changeValue" /> </view> </view> </view> </view> </view> </view> </view> <view style="color: #fff;margin:38rpx 0 38rpx 18rpx;">输出</view> <view class="history_item"> <view style="padding:18rpx"> <view class="mudRes"> <view style="color: #82D4FF;margin-left: 18rpx;padding-top: 18rpx">计算处理百分比</view> <view class="mudRes_item" v-for="(item,index) in 5" :key="index"> <view class="title">黏土</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 滚动筛% </view> <view class="content-item-input"> <input disabled :value="rollingScreen" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 振动筛% </view> <view class="content-item-input"> <input disabled :value="vibratingScreen" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 一级旋流器% </view> <view class="content-item-input"> <input disabled :value="xlq1" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 二级旋流器% </view> <view class="content-item-input"> <input disabled :value="xlq2" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="mudRes_item" v-for="(item,index) in 2" :key="index"> <view class="title">滚动筛筛下物</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 流量m³/R </view> <view class="content-item-input"> <input disabled :value="flow" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 比重g/m³ </view> <view class="content-item-input"> <input disabled :value="weight" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 固相T/R </view> <view class="content-item-input"> <input disabled :value="solid" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 液相m³/R </view> <view class="content-item-input"> <input disabled :value="liquid" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="title" style="color: #82D4FF">泥浆池数据</view> <view class="mudRes_item"> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 调整池m³ </view> <view class="content-item-input"> <input disabled :value="adjustmentPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 废浆池m³ </view> <view class="content-item-input"> <input disabled :value="wasteMudPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 清水池m³ </view> <view class="content-item-input"> <input disabled :value="cleanWaterPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view style="display: flex"> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 新浆池m³ </view> <view class="content-item-input"> <input disabled :value="newMudPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 工业水池m³ </view> <view class="content-item-input"> <input disabled :value="industrialWaterPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 集土坑m³ </view> <view class="content-item-input"> <input disabled :value="soilCollectionPit" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view class="title" style="color: #82D4FF">干化配置数据</view> <view class="mudRes_item"> <view v-for="(item,index) in 5" :key="index"> <view class="title">黏土</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 弃土量m³/R </view> <view class="content-item-input"> <input disabled :value="qituliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 弃浆量m³/R </view> <view class="content-item-input"> <input disabled :value="qijiangliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 需水量m³/R </view> <view class="content-item-input"> <input disabled :value="xushuiliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view style="display: flex"> <view class="content_item"> <view class="content-item-title" style="width: 210rpx"> 干化配置推荐 </view> <view class="content-item-input"> <input disabled :value="ganhuaConfiguration" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 210rpx"> 弃浆配置推荐 </view> <view class="content-item-input"> <input disabled :value="qijiangConfiguration" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> </view> </view> </view> </view> </view> </view> </Layout> </template> <script setup> import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import Layout from '@/layout/index.vue' import { error } from 'uview-plus'; import { myDetailLogin } from '../../apis/myDetail'; const detail = async () => { error.value = ''; loading.value = true; } const rollRange = [{ value: 0, text: "10mm" }, { value: 1, text: "7mm" }, { value: 2, text: "5mm" }, ] const vibrationRange = [{ value: 0, text: "6mm" }, { value: 1, text: "3mm" }, { value: 2, text: "1.5mm" }, ] const oneRange = [{ value: 0, text: "500" }, { value: 1, text: "375" }, { value: 2, text: "350" }, { value: 3, text: "250" }, ] const twoRange = [{ value: 0, text: "150" }, { value: 1, text: "125" }, { value: 2, text: "100" }, ] const dehydrationRange = [{ value: 0, text: "0.6mm" }, { value: 1, text: "0.35mm" }, ] const characterOne = [{ value: 0, text: "黏土" }, { value: 1, text: "粉土" }, { value: 2, text: "砂" }, { value: 3, text: "圆砾" }, { value: 4, text: "卵石" }, { value: 5, text: "岩层" }, { value: 6, text: "淤泥" }, ] const characterTwo = [{ value: 0, text: "流塑" }, { value: 1, text: "软塑" }, { value: 2, text: "可塑" }, { value: 3, text: "硬塑" }, ] const hobby = [{ text: '已选中项', value: 0 }] const stratumList = ref([{ particleSize: { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '70', size7: '30' } }]); const switchTab = (tab) => { activeTab.value = tab } const open = () => { uni.navigateTo({ url: '/pages/index/index' }) } //添加地层 const addStratum = () => { //添加一个新的地层对象到数组 stratumList.value.push({}); // 滚动到底部 nextTick(() => { const container = uni.createSelectorQuery().select('.situation'); container.boundingClientRect(data => { uni.pageScrollTo({ scrollTop: data.height, duration: 300 }); }).exec(); }); } //编辑数据 const editData = () => { //跳转到计算页 uni.navigateTo({ url: '/pages/calculate/index' }); } watch(value, (newVal) => { if (newVal === 0) { // 黏土 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '70', // 0.075-0.005 size7: '30' // <0.005 }; } } if (newVal === 1) { // 粉土 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '45', size6: '45', size7: '10' }; } } if (newVal === 2) { // 砂 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '5', size4: '25', size5: '25', size6: '40', size7: '5' }; } } if (newVal === 3) { // 圆砾 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '40', size2: '15', size3: '10', size4: '10', size5: '5', size6: '15', size7: '5' }; } } if (newVal === 4 || newVal === 5) { //卵石 岩层 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '0', size7: '0' }; } } }); onMounted(() => { }) // 组件卸载时执行 onUnmounted(() => { }) </script> 这一段代码的目的是,在用户点击某个项目的时候,通过变量id,进入到此界面,此界面为数据详情,会通过匹配id,把其他所有的数据,渲染到其对应的位置上,id是一个变量 import { request } from '@/utils' export function myDetailLogin(id){ return request({ url: `/api/projbase/getById/${id}` , method:'GET' }) }这里是接口代码
06-23
<div><div class="hiprint-printPanel panel-index-0"> <style printstyle=""> @page { border:0; padding:0cm; margin:0cm; size:A4 portrait; } </style> <div class="hiprint-printPaper" original-height="50" style="width: 210mm;height: 50mm;position: relative;break-before: page;"><div class="hiprint-printPaper-content"><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 204pt; height: 40.5pt; font-family: inherit; font-size: 18pt; left: 189pt; top: 40.5pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height: 100%; width: 100%; display: flex; flex-direction: column;"><svg width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice" x="0px" y="0px" viewBox="0 0 101 54" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="101" height="54" style="fill:#ffffff;"></rect><g transform="translate(0, 0)" style="fill:#000000;"><rect x="0" y="0" width="2" height="54"></rect><rect x="3" y="0" width="1" height="54"></rect><rect x="6" y="0" width="1" height="54"></rect><rect x="11" y="0" width="3" height="54"></rect><rect x="15" y="0" width="1" height="54"></rect><rect x="19" y="0" width="2" height="54"></rect><rect x="22" y="0" width="1" height="54"></rect><rect x="26" y="0" width="2" height="54"></rect><rect x="29" y="0" width="3" height="54"></rect><rect x="33" y="0" width="1" height="54"></rect><rect x="35" y="0" width="3" height="54"></rect><rect x="39" y="0" width="4" height="54"></rect><rect x="44" y="0" width="2" height="54"></rect><rect x="47" y="0" width="2" height="54"></rect><rect x="51" y="0" width="2" height="54"></rect><rect x="55" y="0" width="1" height="54"></rect><rect x="59" y="0" width="2" height="54"></rect><rect x="63" y="0" width="1" height="54"></rect><rect x="66" y="0" width="2" height="54"></rect><rect x="70" y="0" width="1" height="54"></rect><rect x="74" y="0" width="1" height="54"></rect><rect x="77" y="0" width="3" height="54"></rect><rect x="82" y="0" width="1" height="54"></rect><rect x="85" y="0" width="2" height="54"></rect><rect x="88" y="0" width="2" height="54"></rect><rect x="93" y="0" width="3" height="54"></rect><rect x="97" y="0" width="1" height="54"></rect><rect x="99" y="0" width="2" height="54"></rect></g></svg><div class="hibarcode_displayValue" style="white-space:nowrap"></div></div></div><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 120pt; height: 19.5pt; font-family: inherit; font-size: 18pt; text-align: center; left: 229.5pt; top: 96pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height:100%;width:100%">白斑霜箱签</div></div><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 120pt; height: 9.75pt; font-family: inherit; font-size: 18pt; text-align: center; left: 229.5pt; top: 142.5pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height:100%;width:100%">WL000810</div></div><span class="hiprint-paperNumber" style="position: absolute; top: 819pt; left: 565.5pt;">1-3</span></div></div></div><div class="hiprint-printPanel panel-index-0"> <style printstyle=""> @page { border:0; padding:0cm; margin:0cm; size:A4 portrait; } </style> <div class="hiprint-printPaper" original-height="50" style="width: 210mm; height: 50mm; position: relative; break-before: page;"><div class="hiprint-printPaper-content"><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 204pt; height: 40.5pt; font-family: inherit; font-size: 18pt; left: 189pt; top: 40.5pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height: 100%; width: 100%; display: flex; flex-direction: column;"><svg width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice" x="0px" y="0px" viewBox="0 0 101 54" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="101" height="54" style="fill:#ffffff;"></rect><g transform="translate(0, 0)" style="fill:#000000;"><rect x="0" y="0" width="2" height="54"></rect><rect x="3" y="0" width="1" height="54"></rect><rect x="6" y="0" width="1" height="54"></rect><rect x="11" y="0" width="3" height="54"></rect><rect x="15" y="0" width="1" height="54"></rect><rect x="19" y="0" width="2" height="54"></rect><rect x="22" y="0" width="1" height="54"></rect><rect x="26" y="0" width="2" height="54"></rect><rect x="29" y="0" width="3" height="54"></rect><rect x="33" y="0" width="1" height="54"></rect><rect x="35" y="0" width="3" height="54"></rect><rect x="39" y="0" width="4" height="54"></rect><rect x="44" y="0" width="2" height="54"></rect><rect x="47" y="0" width="2" height="54"></rect><rect x="51" y="0" width="2" height="54"></rect><rect x="55" y="0" width="1" height="54"></rect><rect x="59" y="0" width="2" height="54"></rect><rect x="63" y="0" width="1" height="54"></rect><rect x="66" y="0" width="2" height="54"></rect><rect x="70" y="0" width="1" height="54"></rect><rect x="73" y="0" width="1" height="54"></rect><rect x="77" y="0" width="2" height="54"></rect><rect x="81" y="0" width="1" height="54"></rect><rect x="84" y="0" width="3" height="54"></rect><rect x="88" y="0" width="2" height="54"></rect><rect x="93" y="0" width="3" height="54"></rect><rect x="97" y="0" width="1" height="54"></rect><rect x="99" y="0" width="2" height="54"></rect></g></svg><div class="hibarcode_displayValue" style="white-space:nowrap"></div></div></div><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 120pt; height: 19.5pt; font-family: inherit; font-size: 18pt; text-align: center; left: 229.5pt; top: 96pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height:100%;width:100%">硅油乳膏1号箱签</div></div><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 120pt; height: 9.75pt; font-family: inherit; font-size: 18pt; text-align: center; left: 229.5pt; top: 142.5pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height:100%;width:100%">WL000809</div></div><span class="hiprint-paperNumber" style="position: absolute; top: 819pt; left: 565.5pt;">2-3</span></div></div></div><div class="hiprint-printPanel panel-index-0"> <style printstyle=""> @page { border:0; padding:0cm; margin:0cm; size:A4 portrait; } </style> <div class="hiprint-printPaper" original-height="50" style="width: 210mm; height: 50mm; position: relative; break-before: page;"><div class="hiprint-printPaper-content"><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 204pt; height: 40.5pt; font-family: inherit; font-size: 18pt; left: 189pt; top: 40.5pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height: 100%; width: 100%; display: flex; flex-direction: column;"><svg width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice" x="0px" y="0px" viewBox="0 0 101 54" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="101" height="54" style="fill:#ffffff;"></rect><g transform="translate(0, 0)" style="fill:#000000;"><rect x="0" y="0" width="2" height="54"></rect><rect x="3" y="0" width="1" height="54"></rect><rect x="6" y="0" width="1" height="54"></rect><rect x="11" y="0" width="3" height="54"></rect><rect x="15" y="0" width="1" height="54"></rect><rect x="19" y="0" width="2" height="54"></rect><rect x="22" y="0" width="1" height="54"></rect><rect x="26" y="0" width="2" height="54"></rect><rect x="29" y="0" width="3" height="54"></rect><rect x="33" y="0" width="1" height="54"></rect><rect x="35" y="0" width="3" height="54"></rect><rect x="39" y="0" width="4" height="54"></rect><rect x="44" y="0" width="2" height="54"></rect><rect x="47" y="0" width="2" height="54"></rect><rect x="51" y="0" width="2" height="54"></rect><rect x="55" y="0" width="1" height="54"></rect><rect x="59" y="0" width="2" height="54"></rect><rect x="63" y="0" width="1" height="54"></rect><rect x="66" y="0" width="1" height="54"></rect><rect x="70" y="0" width="2" height="54"></rect><rect x="74" y="0" width="1" height="54"></rect><rect x="77" y="0" width="1" height="54"></rect><rect x="80" y="0" width="2" height="54"></rect><rect x="84" y="0" width="3" height="54"></rect><rect x="88" y="0" width="2" height="54"></rect><rect x="93" y="0" width="3" height="54"></rect><rect x="97" y="0" width="1" height="54"></rect><rect x="99" y="0" width="2" height="54"></rect></g></svg><div class="hibarcode_displayValue" style="white-space:nowrap"></div></div></div><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 120pt; height: 19.5pt; font-family: inherit; font-size: 18pt; text-align: center; left: 229.5pt; top: 96pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height:100%;width:100%">醋酸曲安奈德霜箱签</div></div><div tabindex="1" class="hiprint-printElement hiprint-printElement-text hiprint-text-content-middle" style="position: absolute; width: 120pt; height: 9.75pt; font-family: inherit; font-size: 18pt; text-align: center; left: 229.5pt; top: 142.5pt;"><div class="hiprint-printElement-text-content hiprint-printElement-content" style="height:100%;width:100%">WL000808</div></div><span class="hiprint-paperNumber" style="position: absolute; top: 819pt; left: 565.5pt;">3-3</span></div></div></div></div> 为啥在浏览器打印没生效 我的代码 tempDiv.innerHTML = mergedHtml; const printStyle = document.createElement('style'); printStyle.innerHTML = ` .hiprint-printPaper { position: relative !important; height: 50mm !important; page-break-before: always !important; break-before: page !important; } @media print { .hiprint-printPaper { height: 50mm !important; width: 210mm !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } @page { border: 0; padding: 0cm; margin: 0cm; size: A4 portrait; } } `; document.head.appendChild(printStyle); // 修改每个printPaper元素 const hiprintelements = tempDiv.querySelectorAll('.hiprint-printPaper'); hiprintelements.forEach(item => { // 清空原有内联样式(可选,根据实际需求) // item.removeAttribute('style'); // 强制设置样式 item.style.position = 'relative'; item.style.pageBreakBefore = 'always'; item.style.breakBefore = 'page'; item.style.height = '50mm'; // 同步自定义属性 item.setAttribute('original-height', '50'); });
最新发布
12-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值