[fix 84025] 部分溢出效果调整
This commit is contained in:
danshihao
@@ -14,19 +14,24 @@
|
||||
position="bottom"
|
||||
safe-area-inset-bottom>
|
||||
<van-picker
|
||||
ref="picker"
|
||||
:loading="loading"
|
||||
:title="placeholder"
|
||||
:columns="dictOptions"
|
||||
show-toolbar
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
>
|
||||
<span slot="option" slot-scope="option" class="custom-option">{{ option.text || option.label }}</span>
|
||||
</van-picker>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
export default {
|
||||
name: 'DictPicker',
|
||||
props: {
|
||||
@@ -48,7 +53,31 @@ export default {
|
||||
dictOptions: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show (val) {
|
||||
val && this.updateScroll()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理滚动样式
|
||||
updateScroll: debounce(function () {
|
||||
this.$nextTick(() => {
|
||||
// 获取所有选项
|
||||
const selectedItems = [...this.$refs.picker.$el.querySelectorAll('.van-picker-column__item')]
|
||||
selectedItems.forEach(item => {
|
||||
const child = item.querySelector('.custom-option')
|
||||
// 文字超出父容器大小就添加滚动样式设置滚动时间
|
||||
if (child.offsetWidth > item.offsetWidth) {
|
||||
child.classList.add('custom-option-scroll')
|
||||
// 根据内容宽度调整速度
|
||||
child.style = `animation-duration: ${child.offsetWidth / 50}s`
|
||||
} else {
|
||||
child.classList.remove('custom-option-scroll')
|
||||
child.style = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
}, 500),
|
||||
// 打开下拉，并且获取下拉数据
|
||||
onOpen () {
|
||||
// 如果是被禁用就不打开弹框
|
||||
@@ -98,4 +127,19 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 一行显示不全，增加滚动显示所有文字
|
||||
.custom-option {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.custom-option-scroll {
|
||||
animation: scrollText 4s linear infinite;
|
||||
}
|
||||
@keyframes scrollText {
|
||||
//0% { transform: translateX(100%); }
|
||||
//100% { transform: translateX(-100%); }
|
||||
0% { transform: translateX(50%); }
|
||||
50% { transform: translateX(-50%); }
|
||||
100% { transform: translateX(50%); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
position="bottom"
|
||||
safe-area-inset-bottom>
|
||||
<van-picker
|
||||
ref="picker"
|
||||
:loading="loading"
|
||||
:title="placeholder"
|
||||
:columns="options"
|
||||
@@ -22,12 +23,15 @@
|
||||
:value-key="labelKey"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
>
|
||||
<span slot="option" slot-scope="option" class="custom-option">{{option[labelKey]}}</span>
|
||||
</van-picker>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
export default {
|
||||
name: 'SelectPicker',
|
||||
@@ -76,9 +80,31 @@ export default {
|
||||
...val
|
||||
]
|
||||
}
|
||||
},
|
||||
show (val) {
|
||||
val && this.updateScroll()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理滚动样式
|
||||
updateScroll: debounce(function () {
|
||||
this.$nextTick(() => {
|
||||
// 获取所有选项
|
||||
const selectedItems = [...this.$refs.picker.$el.querySelectorAll('.van-picker-column__item')]
|
||||
selectedItems.forEach(item => {
|
||||
const child = item.querySelector('.custom-option')
|
||||
// 文字超出父容器大小就添加滚动样式设置滚动时间
|
||||
if (child.offsetWidth > item.offsetWidth) {
|
||||
child.classList.add('custom-option-scroll')
|
||||
// 根据内容宽度调整速度
|
||||
child.style = `animation-duration: ${child.offsetWidth / 50}s`
|
||||
} else {
|
||||
child.classList.remove('custom-option-scroll')
|
||||
child.style = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
}, 500),
|
||||
// 打开下拉，并且获取下拉数据
|
||||
onOpen () {
|
||||
// 如果是被禁用就不打开弹框
|
||||
@@ -121,4 +147,19 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 一行显示不全，增加滚动显示所有文字
|
||||
.custom-option {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.custom-option-scroll {
|
||||
animation: scrollText 4s linear infinite;
|
||||
}
|
||||
@keyframes scrollText {
|
||||
//0% { transform: translateX(100%); }
|
||||
//100% { transform: translateX(-100%); }
|
||||
0% { transform: translateX(50%); }
|
||||
50% { transform: translateX(-50%); }
|
||||
100% { transform: translateX(50%); }
|
||||
}
|
||||
</style>
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
// 折线图点base64
|
||||
export const lineSymbolBase64 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII='
|
||||
const styleObj = {
|
||||
export const styleObj = {
|
||||
// x轴颜色
|
||||
xAxisLineColor: 'rgba(108,128,151,0.4)',
|
||||
xAxisLineColor: '#647C97',
|
||||
// x轴文字颜色
|
||||
xAxisFontColor: '#86909C',
|
||||
// y轴文字颜色
|
||||
|
||||
@@ -102,6 +102,7 @@
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型">
|
||||
<j-dict-select-tag :triggerChange="true"
|
||||
class="select-max-width"
|
||||
dictCode="device_type"
|
||||
v-decorator="['deviceType', validatorRules.deviceType]"
|
||||
placeholder="请选择设备类型">
|
||||
@@ -109,9 +110,10 @@
|
||||
</a-form-item>
|
||||
<a-form-item label="所属井口">
|
||||
<a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear
|
||||
class="select-max-width"
|
||||
placeholder="请选择所属井口">
|
||||
<a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
|
||||
<a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
|
||||
<a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id" :title="item.wellheadName">{{ item.wellheadName }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备描述">
|
||||
@@ -147,6 +149,7 @@
|
||||
</a-form-item>
|
||||
<a-form-item label="所属井场">
|
||||
<j-dict-select-tag :triggerChange="true"
|
||||
class="select-max-width"
|
||||
dictCode="wellhead_area"
|
||||
v-decorator="['wellheadArea', validatorRules.wellheadArea]"
|
||||
placeholder="请选择所属井场">
|
||||
@@ -154,6 +157,7 @@
|
||||
</a-form-item>
|
||||
<a-form-item label="井口类型">
|
||||
<j-dict-select-tag :triggerChange="true"
|
||||
class="select-max-width"
|
||||
dictCode="wellhead_type"
|
||||
v-decorator="['wellheadType', validatorRules.wellheadType]"
|
||||
placeholder="请选择井口类型">
|
||||
@@ -623,4 +627,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-max-width {
|
||||
// 下拉框选择被内容撑开最大宽度
|
||||
// 全屏幕 - 两侧内边距 - 左侧内容宽度 - 菜单宽度 - 距离菜单间隔 - 一些误差
|
||||
max-width: calc((100vw - 48px - 545px - 172px - 24px - 24px) / 2 - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user