V-coupon is a vUE based card coupon component

introduce

Do you secretly blame the designer for creating the notched card?

Have you tried multiple CSS solutions that never worked out perfectly?

Are you having to use JPG/PNG… And so on format and inner struggle?

V-coupon was created to address these pain points.

Let’s see what happens

If you see a white background in the image above, it’s not a bug, it’s the white background when I took the screenshot

use

  1. The installation
npm i v-coupon
Copy the code
  1. Register in your VUE entry file
import coupon from 'v-coupon'
Vue.use(coupon)
Copy the code
  1. Use it on pages where you want to display your card coupons
<v-coupon config="yourConfig">
  <div class="content">What you want to show</div>
</v-coupon>
Copy the code

Of course, you may not need to import it globally, you can register the V-Coupon/SRC /coupon.vue components directly on the page you want to use them

import vCoupon from 'v-coupon/src/coupon.vue'

/ /... Omit other extraneous code

components: {
    'v-coupon': vCoupon
}

Copy the code

Detailed instructions

  1. <v-coupon>... </v-coupon>The content contained between the v-Coupons is a slot, which means that the V-Coupons only provide oneCutting templateYou can customize the rest of the content as much as you like, giving you maximum play, but in the meantime, to avoid all sorts of complications, only one slot is allowed. The second div in the following code will not be displayed
<v-coupon config="yourConfig">
  <div class="content">The contents of the first div will display normally</div>

  <div>The contents of the second div will not be displayed</div>
</v-coupon>
Copy the code
  1. Configuration, as shown in the preceding exampleyourConfigIs the configuration we want to pass v-Coupon, the specific configuration items are as follows
{
    width: 200.// Card width
    height: 300.// Card height
    borderRadius: 15.// The radius of each corner of the card
    borderColor: '#33cc44'.// Border color
    borderWidth: 0.5.// Frame size
    borderOpcity: 1.// Frame transparency
    borderDash: null.// array of dashed lines, line is null, dashed lines are given an array, such as [2,2]
    showLine: true.// Whether to display the dividing line
    lineColor: '#33cc44'.// Split line color
    lineWidth: 0.4.// The thickness of the dividing line
    lineOpcity: 1.// Divide line transparency
    lineDash: [3.5].// Split line array, same border dotted line array
    lineOffset: 5.// If the distance between the dividing line and both sides of the card is 0, it is connected
    cutPosition: 200.// The location of the cut
    cutRadius: 10.// The radius of the cut
    cutSlope: 1.5.// The arc of the cut
    background: '#ffffff' // Background color, priority lower than slot background
}
Copy the code

For the above units, except cutSlope, the units of other values are PX, and other units are not supported at present.

The above configuration is the default value of V-Coupon. You can use object. assign to merge the user configuration with the default value

If you don’t understand the border dashed array and the split dashed array, refer to the stroke-dasharray property of MDN:SGV

Compatible with

The core content of V-Coupon is SVG foreignObject. For specific compatibility, see Can I Use

other

Github address for V-Coupon

Any bugs, requirements, comments, suggestions, jokes, welcome to the issue channel, also welcome pr.