43 lines
		
	
	
		
			922 B
		
	
	
	
		
			Vue
		
	
	
			
		
		
	
	
			43 lines
		
	
	
		
			922 B
		
	
	
	
		
			Vue
		
	
	
| <template>
 | |
|   <view class="ui-subline-wrap" :style="[elStyle]"></view>
 | |
| </template>
 | |
| 
 | |
| <script setup>
 | |
|   /**
 | |
|    * 辅助线
 | |
|    *
 | |
|    * @property {String} width = ['thin', 'medium', 'thick', '10px']				- 线条宽度
 | |
|    * @property {String} color = #000 												- 线条颜色
 | |
|    * @property {String} style = ['dotted', 'solid', 'double', 'dashed']			- 线条样式,圆点,实线,双线,虚线
 | |
|    *
 | |
|    */
 | |
| 
 | |
|   import { computed } from 'vue';
 | |
| 
 | |
|   // 接收参数
 | |
|   const props = defineProps({
 | |
|     color: {
 | |
|       type: String,
 | |
|       default: '#000',
 | |
|     },
 | |
|     lineStyle: {
 | |
|       type: String,
 | |
|       default: 'dashed',
 | |
|     },
 | |
|     width: {
 | |
|       type: String,
 | |
|       default: 'thin',
 | |
|     },
 | |
|   });
 | |
| 
 | |
|   const elStyle = computed(() => {
 | |
|     return {
 | |
|       'border-top-width': props.width,
 | |
|       'border-top-color': props.color,
 | |
|       'border-top-style': props.lineStyle,
 | |
|     };
 | |
|   });
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped></style>
 |