初始化
This commit is contained in:
砂糖
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
@@ -0,0 +1,285 @@
|
||||
const title = '高德地图'
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '语言类型',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'customize_lang',
|
||||
optionField: 'customize.lang', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
options: [
|
||||
{
|
||||
label: '中文简称',
|
||||
value: 'zh_cn'
|
||||
},
|
||||
{
|
||||
label: '英文',
|
||||
value: 'en'
|
||||
},
|
||||
{
|
||||
label: '中英文对照',
|
||||
value: 'zh_en'
|
||||
}
|
||||
],
|
||||
// 绑定的值
|
||||
value: 'zh_cn',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: 'Key',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_mapKey',
|
||||
// 高德地图的key
|
||||
optionField: 'customize.mapKey', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '1b0a1423b70bbcbc20c9c87327e5e94e',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '主题',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'customize_mapStyle',
|
||||
optionField: 'customize.mapStyle', // 对应options中的字段
|
||||
options: [
|
||||
{
|
||||
label: '标准',
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
label: '幻影黑',
|
||||
value: 'dark'
|
||||
},
|
||||
{
|
||||
label: '月光银',
|
||||
value: 'light'
|
||||
},
|
||||
{
|
||||
label: '远山黛',
|
||||
value: 'whitesmoke'
|
||||
},
|
||||
{
|
||||
label: '草色青',
|
||||
value: 'fresh'
|
||||
},
|
||||
{
|
||||
label: '雅士灰',
|
||||
value: 'grey'
|
||||
},
|
||||
{
|
||||
label: '涂鸦',
|
||||
value: 'graffiti'
|
||||
},
|
||||
{
|
||||
label: '马卡龙',
|
||||
value: 'macaron'
|
||||
},
|
||||
{
|
||||
label: '靛青蓝',
|
||||
value: 'blue'
|
||||
},
|
||||
{
|
||||
label: '极夜黑',
|
||||
value: 'darkblue'
|
||||
},
|
||||
{
|
||||
label: '酱籽',
|
||||
value: 'wine'
|
||||
}
|
||||
],
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 'normal',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '内容',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'customize_features',
|
||||
optionField: 'customize.features', // 对应options中的字段
|
||||
options: [
|
||||
{
|
||||
label: '区域面',
|
||||
value: 'bg'
|
||||
},
|
||||
{
|
||||
label: '道路',
|
||||
value: 'road'
|
||||
},
|
||||
{
|
||||
label: '建筑物',
|
||||
value: 'building'
|
||||
},
|
||||
{
|
||||
label: '标注',
|
||||
value: 'point'
|
||||
}
|
||||
],
|
||||
// 是否多选
|
||||
multiple: true,
|
||||
// 绑定的值
|
||||
value: ['bg', 'road', 'building', 'point'],
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '经度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
min: 0,
|
||||
// 字段
|
||||
field: 'customize_lng',
|
||||
optionField: 'customize.lng', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 117.13872961838531,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '维度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 范围
|
||||
min: 0,
|
||||
// 字段
|
||||
field: 'customize_lat',
|
||||
optionField: 'customize.lat', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 31.826653302438004,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '缩放',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 范围
|
||||
min: 3,
|
||||
max: 18,
|
||||
// 字段
|
||||
field: 'customize_zoom',
|
||||
optionField: 'customize.zoom', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 16,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '模式',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '2D',
|
||||
value: '2D'
|
||||
},
|
||||
{
|
||||
label: '3D',
|
||||
value: '3D'
|
||||
}
|
||||
],
|
||||
// 字段
|
||||
field: 'customize_viewMode',
|
||||
optionField: 'customize.viewMode', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '2D',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '标记内容',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_markerSpan',
|
||||
optionField: 'customize.markerSpan', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '科大国创软件股份有限公司',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '标记点经度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
min: 0,
|
||||
// 字段
|
||||
field: 'customize_markerLng',
|
||||
optionField: 'customize.markerLng', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 117.13872961838531,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '标记点维度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'customize_markerLat',
|
||||
optionField: 'customize.markerLat', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 31.826653302438004,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
|
||||
const option = {
|
||||
// 自定义组件其他属性
|
||||
customize: {
|
||||
lang: 'zh_cn',
|
||||
mapKey: '1b0a1423b70bbcbc20c9c87327e5e94e',
|
||||
mapStyle: 'normal',
|
||||
features: ['bg', 'road', 'building', 'point'],
|
||||
lng: 117.13872961838531,
|
||||
lat: 31.826653302438004,
|
||||
zoom: 17,
|
||||
markerSpan: '科大国创软件股份有限公司',
|
||||
markerLng: 117.13872961838531,
|
||||
markerLat: 31.826653302438004
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title,
|
||||
setting,
|
||||
option: {
|
||||
...option,
|
||||
displayOption: {
|
||||
dataAllocation: {
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
element-loading-text="地图加载中..."
|
||||
class="map-box"
|
||||
:class="{ 'no-pointer': isDesign }"
|
||||
>
|
||||
<div
|
||||
:id="`map-${config.code}`"
|
||||
style="width: 100%; height: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
export default {
|
||||
name: 'RemoteMap',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
map: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option () {
|
||||
return this.config.option
|
||||
},
|
||||
optionData () {
|
||||
return this.option.data
|
||||
},
|
||||
customize () {
|
||||
return this.option.customize
|
||||
},
|
||||
isDesign () {
|
||||
return (window?.BS_CONFIG?.routers?.designUrl || '/big-screen/design') === this.$route.path
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.initMap(this.customize)
|
||||
},
|
||||
methods: {
|
||||
initMap (customize) {
|
||||
this.loading = true
|
||||
this.updateKey = 0
|
||||
AMapLoader.load({
|
||||
key: customize.mapKey || '1b0a1423b70bbcbc20c9c87327e5e94e', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
'AMap.ToolBar',
|
||||
'AMap.Scale',
|
||||
'AMap.HawkEye',
|
||||
'AMap.MapType',
|
||||
'AMap.Geolocation'
|
||||
]
|
||||
}).then(() => {
|
||||
// 创建地图
|
||||
// eslint-disable-next-line no-undef
|
||||
this.map = new AMap.Map(`map-${this.config.code}`, {
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
lang: customize.lang,
|
||||
mapStyle: `amap://styles/${customize.mapStyle}`,
|
||||
center: [customize.lng, customize.lat],
|
||||
features: customize.features,
|
||||
zoom: customize.zoom,
|
||||
viewMode: customize.viewMode,
|
||||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation']
|
||||
})
|
||||
this.loading = false
|
||||
// eslint-disable-next-line no-undef
|
||||
this.map.addControl(new AMap.ToolBar())
|
||||
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
|
||||
// eslint-disable-next-line no-undef
|
||||
this.map.addControl(new AMap.Scale())
|
||||
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
|
||||
// eslint-disable-next-line no-undef
|
||||
this.map.addControl(new AMap.MapType())
|
||||
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
|
||||
// eslint-disable-next-line no-undef
|
||||
this.map.addControl(new AMap.Geolocation())
|
||||
let marker = null // 用于存储标记对象的变量
|
||||
if (customize.markerSpan) {
|
||||
// 创建自定义标记内容
|
||||
const markerContent = document.createElement('div')
|
||||
markerContent.style.position = 'absolute'
|
||||
markerContent.style.width = '25px'
|
||||
markerContent.style.height = '34px'
|
||||
|
||||
// 创建标记图标
|
||||
const markerImg = document.createElement('img')
|
||||
markerImg.src = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
|
||||
markerImg.style.width = '25px'
|
||||
markerImg.style.height = '34px'
|
||||
markerContent.appendChild(markerImg)
|
||||
|
||||
// 创建标记文本
|
||||
const markerSpan = document.createElement('span')
|
||||
markerSpan.className = 'marker'
|
||||
markerSpan.innerHTML = customize.markerSpan
|
||||
markerContent.appendChild(markerSpan)
|
||||
// 删除之前的标记（如果存在）
|
||||
if (marker) {
|
||||
this.map.remove(marker)
|
||||
}
|
||||
// 创建自定义标记
|
||||
// eslint-disable-next-line no-undef
|
||||
marker = new AMap.Marker({
|
||||
position: [customize.markerLng, customize.markerLat],
|
||||
content: markerContent,
|
||||
// eslint-disable-next-line no-undef
|
||||
offset: new AMap.Pixel(0, 0) // 设置标记偏移，使其指向标记位置
|
||||
})
|
||||
|
||||
// 将标记添加到地图中
|
||||
this.map.add(marker)
|
||||
// 动态修改标记的 right 位置
|
||||
const markerElement = marker.getContent()
|
||||
const markerTextElement = markerElement.querySelector('.marker')
|
||||
markerTextElement.style.right = 0 // 设置初始的 right 值
|
||||
if (markerTextElement) {
|
||||
setTimeout(() => {
|
||||
markerTextElement.style.right = `-${markerTextElement.clientWidth}px` // 设置新的 right 值
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
customStyle (config) {
|
||||
if (config && config.option && config.option.customize) {
|
||||
this.initMap(config.option.customize)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-pointer {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
|
||||
::v-deep .amap-marker-content img {
|
||||
width: 25px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
::v-deep .marker {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -118px;
|
||||
color: #fff;
|
||||
padding: 4px 10px;
|
||||
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-family: "";
|
||||
background-color: #25A5F7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,128 @@
|
||||
const title = '边框组件'
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '对齐类型',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'customize_diagonalType',
|
||||
optionField: 'customize.diagonalType', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
options: [
|
||||
{
|
||||
label: '左上右下',
|
||||
value: 'leftTopRightBottom'
|
||||
},
|
||||
{
|
||||
label: '右上左下',
|
||||
value: 'rightTopLeftBottom'
|
||||
}
|
||||
],
|
||||
// 绑定的值
|
||||
value: 'leftTopRightBottom',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '背景颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'customize_backgroundColor',
|
||||
optionField: 'customize.backgroundColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#D3D3D32B',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '长度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'customize_borderLength',
|
||||
optionField: 'customize.borderLength', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '30',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '粗细',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'customize_borderWidth',
|
||||
optionField: 'customize.borderWidth', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '4',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '边框颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'customize_borderColor',
|
||||
optionField: 'customize.borderColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#409EFF',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '边框圆角',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 范围
|
||||
min: 0,
|
||||
max: 100,
|
||||
// 字段
|
||||
field: 'customize_borderRadius',
|
||||
optionField: 'customize.borderRadius', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 4,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
|
||||
const option = {
|
||||
// 自定义组件其他属性
|
||||
customize: {
|
||||
diagonalType: 'leftTopRightBottom',
|
||||
borderLength: 30,
|
||||
borderWidth: 4,
|
||||
backgroundColor: '#D3D3D32B',
|
||||
borderRadius: 0,
|
||||
borderColor: '#409EFF'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title,
|
||||
setting,
|
||||
option: {
|
||||
...option,
|
||||
displayOption: {
|
||||
dataAllocation: {
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div
|
||||
class="border-box"
|
||||
:style="{
|
||||
backgroundColor: customize.backgroundColor
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="customize.diagonalType === 'leftTopRightBottom'"
|
||||
class="left-diagonal"
|
||||
>
|
||||
<div
|
||||
class="top"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="left"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="right"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="bottom"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="customize.diagonalType === 'rightTopLeftBottom'"
|
||||
class="right-diagonal"
|
||||
>
|
||||
<div
|
||||
class="top"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="right"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="left"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="bottom"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'DiagonalBorder',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option () {
|
||||
return this.config.option
|
||||
},
|
||||
optionData () {
|
||||
return this.option.data
|
||||
},
|
||||
customize () {
|
||||
return this.option.customize
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.customize.diagonalType === 'leftTopRightBottom') {
|
||||
const leftDiagonal = document.querySelector('.left-diagonal').querySelector('.left')
|
||||
const rightDiagonal = document.querySelector('.left-diagonal').querySelector('.right')
|
||||
leftDiagonal.style.left = `${this.customize.borderWidth / 2}px`
|
||||
leftDiagonal.style.top = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.right = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.bottom = `${this.customize.borderWidth / 2}px`
|
||||
} else {
|
||||
const leftDiagonal = document.querySelector('.right-diagonal').querySelector('.left')
|
||||
const rightDiagonal = document.querySelector('.right-diagonal').querySelector('.right')
|
||||
leftDiagonal.style.left = `${this.customize.borderWidth / 2}px`
|
||||
leftDiagonal.style.bottom = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.right = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.top = `${this.customize.borderWidth / 2}px`
|
||||
}
|
||||
},
|
||||
methods: { }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.border-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.left-diagonal {
|
||||
.top {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// 顺时针旋转90度
|
||||
.left {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
.right-diagonal {
|
||||
.top {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user