WaterMark 水印

自带水印背景的容器

引入

import { WaterMark } from 'mand-mobile'
Vue.component(WaterMask.name, WaterMark)

代码演示

基本

        <template>
  <div class="md-example-child md-example-child-water-mark-0">
    <md-water-mark
      class="text-container"
      content="MAND MOBILE"
      spacing="10vw"
    >
      <p class="text">
        每个人都有属于自己的一片森林，也许我们从来不曾去过，但它一直在那里，总会在那里。迷失的人迷失了，相逢的人会再相逢。
      </p>
      <p class="text">
        希望你可以记住我，记住我这样活过，这样在你身边待过。
      </p>
      <p class="text">
        少年时我们追求激情，成熟后却迷恋平庸。在我们寻找、伤害、背离之后，还能一如既往地相信爱情，这是一种勇气。
      </p>
    </md-water-mark>
    </div>
</template>
<script>
import {WaterMark} from 'mand-mobile'
export default {
  name: 'water-mark-demo',
  components: {
    [WaterMark.name]: WaterMark,
  },
}
</script>
<style lang="stylus">
.md-example-child-water-mark-0
  .text-container
    padding 32px
    background #FFF
  .text
    margin-bottom 20px
    line-height 1.5
    font-size 24px
    text-indent 2em
</style>
      

使用插槽

        <template>
  <div class="md-example-child md-example-child-water-mark-0">
    <md-water-mark
      class="text-container"
      spacing="10vw"
    >
      <p class="text">
        通过<b>作用域插槽</b>的坐标属性(coord)可以对水印行列进行定制
      </p>
      <p class="text">
        通过<b>作用域插槽</b>的坐标属性(coord)可以对水印行列进行定制
      </p>
      <p class="text">
        通过<b>作用域插槽</b>的坐标属性(coord)可以对水印行列进行定制
      </p>
      <div slot="watermark" slot-scope="props">
        <span v-if="props.coord.row % 2 "> 奇数行</span>
        <span v-else>偶数行</span>
      </div>
    </md-water-mark>
    </div>
</template>

<script>
import {WaterMark} from 'mand-mobile'

export default {
  name: 'water-mark-demo',
  components: {
    [WaterMark.name]: WaterMark,
  },
}

</script>

<style lang="stylus">
.md-example-child-water-mark-0
  .text-container
    padding 32px
    background #FFF
  .text
    margin-bottom 20px
    line-height 1.5
    font-size 24px
    text-indent 2em
</style>
      

API

WaterMask Props

WaterMark Slots

default

默认内容插槽

watermark

水印内容scoped插槽

<div slot="watermark" slot-scope="{ coord }">
  <!-- coord.row 行索引 -->
  <!-- coord.col 列索引 -->
</div>