You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
style="width: 100%;height: 100%;object-fit: cover"
|
|
class="bs-design-wrap"
|
|
:id="'border'+ config.code"
|
|
:style="{
|
|
opacity: opacity,
|
|
borderImageSlice:`${borderImageArray[0]} ${borderImageArray[1]} ${borderImageArray[2]} ${borderImageArray[3]} fill`,
|
|
borderImageWidth:`${borderImageArray[0]}px ${borderImageArray[1]}px ${borderImageArray[2]}px ${borderImageArray[3]}px`,
|
|
}"
|
|
>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
|
import { getFileUrl } from 'data-room-ui/js/utils/file'
|
|
export default {
|
|
name: 'Border14',
|
|
components: {
|
|
},
|
|
mixins: [refreshComponentMixin],
|
|
props: {
|
|
id:{
|
|
type: String,
|
|
default: 'name'
|
|
},
|
|
// 卡片的属性
|
|
config: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
borderWidth: 0,
|
|
borderHeight: 0
|
|
}
|
|
},
|
|
computed: {
|
|
url () {
|
|
return require('data-room-ui/BorderComponents/GcBorder16/component.png')
|
|
},
|
|
opacity () {
|
|
return this.config.border.opacity || 100
|
|
},
|
|
borderImageArray () {
|
|
const borderArr = this.config.border.borderArray ? this.config.border.borderArray
|
|
: [10, 10, 10, 10]
|
|
const arr = []
|
|
arr[0] = borderArr[0] * this.borderHeight / 100
|
|
arr[1] = borderArr[1] * this.borderWidth / 100
|
|
arr[2] = borderArr[2] * this.borderHeight / 100
|
|
arr[3] = borderArr[3] * this.borderWidth / 100
|
|
return arr
|
|
}
|
|
},
|
|
watch: {
|
|
'config.border.imgUrl': {
|
|
handler (val) {
|
|
if(val){
|
|
let ur=val
|
|
if(!val.startsWith('http')){
|
|
ur = getFileUrl(val)
|
|
}
|
|
const a =document.getElementById('border'+ this.config.code)
|
|
a.style['border-image-source']=`url(${ur})`
|
|
}else{
|
|
const a =document.getElementById('border'+ this.config.code)
|
|
a.style['border-image-source']=`url(${this.url})`
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// 获取边框大小
|
|
const element = document.querySelector('.bs-design-wrap')
|
|
this.borderWidth = element.offsetWidth
|
|
this.borderHeight = element.offsetHeight
|
|
if(this.config.border.imgUrl){
|
|
let ur=this.config.border.imgUrl
|
|
if(!this.config.border.imgUrl.startsWith('http')){
|
|
ur = getFileUrl(this.config.border.imgUrl)
|
|
}
|
|
const a =document.getElementById('border'+ this.config.code)
|
|
a.style['border-image-source']=`url(${ur})`
|
|
}else{
|
|
const a =document.getElementById('border'+ this.config.code)
|
|
a.style['border-image-source']=`url(${this.url})`
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bs-design-wrap {
|
|
// border-image-source:url(component.png);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
/*滚动条样式*/
|
|
::v-deep ::-webkit-scrollbar {
|
|
width: 4px;
|
|
border-radius: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
::v-deep ::-webkit-scrollbar-thumb {
|
|
background: #dddddd !important;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|