一、上传图片

<input id="imgUplod1" @change="sendingPictures($event,1)" type="file"  accept="image/*" ref="fileImage"/>
//@change：上传后的时间，$event是事件对象，有你上传的照片
//type:input框类型
//accept：可以接受的文件类型
图片：image/*
视频：video/*
音频：audio/*
//multiple：加上实现上传多张

//  发送图片获取链接
async sendingPictures(e,num){
  //获取事件对象文件
  var files = e.target.files;
  //创建formData对象
  const params = new FormData();
  //所有要发送的数据都放在formData对象里面
  params.append("file", file)
  params.append("参数名1", 参数1)
  params.append("参数名2", 参数2)
  var res = await 请求图片地址接口名(params, conf)
  if(code == 200){
    console.log('成功')
  }else{
    console.log('失败')
  }
},

二、点击按钮复制文字

使用clipboard.js

1.安装：npm install clipboard --save

2.引入：import Clipboard from 'clipboard'

<button class="类名" data-clipboard-text="这是要复制的内容，写到这里" @click="copy(类名)">立即阅读</button>

 copy(类名) {
 var clipboard = new Clipboard(类名)
 clipboard.on('success', e => {
   console.log('复制成功')
   // 释放内存
   clipboard.destroy()
 })
 clipboard.on('error', e => {
   // 不支持复制
   console.log('手机或浏览器不支持复制')
   // 释放内存
   clipboard.destroy()
 })
 }

三、展示svga动画

使用svga

1.安装：npm install svgaplayerweb —save

2.引入：import SVGA from ‘svgaplayerweb’

<div class="类名"></div>

playSvg(svg链接){
               //一定要使用$nextTick，等到页面加载完成再处理数据，否则会找不到页面元素，报Undefind的错误
               const that = this
               this.$nextTick(()=>{
                   const player = new SVGA.Player(类名)
                   const parser = new SVGA.Parser(类名)
                   parser.load(svg链接, (videoItem) => {
                       player.loops = 1;//设置循环播放次数是1
                       player.setVideoItem(videoItem);
                       player.stepToFrame(0, true); // 从指定帧开始播放动画
                       player.startAnimation();
                       player.onFinished(() => {
                         console.log("播放完毕");
                       })
                 })
           },
                             
/*
loop 循环次数
clearsAfterStop 动画结束都是否清楚内容，注意，这里如果不设置 默认true
setVideoItem 需要获取load返回参数才能生效
startAnimation 开始动画
pauseAnimation 暂停动画
stopAnimation  停止动画
onFrame 我们可以通过这个函数知道当前动画是播放的第几帧，然后根据具体业务需求展示效果。
*/

四、点击图片查看图片，可放大

使用v-viewer( 官网：github.com/mirari/v-vi… )

1.安装：npm install v-viewer --save

//2.全局引入（main.js）
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

Viewer.setDefaults({
   'inline': false, //启用inline模式
   'button': false, //显示右上角关闭按钮
   'navbar': true, //显示缩略图导航
   'title': false, //显示当前图片的标题
   'toolbar': false, //显示工具栏
   'tooltip': true, //显示缩略百分比
   'movable': true, //图片是否可移动
   'zoomable': true, //图片是否可缩放
   'rotatable': true, //图片是否可旋转
   'scalable': true, //图片是否可反转
   'transition': true, //使用css3过度
   'fullscreen': false, //播放时是否全屏
   'keyboard': true, //
 })

     <div class="main-img" v-viewer>
           <img :src="图片链接" alt="">
     </div>
     <!-- 查看图片的插件 -->
     <viewer></viewer>

五、图片上下左右在框里居中不变性属性

.img{
 width:100%;
 height: 100%;
 object-fit: cover;//让图片上下左右居中不变形
}

六、文字溢出省略号

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;//文字在第几行溢出
overflow: hidden;

七、清浮动

    .box:after{
        content:"";//在clear类后面添加文字为空
        display:block;//把添加的内容转化为块元素
        clear:both;//清除这个元素两边的浮动
    }

八、vue拖拽

使用Draggable

安装：npm install vuedraggable

引入：import draggable from 'vuedraggable'

<ul>
    <draggable draggable=".show-main" :disabled="isEditor" v-model="arrUp" @end="isDragging" group="theArr">
        <li 
             v-for="item,index in arrUp" 
             :key="item"
             @click="toLose(index)"
         >{{item}}<span v-if="!isEditor">x</span></li>
    </draggable>
</ul>