Vue custom instruction - Water ripple effect & Watermark effect (3)

This is the 18th day of my participation in the More text Challenge. For more details, see more text Challenge

[Column – Efficiency tools] series of articles, from development tools, version control tools, interface debugging tools to development specifications, to blog building tools, and so on, the use of work and study tools, respectively, one by one, to develop habits, improve development efficiency.

Record the [measured use] self-use efficiency tool to improve the happiness of daily code words, continuously update and record

Only when the reference, according to the need to eat, deficiencies, welcome each big man not hesitate to give advice, complement perfect, welcome to share

He that would do a good job must sharpen his tools. Practice (lazy) promote the development of science and technology -_-!
This article and subsequent articles will share some of the tools and functions used in daily development, summarized styles, code specifications (CodeStyle), code snippets, etc. For new students who just integrate into the team can quicklyfollowTeam development specifications, quickly integrated into the project development, improve our work efficiency, reduce redundant code, improve code quality, reducebug.
Here is where we left off yesterdayVue Custom instruction (2)Continue to share some Vue custom instruction code snippet:Vue-Directives

Custom Directives (2) Vue Directives

Unified registration instruction to pull out the module, convenient management

Import directive && register directive

// directives/index.js
import copy from './copy'
import color from './color'
import emoji from './emoji'
import waves from './waves'
import debounce from './debounce'
import lazyLoad from './lazyLoad'
import draggable from './draggable'
import longpress from './longpress'
import permission from './permission'
import waterMarker from './waterMarker'.// Custom instruction object for easy registration
const directives = {
  copy,
  color,
  emoji,
  waves,
  debounce,
  lazyLoad,
  longpress,
  draggable,
  permission,
  waterMarker,
  ...
}
// >--> batch register instruction
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) = > {
      Vue.directive(key, directives[key])
    })
  }
}
Copy the code

The directive is registered in the logical JS file and then in themain.jsThe introduction ofuseCan be

// main.js
import install from './directives'
Vue.use(install)
Copy the code

Three, click the water ripple command`v-waves`

3.1 the effect

This effect is used a lot of it, first on the effect diagram, please see

3.2 The specific logic is as follows:

// src/directives/waves.js
import './waves.css'

export default {
  bind(el, binding) {
    el.addEventListener(
      'click'.(e) = > {
        const customOpts = Object.assign({}, binding.value)
        const opts = Object.assign(
          {
            ele: el, // Ripple the target element
            type: 'hit'.// Hit the location to spread the center
            // Color: '#b45dea', // wavy color
            color: 'rgba (0, 0, 0, 0.15)'.// Ripple color
          },
          customOpts
        )
        const target = opts.ele
        if (target) {
          target.style.position = 'relative'
          target.style.overflow = 'hidden'
          const rect = target.getBoundingClientRect()
          let ripple = target.querySelector('.waves-ripple')
          if(! ripple) { ripple =document.createElement('span')
            ripple.className = 'waves-ripple'
            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
            target.appendChild(ripple)
          } else {
            ripple.className = 'waves-ripple'
          }
          switch (opts.type) {
            case 'center':
              ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
              ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
              break
            default:
              ripple.style.top =
                (e.pageY -
                  rect.top -
                  ripple.offsetHeight / 2 -
                  document.documentElement.scrollTop || document.body.scrollTop) + 'px'
              ripple.style.left =
                (e.pageX -
                  rect.left -
                  ripple.offsetWidth / 2 -
                  document.documentElement.scrollLeft || document.body.scrollLeft) + 'px'
          }
          ripple.style.backgroundColor = opts.color
          ripple.className = 'waves-ripple z-active'
          return false}},false)}},Copy the code

3.3 CSS style: SRC /directives/waves.css

Related to style compatibility, more, can be saved according to the compatibility requirements

/** src/directives/waves.css */
.waves-ripple {
  position: absolute;
  border-radius: 100%;
  background-color: rgba(0.0.0.0.15);
  background-clip: padding-box;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 1;
}

.waves-ripple.z-active {
  opacity: 0;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  -webkit-transition: opacity 1.2 s ease-out, -webkit-transform 0.6 s ease-out;
  transition: opacity 1.2 s ease-out, -webkit-transform 0.6 s ease-out;
  transition: opacity 1.2 s ease-out, transform 0.6 s ease-out;
  transition: opacity 1.2 s ease-out, transform 0.6 s ease-out, -webkit-transform 0.6 s ease-out;
}
Copy the code

3.4 use:

It’s easy to use, just add V-waves to the container label:

<div v-waves style="width: 213px; height: 100px">test v-waves</div>
Copy the code

Four, specify`div`Adds the specified content style watermark`v-waterMark`

4.1 Specific Logic

Here’s a simple logic introduction. Control the content of the watermark by drawing the incoming content on the Canvas.

This scheme uses Canvas to draw watermark images to add to the background, which can be cancelled in the console as a practice only

The specific logic is as follows:

// directives/permission.js
/ /! This scheme uses Canvas to draw watermark images to add to the background, which can be cancelled in the console only as a learning practice

function addWaterMarker(str, parentNode, font, textColor) {
  // Watermark text, parent element, font, text color
  var canvas = document.createElement('canvas')
  parentNode.appendChild(canvas)
  canvas.width = 200
  canvas.height = 150
  canvas.style.display = 'none'
  var cvs = canvas.getContext('2d')
  cvs.rotate((-20 * Math.PI) / 180)
  cvs.font = font || '16px Microsoft JhengHei'
  cvs.fillStyle = textColor || 'rgba (180, 180, 180, 0.3)'
  cvs.textAlign = 'left'
  cvs.textBaseline = 'Middle'
  cvs.fillText(str, canvas.width / 10, canvas.height / 2)
  parentNode.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ') '
}

const waterMarker = {
  bind: function (el, binding) {
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
  },
}

export default waterMarker
Copy the code

4.2 Registration: main.js

import install from './directives'
Vue.use(install)
Copy the code

4.3 use:

This command was used in a screenshot in yesterday’s update, as shown below:

<! -- this is a container. If you use an instruction on it, you watermark the container -->

<div v-waterMarker="{text:' here is the watermark ',textColor:'red'}">
  <h1>1. test v-watermarker</h1>
</div>

<div v-waterMarker="{text:' Copyright © XN213,textColor:'blue'}">
  <h1>2. test v-watermarker</h1>
</div>
Copy the code

4.4 Watermark effect:

On the same page, different containers are customized to display different watermark contents:

Here are some custom instructions for reference only, other articles: [Efficiency tools] [interface debugging tools -Insomnia],

Optimize the beautiful and comfortable development environment,

Next generation interface emulation tool – Mock Service Worker

【Utils】 JavaScript utility functions (1)… -, -,

Did you get it?

Welcome to comment out your personal tools, to share your useful [efficiency tools] =, =

Today’s announcement is not available:

Update the technical article tomorrow and share some accumulated codes: utils/components/styles, etc

Stay tuned for the next article! hahah~

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue custom instruction – Water ripple effect & Watermark effect (3)

Custom Directives (2) Vue Directives

Unified registration instruction to pull out the module, convenient management

Three, click the water ripple command`v-waves`

3.1 the effect

3.2 The specific logic is as follows:

3.3 CSS style: SRC /directives/waves.css

3.4 use:

Four, specify`div`Adds the specified content style watermark`v-waterMark`

4.1 Specific Logic

4.2 Registration: main.js

4.3 use:

4.4 Watermark effect:

Today’s announcement is not available:

Vue custom instruction – Water ripple effect & Watermark effect (3)

Custom Directives (2) Vue Directives

Unified registration instruction to pull out the module, convenient management

Three, click the water ripple commandv-waves

3.1 the effect

3.2 The specific logic is as follows:

3.3 CSS style: SRC /directives/waves.css

3.4 use:

Four, specifydivAdds the specified content style watermarkv-waterMark

4.1 Specific Logic

4.2 Registration: main.js

4.3 use:

4.4 Watermark effect:

Today’s announcement is not available:

Related Posts

Elemental-ui based ellipsis display components support multiple lines

Handwriting anti – shake function & throttling function

JS 6 Practical tips (fifth more)

Three, click the water ripple command`v-waves`

Four, specify`div`Adds the specified content style watermark`v-waterMark`