下滑虚线组件封装

Posted 2023-05-26 xxdmua

<template>
  <div class="comment-wrapper">
    <span class="comment-text"> props.text </span>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(
  text: String,
);
</script>

<style scoped>
.comment-wrapper 
  position: relative;
  display: inline-block; /* 设置为内联块级元素 */


.comment-text 
  margin-bottom: 5px;
  white-space: nowrap;


.comment-text::after 
  content: "";
  display: block;
  position: absolute;
  bottom: -2px; /* 控制下划线位置 */
  left: 0;
  width: 100%; /* 下划线宽度与父元素相同 */
  height: 1px;
  border-bottom: 1px dashed #ccc;

</style>

flex 图表网格线虚线

【中文标题】flex 图表网格线虚线

【英文标题】：flex chart grid lines dotted

【发布时间】：2010-12-20 21:48:39

【问题描述】：

使用 Flex 的 LineChart 组件：如何使水平网格线（图表内的背景）点缀？使用 mx:horizo​​ntalStroke 中的 mx:Stroke，我只能设置重量、颜色和 alpha 等属性。我想把线画成虚线...

这就是我现在拥有的：

<mx:LineChart id="linechartDays"   dataProvider="dayData" showDataTips="true">
    <mx:backgroundElements>
        <mx:GridLines horizontalChangeCount="1" direction="horizontal">
            <mx:horizontalStroke>
                <mx:Stroke weight="1" color="0xcccccc"/>
            </mx:horizontalStroke>
        </mx:GridLines>
    </mx:backgroundElements>
</mx:LineChart>

【参考方案1】：

使用 DottedLine.as 类文件为以下路径http://www.warmforestflash.com/blog/2009/01/as3-dotted-line-class/

并使用此函数到 main.mxml 文件

私有函数drawline(argStr:String):void var s:Shape=new DottedLine(1.5,Chart.height,0xff0000,1,5,4); uil=新的 UIComponent(); uil.addChild(s); uil.height=图表高度； canChart.addDataChild(uil,argStr,null,null,null,argStr,50);