项目场景：

《数据可视化之模块边框绘制，以及组件开发》介绍了css3中关于borderImage的相关配置，并且实现了一个border图片渲染的插件。其原理也是相当简单，这里就不过多赘述了，今天要做的是实现Vue3的组件(图片边框渲染通用组件)。

解决方案：

1、准备

1. 一张边框图片
2. nodejs
3. vue-cli

2、快速开始

1. 创建项目

vue create dev-datav-border-view

2. 添加组件

<template>
    <div class="twoke-view-container">
        <div class="twoke-view-border" :id="id"></div>
        <slot></slot>       
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import uuidv4 from 'uuid'

export default {
    name: 'TwokeBorderView',
    props: {
        options: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    setup (props) {
        const {slice,source,padding,custom} = props.options
        const id = ref(`border-view-${uuidv4()}`)

        const onLoadBorder = () => {
            const border = document.getElementById(id.value)
            border.style.borderImageSource = `url(${source})`
            border.style.borderImageSlice = ` ${slice[0]} ${slice[1]} ${slice[2]} ${slice[3]}`
            border.style.borderImageWidth = `${slice[0]}px ${slice[1]}px ${slice[2]}px ${slice[3]}px`
            border.style.borderWidth = `${slice[0]}px ${slice[1]}px ${slice[2]}px ${slice[3]}px`
            const content = border.nextElementSibling
            content.style.position = "absolute"
            content.style.top =  "50%"
            content.style.left = "50%"
            content.style.transform= "translate(-50%,-50%)"
            if (padding&&!custom) {
                let width = undefined
                let height = undefined
                if (padding.length===1) {
                    width = content.parentElement.clientWidth - padding[0]*2
                    height = content.parentElement.clientHeight - padding[0]*2
                }else if(padding.length==2) {
                    width = content.parentElement.clientWidth - padding[0]*2
                    height = content.parentElement.clientHeight - padding[1]*2
                }
                content.style.width = `${width}px`
                content.style.height = `${height}px`
            }
        }

        onMounted(() => {
            onLoadBorder()
        })

        return {
            id
        }
    }
}
</script>

<style lang="scss" scoped>
.twoke-view-container {
    position: relative;
    width: 100%;
    height: 100%;
   .twoke-view-border {
        border: 1px solid transparent;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
}
</style>

3、快速使用(这里是用的全局安装组件)

<template>
  <div class="home">
    <img  src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <twoke-border-view style="width:400px;height:300px" :options="{padding:[10],slice: [9, 40, 9, 40], source: require('../assets/border.png')}">
      <div class="text">模块</div>
    </twoke-border-view>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss" scoped>
.text {
  color: blue;
}
</style>

组件库

码云组件库，我把写的一些组件放在这个下面，有兴趣的话可以看看。 安装

npm i twoke-datav-vue

克隆源码

git clone https://gitee.com/twoke/twoke-datav-vue3.git