vue 点击图片预览大图

简单插件：1.安装vue-directive-image-previewer命令行输入npm install vue-directive-image-previewer -D2.main.js中引入import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-im...

allen_csdns

6717人浏览 · 2020-02-26 10:13:12

allen_csdns · 2020-02-26 10:13:12 发布

简单插件：

1.安装vue-directive-image-previewer

命令行输入

npm install vue-directive-image-previewer -D

2.main.js中引入

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

3.组件中引用

<template>
  <div>
      <img v-image-preview src="picture-url"/>
  </div>
</template>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^