七亿少女的劫丨
效果gif:
1.引入需要用到的vue.js ,dynamics.js
<script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.min.js"></script>
<script src="https://cdn.bootcss.com/dynamics.js/1.1.5/dynamics.min.js"></script>
2.定义组件
<script type="text/x-template" id="header-view-template">
<div class="draggable-header-view"
@mousedown="startDrag" @touchstart="startDrag"
@mousemove="onDrag" @touchmove="onDrag"
@mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
<svg class="bg" width="320" height="560">
<path :d="headerPath" fill="#3F51B5"></path>
</svg>
<div class="header">