<template> <div class="title2"> <span v-show="$slots.default" :style="bgStyle" class="title2_bg"> <span :style="textStyle"><slot/></span> </span> </div> </template> <script> export default { name: 'Title2', props: { options: { type: Object, default: () => { return {} } } }, data() { return { defaultOptions: { colors: ['#0921a1', '#4b5ff7'], bgColors: ['rgba(2, 8, 54, 0.1)', '#0a1a7b', 'rgba(2, 8, 54, 0.1)'] }, mergedOptions: {} } }, computed: { textStyle() { const options = Object.assign(this.defaultOptions, this.options) const colors = options.colors let colorStr = '' if (colors.length === 1) { colorStr = colors[0] } else if (colors.length > 1) { colorStr = 'linear-gradient(to right,' colorStr += colors.join(',') colorStr += ')' } const style = { 'background': colorStr, 'color': 'transparent', '-webkit-background-clip': 'text' } return style }, bgStyle() { const options = Object.assign(this.defaultOptions, this.options) const bgcolors = options.bgColors let colorStr = '' if (bgcolors.length === 1) { colorStr = bgcolors[0] } else if (bgcolors.length > 1) { colorStr = 'linear-gradient(to right,' colorStr += bgcolors.join(',') colorStr += ')' } const style = { 'background-color': colorStr } return style } }, mounted() { this.mergeOptions() }, methods: { // 合并配置项 mergeOptions() { this.mergedOptions = Object.assign(this.defaultOptions, this.options) // const bgcolors = this.mergedOptions.bgColors } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .title2 { height: 2rem; border-bottom: 1px solid #4b5ff7; .title2_bg { /*background: linear-gradient(to right, #00f5ff, #4b5ff7);*/ padding: 0rem 3rem 0rem 0.5rem; display: inline-block; span { /*background: linear-gradient(to right, #00f5ff, #4b5ff7);*/ background: linear-gradient(to right, #0921a1, #4b5ff7); -webkit-background-clip: text; color: transparent; font-size: 1rem; font-weight: bolder; line-height: 2rem; } } } </style>