规范化显示

省略号

v-as-ellipsis表示省略号指令,其可以传入数字类型的变量。使用该指令后,当文字内容超出宽度（默认100px）时自动变为省略形式。等同于使用 css:

.ellipsis-box{
    width: 100px;
    whiteSpace: nowrap;
    overflow: hidden;
    textOverflow:ellipsis;
}

代码如下:

需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本

<template>
  <div class="t-ellipsis-area">
    <div v-as-ellipsis:100> 需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本</div>
  </div>
</template>

<script>
export default {
  name: "t-ellipsis"
}
</script>

<style>
</style>

Expand Copy Copy

水印

v-as-watermark表示水印指令,可以传入一个固定格式的对象,里面有text和textColor字段，分别表示文字水印内容和水印颜色。代码如下:

<template>
  <div class="t-water-mark-area">
    <div class="water-marker" v-as-watermark="waterMarker"></div>
  </div>
</template>

<script>
export default {
  name: "t-water-mark",
  data(){
    return{
      waterMarker: {
        text:'as水印防盗',
        textColor:'rgba(180, 180, 180, 0.4)'
      }
    }
  }
}
</script>

<style>
.t-water-mark-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.t-water-mark-area>.water-marker {
  width: 100%;
  height: 400px;
  border: 1px solid #eee;
}
@media screen and (max-width: 480px) {
  .t-water-mark-area>.water-marker{
    height: 300px;
  }
}
</style>

Expand Copy Copy

文本提示

v-as-tooltip表示文本提示指令,可以传入一个固定格式的对象,里面有content(提示内容)、color(内容颜色)、bgColor(背景颜色)、pos(位置)等字段。代码如下:

top提示

right提示

bottom提示

left提示

<template>
  <div class="t-tooltip-area">
    <div class="box" v-as-tooltip="{content: 'top提示', color:'#fff', bgColor: '#ffba00', pos: 'top'}">top提示</div>
    <div class="box" v-as-tooltip="{content: 'right提示', color:'white', bgColor: 'black', pos: 'right'}">right提示</div>
    <div class="box" v-as-tooltip="{content: 'bottom提示', color:'white', bgColor: 'black', pos: 'bottom'}">bottom提示</div>
    <div class="box" v-as-tooltip="{content: 'left提示', color:'white', bgColor: 'black', pos: 'left'}">left提示</div>
  </div>
</template>

<script>
export default {
  name: "t-copy",
  data () {
    return {
      tootipParams: {
        placement: 'top',
        effect: 'light',
      }
    }
  }
}
</script>

<style>
.t-tooltip-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.t-tooltip-area>div{
  background-color: dodgerblue;
  border-radius: 5px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  outline: none;
  border: none;
  color: #ffffff;
}
@media screen and (max-width: 480px) {
  .t-tooltip-area{
    flex-wrap: wrap;
  }
  .t-tooltip-area>div{
    width: 40%;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
  }
}
</style>

Expand Copy Copy

格式化

使用该指令可以修改字符串，如使用 v-as-format.toFixed 保留两位小数、 v-as-format.price 将内容变成金额（每三位逗号分隔），可以同时使用，如 v-as-format.toFixed.price。 例如将数字 243112.331 变成 243112.33，或 243,112.33。

参数	类型	必填	说明
toFixed	String	否	保留两位小数
price	String	否	整形成金额（三位逗号分隔)

123

<template>
  <div v-as-format.toFixed.price="123789"> 123 </div>
</template>

<script>
export default {
  name: "t-format"
}
</script>

<style>

</style>

Expand Copy Copy